From caa8ad6f8fe1b4dccb6a9a6f5c873b6ec1652e26 Mon Sep 17 00:00:00 2001
From: Paulo Vareiro <paulo.vareiro@virtual-identity.com>
Date: Wed, 28 Aug 2024 11:26:42 +0100
Subject: [PATCH] feat: implement responsive homepage

---
 src/partials/base/b_footer.twig               | 38 +++++------
 src/partials/base/b_header.twig               | 67 ++++++++++++++-----
 src/partials/base/b_highlight-teaser.twig     |  8 +--
 .../content-layout/cl_card-showcase.twig      |  6 +-
 src/styles/{ => base}/_icons.scss             |  0
 src/styles/base/_index.scss                   |  4 ++
 src/styles/base/_positions.scss               | 11 +++
 src/styles/{ => base}/_ratio.scss             |  0
 src/styles/{ => base}/_theme.scss             |  1 +
 src/styles/components/_button.scss            | 24 ++++++-
 src/styles/components/_form.scss              |  2 +-
 src/styles/components/_header.scss            | 23 +++++++
 src/styles/components/_link.scss              | 14 ++++
 src/styles/components/_tile.scss              | 14 ++--
 src/styles/styles.scss                        |  8 +--
 src/styles/themes/default.css                 |  3 +
 16 files changed, 162 insertions(+), 61 deletions(-)
 rename src/styles/{ => base}/_icons.scss (100%)
 create mode 100644 src/styles/base/_index.scss
 create mode 100644 src/styles/base/_positions.scss
 rename src/styles/{ => base}/_ratio.scss (100%)
 rename src/styles/{ => base}/_theme.scss (83%)

diff --git a/src/partials/base/b_footer.twig b/src/partials/base/b_footer.twig
index 1332df3..2b40470 100644
--- a/src/partials/base/b_footer.twig
+++ b/src/partials/base/b_footer.twig
@@ -1,40 +1,40 @@
 <footer class='footer border-top'>
   <div class='container pt-5 pb-4'>
-    <div class='row'>
-      <div class='col-4 mb-3'>
+    <div class='row gap-5 gap-md-0'>
+      <div class='col-12 col-md-4'>
         <a
           href='./'
           aria-current='page'
-          class='nav-link d-flex align-items-center mb-3 mb-md-0 me-md-auto text-dark text-decoration-none fs-4'
+          class='nav-link d-flex align-items-center text-dark text-decoration-none'
         >
           <img class='h-full' src='./assets/odk-logo.svg' alt='Stadt Koeln Logo'>
         </a>
       </div>
 
-      <div class='col-4'>
+      <div class='col-12 col-md-4'>
         <p class='h4 mb-3'>Seiten</p>
-        <ul class='nav flex-column'>
-          <li class='nav-item mb-3'><a href='#' class='nav-link p-0'>Daten</a></li>
-          <li class='nav-item mb-3'><a href='#' class='nav-link p-0'>News</a></li>
-          <li class='nav-item mb-3'><a href='#' class='nav-link p-0'>Herausgeber</a></li>
-          <li class='nav-item mb-3'><a href='#' class='nav-link p-0'>Apps</a></li>
-          <li class='nav-item mb-3'><a href='#' class='nav-link p-0'>Anfragen</a></li>
+        <ul class='nav flex-column gap-3'>
+          <li class='nav-item'><a href='#' class='nav-link p-0'>Daten</a></li>
+          <li class='nav-item'><a href='#' class='nav-link p-0'>News</a></li>
+          <li class='nav-item'><a href='#' class='nav-link p-0'>Herausgeber</a></li>
+          <li class='nav-item'><a href='#' class='nav-link p-0'>Apps</a></li>
+          <li class='nav-item'><a href='#' class='nav-link p-0'>Anfragen</a></li>
         </ul>
       </div>
 
-      <div class='col-4'>
+      <div class='col-12 col-md-4'>
         <p class='h4 mb-3'>Service</p>
