feat: STADTKLN-61 final homepage design (#13)

* feat: adjusted hero on homepage * fix: hero on dataset page * feat: links adjustment * feat: design adjustments * feat: design adjustments * fix: hero margin * feat: update footer links color
virtualidentityag · Sep 12, 2024 · afcebdd · afcebdd
1 parent 8762a39
commit afcebdd
Show file tree

Hide file tree

Showing 20 changed files with 285 additions and 96 deletions.
diff --git a/src/pages/dataset.twig b/src/pages/dataset.twig
@@ -47,7 +47,24 @@
     </div>
 
     <div class='col-12 pt-3'>
-      {% include 'partials::content-layout/cl_dataset-hero.twig' %}
+      {%
+        include 'partials::base/b_hero.twig' with {
+        src: 'https://picsum.photos/960/540',
+        }
+      %}
+
+      <div class='row'>
+        <div class='col-12'>
+          <div class='p-4 bg-body'>
+            <p class='h5 mb-4'>
+              Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore
+              et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
+              Stet clita kasd gubergren, no sea takimata sanctus.
+            </p>
+            <button class='btn btn-primary'>Mehr</button>
+          </div>
+        </div>
+      </div>
     </div>
   </section>
 

diff --git a/src/pages/index.twig b/src/pages/index.twig
@@ -2,32 +2,48 @@
 {% set theme = 'default' %}
 
 {% block content %}
-  <section class='row pb-5'>
+  <section class='row pb-3 pb-lg-5'>
     <div class='col-12'>
-      <h1 class='display-3 display-md-3 mb-4'>
-        Die beste Grundlage fur fundierte Entscheidungen: offene Daten aus Ihrer Region.
-      </h1>
+      {%
+        include 'partials::base/b_hero.twig' with {
+        src: 'https://picsum.photos/960/540',
+        type: 'background'
+        }
+      %}
 
-      <div class='row mb-5'>
-        <div class='col-12 col-md-7'>
-          <form class='form-inline d-flex gap-2' action='overview'>
-            <input
-              class='form-control fs-5 mr-sm-2'
-              type='search'
-              placeholder='Datensatze suchen'
-              aria-label='Datensatze suchen'
-            >
-            <button class='btn btn-primary fs-5' type='submit' aria-label='Search'>
-              <i class='bi bi-search'></i>
-            </button>
-          </form>
+      <div class='row'>
+        <div class='col-12 col-lg-9 mb-4 mb-xl-5'>
+          <div class='text-bg-primary p-3 pb-5'>
+            <div class='p-3'>
+              <h1 class='display-5 mb-4'>
+                Die beste Grundlage für fundierte Entscheidungen: offene Daten aus Ihrer Region.
+              </h1>
+              <form class='form-inline d-flex gap-2' action='overview'>
+                <input
+                  class='form-control fs-5 mr-sm-2'
+                  type='search'
+                  placeholder='Datensatze suchen'
+                  aria-label='Datensatze suchen'
+                >
+                <button class='btn btn-outline-primary fs-5' type='submit' aria-label='Search'>
+                  <i class='bi bi-search'></i>
+                </button>
+              </form>
+            </div>
+          </div>
         </div>
       </div>
+    </div>
+  </section>
 
-      <h2 class='m-0'>
-        Hier finden alle Kölner – ob Bürger, Verwaltung, Unternehmen oder Wissenschaft – offene Datensätze, um gemeinsam
-        einen Mehrwert für alle zu schaffen.
-      </h2>
+  <section class='row pb-5'>
+    <div class='col-12'>
+      <div class='p-3 bg-body'>
+        <h2 class='p-3 m-0'>
+          Hier finden alle Kölner – ob Bürger, Verwaltung, Unternehmen oder Wissenschaft – offene Datensätze, um
+          gemeinsam einen Mehrwert für alle zu schaffen.
+        </h2>
+      </div>
     </div>
   </section>
 
@@ -42,18 +58,99 @@
       }
     %}
 
