Second online version

_config.ts

@@ -8,8 +8,9 @@ const site = lume({}, { markdown });
 site.use(postcss());
 
 site.loadAssets([
-  ".svg",
   ".png",
+  ".jpg",
+  ".svg",
   ".pdf",
 ]);
 

_includes/header.njk

@@ -1,7 +1,7 @@
 {% if header %}
 <header class="page-header">
-  <h1 class="page-header-headline">{{ title }}</h1>
-  <p class="page-header-subheadline">{{ header.subheadline }}<p>
-  <a href="{{ header.headlineCta.link }}" class="page-header-cta">{{ header.headlineCta.text }}</a>
+  <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>
 </header>
 {% endif %}

_includes/navigation.njk

@@ -1,9 +1,17 @@
 <nav class="navigation">
-  <a href="/" class="logo navigation-link">Logo</a>
+  <a href="/" class="logo navigation-link">
+    <img
+      class="logo-image"
+      src="/img/logo.png"
+      alt="Unser Logo"
+    />
+  </a>
   <ul class="menu">
+  {#
     <li class="menu-item">
       <a href="/geschichte" class="navigation-link">Geschichte</a>
     </li>
+  #}
     <li class="menu-item">
       <a href="/veranstaltungen" class="navigation-link">Veranstaltungen</a>
     </li>

downloads.css

@@ -31,6 +31,7 @@
   flex-direction: row;
   flex-wrap: wrap;
   background-color: var(--primary);
+  border-radius: 5px;
   height: auto;
 }
 @media screen and (min-width: 1400px) {

styles.css

@@ -44,6 +44,8 @@
   color: var(--primary-font);
   text-decoration: none;
   padding: 12px 24px;
+  display: flex;
+  align-items: center;
 }
 
 .logo {
@@ -53,6 +55,10 @@
   border-bottom-right-radius: 5px;
 }
 
+.logo-image {
+  height: 35px;
+}
+
 .menu {
   list-style: none;
   display: flex;
@@ -73,9 +79,9 @@
 .page-header {
   height: 100vh;
   justify-content: center;
-  background-image: url(/img/header.png);
+  background-image: url(/img/header-1024.jpg);
   background-size: cover;
-  background-position: center;
+  background-position: bottom right;
   background-repeat: no-repeat;
   position: relative;
   border-bottom: 5px solid var(--primary);
@@ -84,12 +90,25 @@
 @media screen and (min-width: 768px) {
   .page-header {
     grid-column-start: 1;
-    grid-column-end: 2;
+    grid-column-end: 3;
     grid-row-start: 1;
     grid-row-end: 2;
   }
 }
 
+@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 {
   content: '';
   display: block;
@@ -124,6 +143,10 @@
   text-decoration: none;
 }
 
+.page-header-cta:hover {
+  text-decoration: underline;
+}
+
 .page-header,
 .page-main {
   width: 100%;
@@ -159,7 +182,8 @@
   padding-right: var(--side-padding);
 }
 
-.navigation + .page-title {
+.navigation + .page-title,
+.page-header + .page-main {
   margin-top: 20vh;
 }
 

unterricht/index.yml

@@ -3,7 +3,7 @@ layout: layouts/default.njk
 extraStylesheets:
   - /downloads.css
 
-title: Begleitende Unterrichts­materialien zur Jubiläums­woche „60 Jahre Anwerbe­abkommen der Türkei mit der Bundes­republik Deutschland“ S
+title: Begleitende Unterrichts­materialien zur Jubiläums­woche „60 Jahre Anwerbe­abkommen der Türkei mit der Bundes­republik Deutschland“
 
 article: "
     Das Auswärtige Amt in Bonn unterzeichnete gemeinsam mit der türkischen Botschaft am 30.10.1961 ein Anwerbeabkommen, in dessen Folge sich türkische Arbeiter*innen auf eine Stelle in Deutschland bewerben konnten. Zuvor wurden bereits Abkommen mit Italien (1955), Griechenland (1960) und Spanien (1960) abgeschlossen. Es folgten Marokko (1963), die Republik Korea (1963), Portugal (1964), Tunesien (1965) und das damalige Jugoslawien (1968, heute: Slowenien, Kroatien, Bosnien-Herzegowina, Serbien, Montenegro, Republik Nordmazedonien und das Kosovo).