redoal/questions
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Hero: clip the bleed at the header, never overflow the document
Lint and reload / lint (push) Successful in 2s
Details
Lint and reload / reload (push) Successful in 0s
Details

Browse Source 
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
This commit is contained in:
Bendik Aagaard Lynghaug
2026-08-30 16:48:33 +02:00
co-authored by Claude Fable 5
parent 137415ee92
commit bee1ba406b
1 changed files with 7 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files
hero.js
+7 -4
View File
@@ -28,10 +28,13 @@ const COUNT = 47;
const BLEED = `${((OVERSCAN - 1) / 2) * -100}%`; const BLEED = `${((OVERSCAN - 1) / 2) * -100}%`;
const STYLE_TEXT = ` const STYLE_TEXT = `
/* The field bleeds 25% past the hero piece on every side; clip the /* The field bleeds 25% past the hero piece on every side. Sideways
document sideways (clip, not hidden: no scroll container) so the it is clipped at the header box (clip, not hidden: no scroll
bleed can never cause horizontal scrolling. */ container, and overflow-y stays visible) - an element wider than
html { overflow-x: clip; } the viewport, even unscrollable, makes phones re-size the layout
viewport when it appears, which read as the page jumping as the
input loaded. Vertically it may run into the copy below. */
.hero-module { overflow-x: clip; overflow-y: visible; }
.redoal-paths { .redoal-paths {
position: absolute; position: absolute;
inset: ${BLEED}; inset: ${BLEED};