Improve images, add medien and veranstaltungen image

_includes/header.njk

@@ -1,5 +1,32 @@
-<header class="page-header">
+<header class="page-header {% if hero %} page-header_hero {% endif %}">
   <h1 class="page-header-headline">{{ title | safe }}</h1>
-  <p class="page-header-subheadline">{{ header.subheadline | safe }}<p>
-  <a href="{{ header.headlineCta.link | safe }}" class="page-header-cta">{{ header.headlineCta.text | safe }}</a>
+
+  {% if header.subheadline %}
+    <p class="page-header-subheadline">{{ header.subheadline | safe }}<p>
+  {% endif %}
+
+  {% if header.headlineCta %}
+    <a href="{{ header.headlineCta.link | safe }}" class="page-header-cta">{{ header.headlineCta.text | safe }}</a>
+  {% endif %}
+
+  {% if pageImage %}
+    <figure class="page-header-image">
+      <img
+        class="page-header-image-tag"
+        src="/img/{{ pageImage.src }}-1920.jpg"
+        srcset="
+          /img/{{ pageImage.src }}-1024.jpg 1024w,
+          /img/{{ pageImage.src }}-1920.jpg 1920w,
+          /img/{{ pageImage.src }}-full.jpg full
+        "
+        sizes="
+          (max-width: 1024px) 1024px,
+          (max-width: 1920px) 1920px,
+          100vw
+        "
+        alt="{{ pageImage.description }}"
+      >
+      <figcaption class="page-header-image-description">{{ pageImage.description }}</figcaption>
+    </figure>
+  {% endif %}
 </header>

_includes/layouts/default.njk

@@ -1,6 +1,7 @@
 ---
 themeColor: #D02424
 language: de
+cssCacheBust: ?v=2
 
 header: null
 article: null
@@ -19,14 +20,14 @@ article: null
 
     <meta id="viewport" name="viewport" content="width=device-width, initial-scale=1.0">
 
-    <link rel="stylesheet" type="text/css" href="/styles.css" media="all" />
-    <link rel="stylesheet" type="text/css" href="/navigation.css" media="all" />
-    <link rel="stylesheet" type="text/css" href="/footer.css" media="all" />
-    <link rel="stylesheet" type="text/css" href="/google-fonts.css" media="all" />
+    <link rel="stylesheet" type="text/css" href="/styles.css{{ cssCacheBust }}" media="all" />
+    <link rel="stylesheet" type="text/css" href="/navigation.css{{ cssCacheBust }}" media="all" />
+    <link rel="stylesheet" type="text/css" href="/footer.css{{ cssCacheBust }}" media="all" />
+    <link rel="stylesheet" type="text/css" href="/google-fonts.css{{ cssCacheBust }}" media="all" />
 
     {% if extraStylesheets %}
       {% for extraStylesheet in extraStylesheets %}
-        <link rel="stylesheet" type="text/css" href="{{ extraStylesheet }}" media="all" />
+        <link rel="stylesheet" type="text/css" href="{{ extraStylesheet }}{{ cssCacheBust }}" media="all" />
       {% endfor %}
     {% endif %}
   </head>
@@ -37,15 +38,9 @@ article: null
 
     <div id="skip-to-content" class="skip-to-content"></div>
 
-    {% if header %}
-      {% block header %}
-        {% include "header.njk" %}
-      {% endblock %}
-    {% endif %}
-
-    {% if not header %}
-      <h1 class="page-title">{{ title | safe }}</h1>
-    {% endif %}
+    {% block header %}
+      {% include "header.njk" %}
+    {% endblock %}
 
     <main class="page-main">
       {% if article %}

footer.css

@@ -5,6 +5,7 @@
   flex-direction: row;
   justify-content: flex-start;
   flex-wrap: wrap;
+  height: auto;
   align-items: center;
   padding: 0 12px;
   background-color: var(--primary);
