Add cta and update images (#501)

docs/index.md

@@ -17,10 +17,12 @@ hide:
     </div>
 </div>
 
+<a href="overhetalgoritmekader/over-het-algoritmekader/" class="button md-button--secondary"> Over het algoritmekader </a> 
+
 <div class="float-container">
 
   <div class="float-child styled-list">
-    <img src="afbeeldingen//onderwerpen.jpeg" alt="Afbeelding 3" class="block-image">
+    <img src="afbeeldingen/onderwerpen.jpg" alt="Afbeelding 3" class="block-image">
     <div class="float-box">
     <h3><b>Onderwerpen</b></h3>
     <ul>
@@ -38,7 +40,7 @@ hide:
     <h3><b>Waar beginnen?</b></h3>
     <ul>
       <li><a href="overhetalgoritmekader/soorten-algoritmes/">Wat is een algoritme?</a></li>
-      <li><a href="rollen/'>Rollen</a></li>
+      <li><a href="rollen/">Rollen</a></li>
       <li><a href="levenscyclus/">Levenscyclus van algoritmes</a></li>
        <li><a href="onderwerpen/governance/">Governance van algoritmes binnen je organisatie</a></li>
     </ul>
@@ -47,7 +49,7 @@ hide:
   </div>
 
   <div class="float-child styled-list">
-    <img src="afbeeldingen/monitoring.jpg" alt="Afbeelding 4" class="block-image">
+    <img src="afbeeldingen/eu.jpeg" alt="Vlaggen europese unie" class="block-image">
     <div class="float-box">
     <h3><b>Eerste deadline: 2 februari 2025</b></h3>
     <ul>
@@ -59,7 +61,7 @@ hide:
   </div>
 
   <div class="float-child styled-list">
-    <img src="afbeeldingen/wettenregels.jpeg" alt="Afbeelding 1" class="block-image">
+    <img src="afbeeldingen/wetten-en-regels.jpg" alt="Vrouwe Justitia" class="block-image">
     <div class="float-box">
     <h3><b>Voldoen aan wetten en regels</b></h3>
     <ul>

docs/overhetalgoritmekader/index.md

@@ -27,7 +27,7 @@ hide:
 
     Impactvolle algoritmes moet je registreren in het Algoritmeregister.
 
--   [__Woordenlijst__](defenities.md)
+-   [__Woordenlijst__](definities.md)
 
     ---
 

docs/stylesheets/extra.css

@@ -158,6 +158,7 @@ tbody tr td a:hover {
   grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); /* Responsive columns */
   gap: 16px; /* Space between the boxes */
   padding-bottom: 32px;
+  padding-top: 16px;
 }
 
 .float-container h2 {
@@ -365,7 +366,7 @@ padding-bottom: 8px;
   display: flex;
   flex-direction: row;
   align-items: center;
-  margin-bottom: 24px;
+  margin-bottom: 12px;
   text-align: left;
 }
 
@@ -495,7 +496,7 @@ a{
   -webkit-appearance: none;
   -moz-appearance: none;
   appearance: none;
-  border-radius: 0.5em;
+  border-radius: 0.3em;
   border: 1px solid #ccc;
   display: inline-block; /* Avoid full width */
   width: fit-content;
@@ -505,7 +506,7 @@ a{
   margin: 0 0.5em 0.5em 0;
   -webkit-transition: color 150ms ease-in-out;
   transition: color 150ms ease-in-out;
-  padding: 1em 1.2em 1em 1.2em;
+  padding: 1em 1em .8em 1.2em;
   position: relative;
   text-align: center;
   text-shadow: none;
@@ -613,6 +614,22 @@ background-color: #B2D7EE;
   text-decoration: none;
 }
 
+.md-typeset .md-button--secondary {
+  background-color: #ffffff;
+  color: #154271;
+  border: 1px solid #154271;
+  text-decoration: none;
+  font-size: 16px;
+  font-weight: 700;
+  transition: color 150ms ease-in-out, box-shadow 150ms ease-in-out;
+
+}
+
+.md-typeset .md-button--secondary:hover {
+  color: #154271;
+  box-shadow: 0 0 8px 2px rgba(21, 66, 113, 0.6); /* Glow effect */
+}
+
 :root {
   --md-admonition-icon--expander: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 13.1l-6-6 1.5-1.5 4.5 4.5 4.5-4.5 1.5 1.5z'/%3E%3C/svg%3E");}
 

docs/stylesheets/navigation.css

@@ -151,7 +151,7 @@ h1{
   }
 }
 
-.md-source__repository md-source__repository--active{
+.md-source__repository .md-source__repository--active{
   color: #154273;
 }