feat: minor improvements

src/pages/homepage-extended-categories.twig

@@ -0,0 +1,207 @@
+{% extends 'layouts::base.twig' %}
+{% set theme = 'default' %}
+{%
+  set skip_links = [
+  { href: '#content', text: 'Zum Inhalt' },
+  ]
+%}
+
+{% block content %}
+  <section id='homepage-search' class='row pb-3 pb-lg-5'>
+    <div class='col-12'>
+      {%
+        include 'partials::base/b_hero.twig' with {
+        src: 'https://picsum.photos/960/540',
+        type: 'background'
+        }
+      %}
+
+      <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 form-control-lg fs-5 mr-sm-2'
+                  type='search'
+                  placeholder='Datensätze suchen'
+                  aria-label='Datensätze suchen'
+                >
+                <button class='btn btn-outline-primary fs-5' type='submit' aria-label='Suchen'>
+                  <i class='bi bi-search'></i>
+                </button>
+              </form>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </section>
+
+  <section id='content' 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>
+
+  <section class='row pb-5 mb-3'>
+    {%
+      include 'partials::content-layout/cl_section-header.twig' with {
+      title: 'Beliebte Datensätze',
+      link: {
+      href: './overview',
+      text: 'Alle Datensätze',
+      }
+      }
+    %}
+
+    <div class='col-lg-6 mb-3'>
+      {%
+        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-lg-6 mb-3'>
+      {%
+        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-lg-6 my-3'>
+      {%
+        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-lg-6 my-3'>
+      {%
+        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-lg-6 mt-3'>
+      {%
+        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-lg-6 mt-3'>
+      {%
+        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 mb-3 border-gray border-top border-opacity-25'>
+    {%
+      include 'partials::content-layout/cl_section-header.twig' with {
+      title: 'News',
+      link: {
+      href: '#',
+      text: 'Alle News anzeigen',
+      }
+      }
+    %}
+
+    <div class='col-12'>
+      {%
+        include 'partials::base/b_highlight-teaser.twig' with {
+        content: "
+        <h3 class='mb-3'>Title lorem ipsum</h3>
+        <p class='fs-5 text-lg 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-primary align-self-center align-self-lg-start' href='#'>Weiterlesen</a>
+        "
+        }
+      %}
+    </div>
+  </section>
+
+  <section class='row py-5 mb-3 border-gray border-top border-opacity-25'>
+    {%
+      include 'partials::content-layout/cl_section-header.twig' with {
+      title: 'Beliebte Kategorien'
+      }
+    %}
+
+    <div class='col-12'>
+      {% include 'partials::content-layout/cl_tile-showcase-extended.twig' %}
+    </div>
+  </section>
+
+  <section class='row py-5 mb-3 border-gray border-top border-bottom border-opacity-25'>
+    {%
+      include 'partials::content-layout/cl_section-header.twig' with {
+      title: 'Daten über Schnittstelle nutzen',
+      link: {
+      href: '#',
+      text: 'Artikel anzeigen',
+      }
+      }
+    %}
+
+    <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>
+  </section>
+{% endblock %}

src/pages/index.twig

@@ -5,7 +5,10 @@
   set templates = [
   {
   name: 'Home',
-  variants: [{ href: './homepage', label: 'Default ✅', thumbnail: 'homepage.webp', thumbnail_dark: 'homepage-dark.webp'}]
+  variants: [
+  { href: './homepage', label: 'Default ✅', thumbnail: 'homepage.webp', thumbnail_dark: 'homepage-dark.webp'},
+  { href: './homepage-extended-categories', label: 'With extended categories ✅', thumbnail: 'homepage.webp', thumbnail_dark: 'homepage-dark.webp'}
+  ]
   },
   {
   name: 'Dataset Overview',

src/partials/base/b_footer.twig

@@ -1,7 +1,7 @@
 <footer class='footer border-top mt-5'>
   <div class='container pt-5 pb-4'>
     <div class='row gap-5 gap-md-0'>
-      <div class='col-12 col-md-4'>
+      <div class='col-12 col-md-4 d-flex flex-column gap-4'>
         <a
           href='./'
           aria-current='page'
@@ -10,6 +10,13 @@
         >
           <img class='logo' src='./assets/odk-logo-dark.svg' alt='Offene Daten Köln'>
         </a>
+        <a
+          href='https://www.stadt-koeln.de/'
+          class='nav-link d-flex align-items-center text-dark text-decoration-none'
+          title='Startseite Stadt Köln'
+        >
+          <img class='logo' src='./assets/stadt-koeln-logo-dark.svg' alt='Stadt Köln'>
+        </a>
       </div>
 
       <div class='col-12 col-md-4'>
@@ -37,10 +44,7 @@
     </div>
     <div class='row mt-5'>
       <div class='col-12'>
-        <p class='m-0'>
-          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>
+        <p class='m-0'>Powered by Stadt Köln and <a href='https://getdkan.org/' class='d-inline fw-bold'>DKAN</a>.</p>
       </div>
     </div>
   </div>

src/partials/base/b_tile.twig

@@ -2,6 +2,6 @@
   <div class='tile-ratio'></div>
   <div class='d-flex flex-column justify-content-center align-items-center'>
     <i class='bi bi-{{ icon }} fs-1'></i>
-    <p>{{ name }}</p>
+    <p class='text-center'>{{ name }}</p>
   </div>
 </a>

src/partials/content-layout/cl_app.twig

@@ -5,7 +5,7 @@
 
   <div class='card-body pt-4'>
     {% if href is not defined %}
-      <span class='badge badge-small border border-2 border-body text-body mb-2'>Nicht Verfügbar</span>
+      <span class='badge badge-small border border-2 border-body text-body mb-2'>Betrieb eingestellt</span>
     {% endif %}
     <h3 class='h5 fw-semibold'>{{ title }}</h3>
     {% if description is defined %}

src/partials/content-layout/cl_tile-showcase-extended.twig

@@ -0,0 +1,120 @@
+<div class='row'>
+  <div class='col-6 col-md-3 mb-4 col-lg-2'>
+    {%
+      include 'partials::base/b_tile.twig' with {
+      href: '#',
+      icon: 'bar-chart-steps',
+      name: 'Bevölkerung'
+      }
+    %}
+  </div>
+  <div class='col-6 col-md-3 mb-4 col-lg-2'>
+    {%
+      include 'partials::base/b_tile.twig' with {
+      href: '#',
+      icon: 'compass',
+      name: 'Geo'
+      }
+    %}
+  </div>
+  <div class='col-6 col-md-3 mb-4 col-lg-2'>
+    {%
+      include 'partials::base/b_tile.twig' with {
+      href: '#',
+      icon: 'pie-chart',
+      name: 'Politik & Wahlen'
+      }
+    %}
+  </div>
+  <div class='col-6 col-md-3 mb-4 col-lg-2'>
+    {%
+      include 'partials::base/b_tile.twig' with {
+      href: '#',
+      icon: 'bicycle',
+      name: 'Transport & Verkehr'
+      }
+    %}
+  </div>
+  <div class='col-lg-2 mb-4 d-none d-lg-block'>
+    {%
+      include 'partials::base/b_tile.twig' with {
+      href: '#',
+      icon: 'bank2',
+      name: 'Infrastruktur'
+      }
+    %}
+  </div>
+  <div class='col-lg-2 mb-4 d-none d-lg-block'>
+    {%
+      include 'partials::base/b_tile.twig' with {
+      href: '#',
+      icon: 'graph-down',
+      name: 'Umwelt & Klima'
+      }
+    %}
+  </div>
+
+  <div class='col-md-3 col-lg-2 d-none d-md-block'>
+    {%
+      include 'partials::base/b_tile.twig' with {
+      href: '#',
+      icon: 'bar-chart-steps',
+      name: 'Bevölkerung'
+      }
+    %}
+  </div>
+  <div class='col-md-3 col-lg-2 d-none d-md-block'>
+    {%
+      include 'partials::base/b_tile.twig' with {
+      href: '#',
+      icon: 'compass',
+      name: 'Geo'
+      }
+    %}
+  </div>
+  <div class='col-md-3 col-lg-2 d-none d-md-block'>
+    {%
+      include 'partials::base/b_tile.twig' with {
+      href: '#',
+      icon: 'pie-chart',
+      name: 'Politik & Wahlen'
+      }
+    %}
+  </div>
+  <div class='col-md-3 col-lg-2 d-none d-md-block'>
+    {%
+      include 'partials::base/b_tile.twig' with {
+      href: '#',
+      icon: 'bicycle',
+      name: 'Transport & Verkehr'
+      }
+    %}
+  </div>
+  <div class='col-lg-2 d-none d-lg-block'>
+    {%
+      include 'partials::base/b_tile.twig' with {
+      href: '#',
+      icon: 'bank2',
+      name: 'Infrastruktur'
+      }
+    %}
+  </div>
+  <div class='col-lg-2 d-none d-lg-block'>
+    {%
+      include 'partials::base/b_tile.twig' with {
+      href: '#',
+      icon: 'graph-down',
+      name: 'Umwelt & Klima'
+      }
+    %}
+  </div>
+
+  <div class='col-12 mt-5 d-flex justify-content-center'>
+    {%
+      include 'partials::base/b_link.twig' with {
+      text: 'Alle Kategorien anzeigen',
+      icon: 'plus-lg'
+      }
+    %}
+  </div>
+</div>