Addedf Releases Site

assets/css/main.css

@@ -524,24 +524,50 @@ p { margin: 0 0 1em; }
 
 /* ---------- Musik ---------- */
 
-.release {
+.album {
     display: grid;
-    gap: 2.5rem 4rem;
+    gap: 3rem 5rem;
-    padding-bottom: clamp(3rem, 8vw, 5rem);
+    padding-bottom: clamp(4rem, 10vw, 7rem);
 }
 @media (min-width: 56rem) {
-    .release { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; }
+    .album { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); align-items: center; }
 }
-.release__kind { margin-bottom: .5rem; color: var(--mist); font-weight: 600; }
+
-.release__title {
+/* Die Platte rutscht aus der Hülle */
+.album__sleeve {
+    position: relative;
+    width: 72%;
+    max-width: 30rem;
+}
+.album__cover {
+    position: relative;
+    z-index: 1;
+    box-shadow: 0 2rem 3rem -1.5rem rgba(0, 0, 0, .8);
+}
+.album__cover img { width: 100%; }
+.album__vinyl {
+    position: absolute;
+    inset: 3%;
+    border-radius: 50%;
+    background:
+        radial-gradient(circle, var(--deep) 0 2.5%, var(--red) 2.6% 17%, #1a1a1a 17.5% 19%, transparent 19.5%),
+        repeating-radial-gradient(circle, #111 0 1px, #1c1c1c 1.5px 3px);
+    box-shadow: inset 0 0 0 2px #000, 0 1rem 2rem -1rem rgba(0, 0, 0, .8);
+    transform: translateX(34%);
+    transition: transform .6s cubic-bezier(.2, .8, .2, 1);
+}
+.album__sleeve:hover .album__vinyl { transform: translateX(42%) rotate(40deg); }
+
+.album__kind { margin-bottom: .75rem; color: var(--mist); font-weight: 600; }
+.album__title {
     font-family: var(--font-display);
     font-weight: 900;
-    font-size: clamp(4rem, 12vw, 8rem);
+    font-size: clamp(4rem, 11vw, 8rem);
     line-height: .82;
     text-transform: uppercase;
     color: var(--bolt);
 }
-.release__text { max-width: 40ch; margin: 1.5rem 0 2rem; font-size: 1.15rem; }
+.album__text { max-width: 40ch; margin: 1.5rem 0 2rem; font-size: 1.15rem; }
 
 .spotify {
     display: flex;
@@ -560,39 +586,35 @@ p { margin: 0 0 1em; }
 .spotify iframe { display: block; width: 100%; border: 0; }
 .spotify.is-loaded { padding: 0; border: 0; background: none; }
 
-.singles { padding-bottom: clamp(3rem, 8vw, 5rem); }
+.discography,
-.singles > .display { margin-bottom: 1.5rem; }
+.listen { padding-bottom: clamp(4rem, 10vw, 6rem); }
+.discography > .display,
+.listen > .display { margin-bottom: 2rem; }
 
-.tracklist {
+.covers {
-    max-width: 40rem;
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(min(100%, 12rem), 1fr));
+    gap: 2.5rem 2rem;
     margin: 0;
     padding: 0;
     list-style: none;
-    counter-reset: track;
 }
-.tracklist li {
+@media (max-width: 34rem) {
-    display: flex;
+    .covers { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem 1rem; }
-    align-items: baseline;
-    gap: 1rem;
-    padding: .9rem 0;
-    border-bottom: 1px solid var(--line);
-    counter-increment: track;
 }
-.tracklist li::before {
+.cover__img { aspect-ratio: 1; background: var(--deep-2); box-shadow: 0 1.25rem 2rem -1rem rgba(0, 0, 0, .7); }
-    content: counter(track);
+.cover__img img { width: 100%; height: 100%; object-fit: cover; }
-    min-width: 1.5rem;
+.cover__title {
-    color: var(--mist);
+    margin-top: 1rem;
-    font-variant-numeric: tabular-nums;
-}
-.tracklist__title {
-    flex: 1;
     font-family: var(--font-display);
-    font-weight: 800;
+    font-weight: 900;
-    font-size: 1.75rem;
+    font-size: clamp(1.4rem, 3vw, 1.9rem);
+    line-height: .95;
     text-transform: uppercase;
-    line-height: 1;
 }
-.tracklist__year { color: var(--mist); font-variant-numeric: tabular-nums; }
+.cover__meta { margin: .35rem 0 0; font-size: .95rem; color: var(--mist); }
+
+.listen .spotify { max-width: 40rem; }
 
 .elsewhere { padding-bottom: clamp(4rem, 10vw, 7rem); }
 .elsewhere > .display { margin-bottom: 1.5rem; }

content/music/_index.md

@@ -1,17 +1,6 @@
 ---
 title: "Musik"
 description: "Das Debütalbum „Ocean Tales“ und alle Singles von Deepwater Survival."
-album:
+albumText: "Unser Debütalbum. Mit dabei sind auch die Singles „My Own Home“, „Chirus“, „Let It Go“ und „Addiction“."
-  title: "Ocean Tales"
-  kind: "Debütalbum"
-  year: 2025
-  text: "Alle bisherigen Singles sind fast unverändert auf dem Album gelandet."
-singles:
-  - title: "Chirus"
-    year: 2023
-  - title: "Let It Go"
-    year: 2024
-  - title: "Addiction"
-  - title: "My Own Home"
 ---
-Unsere Releases, Singles und Alben.
+Alle Releases, vom ersten Song bis zum Debütalbum.

hugo.toml

@@ -49,3 +49,7 @@ buildFuture = true
   [[module.mounts]]
     source = "assets"
     target = "assets"
+  # Release-Cover: Dateiname = [JJJJMMTT]_[Single|Album]_[Name].jpg
+  [[module.mounts]]
+    source = "releases"
+    target = "assets/img/releases"

layouts/music/list.html

@@ -1,37 +1,55 @@
 {{ define "main" }}
+{{ $releases := partial "releases.html" . }}
+{{/* Hervorgehoben wird das neueste Album, ohne Album das neueste Release. */}}
+{{ $featured := false }}
+{{ with where $releases "kind" "Album" }}{{ $featured = index . 0 }}{{ else }}{{ with $releases }}{{ $featured = index . 0 }}{{ end }}{{ end }}
+
 <header class="page-head wrap">
     <h1 class="display display--xl">{{ .Title }}</h1>
     {{ with .Content }}<div class="page-head__lead">{{ . }}</div>{{ end }}
 </header>
 
-<section class="wrap release">
+{{ with $featured }}
-    {{ with .Params.album }}
+<section class="wrap album" aria-labelledby="album-title">
-    <div class="release__album">
+    <div class="album__sleeve">
-        <p class="release__kind">{{ .kind }}, {{ .year }}</p>
+        <div class="album__vinyl" aria-hidden="true"></div>
-        <h2 class="release__title">{{ .title }}</h2>
+        <div class="album__cover">
-        {{ with .text }}<p class="release__text">{{ . }}</p>{{ end }}
+            {{ partial "img.html" (dict "res" .cover "alt" (printf "Cover von %s" .title) "sizes" "(min-width: 900px) 30rem, 80vw" "widths" (slice 480 800) "eager" true) }}
+        </div>
+    </div>
+    <div class="album__info">
+        <p class="album__kind">{{ .kind }}, erschienen am {{ .date | time.Format "2. January 2006" }}</p>
+        <h2 id="album-title" class="album__title">{{ .title }}</h2>
+        {{ with $.Params.albumText }}<p class="album__text">{{ . }}</p>{{ end }}
         <a class="button button--bolt" href="{{ site.Params.spotify }}" target="_blank" rel="noopener">Auf Spotify hören</a>
     </div>
-    {{ end }}
-    <div class="release__player">
-        {{ partial "spotify.html" . }}
-    </div>
 </section>
+{{ end }}
 
-{{ with .Params.singles }}
+{{ $rest := slice }}
-<section class="wrap singles" aria-labelledby="singles">
+{{ range $releases }}{{ if or (not $featured) (ne .key $featured.key) }}{{ $rest = $rest | append . }}{{ end }}{{ end }}
-    <h2 id="singles" class="display">Singles</h2>
+{{ with $rest }}
-    <ol class="tracklist">
+<section class="wrap discography" aria-labelledby="diskografie">
+    <h2 id="diskografie" class="display">Diskografie</h2>
+    <ol class="covers">
         {{ range . }}
-        <li>
+        <li class="cover">
-            <span class="tracklist__title">{{ .title }}</span>
+            <div class="cover__img">
-            {{ with .year }}<span class="tracklist__year">{{ . }}</span>{{ end }}
+                {{ partial "img.html" (dict "res" .cover "alt" (printf "Cover von %s" .title) "sizes" "(min-width: 900px) 22rem, 45vw" "widths" (slice 400 800)) }}
+            </div>
+            <h3 class="cover__title">{{ .title }}</h3>
+            <p class="cover__meta">{{ .kind }}, <time datetime="{{ .date.Format "2006-01-02" }}">{{ .date | time.Format "2. January 2006" }}</time></p>
         </li>
         {{ end }}
     </ol>
 </section>
 {{ end }}
 
+<section class="wrap listen" aria-labelledby="reinhoeren">
+    <h2 id="reinhoeren" class="display">Reinhören</h2>
+    {{ partial "spotify.html" . }}
+</section>
+
 <section class="wrap elsewhere" aria-labelledby="elsewhere">
     <h2 id="elsewhere" class="display">Mehr von uns</h2>
     <ul class="elsewhere__list">

layouts/partials/img.html

@@ -1,13 +1,15 @@
 {{/*
   Responsives Bild aus static/img (über assets/img gemountet).
-  Parameter: src (z. B. "/img/about/Olly_compressed.jpg"), alt, sizes, widths, class, eager
+  Parameter: src (z. B. "/img/about/Olly_compressed.jpg") oder res (fertige Ressource),
+  alt, sizes, widths, class, eager
 */}}
+{{- $r := .res -}}
 {{- $src := .src -}}
+{{- if $r }}{{ $src = $r.Name }}{{ else }}{{ $r = resources.Get (strings.TrimPrefix "/" $src) }}{{ end -}}
 {{- $alt := .alt | default "" -}}
 {{- $sizes := .sizes | default "100vw" -}}
 {{- $widths := .widths | default (slice 480 960 1600) -}}
 {{- $loading := cond (.eager | default false) "eager" "lazy" -}}
-{{- $r := resources.Get (strings.TrimPrefix "/" $src) -}}
 {{- if and $r (in (slice ".jpg" ".jpeg" ".png") (lower (path.Ext $src))) -}}
   {{- $set := slice -}}
   {{- $fallback := "" -}}

layouts/partials/releases.html

@@ -0,0 +1,19 @@
+{{/*
+  Liest alle Cover aus releases/ (gemountet nach assets/img/releases) und
+  gibt sie neueste zuerst zurück. Dateiname: 20250718_Album_OceanTales.jpg
+*/}}
+{{- $releases := slice -}}
+{{- range resources.Match "img/releases/*" -}}
+  {{- $file := path.Base .Name -}}
+  {{- $base := strings.TrimSuffix (path.Ext $file) $file -}}
+  {{- $parts := split $base "_" -}}
+  {{- if ge (len $parts) 3 -}}
+    {{- $d := index $parts 0 -}}
+    {{- $title := delimit (after 2 $parts) " " -}}
+    {{- $title = replaceRE "([a-z])([A-Z])" "$1 $2" $title -}}
+    {{- $title = replace $title "'" "’" -}}
+    {{- $date := time.AsTime (printf "%s-%s-%s" (substr $d 0 4) (substr $d 4 2) (substr $d 6 2)) -}}
+    {{- $releases = $releases | append (dict "key" $d "date" $date "kind" (index $parts 1) "title" $title "cover" .) -}}
+  {{- end -}}
+{{- end -}}
+{{- return sort $releases "key" "desc" -}}