lfg2025/deepstock
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: hero wordmark fills mobile/tablet width per language

Browse Source 
The /7 divisor was calibrated for the wider "Kammergut" wordmark and
left ~25-45px of unused space each side of the narrower "Deepstock".
Switch to language-aware divisors that match each wordmark's actual
rendered-width-to-font-size ratio in DM Serif Display at 0.05em
tracking:

- DE / Kammergut (default): /6 — fills with ~16px gutter at viewport
  widths from 320 to 768.
- EN / Deepstock: /5.2 — narrower wordmark, smaller divisor needed
  to fill the same content area without clipping at 320px.

Desktop (>=900px) uses clamp() with separate ranges per language.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
Dorian
2026-05-05 15:18:56 +01:00
parent 64dc5cef9c
commit de9a0f1bc8
1 changed files with 20 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
src/styles.css
View File

@@ -119,11 +119,11 @@ body { background: #FAFAFA; color: var(--text); font-family: var(--font-body); f
position: relative; z-index: 1; position: relative; z-index: 1;
font-family: var(--font-display); font-family: var(--font-display);
font-weight: 400; font-weight: 400;
/* Mobile: fill viewport minus the hero's 16px padding each side /* Default (DE / "Kammergut") — divisor ≈ rendered-text-to-font-size
(= 32px total). Divisor 7 keeps the wider "Kammergut" wordmark ratio of the wider wordmark in DM Serif Display at 0.05em tracking.
from clipping at the mobile/tablet boundary (~704px was clipping EN ("Deepstock") gets a smaller divisor below to fill at its own
at /6). */ ratio. -32px matches the hero's 16px padding each side. */
font-size: calc((100vw - 32px) / 7); font-size: calc((100vw - 32px) / 6);
line-height: 1; line-height: 1;
letter-spacing: 0.05em; letter-spacing: 0.05em;
color: #1A1A18; color: #1A1A18;
@@ -136,14 +136,26 @@ body { background: #FAFAFA; color: var(--text); font-family: var(--font-body); f
background: linear-gradient(rgba(250,250,250,0.5), rgba(250,250,250,0.5)), url('/images/bg-1.jpg') center/cover no-repeat; background: linear-gradient(rgba(250,250,250,0.5), rgba(250,250,250,0.5)), url('/images/bg-1.jpg') center/cover no-repeat;
} }
} }
/* Tablet — match the hero's 16px padding each side (32px total) so /* Tablet — same fill behaviour as mobile (hero padding stays 16px
the wordmark fills the available width like it does on mobile. */ each side). */
@media (min-width: 768px) { @media (min-width: 768px) {
.hero h1 { font-size: calc((100vw - 32px) / 7); } .hero h1 { font-size: calc((100vw - 32px) / 6); }
} }
@media (min-width: 900px) { @media (min-width: 900px) {
.hero h1 { font-size: clamp(120px, 14vw, 176px); } .hero h1 { font-size: clamp(120px, 14vw, 176px); }
} }
/* English brand ("Deepstock") — narrower wordmark needs a smaller
divisor (≈ ratio measured at 0.05em tracking) to fill the same
16px-padded width as the wider Kammergut. */
html[lang="en"] .hero h1 { font-size: calc((100vw - 32px) / 5.2); }
@media (min-width: 768px) {
html[lang="en"] .hero h1 { font-size: calc((100vw - 32px) / 5.2); }
}
@media (min-width: 900px) {
html[lang="en"] .hero h1 { font-size: clamp(120px, 17vw, 220px); }
}
.hero h1 .b { color: #5A9A78; } .hero h1 .b { color: #5A9A78; }
/* Trademark mark — only auto-attached to the small header logo. The /* Trademark mark — only auto-attached to the small header logo. The