diff --git a/.changeset/website-hero-overlap.md b/.changeset/website-hero-overlap.md new file mode 100644 index 00000000..e5de8ef2 --- /dev/null +++ b/.changeset/website-hero-overlap.md @@ -0,0 +1,5 @@ +--- +'nostream-website': patch +--- + +Prevent the home hero headline from overlapping the hero film on wide viewports by slightly reducing headline and film scale and reserving space above the frame. diff --git a/website/site/src/components/home/Hero.astro b/website/site/src/components/home/Hero.astro index f8bb7944..dbdaf0d1 100644 --- a/website/site/src/components/home/Hero.astro +++ b/website/site/src/components/home/Hero.astro @@ -25,7 +25,9 @@ import { VERSION } from '../../data/site' .stage { --pad-y: clamp(18px, 3.5vh, 44px); --pad-x: clamp(14px, 3.5vw, 56px); - --film-h: calc(100svh - 68px - 2 * var(--pad-y) - 36px); + /* Headline band keeps the film from creeping under the h1 on wide layouts. */ + --hero-headline-band: clamp(72px, 11vh, 96px); + --film-h: calc(100svh - 68px - 2 * var(--pad-y) - 36px - var(--hero-headline-band)); position: relative; z-index: 0; @@ -45,10 +47,10 @@ import { VERSION } from '../../data/site' position: absolute; z-index: 3; left: var(--pad-x); - top: clamp(12px, 2.2vh, 26px); - max-width: min(560px, calc(100% - 2 * var(--pad-x))); + top: clamp(12px, 2.2vh, 22px); + max-width: min(520px, calc(100% - 2 * var(--pad-x))); margin: 0; - font-size: clamp(24px, 3vw, 38px); + font-size: clamp(22px, 2.65vw, 34px); line-height: 1.12; letter-spacing: -0.02em; pointer-events: none; @@ -86,12 +88,12 @@ import { VERSION } from '../../data/site' .stage :global(.hero-film) { position: absolute; z-index: 2; - top: 50%; + top: calc(50% + var(--hero-headline-band) * 0.22); right: var(--pad-x); transform: translateY(-50%); - width: min(1320px, 86vw, calc(var(--film-h) * 16 / 9)); + width: min(1180px, 80vw, calc(var(--film-h) * 16 / 9)); max-width: calc(100% - 2 * var(--pad-x)); - max-height: calc(var(--film-h) + 36px); + max-height: var(--film-h); } .stage :global(.hero-film .film-crisp.screen) {