Merge pull request #326 from NGO-Algorithm-Audit/feature/2025-09-12

jfparie · web-flow · commit efea07ef9f95 · 2025-09-26T16:11:19.000+02:00
Feature/2025 09 12
diff --git a/assets/scss/_landingpage.scss b/assets/scss/_landingpage.scss
@@ -444,10 +444,6 @@
     color: #005aa7 !important;
 }
 
-.landing-page-core-activities-row-subtitle {
-    margin-top: -10px;
-}
-
 .sublandingpage-banner-padding-bottom {
     padding-bottom: 7rem;
 }
diff --git a/assets/scss/templates/_main.scss b/assets/scss/templates/_main.scss
@@ -297,15 +297,24 @@ input[type="checkbox"] {
 }
 
 .border-left-blue{
-  border-left: 1px solid #005AA7;
+  border-left: 2px solid #005AA7;
+}
+
+.border-left-red {
+  border-left: 2px solid #FFCBBD;
 }
 
 .border-left-white{
-  border-left: 1px solid #ffffff;
+  border-left: 2px solid #ffffff;
 }
 
 .border-top-blue{
-  border-top: 1px solid #005AA7;
+  border-top: 2px solid #005AA7;
+  padding-top: 25px;
+}
+
+.border-top-red{
+  border-top: 2px solid #FFCBBD;
   padding-top: 25px;
 }
 
diff --git a/content/nederlands/_index.md b/content/nederlands/_index.md
@@ -31,36 +31,36 @@ About:
 overview_block:
   activities:
     - title: Kennisplatform
-      subtitle: 'Expertise in statistiek, software development, recht en ethiek'
+      subtitle: "Expertise in statistiek, software development, recht en ethiek"
       url: /nl/knowledge-platform/
       icon: fa-light fa-layer-group
-      color: '#E3F0FE'
+      color: "#E3F0FE"
     - title: Algoprudentie
       subtitle: Case-based normatief advies voor verantwoorde AI
       url: /nl/algoprudence/
       icon: fa-light fa-scale-balanced
-      color: '#F7CDBF'
+      color: "#F7CDBF"
     - title: Technische tools
       subtitle: Open source tools voor validatie van algorithmische systemen
       url: /nl/technical-tools/
       icon: fa-light fa-toolbox
-      color: '#FFFDE4'
+      color: "#FFFDE4"
     - title: Projectwerk
       subtitle: >-
         Validatie, implementatie AI-verordening, organisatorische
         beheersmaatregelen etc.
       url: /nl/knowledge-platform/project-work/
       icon: fa-light fa-magnifying-glass-plus
-      color: '#E3F0FE'
+      color: "#E3F0FE"
 Activity_Feed:
   featured_title: Uitgelicht
   featured_activities:
-    - title: >-
-        Inventarisatie 14 ministries Algoritmeregister
+    - title: Inventarisatie 14 ministries Algoritmeregister
       intro: >
-        Afgelopen zomer hebben 14 Nederlandse ministeries hun inventarisaties van hoog-risico AI-systemen en impactvolle algoritmes gedeeld. Wij maakten een inventarisatie.
-      link: >-
-        /nl/knowledge-platform/knowledge-base/inventory_high_risk_ai_systems/
+        Afgelopen zomer hebben 14 Nederlandse ministeries hun inventarisaties
+        van hoog-risico AI-systemen en impactvolle algoritmes gedeeld. Wij
+        maakten een inventarisatie.
+      link: /nl/knowledge-platform/knowledge-base/inventory_high_risk_ai_systems/
       image: /images/knowledge_base/Inventarisatie Algoritmeregister.png
       date: 26-08-2025
       type: onderzoek
@@ -79,10 +79,8 @@ Activity_Feed:
   featured_button_link: /nl/knowledge-platform/knowledge-base/
   items_title: Aankomende events
   activities:
-    - title: >-
-        Expert rondetafel II: Kennisopbouw voor toezichthouder op AI
-      link: >-
-        https://unesdoc.unesco.org/ark:/48223/pf0000395086
+    - title: "Expert rondetafel II: Kennisopbouw voor toezichthouder op AI"
+      link: "https://unesdoc.unesco.org/ark:/48223/pf0000395086"
       image: /images/partner logo-cropped/UNESCO.png
       date: 30-09-2025
       type: paneldiscussie
