Sublanging page refinement

Author: Erik2609

assets/scss/_common.scss

@@ -1165,6 +1165,9 @@ $accent: #FF4081;
   color: #777;
 }
 
+.color-black {
+  color: #000;
+}
 .font-AvenirNextProDemi {
   font-family: AvenirNextProDemi, avenir, sans-serif;
 }
@@ -1216,6 +1219,12 @@ $accent: #FF4081;
   }
 }
 
+@media (min-width: 1800px) {
+  .container {
+    max-width: 67vw;
+  }
+}
+
 .nowrap {
   white-space: nowrap;
 }

content/english/_index.md

@@ -20,7 +20,7 @@ Banner:
     labels:
       - text: AI bias testing
       - text: AI standards
-Core_Activities:
+overview_block:
   activities:
     - title: Knowledge platform
       subtitle: Statistical and legal expertise
@@ -36,12 +36,12 @@ Core_Activities:
       subtitle: Open source AI auditing tools
       url: /technical-tools/
       icon: fa-light fa-toolbox
-      color: '#D5EBDB'
+      color: "#D5EBDB"
     - title: Project work
       subtitle: Validation, AI Act etc.
       url: /knowledge-platform/project-work/
       icon: fa-light fa-magnifying-glass-plus
-      color: '#E3F0FE'
+      color: "#E3F0FE"
 About:
   content: >
     Who decides on the algorithms that shape our daily lives? At Algorithm Audit, we believe this belongs to all of us. Our team of data scientists, lawyers, and ethicists tackles value-based questions at the heart of AI and data modelling. Our focus is transparent deliberation about technical choices and their real-world consequences. As a nonprofit knowledge platform, we bridge the gap between industry, academia and public policy, connecting bottom-up experience with state-of-the-art technical insights. Through open-source tools, independent validation and public sector guidance, we translate knowledge into action. Connect with us to make responsible AI a shared effort.

content/english/technical-tools/_index.md

@@ -2,24 +2,49 @@
 layout: sublandingpage
 title: Technical tools
 titleline2: Open source AI auditing tools
-subtitle: >
+subtitle: |
   We develop open source tools for AI auditing. This makes
 icon: fa-light fa-toolbox
-color: '#D5EBDB'
+color: "#D5EBDB"
+font_color: color-blue
 subpage_links:
   - title: Unsupervised bias detection tool
     titleline2: >-
-      Anomaly detection to identify groups that may be subject to unfair treatment by AI systems
+      Anomaly detection to identify groups that may be subject to unfair
+      treatment by AI systems
     icon: fa-light fa-search-plus
-    color: '#FFF'
+    color: "#FFF"
   - title: Synthetic data generation tool
-    titleline2: >-
-      Privacy-preserving browser-based tool to generate synthetic tabular data  
+    titleline2: "Privacy-preserving browser-based tool to generate synthetic tabular data  "
     icon: fa-light fa-table
-    color: '#FFF'
+    color: "#FFF"
   - title: AI Act implementation tool
     titleline2: >-
-      Dynamic questionnaires for identification and risk classification of AI systems and high-impact algorithms
+      Dynamic questionnaires for identification and risk classification of AI
+      systems and high-impact algorithms
     icon: fa-light fa-file
-    color: '#FFF'
+    color: "#FFF"
+overview_block:
+  activities:
+    - title: Knowledge platform
+      subtitle: Statistical and legal expertise
+      url: /knowledge-platform/
+      icon: fa-light fa-layer-group
+      color: "#E3F0FE"
+    - title: Algoprudence
+      subtitle: Case-based normative advise
+      url: /algoprudence/
+      icon: fas fa-balance-scale
+      color: "#F7CDBF"
+    - title: Project work
+      subtitle: "Validation, AI Act etc."
+      url: /knowledge-platform/project-work/
+      icon: fas fa-search-plus
+      color: "#E3F0FE"
 ---
+
+{{< tab_content_open id="overview" title="Other core activities" >}}
+
+{{< overview_block >}}
+
+{{< tab_content_close >}}

content/nederlands/_index.md

