This commit is contained in:
lucashahmann committed
1 parent
09a4754d51
commit
44866d1b87
6 files changed
+118
-64
No files matched your search
+54
-32
@@ -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; }
|
||||
|
||||
+2
-13
@@ -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.
|
||||
@@ -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"
|
||||
+35
-17
@@ -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 .Params.album }}
|
||||
<div class="release__album">
|
||||
<p class="release__kind">{{ .kind }}, {{ .year }}</p>
|
||||
<h2 class="release__title">{{ .title }}</h2>
|
||||
{{ with .text }}<p class="release__text">{{ . }}</p>{{ end }}
|
||||
{{ with $featured }}
|
||||
<section class="wrap album" aria-labelledby="album-title">
|
||||
<div class="album__sleeve">
|
||||
<div class="album__vinyl" aria-hidden="true"></div>
|
||||
<div class="album__cover">
|
||||
{{ 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 }}
|
||||
<section class="wrap singles" aria-labelledby="singles">
|
||||
<h2 id="singles" class="display">Singles</h2>
|
||||
<ol class="tracklist">
|
||||
{{ $rest := slice }}
|
||||
{{ range $releases }}{{ if or (not $featured) (ne .key $featured.key) }}{{ $rest = $rest | append . }}{{ end }}{{ end }}
|
||||
{{ with $rest }}
|
||||
<section class="wrap discography" aria-labelledby="diskografie">
|
||||
<h2 id="diskografie" class="display">Diskografie</h2>
|
||||
<ol class="covers">
|
||||
{{ range . }}
|
||||
<li>
|
||||
<span class="tracklist__title">{{ .title }}</span>
|
||||
{{ with .year }}<span class="tracklist__year">{{ . }}</span>{{ end }}
|
||||
<li class="cover">
|
||||
<div class="cover__img">
|
||||
{{ 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">
|
||||
|
||||
@@ -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 := "" -}}
|
||||
|
||||
@@ -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" -}}
|
||||
Reference in new issue
Block a user