-        <ul class='nav flex-column'>
-          <li class='nav-item mb-3'><a href='#' class='nav-link p-0'>Kontakt</a></li>
-          <li class='nav-item mb-3'><a href='#' class='nav-link p-0'>Impressum</a></li>
-          <li class='nav-item mb-3'><a href='#' class='nav-link p-0'>Nutzungsbedingungen</a></li>
-          <li class='nav-item mb-3'><a href='#' class='nav-link p-0'>Datenschutz</a></li>
-          <li class='nav-item mb-3'><a href='#' class='nav-link p-0'>Leichte Sprache</a></li>
-          <li class='nav-item mb-3'><a href='#' class='nav-link p-0'>Barrierefreiheit</a></li>
+        <ul class='nav flex-column gap-3'>
+          <li class='nav-item'><a href='#' class='nav-link p-0'>Kontakt</a></li>
+          <li class='nav-item'><a href='#' class='nav-link p-0'>Impressum</a></li>
+          <li class='nav-item'><a href='#' class='nav-link p-0'>Nutzungsbedingungen</a></li>
+          <li class='nav-item'><a href='#' class='nav-link p-0'>Datenschutz</a></li>
+          <li class='nav-item'><a href='#' class='nav-link p-0'>Leichte Sprache</a></li>
+          <li class='nav-item'><a href='#' class='nav-link p-0'>Barrierefreiheit</a></li>
         </ul>
       </div>
     </div>
-    <div class='row'>
+    <div class='row mt-5'>
       <div class='col-12'>
         <p class='m-0'>
           Powered by Stadt Köln and <a href='#' class='d-inline text-info'>DKAN</a>, a project of
diff --git a/src/partials/base/b_header.twig b/src/partials/base/b_header.twig
index 81c763b..14451b0 100644
--- a/src/partials/base/b_header.twig
+++ b/src/partials/base/b_header.twig
@@ -1,27 +1,58 @@
-<header class='header py-3 mb-5 border-bottom'>
-  <nav class='container d-flex flex-wrap justify-content-center'>
+<header class='header mb-5 border-bottom'>
+  <nav class='navbar navbar-expand-xl p-3 container d-flex justify-content-between'>
     <a
       href='./'
       aria-current='page'
-      class='d-flex align-items-center mb-3 mb-md-0 me-md-auto text-dark text-decoration-none fs-4'
+      class='d-flex align-items-center me-md-auto text-dark text-decoration-none'
     >
       <img class='h-full' src='./assets/odk-logo.svg' alt='Stadt Koeln Logo'>
     </a>
 
-    <ul class='nav'>
-      <li class='nav-item fs-5'>
-        <button toggle-dark-mode class='btn nav-link' aria-label='Toggle dark mode'>
-          <i class='bi bi-moon-fill'></i>
-        </button>
-      </li>
-      <li class='nav-item'><a href='./dataset-overview' class='nav-link fs-5'>Daten</a></li>
-      <li class='nav-item'><a href='#' class='nav-link fs-5'>News</a></li>
-      <li class='nav-item'><a href='#' class='nav-link fs-5'>Herausgeber</a></li>
-      <li class='nav-item'><a href='./apps' class='nav-link fs-5'>Apps</a></li>
-      <li class='nav-item'><a href='#' class='nav-link fs-5'>Anfragen</a></li>
-      <li class='nav-item fs-5'>
-        <a href='./dataset-overview' class='nav-link' aria-label='search'><i class='bi bi-search'></i></a>
-      </li>
-    </ul>
+    <div class='d-flex align-items-center gap-4'>
+      <div id='header-nav' class='offcanvas offcanvas-end' aria-modal='true' role='dialog'>
+        <div class='offcanvas-header'>
+          <h5 class='offcanvas-title'>Stadt Koeln</h5>
+          <button type='button' class='btn btn-close' data-bs-dismiss='offcanvas' aria-label='Close'>
+            <i class='bi bi-x-lg'></i>
+          </button>
+        </div>
+        <div class='offcanvas-body'>
+          <ul class='nav flex-column flex-xl-row fs-5'>
+            <li>
+              <button toggle-dark-mode class='btn nav-link rounded-0' aria-label='Toggle dark mode'>
+                <i class='bi bi-moon-fill'></i>
+              </button>
+            </li>
+            <li><a href='./dataset-overview' class='nav-link'>Daten</a></li>
+            <li><a href='#' class='nav-link'>News</a></li>
+            <li><a href='#' class='nav-link'>Herausgeber</a></li>
+            <li><a href='./apps' class='nav-link'>Apps</a></li>
+            <li><a href='#' class='nav-link'>Anfragen</a></li>
+          </ul>
+        </div>
+      </div>
+
+      <button
+        class='navbar-toggler btn btn-sm btn-outline-light'
+        data-bs-toggle='offcanvas'
+        data-bs-target='#header-nav'
+      >
+        <i class='bi bi-list fs-4'></i>
+      </button>
+
+      <form action='./dataset-overview' class='d-none d-lg-flex gap-2'>
+        <input
+          class='form-control mr-sm-2'
+          type='search'
+          placeholder='Datensatze suchen'
+          aria-label='Datensatze suchen'
+        >
+        <button class='btn btn-outline-light' type='submit'>Search</button>
+      </form>
+
+      <a href='./dataset-overview' class='link d-block d-lg-none fs-3'>
+        <i class='bi bi-search'></i>
+      </a>
+    </div>
   </nav>
 </header>
