feat: implement responsive homepage

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

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>

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>

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',

src/styles/base/_index.scss

@@ -0,0 +1,4 @@
+@import 'theme';
+@import 'icons';
+@import 'positions';
+@import 'ratio';

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};
+      }
+    }
+  }
+}

src/styles/_theme.scss → 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 {

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);
 }

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);
   }
 }

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);
+    }
+  }
 }

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);
+  }
+}

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);
-  }
 }

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,15 +39,13 @@ $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
 @import 'bootstrap/scss/helpers';
 
 @import 'bootstrap/scss/utilities/api';
 
-@import 'icons';
-@import 'ratio';
+@import 'base';
 @import 'components';
-@import 'theme';

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;