@@ -27,7 +27,7 @@ Banner:
 About:
   content: >
     Wie besluit over de algoritmes die onze dagelijkse realiteit steeds meer bepalen? Bij Algorithm Audit geloven we dat dit een zaak is van ons allemaal. Ons team van data scientists, juristen en ethici biedt oplossingen voor waardegedreven vraagstukken die centraal staan bij de inzet van AI en data-analyse. Onze focus is het maken van transparante afwegingen over technische keuzes en hun maatschappelijke gevolgen. Als non-profit kennisplatform slaan we een brug tussen bedrijfsleven, wetenschap en overheid. Zo verbinden we ervaringen vanuit de uitvoeringspraktijk met de nieuwste technische inzichten. Door middel van open-source tools, onafhankelijke validatie en advies aan publieke organisaties zetten we kennis om in actie. Kom in contact om samen werk te maken van de verantwoorde inzet van AI.
-Core_Activities:
+overview_block:
   activities:
     - title: Kennisplatform
       subtitle: Expertise is statistiek en recht

layouts/index.html

@@ -8,7 +8,7 @@
 
 {{ partial "landingpage/about.html" .}}
 
-{{ partial "landingpage/core-activities.html" .}}
+{{ partial "overview_block.html" .}}
 
 {{ partial "landingpage/activityfeed.html" . }}
 

…artials/landingpage/core-activities.html layouts/partials/overview_block.htmllayouts/partials/landingpage/core-activities.html renamed to layouts/partials/overview_block.html layouts/partials/landingpage/core-activities.html renamed to layouts/partials/overview_block.html

@@ -1,5 +1,5 @@
 
-{{ with .Params.Core_Activities}}
+{{ with .Params.overview_block}}
 <div class="container landing-page-core-activities pb-5">
     <div class="row justify-content-center">
         {{ range .activities }}

layouts/partials/sublanding-page-header.html

@@ -5,15 +5,19 @@
         <div class="landing-page-core-activities pb-5">
           <div class="row">
               <div class="col-12 col-lg-8 col-xl-10 pr-5">
-                  <div style="background-color: {{.Params.color}};" class="rounded-lg color-white font-size-1rem font-size-xl-1_5rem container p-0">
+                  {{ $color := .Params.font_color }}
+                  {{ if not ($color) }}
+                  {{ $color = "color-white" }}
+                  {{ end }}
+                  <div style="background-color: {{.Params.color}};" class="rounded-lg {{$color}} font-size-1rem font-size-xl-1_5rem container p-0">
                       <div class="row mx-4 py-3">
                           <i class="font-size-2rem fa {{ .Params.icon }}"></i>
                       </div>
                       <row class="row mx-4 pt-3">
-                          <h3 class="color-white font-size-1_3rem">{{.Params.title}}</h3>
+                          <h3 class="{{$color}} font-size-1_3rem">{{.Params.title}}</h3>
                       </row>
                       <row class="row mx-4 pb-0 landing-page-core-activities-row-subtitle">
-                          <p class="color-white font-size-1rem">{{.Params.titleline2}}</p>
+                          <p class="{{$color}} font-size-1rem">{{.Params.titleline2}}</p>
                       </row>
                   </div>
               </div>
@@ -31,10 +35,10 @@ <h3 class="color-white font-size-1_3rem">{{.Params.title}}</h3>
         <div class="container pb-5">
           {{ range .Params.subpage_links }}
           <a href={{.url}} class="row justify-content-center">
-            <div style="background-color: {{.color}};" class="rounded-lg color-blue p-0 m-2">
+            <div style="background-color: {{.color}};" class="rounded-lg col color-blue p-0 m-2">
               <div class="row mx-4 py-3">
-                <i class="font-size-1_5rem fa {{ .icon }}"></i>
-                <h3 class="color-blue font-size-1_5rem ml-4">{{.title}}</h3>
+                  <i class="font-size-1_5rem fa {{ .icon }}"></i>
+                  <h3 class="color-blue font-size-1_5rem ml-4">{{.title}}</h3>
               </div>
               <row class="row mx-4 pb-0 landing-page-core-activities-row-subtitle">
                 <p class="color-blue font-size-1rem">{{.titleline2}}</p>

