Add vase design: split SVG title/image/date into homepage sections

- Hero glass panel now shows Lina · rings · Marlin from vase artwork
  (side-by-side on landscape, stacked on portrait)
- Vase illustration used as ornamental divider above album grid
- Vase date used as footer closing line
- Homepage structure: intro text, ornament, albums divider, gallery, date

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
yvierkoetter
2026-06-18 23:04:36 +02:00
parent 921a852cbf
commit d62e71bafb
10 changed files with 319 additions and 20 deletions
+109 -17
View File
@@ -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 ────────────────────────────────────────── */