diff --git a/assets/css/main.css b/assets/css/main.css index 22fea0b..385ae6e 100644 --- a/assets/css/main.css +++ b/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 { diff --git a/content/about.md b/content/about.md index fbd6827..839bf49 100644 --- a/content/about.md +++ b/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. diff --git a/hugo.toml b/hugo.toml index 3017cb9..2bf3608 100644 --- a/hugo.toml +++ b/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" diff --git a/layouts/_default/band.html b/layouts/_default/band.html index 0a75898..d8f8a61 100644 --- a/layouts/_default/band.html +++ b/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)) }} {{ end }} + +{{ with .Params.crew }} +{{ $photo := "" }}{{ with .image }}{{ $photo = resources.Get (strings.TrimPrefix "/" .) }}{{ end }} +
+

{{ .heading }}

+
+
+ {{ 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 }} + + {{ end }} +
+
+

{{ .name }}

+

{{ .role }}

+ {{ with .text }}

{{ . }}

{{ end }} + @{{ site.Params.photographer.handle }} auf Instagram +
+
+
+{{ end }} {{ end }} diff --git a/layouts/partials/footer.html b/layouts/partials/footer.html index 8e2a5af..c634ee1 100644 --- a/layouts/partials/footer.html +++ b/layouts/partials/footer.html @@ -12,6 +12,7 @@ diff --git a/static/img/about/Lukas_Ittenbach.jpg b/static/img/about/Lukas_Ittenbach.jpg new file mode 100644 index 0000000..ffa17ca Binary files /dev/null and b/static/img/about/Lukas_Ittenbach.jpg differ