gator/founders-break
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Size the hero by its content instead of 100dvh

Browse source
This commit is contained in:
Devin Willis 2026-08-26 14:19:03 -04:00
parent b359a9a5be
commit cd91fbbb95
No known key found for this signature in database
GPG key ID: 3776B3C5AFF3FFEA
1 changed files with 5 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
public/css/style.css
View file

@ -127,11 +127,13 @@ a { color: var(--accent2); }
/* ── Hero: asymmetric split ───────────────────────────────── */ /* ── Hero: asymmetric split ───────────────────────────────── */
/* Sized by its content, not by 100dvh. A viewport-height hero centred its copy
a third of the way down a laptop screen and buried the details strip; this
still clears the fold on a 900px screen and lets the next section peek. */
.hero { .hero {
max-width: var(--shell); margin: 0 auto; max-width: var(--shell); margin: 0 auto;
min-height: 100dvh;
display: grid; grid-template-columns: 1.04fr 0.96fr; gap: 4rem; align-items: center; display: grid; grid-template-columns: 1.04fr 0.96fr; gap: 4rem; align-items: center;
padding: calc(64px + 3rem) var(--gut) 4rem; padding: calc(64px + 3.5rem) var(--gut) 5rem;
} }
.eyebrow { .eyebrow {
@ -310,7 +312,7 @@ form { margin-top: 2rem; }
/* ── Responsive ───────────────────────────────────────────── */ /* ── Responsive ───────────────────────────────────────────── */
@media (max-width: 1000px) { @media (max-width: 1000px) {
.hero { grid-template-columns: 1fr; gap: 2.8rem; min-height: 0; padding-top: calc(64px + 2.5rem); } .hero { grid-template-columns: 1fr; gap: 2.8rem; padding: calc(64px + 2.5rem) var(--gut) 3.5rem; }
.hero-figure { order: -1; } .hero-figure { order: -1; }
.hero-figure img { aspect-ratio: 16 / 10; } .hero-figure img { aspect-ratio: 16 / 10; }
.bento { grid-template-columns: 1fr 1fr; } .bento { grid-template-columns: 1fr 1fr; }