-    <div class='col-12'>
-      {% include 'partials::content-layout/cl_card-showcase.twig' %}
+    <div class='col-6 mb-4'>
+      {%
+        include 'partials::base/b_card.twig' with {
+        'thumbnail': {
+        src: 'https://picsum.photos/960/540',
+        },
+        'direction': 'horizontal',
+        'href': './dataset',
+        'title': 'Baumkataster Köln 2020',
+        'subtitle': 'Herausgeber: Stadt Köln',
+        'description': 'Lorem ipsum dolor sit amet, consetetur sadipscin invidunt ut labore et erat, sed diam voluptua...',
+        }
+      %}
+    </div>
+    <div class='col-6 mb-4'>
+      {%
+        include 'partials::base/b_card.twig' with {
+        'thumbnail': {
+        src: 'https://picsum.photos/960/540',
+        },
+        'direction': 'horizontal',
+        'href': './dataset',
+        'title': 'Baumkataster Köln 2020',
+        'subtitle': 'Herausgeber: Stadt Köln',
+        'description': 'Lorem ipsum dolor sit amet, consetetur sadipscin invidunt ut labore et erat, sed diam voluptua...',
+        }
+      %}
+    </div>
+    <div class='col-6 mb-4'>
+      {%
+        include 'partials::base/b_card.twig' with {
+        'thumbnail': {
+        src: 'https://picsum.photos/960/540',
+        },
+        'direction': 'horizontal',
+        'href': './dataset',
+        'title': 'Baumkataster Köln 2020',
+        'subtitle': 'Herausgeber: Stadt Köln',
+        'description': 'Lorem ipsum dolor sit amet, consetetur sadipscin invidunt ut labore et erat, sed diam voluptua...',
+        }
+      %}
+    </div>
+    <div class='col-6 mb-4'>
+      {%
+        include 'partials::base/b_card.twig' with {
+        'thumbnail': {
+        src: 'https://picsum.photos/960/540',
+        },
+        'direction': 'horizontal',
+        'href': './dataset',
+        'title': 'Baumkataster Köln 2020',
+        'subtitle': 'Herausgeber: Stadt Köln',
+        'description': 'Lorem ipsum dolor sit amet, consetetur sadipscin invidunt ut labore et erat, sed diam voluptua...',
+        }
+      %}
+    </div>
+    <div class='col-6'>
+      {%
+        include 'partials::base/b_card.twig' with {
+        'thumbnail': {
+        src: 'https://picsum.photos/960/540',
+        },
+        'direction': 'horizontal',
+        'href': './dataset',
+        'title': 'Baumkataster Köln 2020',
+        'subtitle': 'Herausgeber: Stadt Köln',
+        'description': 'Lorem ipsum dolor sit amet, consetetur sadipscin invidunt ut labore et erat, sed diam voluptua...',
+        }
+      %}
+    </div>
+    <div class='col-6'>
+      {%
+        include 'partials::base/b_card.twig' with {
+        'thumbnail': {
+        src: 'https://picsum.photos/960/540',
+        },
+        'direction': 'horizontal',
+        'href': './dataset',
+        'title': 'Baumkataster Köln 2020',
+        'subtitle': 'Herausgeber: Stadt Köln',
+        'description': 'Lorem ipsum dolor sit amet, consetetur sadipscin invidunt ut labore et erat, sed diam voluptua...',
+        }
+      %}
     </div>
   </section>
 
-  <section class='row py-5 border-top'>
+  <section class='row py-5 border-gray border-top border-opacity-25'>
     {%
       include 'partials::content-layout/cl_section-header.twig' with {
       title: 'News',
       link: {
       href: '#',
-      text: 'Alle News',
+      text: 'Alle News anzeigen',
       }
       }
     %}
@@ -63,7 +160,7 @@
     </div>
   </section>
 