@@ -113,7 +111,7 @@ Activity_Feed:
 Areas_of_AI_expertise:
   title: Expertise
   enable: true
-  width_m: 4
+  width_m: 6
   width_s: 12
   feature_item:
     - name: Socio-technische evaluatie generatieve AI
@@ -159,6 +157,22 @@ Areas_of_AI_expertise:
 
         style="text-decoration: underline;">publieke standaarden</a> voor
         verantwoord gebruik van algoritmische systemen.
+    - name: Op maat gemaakte technische hulpmiddelen
+      icon: fas fa-code
+      content: >
+        Voor specifieke toepassingen ten behoeven van de verantwoorde inzet van
+        algoritmes en AI ontwikkelt Algorith Audit technische tools. Zie
+        bijvoorbeeld onze open source tools voor <a
+        href="/nl/technical-tools/sdg/"
+        style="text-decoration: underline;">synthetische data
+        generatie</a> en <a
+        href="/nl/technical-tools/bdt/"
+        style="text-decoration: underline;">unsupervised bias
+        detectie</a>, zoals ontwikkeld in samenwerking
+        met het Ministerie van Binnenlandse Zaken en de Diesnt Uitvoering
+        Onderwijs (DUO). Onze tools zijn local-only. Dat betekent dat data de
+        omgeving van organisaties niet verlaten en er geen afhankelijkheden zijn
+        van cloudplatforms.
   button_text: Bespreek samenwerking
   button_link: /nl/knowledge-platform/project-work/#form
 Distinctive_in:
@@ -193,13 +207,13 @@ Supported_by:
   title: Samenwerking met
   funders:
     - image: /images/partner logo-cropped/CoE.png
-      link: 'https://www.coe.int/en/web/portal/home'
+      link: "https://www.coe.int/en/web/portal/home"
       alt_text: Raad van Europa
     - image: /images/partner logo-cropped/EAISF.png
-      link: 'https://europeanaifund.org/announcing-our-2022-open-call-grantees/'
+      link: "https://europeanaifund.org/announcing-our-2022-open-call-grantees/"
       alt_text: European AI&Society Fund
     - image: /images/partner logo-cropped/CEN.jpg
-      link: 'https://www.cencenelec.eu'
+      link: "https://www.cencenelec.eu"
       alt_text: Europees standaardiseringcomité
     - image: /images/partner logo-cropped/MinBZK.png
       link: >-
@@ -210,19 +224,18 @@ Supported_by:
         https://www.rijksoverheid.nl/ministeries/ministerie-van-justitie-en-veiligheid
       alt_text: Ministerie van Justitie en Veiligheid
     - image: /images/partner logo-cropped/DUO.png
-      link: 'https://duo.nl'
+      link: "https://duo.nl"
       alt_text: Dienst Uitvoering Onderwijs
     - image: /images/partner logo-cropped/GemeenteAmsterdam.png
-      link: 'https://www.amsterdam.nl'
+      link: "https://www.amsterdam.nl"
       alt_text: Gemeente Amsterdam
     - image: /images/partner logo-cropped/SIDN.png
-      link: 'https://www.sidnfonds.nl/projecten/open-source-ai-auditing'
+      link: "https://www.sidnfonds.nl/projecten/open-source-ai-auditing"
       alt_text: Stichting Internet en Democratie Nederland
     - image: /images/partner logo-cropped/NEN.svg
-      link: 'https://www.nen.nl'
+      link: "https://www.nen.nl"
       alt_text: Nederlands normalisatie instituut
 Title_video:
   title: Video
   video_mp4: /videos/AA_video_(1080p).mp4
 ---
-
diff --git a/i18n/en.toml b/i18n/en.toml
@@ -94,8 +94,5 @@ other = "Low risk"
 [search]
 other = "Search"
 
-[search-type-to-start]
-other = "Type to start searching"
-
 [search-no-results]
 other = "No results found"
diff --git a/i18n/nl.toml b/i18n/nl.toml
@@ -94,8 +94,5 @@ other = "Laag risico"
 [search]
 other = "Zoeken"
 
