Update information homepage (#285)

docs/index.md

@@ -18,9 +18,8 @@ hide:
 </div>
 
 <div class="float-container">
-
   <div class="float-child styled-list">
-    <h3>Voldoen aan de wetten en regels</h3>
+    <h3><b>Voldoen aan wetten en regels</b></h3>
     <ul>
       <li><a href="vereisten/">Vereisten</a></li>
       <li><a href="maatregelen/">Aanbevolen maatregelen</a></li>
@@ -29,33 +28,46 @@ hide:
   </div>
 
   <div class="float-child styled-list">
-    <h3><a href="rollen/" class="show-more">Informatie per rol</a></h3>
+    <h3><b>Informatie per rol</b></h3>
     <ul>
       <li><a href="rollen/beleidsmedewerker/">Beleidsmedewerker</a></li>
       <li><a href="rollen/data-scientist/">Data scientist</a></li>
       <li><a href="rollen/ethicus/">Ethici</a></li>
       <li><a href="rollen/jurist/">Jurist</a></li>
       <li><a href="rollen/projectleider/">Projectleider</a></li>
     </ul>
+    <a href="rollen/" class="show-more"><b>Bekijk alle rollen</b></a>
   </div>
 
   <div class="float-child styled-list">
-    <h3><a href="onderwerpen/">Onderwerpen</a></h3>
+    <h3><b>Onderwerpen</b></h3>
     <ul>
       <li><a href="onderwerpen/bias-en-non-discriminatie/">Bias en non-discriminatie</a></li>
       <li><a href="governance/">Governance</a></li>
       <li><a href="onderwerpen/transparantie/">Transparantie</a></li>    
-      <li><a href="onderwerpen/privacy-en-gegevensbescherming/">Privacy en gegevensbescherming</a></li>
+      <li><a href="onderwerpen/privacy-en-gegevensbescherming/">Privacy & gegevensbescherming</a></li>
       <li><a href="onderwerpen/publieke-inkoop/">Publieke inkoop</a></li>
     </ul>
+    <a href="onderwerpen/" class="show-more"><b>Bekijk alle onderwerpen</b></a>
   </div>
 
   <div class="float-child styled-list">
-    <h3><a href="overhetalgoritmekader/definities/">Woordenlijst</a></h3>
-    <p><br>Vind snel de betekenis van begrippen als algoritme, AI-systeem, hoog-risico-AI-systeem en impactvolle algoritmes.</p>
+    <h3><b>Levenscyclus</b></h3>
+    <ul>
+      <li><a href="levenscyclus/probleemanalyse/">Probleemanalyse</a></li>
+      <li><a href="levenscyclus/ontwerp/">Ontwerpen</a></li>
+      <li><a href="levenscyclus/dataverkenning-en-datapreparatie/">Dataverkenning & datapreparatie</a></li>    
+      <li><a href="levenscyclus/ontwikkelen/">Ontwikkelen</a></li>
+            <li><a href="levenscyclus/monitoring-en-beheer/">Monitoring & beheer</a></li>  
+    </ul>
+    <a href="levenscyclus/" class="show-more"><b>Bekijk de hele levenscyclus</b></a>
   </div>
 </div>
 
+!!! tip "Tip"
+
+    Vind snel de betekenis van begrippen als algoritme, AI-systeem, hoog-risico-AI-systeem en impactvolle algoritmes in onze <a href="overhetalgoritmekader/definities/">woordenlijst</a>
+
 <div class="footer-section">
   <h2>Help ons deze pagina te verbeteren</h2>
   <p>Deel je idee, suggestie of opmerking via <a href="https://github.com/MinBZK/Algoritmekader/edit/main/docs/index.md">GitHub</a> of mail ons via <a href="mailto:[email protected]">[email protected]</a>.</p>

docs/stylesheets/extra.css

@@ -152,90 +152,47 @@ tbody tr td a:hover {
   text-align: left;
 }
 
-/* Styling voor de float-container */
 .float-container {
   display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); /* Responsieve kolommen */
-  gap: 20px; /* Ruimte tussen de boxen */
-  text-align: left;
-}
-
-.float-container a {
-  color: #154273;
-  text-align: left;
-  text-decoration: underline;
+  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); /* Responsive columns */
+  gap: 16px; /* Space between the boxes */
 }
 
 .float-child {
   background-color: #e5f1f9;
   border-radius: 5px;
-  padding: 16px 24px;
+  padding: 0 24px 24px 24px;
   display: flex;
   flex-direction: column;
-  text-align: left;
-}
-
-.float-container .float-child p {
-  color: #154273;
-  text-align: left;
-}
-
-.styled-list {
-  background-color: #e5f1f9;
-  padding: 16px 32px;
-  border-radius: 5px;
-  flex-grow: 1;
-  text-align: left;
-}
-
-.styled-list h3 {
-  color: #154273;
-  font-weight: bold;
-  margin-bottom: 10px;
-  font-size: 1.2em;
-  margin-top: 10px;
-  text-align: left;
+  justify-content: flex-start; /* Push the content and the "Bekijk alle" link to the bottom */
+  min-height: 300px; /* Set a minimum height for uniform containers */
 }
 
 .styled-list ul {
   list-style-type: none;
   padding-left: 0;
   margin-bottom: 20px;
-  text-align: left;
 }
 
 .styled-list ul li {
   margin-bottom: 10px;
   display: flex;
-  align-items: flex-start; /* Items aan de bovenkant uitlijnen */
-  text-align: left;
+  align-items: flex-start;
 }
 
 .styled-list ul li::before {
-  content: '\203A'; /* Unicode-teken voor een rechtswijzende chevron */
+  content: '\203A'; /* Unicode arrow symbol */
   margin-right: 8px;
   color: #154273;
   font-weight: bold;
-  text-align: left;
 }
 
-.styled-list ul li a {
-  color: #154273;
-  font-weight: normal;
-  text-align: left;
-}
-
-/* Show More Link */
+/* Styling for the "Bekijk alle" links */
 .show-more {
-  font-weight: bold;
-  color: #154273;
-  margin-top: auto;
-  text-align: right; /* Rechts uitgelijnd zoals in het originele ontwerp */
-}
-
-.show-more:hover {
+  margin-top: auto; /* Push the "Bekijk alle" link to the bottom */
   text-decoration: underline;
-  text-align: left;
+  color: #154273;
+  font-weight: bold;
 }
 
 /* Footer Sectie */