add start page image

_includes/index.css

@@ -9,6 +9,35 @@
   background-color: grey;
 }
 
+.background-image {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  overflow: hidden;
+}
+
+.background-image::after {
+  content: "";
+  display: block;
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  background: var(--color-primary);
+  opacity: .5;
+}
+
+.background-image img {
+  max-width: 100%;
+  max-height: 100%;
+  object-fit: cover;
+  filter: saturate(30%);
+  user-select: none;
+}
+
 .badge {
   transform: skew(-4deg) rotate(-4deg);
   max-width: calc(100vw - 2rem);
@@ -94,4 +123,7 @@
   .badge .date {
     font-size: 16px;
   }
+  .badge h1 span {
+    font-size: 18px;
+  }
 }

_includes/index.njk

@@ -3,7 +3,10 @@ layout: page.njk
 ---
 <section class="introduction">
   <div class="background-image">
-
+    {% set alt = "View from the APB foyer towards the entrance, with the iconic green steel sculptures in the foreground."
+      if lang == "en"
+      else "Blick vom APB Foyer Richtung Eingang, im Vordergrund sind die ikonischen grünen Stahlskulpturen zu sehen." %}
+    {% image "content/images/foyer.jpg", alt, "100vw" %}
   </div>
 
   <div class="badge">