Added Lukas

assets/css/main.css

@@ -522,6 +522,44 @@ p { margin: 0 0 1em; }
 }
 .group-photo img { width: 100%; }
 
+.crew { padding-block: clamp(4rem, 10vw, 6rem); }
+.crew > .display { margin-bottom: 2rem; }
+.crew__body {
+    display: grid;
+    gap: 2rem 3rem;
+    align-items: end;
+}
+@media (min-width: 40rem) {
+    .crew__body { grid-template-columns: minmax(0, 18rem) minmax(0, 1fr); }
+}
+.crew__photo {
+    display: grid;
+    place-items: center;
+    max-width: 18rem;
+    aspect-ratio: 4 / 5;
+    overflow: hidden;
+    background: var(--deep-2);
+    border: 2px solid var(--line);
+}
+.crew__photo img { width: 100%; height: 100%; object-fit: cover; }
+.crew__initials {
+    font-family: var(--font-display);
+    font-weight: 900;
+    font-size: 6rem;
+    line-height: 1;
+    color: var(--bolt);
+}
+.crew__name {
+    font-family: var(--font-display);
+    font-weight: 900;
+    font-size: clamp(2.5rem, 6vw, 4rem);
+    line-height: .9;
+    text-transform: uppercase;
+}
+.crew__role { margin: .5rem 0 1rem; color: var(--mist); font-weight: 600; }
+.crew__text { max-width: 45ch; margin-bottom: 1.75rem; }
+.button--handle { text-transform: none; }
+
 /* ---------- Musik ---------- */
 
 .album {

content/about.md

@@ -17,5 +17,11 @@ members:
     role: "Bass"
     image: "/img/about/Felix_compressed.jpg"
 groupImage: "/img/about/Gruppenbild_compressed.jpg"
+crew:
+  heading: "Hinter der Kamera"
+  name: "Lukas Ittenbach"
+  role: "Video und Fotografie"
+  image: "/img/about/Lukas_Ittenbach.jpg"
+  text: "Von Lukas stammen die Fotos und Videos von Deepwater Survival."
 ---
 Vier Leute, zwei Gitarren, ein Bass, ein Schlagzeug. Deepwater Survival sind Olly, Lucas, Ahrens und Felix aus Trier.

hugo.toml

@@ -13,6 +13,10 @@ buildFuture = true
   spotifyEmbed = "https://open.spotify.com/embed/artist/2TQ9HNBTNCmUthpg9ippHs?utm_source=generator&theme=0"
   instagram = "https://www.instagram.com/deepwatersurvival/"
   youtube = "https://www.youtube.com/@deepwatersurvival730"
+  [params.photographer]
+    name = "Lukas Ittenbach"
+    handle = "shot__itt"
+    instagram = "https://www.instagram.com/shot__itt/"
 
 [[menu.main]]
   name = "Home"

layouts/_default/band.html

@@ -23,4 +23,26 @@
     {{ partial "img.html" (dict "src" . "alt" "Gruppenfoto von Deepwater Survival im Backstage-Flur" "sizes" "100vw" "widths" (slice 800 1400 2000)) }}
 </figure>
 {{ end }}
+
+{{ with .Params.crew }}
+{{ $photo := "" }}{{ with .image }}{{ $photo = resources.Get (strings.TrimPrefix "/" .) }}{{ end }}
+<section class="wrap crew" aria-labelledby="crew-heading">
+    <h2 id="crew-heading" class="display">{{ .heading }}</h2>
+    <div class="crew__body">
+        <div class="crew__photo">
+            {{ if $photo }}
+            {{ partial "img.html" (dict "res" $photo "alt" (printf "Porträt von %s" .name) "sizes" "(min-width: 900px) 20rem, 60vw" "widths" (slice 400 800)) }}
+            {{ else }}
+            <span class="crew__initials" aria-hidden="true">{{ range split .name " " }}{{ substr . 0 1 }}{{ end }}</span>
+            {{ end }}
+        </div>
+        <div class="crew__info">
+            <h3 class="crew__name">{{ .name }}</h3>
+            <p class="crew__role">{{ .role }}</p>
+            {{ with .text }}<p class="crew__text">{{ . }}</p>{{ end }}
+            <a class="button button--ghost button--handle" href="{{ site.Params.photographer.instagram }}" target="_blank" rel="noopener">@{{ site.Params.photographer.handle }} auf Instagram</a>
+        </div>
+    </div>
+</section>
+{{ end }}
 {{ end }}

layouts/partials/footer.html

@@ -12,6 +12,7 @@
     </div>
     <div class="site-footer__legal">
         <p>© {{ now.Year }} Deepwater Survival</p>
+        {{ with site.Params.photographer }}<p>Alle Fotos von <a href="{{ .instagram }}" target="_blank" rel="noopener">@{{ .handle }}</a> ({{ .name }})</p>{{ end }}
         <p><a href="/impressum/">Impressum</a> <a href="/datenschutz/">Datenschutz</a></p>
     </div>
 </footer>