diff --git a/assets/css/custom.css b/assets/css/custom.css index 0ba7dfa..a2d8d4f 100644 --- a/assets/css/custom.css +++ b/assets/css/custom.css @@ -1,264 +1,322 @@ /* ── Warm colour palette ──────────────────────────────── */ :root { - --surface-1-light: #faf8f4; - --surface-2-light: #f0ece4; - --text-1-light: #1a1614; - --text-2-light: #6b6258; - --border-light: #ccc4b8; + --surface-1-light: #faf8f4; + --surface-2-light: #f0ece4; + --text-1-light: #1a1614; + --text-2-light: #6b6258; + --border-light: #ccc4b8; - --surface-1-dark: #0d0b09; - --surface-2-dark: #3d3631; - --text-1-dark: #f7f3ee; - --text-2-dark: #9e948a; - --border-dark: #5c5249; + --surface-1-dark: #0d0b09; + --surface-2-dark: #3d3631; + --text-1-dark: #f7f3ee; + --text-2-dark: #9e948a; + --border-dark: #5c5249; } /* ── Hero ─────────────────────────────────────────────── */ section.hero { - position: relative; - overflow: hidden; - width: 100%; - height: 100vh; - padding: 0; - margin: 0 0 5rem; + position: relative; + overflow: hidden; + width: 100%; + height: 100vh; + padding: 0; + margin: 0 0 5rem; } .hero-bg { - position: absolute; - top: -30%; - left: 0; - width: 100%; - height: 160%; - background-position: center; - background-size: cover; - background-repeat: no-repeat; - will-change: transform; + position: absolute; + top: -30%; + left: 0; + width: 100%; + height: 160%; + background-position: center; + background-size: cover; + background-repeat: no-repeat; + will-change: transform; } .hero-bg::after { - content: ""; - position: absolute; - inset: 0; - background: linear-gradient(to bottom, rgba(0, 0, 0, 0.35) 0%, transparent 40%); + content: ""; + position: absolute; + inset: 0; + background: linear-gradient(to bottom, rgba(0, 0, 0, 0.35) 0%, transparent 40%); } .hero-fg { - position: relative; - z-index: 1; - width: 100%; - height: 100%; - display: flex; - flex-direction: column; - justify-content: flex-end; - align-items: center; - will-change: transform; + position: relative; + z-index: 1; + width: 100%; + height: 100%; + display: flex; + flex-direction: column; + justify-content: flex-end; + align-items: center; + will-change: transform; } /* ── Hero content ─────────────────────────────────────── */ .hero-content { - width: 100%; - padding: 2.5rem 3rem; - text-align: center; - background: rgba(10, 8, 6, 0.38); - backdrop-filter: blur(5px); - -webkit-backdrop-filter: blur(8px); - border-top: 1px solid rgba(255, 255, 255, 0.1); + width: 100%; + padding: 2.5rem 3rem; + text-align: center; + background: rgba(10, 8, 6, 0.38); + backdrop-filter: blur(5px); + -webkit-backdrop-filter: blur(8px); + border-top: 1px solid rgba(255, 255, 255, 0.1); } /* SVG vase title in the hero glass panel */ .hero-vase-title { - display: flex; - flex-direction: row; - align-items: center; - justify-content: center; - gap: 2rem; - margin-bottom: 1.25rem; - animation: hero-fade-up 1s cubic-bezier(0.16, 1, 0.3, 1) both; + display: flex; + flex-direction: row; + align-items: center; + justify-content: center; + gap: 2rem; + margin-bottom: 1.25rem; + animation: hero-fade-up 1s cubic-bezier(0.16, 1, 0.3, 1) both; } @media (orientation: portrait) { - .hero-vase-title { - flex-direction: column; - gap: 0.5rem; - } + .hero-vase-title { + flex-direction: column; + gap: 0.5rem; + } } .hero-vase-title img { - filter: brightness(0) invert(1); - display: block; - width: auto; + filter: brightness(0) invert(1); + display: block; + width: auto; } .hero-vase-title .vase-name { - height: clamp(3rem, 7.5vw, 5.5rem); + height: clamp(3rem, 7.5vw, 5.5rem); } .hero-vase-title .vase-rings { - height: clamp(3rem, 7.5vw, 5.5rem); + height: clamp(3rem, 7.5vw, 5.5rem); } .hero-content p { - color: rgba(250, 248, 244, 0.8); - font-size: 1rem; - line-height: 1.6; - letter-spacing: 0.12em; - text-transform: uppercase; - text-wrap: balance; - animation: hero-fade-up 1s cubic-bezier(0.16, 1, 0.3, 1) 0.15s both; + color: rgba(250, 248, 244, 0.8); + font-size: 1rem; + line-height: 1.6; + letter-spacing: 0.12em; + text-transform: uppercase; + text-wrap: balance; + animation: hero-fade-up 1s cubic-bezier(0.16, 1, 0.3, 1) 0.15s both; } /* ── Scroll arrow ─────────────────────────────────────── */ .hero-scroll { - display: flex; - justify-content: center; - padding-top: 0.5rem; - color: rgba(250, 250, 250, 0.6); - animation: hero-fade-in 0.6s ease 0.6s both; + display: flex; + justify-content: center; + padding-top: 0.5rem; + color: rgba(250, 250, 250, 0.6); + animation: hero-fade-in 0.6s ease 0.6s both; } .hero-scroll-icon { - display: block; - animation: hero-bounce 2s ease-in-out 1.2s infinite; + display: block; + animation: hero-bounce 2s ease-in-out 1.2s infinite; } .hero-scroll svg { - width: 1.75rem; - height: 1.75rem; - display: block; + width: 1.75rem; + height: 1.75rem; + display: block; } /* ── Intro text section ───────────────────────────────── */ .home-intro { - max-width: 560px; - margin: 4rem auto 5rem; - padding: 0 1.5rem; - text-align: center; + max-width: 560px; + margin: 4rem auto 5rem; + padding: 0 1.5rem; + text-align: center; } .home-intro .prose p { - color: var(--text-2); - font-size: 1rem; - line-height: 1.9; - margin-top: 0.9em; - margin-bottom: 0.9em; + color: var(--text-2); + font-size: 1rem; + line-height: 1.9; + margin-top: 0.9em; + margin-bottom: 0.9em; } .home-intro .prose p:first-child { - margin-top: 0; - color: var(--text-1); - font-size: 1.1875rem; - line-height: 1.75; + margin-top: 0; + color: var(--text-1); + font-size: 1.1875rem; + line-height: 1.75; } /* ── Vase ornament ────────────────────────────────────── */ .home-ornament { - display: flex; - justify-content: center; - margin: 0 auto 3rem; + display: flex; + justify-content: center; + margin: 0 auto 3rem; } .home-ornament img { - height: 240px; - width: auto; - opacity: 0.38; - filter: sepia(1); + height: 240px; + width: auto; + opacity: 0.38; + filter: sepia(1); } [data-theme="dark"] .home-ornament img { - filter: invert(1) sepia(0.4) brightness(0.85); - opacity: 0.45; + filter: invert(1) sepia(0.4) brightness(0.85); + opacity: 0.45; +} + +/* ── Gallery page header title ────────────────────────── */ + +body > header { + justify-content: space-between; + margin-bottom: 0; +} + +.header-title { + flex: 1; + text-align: center; + font-weight: 500; + font-size: 1.5rem; + letter-spacing: 0.15em; + text-transform: uppercase; + color: var(--text-1); + margin: 0; +} + +.header-right { + width: 3rem; + display: flex; + justify-content: flex-end; } /* ── Album card text ──────────────────────────────────── */ .card > div > h2 { - font-weight: 400; - font-size: 0.9375rem; - letter-spacing: 0.06em; + font-weight: 400; + font-size: 0.9375rem; + letter-spacing: 0.06em; } .card > div > p { - font-size: 0.6875rem; - letter-spacing: 0.15em; - text-transform: uppercase; + font-size: 0.6875rem; + letter-spacing: 0.15em; + text-transform: uppercase; } /* ── Albums divider ───────────────────────────────────── */ .home-divider { - display: flex; - align-items: center; - gap: 1.25rem; - max-width: 1280px; - margin: 0 auto 2.5rem; - padding: 0 1.5rem; + display: flex; + align-items: center; + gap: 1.25rem; + max-width: 1280px; + margin: 0 auto 2.5rem; + padding: 0 1.5rem; } .home-divider::before, .home-divider::after { - content: ""; - flex: 1; - height: 1px; - background: var(--border); + content: ""; + flex: 1; + height: 1px; + background: var(--border); } .home-divider span { - font-size: 0.6875rem; - font-weight: 500; - letter-spacing: 0.2em; - text-transform: uppercase; - color: var(--text-2); - white-space: nowrap; + font-size: 0.6875rem; + font-weight: 500; + letter-spacing: 0.2em; + text-transform: uppercase; + color: var(--text-2); + white-space: nowrap; } /* ── Closing line ─────────────────────────────────────── */ .home-closing { - display: flex; - justify-content: center; - margin: 4rem auto 2rem; - padding: 2.5rem 1.5rem 0; - border-top: 1px solid var(--border); - max-width: 1280px; + display: flex; + justify-content: center; + margin: 4rem auto 2rem; + padding: 2.5rem 1.5rem 0; + border-top: 1px solid var(--border); + max-width: 1280px; } .home-closing .vase-date { - height: 1.75rem; - width: auto; - opacity: 0.75; - filter: sepia(1); + height: 1.75rem; + width: auto; + opacity: 0.75; + filter: sepia(1); } [data-theme="dark"] .home-closing .vase-date { - filter: invert(1) sepia(0.3) brightness(0.9); - opacity: 0.75; + filter: invert(1) sepia(0.3) brightness(0.9); + opacity: 0.75; +} + +/* ── Gallery back link ────────────────────────────────── */ + +.gallery-back { + display: flex; + justify-content: center; + padding: 3rem 1.5rem 2rem; + border-top: 1px solid var(--border); + margin-top: 3rem; +} + +.gallery-back-link { + display: inline-flex; + align-items: center; + gap: 0.5rem; + font-size: 0.75rem; + letter-spacing: 0.15em; + text-transform: uppercase; + color: var(--text-2); + text-decoration: none; + transition: color 0.2s; +} + +.gallery-back-link:hover { + color: var(--text-1); } /* ── Keyframes ────────────────────────────────────────── */ @keyframes hero-fade-up { - from { - opacity: 0; - transform: translateY(1.5rem); - } - to { - opacity: 1; - transform: translateY(0); - } + from { + opacity: 0; + transform: translateY(1.5rem); + } + to { + opacity: 1; + transform: translateY(0); + } } @keyframes hero-fade-in { - from { opacity: 0; } - to { opacity: 1; } + from { + opacity: 0; + } + to { + opacity: 1; + } } @keyframes hero-bounce { - 0%, 100% { transform: translateY(0); } - 50% { transform: translateY(7px); } + 0%, 100% { + transform: translateY(0); + } + 50% { + transform: translateY(7px); + } } diff --git a/layouts/_default/list.html b/layouts/_default/list.html new file mode 100644 index 0000000..73b4aab --- /dev/null +++ b/layouts/_default/list.html @@ -0,0 +1,7 @@ +{{ define "main" }} +
+ {{ range where .Pages "Params.private" "ne" true }} + {{ partial "album-card.html" . }} + {{ end }} +
+{{ end }} diff --git a/layouts/_default/single.html b/layouts/_default/single.html new file mode 100644 index 0000000..e05df3d --- /dev/null +++ b/layouts/_default/single.html @@ -0,0 +1,17 @@ +{{ define "main" }} + {{ partial "gallery.html" . }} + {{ partial "related.html" . }} + {{ with .Content }} +
+ {{ . }} +
+ {{ end }} +
+ + + Zurück zur Startseite + +
+{{ end }} diff --git a/layouts/partials/header.html b/layouts/partials/header.html index 1dbb6f4..3e4bb35 100644 --- a/layouts/partials/header.html +++ b/layouts/partials/header.html @@ -7,24 +7,25 @@ {{ else }} - - {{ .Site.Title }} + + {{ end }} - {{ if site.Menus.main }} - - {{ end }} +

{{ .Title }}

+
+ {{ if site.Menus.main }} + + {{ end }} +
{{ partial "menu.html" . }} {{ end }}