diff --git a/src/partials/base/b_highlight-teaser.twig b/src/partials/base/b_highlight-teaser.twig
index eb8c576..e2dc2b5 100644
--- a/src/partials/base/b_highlight-teaser.twig
+++ b/src/partials/base/b_highlight-teaser.twig
@@ -1,15 +1,15 @@
 <div class='row position-relative'>
-  <div class='col-8'>
+  <div class='col-lg-8'>
     <img class='img-fluid' src='https://picsum.photos/960/540' alt='Virtual Identity AG'>
   </div>
-  <div class='col-6 position-absolute end-0 top-0 mt-5'>
-    <div class='card-body text-bg-primary p-4'>
+  <div class='mt-n5 col-lg-6 position-lg-absolute end-0 top-0 mt-lg-5'>
+    <div class='card-body text-bg-primary p-4 mx-4 mx-lg-0 d-flex flex-column'>
       <h5 class='mb-3'>Titel lorem ipsum</h5>
       <p class='mb-3'>
         Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et
         dolore magna aliquyam erat, sed diam voluptua...
       </p>
-      <a class='btn btn-secondary' href='#'> Weiterlesen </a>
+      <a class='btn btn-secondary align-self-center align-self-lg-start' href='#'>Weiterlesen</a>
     </div>
   </div>
 </div>