layouts/shortcodes/overview_block.html

@@ -1,45 +1,26 @@
 {{ $_hugo_config := `{ "version": 1 }` }}
-{{$param := int (.Get "index")}}
-{{ with index .Page.Params.overview_block $param }}
-
-<div class="container-fluid mt-5 p-0" id="{{.id}}">
-    <div class="shadow form-mobile-desktop-layout bg-white rounded-blue-border">
-
-        <!-- Title and icon -->
-        <h3 class="">
-            <span class="{{.icon}} icon mb-4 pl-5 remove-on-pdf"></span>
-            {{.title}}
-        </h3>
-
-        <div class="row mt-4">
-            <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
-                <p>{{ .content | markdownify }}</p>
-            </div>
-        </div>
-
-        <div class="row mt-4">
-            {{ range .items }}
-            <div class="col-md-6 col-sm-12 my-3">
-                <div class="row h-100">
-                    <div class="col-2"></div>
-                    <a style="border-radius: 15%;" class="col-8 clickable-wrapper bg-lightblue pt-2" 
-                        href="{{.link }}">
-                        <div class="row my-5">
-                            <div class="col d-flex align-items-center justify-content-center display-4">
-                                <span class={{.icon}}></span>
-                            </div>
-                        </div>
-                        <div class="row mb-4">
-                            <div class="col d-flex align-items-center justify-content-center display-4">
-                                <h4>{{.title}}</h4>
-                            </div>
-                        </div>
-                    </a>
-                    <div class="col-2"></div>
+{{ with .Page.Params.overview_block }}
+<div class="container landing-page-core-activities pb-5">
+    <div class="row justify-content-center">
+        {{ range .activities }}
+        {{ $color := .font_color }}
+        {{ if not ($color) }}
+        {{ $color = "color-blue" }}
+        {{ end }}
+        <a href={{.url}} class="col-12 col-lg-6 col-xl-3 p-1">
+            <div style="background-color: {{.color}};" class="rounded-lg {{$color}} font-size-1rem font-size-xl-1_5rem container p-0">
+                <div class="row mx-4 py-3">
+                    <i class="font-size-2rem fa {{ .icon }}"></i>
                 </div>
+                <row class="row mx-4 pt-3">
+                    <h3 class="{{$color}} font-size-1_3rem">{{.title}}</h3>
+                </row>
+                <row class="row mx-4 pb-0 landing-page-core-activities-row-subtitle">
+                    <p class="{{$color}} font-size-1rem">{{.subtitle}}</p>
+                </row>
             </div>
-            {{ end }}
-        </div>
+        </a>
+        {{ end }}
     </div>
 </div>
-{{end}}
+{{ end }}

tina/collections/pages/home.ts

@@ -2,7 +2,7 @@
  * @type {import('tinacms').Collection}
  */
 
-import color from "../shared/page/color";
+import overview_block from "../shared/page/overview_block";
 
 export default {
   name: "home",
@@ -138,47 +138,7 @@ export default {
         },
       ],
     },
-    {
-      type: "object",
-      name: "Core_Activities",
-      label: "Core activities",
-      fields: [
-        {
-          type: "object",
-          name: "activities",
-          label: "Activities",
-          list: true,
-          fields: [
-            {
-              type: "string",
-              name: "title",
-              label: "Title",
-              required: true,
-            },
-            {
-              type: "string",
-              name: "subtitle",
-              label: "Subtitle",
-            },
-            {
-              type: "string",
-              name: "url",
-              label: "Url",
-              required: true,
-            },
-            {
-              type: "string",
-              name: "icon",
-              label: "Icon",
-              required: true,
-              description:
-                "From https://fontawesome.com/v5/search?m=free (e.g. fa fa-list for https://fontawesome.com/icons/list?f=classic&s=solid)",
-            },
-            color,
-          ],
-        },
-      ],
-    },
+    overview_block,
     {
       type: "object",
       name: "About",