diff --git a/_includes/header.njk b/_includes/header.njk index 4039abb..18e9234 100644 --- a/_includes/header.njk +++ b/_includes/header.njk @@ -1,5 +1,32 @@ -
+

{{ title | safe }}

-

{{ header.subheadline | safe }}

- {{ header.headlineCta.text | safe }} + + {% if header.subheadline %} +

{{ header.subheadline | safe }}

+ {% endif %} + + {% if header.headlineCta %} + {{ header.headlineCta.text | safe }} + {% endif %} + + {% if pageImage %} +

+ {{ pageImage.description }} +
{{ pageImage.description }}
+
+ {% endif %}
diff --git a/_includes/layouts/default.njk b/_includes/layouts/default.njk index 4309b3a..638d0c1 100644 --- a/_includes/layouts/default.njk +++ b/_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 - - - - + + + + {% if extraStylesheets %} {% for extraStylesheet in extraStylesheets %} - + {% endfor %} {% endif %} @@ -37,15 +38,9 @@ article: null - {% if header %} - {% block header %} - {% include "header.njk" %} - {% endblock %} - {% endif %} - - {% if not header %} -

{{ title | safe }}

- {% endif %} + {% block header %} + {% include "header.njk" %} + {% endblock %}
{% if article %} diff --git a/footer.css b/footer.css index 3ef9f99..51b3533 100644 --- a/footer.css +++ b/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; diff --git a/img/Bild10_E 1053,0315.png b/img/Bild10_E 1053,0315.png deleted file mode 100644 index ee79818..0000000 Binary files a/img/Bild10_E 1053,0315.png and /dev/null differ diff --git a/img/Bild10_E 1053,0315@2x.png b/img/Bild10_E 1053,0315@2x.png deleted file mode 100644 index 27b2b64..0000000 Binary files a/img/Bild10_E 1053,0315@2x.png and /dev/null differ diff --git a/img/Bild20_E 1053,0373.png b/img/Bild20_E 1053,0373.png deleted file mode 100644 index d63b28a..0000000 Binary files a/img/Bild20_E 1053,0373.png and /dev/null differ diff --git a/img/Bild20_E 1053,0373@2x.png b/img/Bild20_E 1053,0373@2x.png deleted file mode 100644 index 2fe97e8..0000000 Binary files a/img/Bild20_E 1053,0373@2x.png and /dev/null differ diff --git a/img/kino-1024.jpg b/img/kino-1024.jpg new file mode 100644 index 0000000..8b3ef7b Binary files /dev/null and b/img/kino-1024.jpg differ diff --git a/img/kino-1920.jpg b/img/kino-1920.jpg new file mode 100644 index 0000000..1b56c3d Binary files /dev/null and b/img/kino-1920.jpg differ diff --git a/img/kino-full.jpg b/img/kino-full.jpg new file mode 100644 index 0000000..e4b8436 Binary files /dev/null and b/img/kino-full.jpg differ diff --git a/img/obst-gemuese-1024.jpg b/img/obst-gemuese-1024.jpg new file mode 100644 index 0000000..1c27205 Binary files /dev/null and b/img/obst-gemuese-1024.jpg differ diff --git a/img/obst-gemuese-1920.jpg b/img/obst-gemuese-1920.jpg new file mode 100644 index 0000000..97f3fee Binary files /dev/null and b/img/obst-gemuese-1920.jpg differ diff --git a/img/obst-gemuese-full.jpg b/img/obst-gemuese-full.jpg new file mode 100644 index 0000000..a9a7a29 Binary files /dev/null and b/img/obst-gemuese-full.jpg differ diff --git a/index.yml b/index.yml index 38eac87..391fdc6 100644 --- a/index.yml +++ b/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: diff --git a/medien/index.yml b/medien/index.yml index a9de6c3..1958a44 100644 --- a/medien/index.yml +++ b/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 diff --git a/styles.css b/styles.css index 7c88985..83bebbf 100644 --- a/styles.css +++ b/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); } diff --git a/veranstaltungen/index.yml b/veranstaltungen/index.yml index 1d00ba2..ef3e0b1 100644 --- a/veranstaltungen/index.yml +++ b/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. "