diff --git a/src/partials/content-layout/cl_card-showcase.twig b/src/partials/content-layout/cl_card-showcase.twig
index 66a3938..846579e 100644
--- a/src/partials/content-layout/cl_card-showcase.twig
+++ b/src/partials/content-layout/cl_card-showcase.twig
@@ -1,5 +1,5 @@
-<div class='row'>
-  <div class='col-6'>
+<div class='row gap-4 gap-md-0'>
+  <div class='col-12 col-md-4 col-lg-6'>
     {%
       include 'partials::base/b_card.twig' with {
       'thumbnail': {
@@ -15,7 +15,7 @@
     %}
   </div>
 
-  <div class='col-6 d-flex flex-column gap-4'>
+  <div class='col-md-8 col-lg-6 d-flex flex-column gap-4'>
     {%
       include 'partials::base/b_card.twig' with {
       'direction': 'horizontal',
diff --git a/src/styles/_icons.scss b/src/styles/base/_icons.scss
similarity index 100%
rename from src/styles/_icons.scss
rename to src/styles/base/_icons.scss
diff --git a/src/styles/base/_index.scss b/src/styles/base/_index.scss
new file mode 100644
index 0000000..a02805b
--- /dev/null
+++ b/src/styles/base/_index.scss
@@ -0,0 +1,4 @@
+@import 'theme';
+@import 'icons';
+@import 'positions';
+@import 'ratio';
diff --git a/src/styles/base/_positions.scss b/src/styles/base/_positions.scss
new file mode 100644
index 0000000..f6c8f1e
--- /dev/null
+++ b/src/styles/base/_positions.scss
@@ -0,0 +1,11 @@
+$positions: (absolute, relative, fixed, sticky);
+
+@each $breakpoint, $breakpoint-size in $grid-breakpoints {
+  @each $position in $positions {
+    .position-#{$breakpoint}-#{$position} {
+      @include media-breakpoint-up($breakpoint) {
+        position: #{$position};
+      }
+    }
+  }
+}
diff --git a/src/styles/_ratio.scss b/src/styles/base/_ratio.scss
similarity index 100%
rename from src/styles/_ratio.scss
rename to src/styles/base/_ratio.scss
diff --git a/src/styles/_theme.scss b/src/styles/base/_theme.scss
similarity index 83%
rename from src/styles/_theme.scss
rename to src/styles/base/_theme.scss
index 1d5539f..47100b7 100644
--- a/src/styles/_theme.scss
+++ b/src/styles/base/_theme.scss
@@ -1,6 +1,7 @@
 .text-bg-primary {
   color: var(--color-on-primary) !important;
   background-color: var(--primary) !important;
+  --focus-ring-color: var(--color-on-primary);
 }
 
 .text-bg-secondary {
diff --git a/src/styles/components/_button.scss b/src/styles/components/_button.scss
index 8fe8ea0..d447b6d 100644
--- a/src/styles/components/_button.scss
+++ b/src/styles/components/_button.scss
@@ -1,3 +1,7 @@
+.btn {
+  --btn-focus-box-shadow: 0 0 0 var(--focus-ring-width) var(--focus-ring-color);
+}
+
 .btn-primary {
   --btn-bg: var(--primary);
   --btn-color: var(--color-on-primary);
@@ -14,8 +18,24 @@
   --btn-disabled-bg: var(--primary);
   --btn-disabled-color: var(--color-on-primary);
   --btn-disabled-border-color: var(--primary);
+}
+
+.btn-outline-primary {
+  --btn-bg: transparent;
+  --btn-color: var(--color-on-primary);
+  --btn-border-color: var(--color-on-primary);
+
+  --btn-hover-bg: var(--primary-hover);
+  --btn-hover-color: var(--color-on-primary);
+  --btn-hover-border-color: var(--primary-hover);
 
-  --btn-focus-shadow-rgb: var(--primary-shadow-rgb);
+  --btn-active-bg: var(--primary-active);
+  --btn-active-color: var(--color-on-primary);
+  --btn-active-border-color: var(--primary-active);
+
+  --btn-disabled-bg: var(--primary);
+  --btn-disabled-color: var(--color-on-primary);
+  --btn-disabled-border-color: var(--primary);
 }
 
 .btn-secondary {
@@ -34,6 +54,4 @@
   --btn-disabled-bg: var(--secondary);
   --btn-disabled-color: var(--color-on-secondary);
   --btn-disabled-border-color: var(--secondary);
-
-  --btn-focus-shadow-rgb: var(--secondary-shadow-rgb);
 }
diff --git a/src/styles/components/_form.scss b/src/styles/components/_form.scss
index eee2f74..298df7b 100644
--- a/src/styles/components/_form.scss
+++ b/src/styles/components/_form.scss
@@ -1,6 +1,6 @@
 .form-control {
   &:focus {
     border-color: var(--primary);
-    box-shadow: 0 0 0 0.25rem rgba(var(--primary-shadow-rgb), 0.25);
+    box-shadow: 0 0 0 var(--focus-ring-width) var(--focus-ring-color);
   }
 }
diff --git a/src/styles/components/_header.scss b/src/styles/components/_header.scss
index eb5c28a..39f2f0d 100644
--- a/src/styles/components/_header.scss
+++ b/src/styles/components/_header.scss
@@ -2,11 +2,34 @@
   --header-background: var(--primary);
   --header-link-color: rgba(var(--light-rgb), 0.8);
   --header-link-hover-color: var(--light);
+  --focus-ring-color: var(--color-on-primary);
+  --link-color-rgb: var(--light-rgb);
 
   background-color: var(--header-background);
 
+  .navbar {
+    --navbar-color: var(--light);
+  }
+
   .nav {
     --nav-link-color: var(--header-link-color);
     --nav-link-hover-color: var(--header-link-hover-color);
   }
+
+  .offcanvas {
+    @media (max-width: breakpoint-max(xl)) {
+      --header-link-color: var(--body-color);
+      --header-link-hover-color: var(--primary);
+      --focus-ring-color: var(--primary);
+    }
+  }
+
+  .navbar-toggler {
+    --navbar-toggler-border-color: var(--light);
+
+    &:focus,
+    &:focus-visible {
+      box-shadow: var(--btn-focus-box-shadow);
+    }
+  }
 }
diff --git a/src/styles/components/_link.scss b/src/styles/components/_link.scss
index 25d01c0..78f8424 100644
--- a/src/styles/components/_link.scss
+++ b/src/styles/components/_link.scss
@@ -1,3 +1,10 @@
+a {
+  &:focus,
+  &:focus-visible {
+    outline: solid var(--focus-ring-width) var(--focus-ring-color);
+  }
+}
+
 .link {
   text-decoration: none;
 
@@ -7,3 +14,10 @@
     color: rgba(var(--link-hover-color-rgb), 1);
   }
 }
+
+.nav-link {
+  &:focus,
+  &:focus-visible {
+    box-shadow: 0 0 0 var(--focus-ring-width) var(--focus-ring-color);
+  }
+}
diff --git a/src/styles/components/_tile.scss b/src/styles/components/_tile.scss
index 32b7ff0..f811892 100644
--- a/src/styles/components/_tile.scss
+++ b/src/styles/components/_tile.scss
@@ -10,16 +10,18 @@
     --tile-color: var(--tile-hover-color);
   }
 
-  &:focus {
-    --tile-shadow-rgb: var(--primary-shadow-rgb);
+  &:focus,
+  &:focus-visible {
     outline: none;
+
+    > div {
+      box-shadow: 0 0 0 var(--focus-ring-width) var(--focus-ring-color);
+    }
   }
 
   > div {
     background-color: var(--tile-background);
     color: var(--tile-color);
-    outline: none;
-    box-shadow: 0 0 0 0.25rem rgba(var(--tile-shadow-rgb), 0.5);
     transition:
       background-color 0.15s,
       box-shadow 0.15s ease-in-out;
@@ -35,8 +37,4 @@
     --tile-background: var(--tile-hover-background);
     --tile-color: var(--tile-hover-color);
   }
-
-  &:focus {
-    --tile-shadow-rgb: var(--primary-shadow-rgb);
-  }
 }
diff --git a/src/styles/styles.scss b/src/styles/styles.scss
index cb1489d..707f208 100644
--- a/src/styles/styles.scss
+++ b/src/styles/styles.scss
@@ -1,7 +1,7 @@
 @import 'bootstrap/scss/functions';
 
 $prefix: '';
-$secondary: #fff;
+$enable-negative-margins: true;
 
 // Required
 @import 'bootstrap/scss/variables';
@@ -39,7 +39,7 @@ $secondary: #fff;
 // @import 'bootstrap/scss/popover';
 // @import "bootstrap/scss/carousel";
 // @import "bootstrap/scss/spinners";
-// @import 'bootstrap/scss/offcanvas'; // Requires transitions
+@import 'bootstrap/scss/offcanvas'; // Requires transitions
 // @import "bootstrap/scss/placeholders";
 
 // Helpers
@@ -47,7 +47,5 @@ $secondary: #fff;
 
 @import 'bootstrap/scss/utilities/api';
 
-@import 'icons';
-@import 'ratio';
+@import 'base';
 @import 'components';
-@import 'theme';
diff --git a/src/styles/themes/default.css b/src/styles/themes/default.css
index 57f738b..6095423 100644
--- a/src/styles/themes/default.css
+++ b/src/styles/themes/default.css
@@ -1,6 +1,9 @@
 :root {
   color-scheme: light;
 
+  --focus-ring-color: #ef0000;
+  --focus-ring-width: 3px;
+
   --primary: #ef0000;
   --primary-rgb: 239, 0, 0;
   --primary-hover: #d60909;