-[search-type-to-start]
-other = "Typ om te beginnen met zoeken"
-
 [search-no-results]
 other = "Geen resultaten gevonden"
diff --git a/layouts/index.html b/layouts/index.html
@@ -267,10 +267,14 @@ <h3 class="color-blue search-result-title">${item._highlightResult.title.value}<
           .join('');
       }
     );
+    let placeholderSearchText = '{{ if eq .Site.Language.Lang "en" }}Type to start searching{{else}}Typ om te beginnen met zoeken{{end}}';
+    if (!/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)) {
+      placeholderSearchText = '{{ if eq .Site.Language.Lang "en" }}Type [\\] to start searching{{else}}Typ [\\] om te beginnen met zoeken{{end}}';
+    }
     search.addWidgets([
       instantsearch.widgets.searchBox({
         container: '#searchbox',
-        placeholder: '{{ i18n "search-type-to-start" }}',
+        placeholder: placeholderSearchText,
       }),
       instantsearch.widgets.configure({
         hitsPerPage: 8,
@@ -304,6 +308,14 @@ <h3 class="color-blue search-result-title">${item._highlightResult.title.value}<
       $(".search-overlay").addClass("d-none");
       $(".search-overlay").removeClass("d-block");
     });
+
+    $("a[title='Search']").on("click", function (e) {
+      setTimeout(() => $("input.ais-SearchBox-input").focus(), 50);
+    });
+
+    if(window.location.hash == "#search") {
+      setTimeout(() => $("input.ais-SearchBox-input").focus(), 50);
+    }
   });
 </script>
 <!-- /Search -->
@@ -327,7 +339,7 @@ <h3 class="section-title color-blue">{{ .title | markdownify }}</h3>
     <!-- areas of AI expertise -->
 
     <!-- desktop version -->
-    <div class="row justify-content-center desktop mx-3">
+    <div class="row justify-content-center desktop">
       {{$width_m := 4}}
       {{$width_s := 2}}
       {{if .width_m}}
@@ -337,7 +349,7 @@ <h3 class="section-title color-blue">{{ .title | markdownify }}</h3>
       {{$width_s = .width_s}}
       {{end}}
       {{ range $index, $item := .feature_item }}
-      <div class="col-md-{{$width_m}} col-sm-{{$width_s}} mb-4 {{if eq $index 0}}{{else}}border-left-blue{{end}}">
+      <div class="col-md-{{$width_m}} col-sm-{{$width_s}} mb-4 border-left-red">
         <div class="feature-card-transparant">
           <i class="{{$item.icon}} mb-3" style="font-size:22px;">
             <h4 class="color-blue d-inline-block" style="padding-left:10px; font-weight:100;">
@@ -354,7 +366,7 @@ <h4 class="color-blue d-inline-block" style="padding-left:10px; font-weight:100;
     <!-- mobile version -->
     <div class="row justify-content-center mobile">
       {{ range .feature_item }}
-      <div class="col-12 m-4 border-top-blue">
+      <div class="col-12 m-4 border-top-red">
         <div class="feature-card-transparant">
           <i class="{{.icon}} mb-3" style="font-size:22px;">
             <h4 class="color-blue d-inline-block" style="padding-left:10px; font-weight:100;">
@@ -411,7 +423,7 @@ <h3 class="section-title color-blue ml-4">{{ .title | markdownify }}</h3>
       {{$width_s = .width_s}}
       {{end}}
       {{ range $index, $item := .feature_item }}
-      <div class="col-md-{{$width_m}} col-sm-{{$width_s}} mb-4 {{if eq $index 0}}{{else}}border-left-blue{{end}}">
+      <div class="col-md-{{$width_m}} col-sm-{{$width_s}} mb-4 border-left-blue">
         <div class="feature-card-transparant">
           <i class="{{$item.icon}} mb-3" style="font-size:22px;">
             <h4 class="color-blue d-inline-block" style="padding-left:10px; font-weight:100;">