-  <section class='row py-5 border-top'>
+  <section class='row py-5 border-gray border-top border-opacity-25'>
     {%
       include 'partials::content-layout/cl_section-header.twig' with {
       title: 'Beliebte Kategorien'
@@ -75,20 +172,20 @@
     </div>
   </section>
 
-  <section class='row py-5 border-top border-bottom'>
+  <section class='row py-5 border-gray border-top border-bottom border-opacity-25'>
     {%
       include 'partials::content-layout/cl_section-header.twig' with {
-      title: 'Daten über Schnittstelle nutzen'
+      title: 'Daten über Schnittstelle nutzen',
+      link: {
+      href: '#',
+      text: 'Artikel anzeigen',
+      }
       }
     %}
 
-    <p class='h2 mb-5'>
+    <p class='h2'>
       Erfahren Sie hier wie Sie mit der DKAN API unsere offenen Datensätze für Ihre eigenen Projekte anschauen,
       herunterladen und programmsteuern können.
     </p>
-
-    <div class='col-12 d-flex justify-content-end'>
-      <button class='btn btn-primary'>Alle Anzeigen</button>
-    </div>
   </section>
 {% endblock %}
diff --git a/src/partials/base/b_breadcrumbs.twig b/src/partials/base/b_breadcrumbs.twig
@@ -1,4 +1,4 @@
-<nav aria-label='breadcrumb'>
+<nav class='mt-5' aria-label='breadcrumb'>
   <ol class='breadcrumb'>
     {% for link in links %}
       {% if link.href is defined %}

diff --git a/src/partials/base/b_card.twig b/src/partials/base/b_card.twig
@@ -3,14 +3,14 @@
 
 <a href='{{ href }}' class='{{ classes }}'>
   {% if thumbnail %}
-    <div class='{{ direction == 'horizontal' ? 'col-4' : '' }} p-0'>
-      <div class='ratio ratio-16x9 h-100'>
+    <div class='{{ direction == 'horizontal' ? 'col-3' : '' }} p-0 border-end'>
+      <div class='ratio ratio-1x1 h-100'>
         <img src='{{ thumbnail.src }}' alt>
       </div>
     </div>
   {% endif %}
 
-  <div class='{{ direction == 'horizontal' ? 'col-7' : '' }} card-body d-flex flex-column gap-2'>
+  <div class='{{ direction == 'horizontal' ? 'col-8' : '' }} card-body d-flex flex-column gap-2'>
     <h3 class='card-title h5 d-flex gap-2 align-items-center mb-0'>
       <strong>{{ title }}</strong>
       {% if tag %}

diff --git a/src/partials/base/b_footer.twig b/src/partials/base/b_footer.twig
@@ -38,8 +38,8 @@
     <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
-          <a href='#' class='d-inline text-info'>NuCivic</a>
+          Powered by Stadt Köln and <a href='#' class='d-inline fw-bold'>DKAN</a>, a project of
+          <a href='#' class='d-inline fw-bold'>NuCivic</a>
         </p>
       </div>
     </div>

diff --git a/src/partials/base/b_header.twig b/src/partials/base/b_header.twig
@@ -1,4 +1,4 @@
-<header class='header mb-5 border-bottom'>
+<header class='header border-bottom'>
   <nav class='navbar navbar-expand-xl p-3 container d-flex justify-content-between'>
     <a
       href='./'
@@ -18,7 +18,9 @@
         aria-label='Hauptnavigation'
       >
         <div class='offcanvas-header d-flex gap-4 d-xl-none justify-content-end'>
-          <a href='./overview' class='link fs-3' aria-label='Datensätze suchen'><i class='bi bi-search'></i></a>
+          <a href='./overview' class='text-decoration-none fs-3' aria-label='Datensätze suchen'
+            ><i class='bi bi-search'></i
+          ></a>
           <button type='button' class='btn btn-outline-light' data-bs-dismiss='offcanvas' aria-label='Schließen'>
             <i class='bi bi-x-lg'></i>
           </button>

diff --git a/src/partials/base/b_hero.twig b/src/partials/base/b_hero.twig
@@ -1,3 +1,6 @@
-<div class='hero'>
-  <img src='{{ src }}' alt>
+{% set type = type is defined ? type : 'default' %}
+<div class='hero hero-{{ type }}'>
+  <div class='hero-inner'>
+    <img src='{{ src }}' alt>
+  </div>
 </div>
diff --git a/src/partials/content-layout/cl_dataset-hero.twig b/src/partials/content-layout/cl_dataset-hero.twig
diff --git a/src/partials/content-layout/cl_section-header.twig b/src/partials/content-layout/cl_section-header.twig
@@ -3,7 +3,7 @@
 
   {% if link is defined %}
     <p class='fs-5 m-0'>
-      <a href='{{ link.href }}'>{{ link.text }}</a>
+      <a href='{{ link.href }}' class='link'><i class='bi bi-arrow-return-right me-2'></i>{{ link.text }} </a>
     </p>
   {% endif %}
 </div>
diff --git a/src/partials/content-layout/cl_tile-showcase.twig b/src/partials/content-layout/cl_tile-showcase.twig
@@ -55,6 +55,6 @@
   </div>
 
   <div class='col-12 mt-5 d-flex justify-content-center'>
-    <button class='btn btn-primary'>Alle Anzeigen</button>
+    <button class='btn btn-primary'>Alle Kategorien anzeigen</button>
   </div>
 </div>
diff --git a/src/styles/base/_theme.scss b/src/styles/base/_theme.scss
@@ -7,4 +7,13 @@
     --btn-bg: var(--color-on-primary);
     --btn-color: var(--primary);
   }
+
+  .btn-outline-primary {
+    --btn-color: var(--color-on-primary);
+    --btn-border-color: var(--color-on-primary);
+    --btn-hover-border-color: var(--color-on-primary);
+    --btn-active-border-color: var(--color-on-primary);
+    --btn-hover-color: var(--primary);
+    --btn-hover-bg: var(--color-on-primary);
+  }
 }
diff --git a/src/styles/components/_button.scss b/src/styles/components/_button.scss
@@ -1,5 +1,7 @@
 .btn {
   --btn-focus-box-shadow: 0 0 0 var(--focus-ring-width) var(--focus-ring-color);
+  font-size: 1.25rem;
+  font-weight: 600;
 
   &:focus {
     border-color: var(--body-bg);

diff --git a/src/styles/components/_card.scss b/src/styles/components/_card.scss
@@ -0,0 +1,3 @@
+.card {
+  --card-border-color: var(--border-color);
+}
diff --git a/src/styles/components/_footer.scss b/src/styles/components/_footer.scss
@@ -11,4 +11,12 @@
     --nav-link-color: var(--footer-link-color);
     --nav-link-hover-color: var(--footer-link-hover-color);
   }
+
+  a {
+    color: var(---footer-link-color);
+
+    &:hover {
+      color: var(--footer-link-hover-color);
+    }
+  }
 }
diff --git a/src/styles/components/_header.scss b/src/styles/components/_header.scss
@@ -36,4 +36,13 @@
       box-shadow: var(--btn-focus-box-shadow);
     }
   }
+
+  .link {
+    border: 0;
+    padding: 0;
+
+    &:hover {
+      --link-hover-color-rgb: var(--light-rgb);
+    }
+  }
 }