@@ -37,13 +38,20 @@
 
 .footer-links {
   display: flex;
-  flex-direction: row;
+  flex-direction: column;
   justify-content: center;
   align-items: center;
   list-style: none;
   padding: 0;
 }
 
+@media screen and (min-width: 768px) {
+  .footer-links {
+    flex-direction: row;
+    flex-wrap: wrap;
+  }
+}
+
 .footer-link {
   display: flex;
   height: auto;

index.yml

@@ -1,5 +1,11 @@
 layout: layouts/default.njk
 
+hero: true
+
+pageImage:
+  src: header
+  description: Ausflug zu den Poller Wiesen, ca. 1977, Alfred Koch / DOMiD-Archiv, Köln
+
 title: "Wir feiern ein Jubiläum: 60 Jahre deutsch-türkisches Anwerbeabkommen"
 
 header:

medien/index.yml

@@ -3,7 +3,11 @@ layout: layouts/default.njk
 extraStylesheets:
   - /media.css
 
-title: "Medien"
+title: Medien
+
+pageImage:
+  src: obst-gemuese
+  description: Lebensmittelgeschäft im Kölner Eigelstein/Weidengasse, 1982, Guenay Ulutuncok / DOMiD-Archiv, Köln
 
 article: "
 ## Benim Müzem – Mein Museum

styles.css

@@ -62,14 +62,16 @@
 }
 
 .page-header {
-  height: 100vh;
   justify-content: center;
-  background-image: url(/img/header-1024.jpg);
-  background-size: cover;
-  background-position: bottom right;
-  background-repeat: no-repeat;
   position: relative;
   border-bottom: 5px solid var(--primary);
+  margin-top: 20vh;
+  height: 70vh;
+}
+
+.page-header_hero {
+  margin-top: 0;
+  height: 100vh;
 }
 
 @media screen and (min-width: 768px) {
@@ -81,20 +83,7 @@
   }
 }
 
-@media screen and (min-width: 1025px) {
-  .page-header {
-    background-image: url(/img/header-1920.jpg);
-    background-position: center;
-  }
-}
-
-@media screen and (min-width: 1921px) {
-  .page-header {
-    background-image: url(/img/header-full.jpg);
-  }
-}
-
-.page-header::before {
+.page-header-image::before {
   content: '';
   display: block;
   position: absolute;
@@ -106,7 +95,7 @@
   mix-blend-mode: multiply;
 }
 
-.page-header > * {
+.page-header > *:not(.page-header-image) {
   z-index: 1;
   color: var(--primary-font);
   margin: 0;
@@ -164,6 +153,41 @@
   color: var(--primary-font);
 }
 
+.page-header-image {
+  z-index: -1;
+  margin: 0;
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  justify-content: flex-start;
+  align-items: flex-end;
+}
+
+.page-header-image-tag {
+  z-index: -1;
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  object-position: top;
+}
+
+.page-header-image-description {
+  padding: 0 var(--side-padding);
+  color: var(--primary-font);
+  font-size: 0.8rem;
+  z-index: 10;
+}
+
 .page-header,
 .page-main {
   width: 100%;
@@ -173,7 +197,7 @@
   padding-right: var(--side-padding);
 }
 
-.page-header > *,
+.page-header > *:not(.page-header-image),
 .page-main > * {
   max-width: var(--max-content-width);
 }

veranstaltungen/index.yml

@@ -5,6 +5,10 @@ extraStylesheets:
 
 title: Veranstaltungen
 
+pageImage:
+  src: kino
+  description: Italienisch-türkisches Kino im Kölner Eigelstein/Weidengasse, 1982, Guenay Ulutuncok / DOMiD-Archiv, Köln
+
 article: "
   Am 30.10. 2021 jährt sich das bundesdeutsche Anwerbeabkommen mit der Türkei zum sechzigsten Mal. In der Woche vom 26.10. bis 30.10.2021 sind zahlreiche Veranstaltungen geplant, die die Stadt Köln federführend oder als Kooperationspartner ausrichten wird. Auf den folgenden Seiten finden Sie dazu eine kurze Übersicht.
 "