diff --git a/layouts/knowledge-platform/overview.html b/layouts/knowledge-platform/overview.html
@@ -83,8 +83,8 @@ <h2><a href="{{ .Permalink }}" title="{{ .Title }}" class="post-title">{{
                                     {{ end }}
                                     <div class="col-md-6 mb-4 facet-item" data-facets="{{$facets_for_data_attribute}}">
                                         <div class="shadow mobile-desktop-container-layout border-bottom-gradient rounded-lg">
-                                            <div style=" margin-left: auto; margin-right: auto; display: table;">
-                                                <img src="{{ .Params.image |relURL }}" alt="{{ .Title }}" style='height: 276px; margin-bottom: 25px;'>
+                                            <div>
+                                                <img src="{{ .Params.image |relURL }}" alt="{{ .Title }}" class="mx-auto mw-100" style='max-height: 350px; margin-bottom: 25px;'>
                                             </div>
                                             <div class="card-body p-0 mb-3">
                                                 <h3><a href="{{ .Permalink }}" title="{{ .Title }}" class="post-title" style="width:90%;">{{ .Title }}</a></h3>
diff --git a/layouts/partials/header.html b/layouts/partials/header.html
@@ -8,7 +8,8 @@
       <div class="navbar-div">
         <a class="navbar-brand" href="{{ site.Home.RelPermalink }}">
           {{ with site.Params.logo}}
-          <img width="{{site.Params.logo_width}}" class="img-fluid" src="{{ . | relURL }}" alt="{{ site.Title }}" style="min-width: {{site.Params.logo_width}};">
+          <img width="{{site.Params.logo_width}}" class="img-fluid" src="{{ . | relURL }}" alt="{{ site.Title }}"
+            style="min-width: {{site.Params.logo_width}};">
           {{ else }}{{site.Title}}{{end}}
         </a>
       </div>
@@ -29,23 +30,25 @@
             <a class="nav-link dropdown-toggle d-none d-xl-block" href="{{ .URL | relURL }}" role="button">
               {{ .Name }}
             </a>
-            <a class="nav-link dropdown-toggle d-block d-xl-none" href="{{ .URL | relURL }}" role="button" data-toggle="dropdown" >
+            <a class="nav-link dropdown-toggle d-block d-xl-none" href="{{ .URL | relURL }}" role="button"
+              data-toggle="dropdown">
               {{ .Name }}
             </a>
             <div class="dropdown-menu shadow-lg" style="padding: 1rem 0.25rem;">
               {{ range .Children }}
               {{if .Params.subtitle}}
               <p class="mb-0 mt-1 ml-3" style="color:#005aa7; font-weight:550; font-size:13px;">{{.Params.subtitle}}</p>
               {{end}}
-              <a class="dropdown-item mr-4" href="{{ .URL | relURL }}" target="{{ .Params.target }}"  title="{{ .Name }}" style="padding: 0.75rem 1.5rem;color: #005aa7;">
+              <a class="dropdown-item mr-4" href="{{ .URL | relURL }}" target="{{ .Params.target }}" title="{{ .Name }}"
+                style="padding: 0.75rem 1.5rem;color: #005aa7;">
                 {{if .Params.icon}}
                 <i class="fas {{.Params.icon}} col-2 pl-0"></i>
                 {{end}}
                 {{ if .Params.Featured }}
                 <div class="mb-1 text-center rounded" style="padding: 0.5rem 0.5rem; background-color: #dfeaf4;">
-                {{ end }}
+                  {{ end }}
                   {{.Pre}}{{ .Name }}{{.Post}}
-                {{ if .Params.Featured }}
+                  {{ if .Params.Featured }}
                 </div>
                 {{ end }}
               </a>
@@ -61,7 +64,11 @@
 
           <!-- Search -->
           <li class="nav-item">
-            <a class="nav-link" href='{{ if eq .Site.Language.Lang "en" }}{{else}}/nl{{end}}/#search' title="Search"><i class="fas fa-search"></i></a>
+            <a style="max-width: 200px;" class="nav-link py-1 my-1 mx-auto"
+              href='{{ if eq .Site.Language.Lang "en" }}{{else}}/nl{{end}}/#search' title="Search"><i
+                class="fas fa-search d-inline" id="search-hotkeys"></i>
+              <p class="d-inline ml-2" id="search-hotkeys-text"></p>
+            </a>
           </li>
           <!-- /Search -->
 
@@ -76,7 +83,8 @@
               </div>
               <!-- Rounded switch -->
               <label class="switch d-inline-block mx-1">
-                <input type="checkbox" disabled aria-checked={{if eq .Site.Language.Lang "en" }} "true" checked {{else}} "false" {{ end }} id="lang-toggle" role="switch">
+                <input type="checkbox" disabled aria-checked={{if eq .Site.Language.Lang "en" }} "true" checked
+                  {{else}} "false" {{ end }} id="lang-toggle" role="switch">
                 <span class="slider round"></span>
               </label>
               <div class="d-inline" {{ if eq .Site.Language.Lang "nl" }} style="font-weight: 350;" {{ end}}>
@@ -98,5 +106,17 @@
   </div>
 
 </header>
-
+<script>
+  docReady(function () {
+    if (!/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)) {
+      $(window).keydown(function (k) {
+        if (k.which == 220) {
+          $("a[title='Search']")[0].click();
+          k.preventDefault();
+          return false;
+        }
+      });
+    }
+  });
+</script>
 {{ "<!-- /navigation -->" | safeHTML }}
diff --git a/layouts/partials/overview_block.html b/layouts/partials/overview_block.html
@@ -5,16 +5,16 @@
         {{ range .activities }}
         
         <a href={{.url}} class="col-12 col-lg-6 col-xl-3 p-1">
-            <div style="background-color: {{.color}};" class="rounded-lg color-blue font-size-1rem font-size-xl-1_5rem container p-0">
+            <div style="background-color: {{.color}};" class="rounded-lg color-blue font-size-1rem font-size-xl-1_5rem container p-0 h-100 d-flex flex-column">
                 <div class="row mx-4 py-3">
                     <i class="font-size-2rem fa {{ .icon }}"></i>
                 </div>
-                <row class="row mx-4 pt-3">
+                <div class="row mx-4 pt-3">
                     <h3 class="color-blue font-size-1_3rem">{{.title}}</h3>
-                </row>
-                <row class="row mx-4 pb-0 landing-page-core-activities-row-subtitle">
+                </div>
+                <div class="row mx-4 pb-0 landing-page-core-activities-row-subtitle align-items-end h-100">
                     <p class="color-blue font-size-1rem">{{.subtitle}}</p>
-                </row>
+                </div>
             </div>
         </a>
         {{ end }}

Original file line number	Diff line number	Diff line change
`@@ -444,10 +444,6 @@`
`444`	`444`	`color: #005aa7 !important;`
`445`	`445`	`}`
`446`	`446`
`447`		`-.landing-page-core-activities-row-subtitle {`
`448`		`- margin-top: -10px;`
`449`		`-}`
`450`		`-`
`451`	`447`	`.sublandingpage-banner-padding-bottom {`
`452`	`448`	`padding-bottom: 7rem;`
`453`	`449`	`}`
Original file line number	Diff line number	Diff line change
`@@ -297,15 +297,24 @@ input[type="checkbox"] {`
`297`	`297`	`}`
`298`	`298`
`299`	`299`	`.border-left-blue{`
`300`		`- border-left: 1px solid #005AA7;`
	`300`	`+ border-left: 2px solid #005AA7;`
	`301`	`+}`
	`302`	`+`
	`303`	`+.border-left-red {`
	`304`	`+ border-left: 2px solid #FFCBBD;`
`301`	`305`	`}`
`302`	`306`
`303`	`307`	`.border-left-white{`
`304`		`- border-left: 1px solid #ffffff;`
	`308`	`+ border-left: 2px solid #ffffff;`
`305`	`309`	`}`
`306`	`310`
`307`	`311`	`.border-top-blue{`
`308`		`- border-top: 1px solid #005AA7;`
	`312`	`+ border-top: 2px solid #005AA7;`
	`313`	`+ padding-top: 25px;`
	`314`	`+}`
	`315`	`+`
	`316`	`+.border-top-red{`
	`317`	`+ border-top: 2px solid #FFCBBD;`
`309`	`318`	`padding-top: 25px;`
`310`	`319`	`}`
`311`	`320`