diff --git a/assets/css/main.css b/assets/css/main.css index c6afb44..22fea0b 100644 --- a/assets/css/main.css +++ b/assets/css/main.css @@ -524,24 +524,50 @@ p { margin: 0 0 1em; } /* ---------- Musik ---------- */ -.release { +.album { display: grid; - gap: 2.5rem 4rem; - padding-bottom: clamp(3rem, 8vw, 5rem); + gap: 3rem 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); } -.singles > .display { margin-bottom: 1.5rem; } +.discography, +.listen { padding-bottom: clamp(4rem, 10vw, 6rem); } +.discography > .display, +.listen > .display { margin-bottom: 2rem; } -.tracklist { - max-width: 40rem; +.covers { + 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 { - display: flex; - align-items: baseline; - gap: 1rem; - padding: .9rem 0; - border-bottom: 1px solid var(--line); - counter-increment: track; +@media (max-width: 34rem) { + .covers { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem 1rem; } } -.tracklist li::before { - content: counter(track); - min-width: 1.5rem; - color: var(--mist); - font-variant-numeric: tabular-nums; -} -.tracklist__title { - flex: 1; +.cover__img { aspect-ratio: 1; background: var(--deep-2); box-shadow: 0 1.25rem 2rem -1rem rgba(0, 0, 0, .7); } +.cover__img img { width: 100%; height: 100%; object-fit: cover; } +.cover__title { + margin-top: 1rem; font-family: var(--font-display); - font-weight: 800; - font-size: 1.75rem; + font-weight: 900; + 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; } diff --git a/content/music/_index.md b/content/music/_index.md index 94059a6..3ea9d87 100644 --- a/content/music/_index.md +++ b/content/music/_index.md @@ -1,17 +1,6 @@ --- title: "Musik" description: "Das Debütalbum „Ocean Tales“ und alle Singles von Deepwater Survival." -album: - 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" +albumText: "Unser Debütalbum. Mit dabei sind auch die Singles „My Own Home“, „Chirus“, „Let It Go“ und „Addiction“." --- -Unsere Releases, Singles und Alben. +Alle Releases, vom ersten Song bis zum Debütalbum. diff --git a/hugo.toml b/hugo.toml index e8e194a..3017cb9 100644 --- a/hugo.toml +++ b/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" diff --git a/layouts/music/list.html b/layouts/music/list.html index 6ff250f..22caf2d 100644 --- a/layouts/music/list.html +++ b/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 }} +

{{ .Title }}

{{ with .Content }}
{{ . }}
{{ end }}
-
- {{ with .Params.album }} -
-

{{ .kind }}, {{ .year }}

-

{{ .title }}

- {{ with .text }}

{{ . }}

{{ end }} +{{ with $featured }} +
+
+ +
+ {{ partial "img.html" (dict "res" .cover "alt" (printf "Cover von %s" .title) "sizes" "(min-width: 900px) 30rem, 80vw" "widths" (slice 480 800) "eager" true) }} +
+
+
+

{{ .kind }}, erschienen am {{ .date | time.Format "2. January 2006" }}

+

{{ .title }}

+ {{ with $.Params.albumText }}

{{ . }}

{{ end }} Auf Spotify hören
- {{ end }} -
- {{ partial "spotify.html" . }} -
+{{ end }} -{{ with .Params.singles }} -
-

Singles

-
    +{{ $rest := slice }} +{{ range $releases }}{{ if or (not $featured) (ne .key $featured.key) }}{{ $rest = $rest | append . }}{{ end }}{{ end }} +{{ with $rest }} +
    +

    Diskografie

    +
      {{ range . }} -
    1. - {{ .title }} - {{ with .year }}{{ . }}{{ end }} +
    2. +
      + {{ partial "img.html" (dict "res" .cover "alt" (printf "Cover von %s" .title) "sizes" "(min-width: 900px) 22rem, 45vw" "widths" (slice 400 800)) }} +
      +

      {{ .title }}

      +

      {{ .kind }},

      3. {{ end }}
    {{ end }} +
    +

    Reinhören

    + {{ partial "spotify.html" . }} +
    +

    Mehr von uns

      diff --git a/layouts/partials/img.html b/layouts/partials/img.html index 829eb65..d48cecc 100644 --- a/layouts/partials/img.html +++ b/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 := "" -}} diff --git a/layouts/partials/releases.html b/layouts/partials/releases.html new file mode 100644 index 0000000..ebb70cd --- /dev/null +++ b/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" -}}