Merge pull request #193 from NGO-Algorithm-Audit/feature/quick-navigation

Feature/quick navigation

Author: jfparie

assets/scss/_common.scss

@@ -1162,4 +1162,20 @@ $accent: #FF4081;
 
 .color-gray {
   color: #777;
+}
+
+
+@media (min-width: 992px) { 
+  .quicklinks-mobile-sticky-top {
+    position: -webkit-sticky;
+    position: sticky;
+    top: 80px;
+    z-index: 1000;
+  }
+}
+
+@media (min-width: 1500px) {
+  .container-xl {
+    max-width: 90vw;
+  }
 }

assets/scss/templates/_main.scss

@@ -1,6 +1,3 @@
-html, body {
-  overflow-x: hidden;
-}
 body {
   position: relative
 }

content/english/technical-tools/implementation-tool.md

@@ -12,6 +12,23 @@ subtitle: >
   [Github](https://github.com/NGO-Algorithm-Audit/AlgorithmAudit_website) or via
   [[email protected]](mailto:[email protected]).
 image: /images/svg-illustrations/case_repository.svg
+quick_navigation:
+  title: Content overview
+  links:
+    - title: Introduction
+      url: '#intro'
+    - title: Tool
+      url: '#tool'
+    - title: Outcomes tool
+      url: '#outcome'
+    - title: Source code
+      url: '#source-code'
+    - title: Documentation
+      url: '#documentation-definition'
+    - title: Explainers
+      url: '#explainers'
+    - title: Flowchart
+      url: '#flowchart'    
 ---
 
 {{< container_open icon="fa-solid fa-laptop-code" title="Is my data-driven application a high-impact algorithm or AI system?" id="intro" >}}
@@ -23,29 +40,29 @@ Implementation of the AI Act raises difficult questions. What is the scope of th
 
 The questionnaires are designed to identify AI systems and their risk category using straightforward questions.
 
-Since many straightforward algorithms that impact people are not considered AI systems, the first questionnaire also identifies _impactful algorithms_. The term 'impactful algorithms' is used by the Dutch government to refer to simple algorithms that do not meet the definition of an AI system under the AI Act but still require risk management measures. More information can be found in the <a href="https://algoritmes.pleio.nl/attachment/entity/f1a35292-7ea6-4e47-93fa-b3358e9ab2e0" target="_blank">Algorithm Registry Guidance Document</a> of the Dutch Ministry of the Interior.
+Since many straightforward algorithms that impact people are not considered AI systems, the first questionnaire also identifies *impactful algorithms*. The term 'impactful algorithms' is used by the Dutch government to refer to simple algorithms that do not meet the definition of an AI system under the AI Act but still require risk management measures. More information can be found in the <a href="https://algoritmes.pleio.nl/attachment/entity/f1a35292-7ea6-4e47-93fa-b3358e9ab2e0" target="_blank">Algorithm Registry Guidance Document</a> of the Dutch Ministry of the Interior.
 
 All potential outcomes of the first questionnaire are shown in the [figure](/technical-tools/implementation-tool/#outcome) below on this webpage.
 
 {{< container_close >}}
 
 {{< iframe src="https://ai-documentation.s3.eu-central-1.amazonaws.com/index.html?lang=en" title="" id="tool" icon="" height="60vh" height_mobile="100vh" >}}
 
-{{< container_open icon="fas fa-layer-group" title="Outcomes questionnaires" id="outcome" >}}
+{{< container_open icon="fas fa-layer-group" title="Outcomes tool" id="outcome" >}}
 
 The outcomes of the first questionnaire are displayed in the below figure. The following categories are distinguished:
 
-- Algorithms: fall outside the scope of the AI Act, no additional control measures are needed.
-- Impactful algorithms: fall outside the scope of the AI Act, additional control measures are needed.
-- AI systems: are in scope of the AI Act, only additional control measures are needed in case of high-risk AI systems.
-- High risk AI systems: are in scope of the AI Act, additional control measures for high-risk AI systems are needed through harmonized standards.
-- Prohibited AI systems: are in scope of the AI Act, usage of this type of AI systems is prohibited in the European Union. More information about this category is provided by the <a href="https://www.digitaleoverheid.nl/achtergrondartikelen/welke-ai-praktijken-zijn-volgend-jaar-verboden/" target="_blank">Dutch government</a>.
+* Algorithms: fall outside the scope of the AI Act, no additional control measures are needed.
+* Impactful algorithms: fall outside the scope of the AI Act, additional control measures are needed.
+* AI systems: are in scope of the AI Act, only additional control measures are needed in case of high-risk AI systems.
+* High risk AI systems: are in scope of the AI Act, additional control measures for high-risk AI systems are needed through harmonized standards.
+* Prohibited AI systems: are in scope of the AI Act, usage of this type of AI systems is prohibited in the European Union. More information about this category is provided by the <a href="https://www.digitaleoverheid.nl/achtergrondartikelen/welke-ai-praktijken-zijn-volgend-jaar-verboden/" target="_blank">Dutch government</a>.
 
 <br> <br> <img src="/images/ai-act-implementation-tool/Venn diagram EN.png" alt="drawing" width="600"/>
 
 {{< container_close >}}
 
-{{< container_open icon="fas fa-terminal" title="Development and source code" id="amsterdam" >}}
+{{< container_open icon="fas fa-terminal" title="Development and source code" id="source-code" >}}
 
 The questions in the AI Act Implementation Tool are developed in collaboration with the municipaility of Amsterdam. The source code of the tool can be found on <a href="https://github.com/NGO-Algorithm-Audit/AI-Act-Implementation-Tool" target="_blank">Github</a> and can be re-used under the <a href="https://eupl.eu/1.2/en/" target="_blank">EUPL-1.2 license</a>. <br> <br> <img src="/images/events/Amsterdam.png" alt="drawing" width="200"/>.
 

content/nederlands/technical-tools/implementation-tool.md

@@ -12,6 +12,23 @@ subtitle: >
   [Github](https://github.com/NGO-Algorithm-Audit/AlgorithmAudit_website) of via
   [[email protected]](mailto:[email protected]).
 image: /images/svg-illustrations/case_repository.svg
+quick_navigation:
+  title: Inhoudsopgave
+  links:
+    - title: Introductie
+      url: '#intro'
+    - title: Tool
+      url: '#tool'
+    - title: Uitkomsten tool
+      url: '#outcome'
+    - title: Broncode
+      url: '#source-code'
+    - title: Documentatie
+      url: '#documentation-definition'
+    - title: Voorbeelden
+      url: '#explainers'
+    - title: Flowchart
+      url: '#flowchart'  
 ---
 
 {{< container_open icon="fa-solid fa-laptop-code" title="Is mijn datagedreven toepassing een impactvol algoritme of AI-systeem?" id="intro" >}}
@@ -31,7 +48,7 @@ Alle mogelijke uitkomsten van de beslisboom zijn weergeven in het [figuur](/nl/t
 
 {{< iframe src="https://ai-documentation.s3.eu-central-1.amazonaws.com/index.html?lang=nl" title="" id="tool" icon="" height="60vh" >}}
 
-{{< container_open icon="fas fa-terminal" title="Ontwikkeling en broncode" id="amsterdam" >}}
+{{< container_open icon="fas fa-terminal" title="Ontwikkeling en broncode" id="source-code" >}}
 
 De vragen in de AI-verordening implemenatie tool zijn ontwikkeld in samenwerking met de gemeente Amsterdam. De broncode van de tool is beschikbaar in <a href="https://github.com/NGO-Algorithm-Audit/AI-Act-Implementation-Tool" target="_blank">Github</a> en kan worden (her)gebruikt onder de <a href="https://eupl.eu/1.2/nl/" target="_blank">EUPL-1.2 licentie</a>. <br> <br> <img src="/images/events/Amsterdam.png" alt="drawing" width="200"/>
 
@@ -59,7 +76,7 @@ Overwegingen en keuzes die zijn gemaakt tijdens het opstellen van de vragenlijst
 
 {{< container_close >}}
 
-{{< container_open icon="fas fa-chalkboard-teacher" title="Explainers" id="explainers" >}}
+{{< container_open icon="fas fa-chalkboard-teacher" title="Voorbeelden" id="explainers" >}}
 
 Aan de hand van voorbeelden lichten de volgende drie explainers de complexiteit van de AI-systeem definitie toe.