diff --git a/assets/css/custom.css b/assets/css/custom.css index 51ae335..ac4193b 100644 --- a/assets/css/custom.css +++ b/assets/css/custom.css @@ -68,22 +68,41 @@ section.hero { border-top: 1px solid rgba(255, 255, 255, 0.1); } -.hero-content h1 { - font-family: 'Cormorant Garant', Georgia, serif; - color: #faf8f4; - font-weight: 300; - font-style: italic; - font-size: clamp(3.5rem, 9vw, 8rem); - line-height: 1.0; - text-wrap: balance; - letter-spacing: 0.04em; +/* 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; } +@media (orientation: portrait) { + .hero-vase-title { + flex-direction: column; + gap: 0.5rem; + } +} + +.hero-vase-title img { + filter: brightness(0) invert(1); + display: block; + width: auto; +} + +.hero-vase-title .vase-name { + height: clamp(3rem, 7.5vw, 5.5rem); +} + +.hero-vase-title .vase-rings { + height: clamp(3rem, 7.5vw, 5.5rem); +} + .hero-content p { color: rgba(250, 248, 244, 0.8); - font-size: 0.8125rem; + font-size: 1rem; line-height: 1.6; letter-spacing: 0.12em; text-transform: uppercase; @@ -96,8 +115,7 @@ section.hero { .hero-scroll { display: flex; justify-content: center; - padding-top: 1.25rem; - padding-bottom: 0.25rem; + padding-top: 0.5rem; color: rgba(250, 250, 250, 0.6); animation: hero-fade-in 0.6s ease 0.6s both; } @@ -116,8 +134,8 @@ section.hero { /* ── Intro text section ───────────────────────────────── */ .home-intro { - max-width: 600px; - margin: 0 auto 5rem; + max-width: 560px; + margin: 4rem auto 5rem; padding: 0 1.5rem; text-align: center; } @@ -125,13 +143,87 @@ section.hero { .home-intro .prose p { color: var(--text-2); font-size: 1rem; - line-height: 1.85; - margin-top: 1em; - margin-bottom: 1em; + 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; +} + +/* ── Vase ornament ────────────────────────────────────── */ + +.home-ornament { + display: flex; + justify-content: center; + margin: 0 auto 3rem; +} + +.home-ornament img { + 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; +} + +/* ── Albums divider ───────────────────────────────────── */ + +.home-divider { + 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); +} + +.home-divider span { + 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; +} + +.home-closing .vase-date { + 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; } /* ── Keyframes ────────────────────────────────────────── */ diff --git a/assets/js/custom.js b/assets/js/custom.js index 6660b6d..d49fbab 100644 --- a/assets/js/custom.js +++ b/assets/js/custom.js @@ -13,8 +13,8 @@ if (s > heroH) { ticking = false; return; } // Background at 55%, text at 80% — both slower than normal, image slowest - if (heroBg) heroBg.style.transform = 'translateY(' + (s * 0.45) + 'px)'; - if (heroFg) heroFg.style.transform = 'translateY(' + (s * 0.35) + 'px)'; + if (heroBg) heroBg.style.transform = 'translateY(' + (s * 0.25) + 'px)'; + if (heroFg) heroFg.style.transform = 'translateY(' + (s * 0.15) + 'px)'; // Scroll arrow fades out over the first 30% of hero height if (heroScroll) { diff --git a/content/_index.md b/content/_index.md index 5968e11..67ea101 100644 --- a/content/_index.md +++ b/content/_index.md @@ -2,6 +2,8 @@ title: "Herzlich Willkommen" params: tagline: "Schön, dass ihr da seid." + albums_label: "Alben" + closing: "20. Juni 2026" --- Hier findet ihr die Erinnerungen an unseren besonderen Tag — festgehalten in Bildern, die für immer bleiben. diff --git a/layouts/_default/home.html b/layouts/_default/home.html index 19271b2..6b6e30d 100644 --- a/layouts/_default/home.html +++ b/layouts/_default/home.html @@ -6,7 +6,11 @@
-

{{ .Title }}

+
+ Lina + + Marlin +
{{ with .Params.tagline }}

{{ . }}

{{ end }}