diff --git a/src/static_src/scss/_base.scss b/src/static_src/scss/_base.scss index bfd9416..f51a7eb 100644 --- a/src/static_src/scss/_base.scss +++ b/src/static_src/scss/_base.scss @@ -7,6 +7,13 @@ // 2.4vmin hits 16px (browser default) at vmin=667 (iPhone SE landscape). html { font-size: clamp(14px, 2.4vmin, 22px); + // Aperture foundation — locks the document viewport so content lives + // between/behind the fixed navbar + footer sidebars instead of leaking + // into a page-level scroll. Was opt-in per-page via body.page-X classes + // (duplicated 5× across SCSS files); now universal. Pages that need a + // narrower override (e.g. body.page-gameboard .container { overflow: + // clip; }) live in their per-page SCSS. + overflow: hidden; } // Layout custom properties — single source of truth for the landscape @@ -25,6 +32,7 @@ body { color: rgba(var(--secUser), 1); font-family: Georgia, serif; height: 100vh; + overflow: hidden; a { text-decoration: none; @@ -43,6 +51,14 @@ body { margin: 0 auto; // padding: 0 1rem; flex: 1; + // Aperture container — flex-column so navbar + h2 row + page content + // stack vertically, min-height: 0 + overflow: hidden contain the + // content within the aperture so applet borders / titles can't + // leak past the navbar / footer sidebars at narrow viewports. + display: flex; + flex-direction: column; + min-height: 0; + overflow: hidden; .navbar { padding: 0.75rem 0; @@ -183,6 +199,10 @@ body { .row { padding: 2rem 0; + // Aperture: the h2-row mustn't shrink when the page-content + // child fills the remaining vertical space. Universal — was + // duplicated in every body.page-X { .row { flex-shrink: 0 } }. + flex-shrink: 0; .col-md-12 { width: 100%; diff --git a/src/static_src/scss/_billboard.scss b/src/static_src/scss/_billboard.scss index a4ef689..6fcbe49 100644 --- a/src/static_src/scss/_billboard.scss +++ b/src/static_src/scss/_billboard.scss @@ -24,6 +24,12 @@ } // ── Shared aperture fill for both billboard pages ────────────────────────── +// +// Aperture foundation (html/body/.container overflow + flex-column + +// .row flex-shrink: 0) now lives universally in _base.scss. Only the +// page-specific `.row { margin-bottom: -1rem }` pull (tightening the +// h2 row against subsequent applet content) stays here, since wallet +// + sky pages deliberately don't carry that pull. %billboard-page-base { flex: 1; @@ -33,31 +39,12 @@ position: relative; } -html:has(body.page-billboard), -html:has(body.page-billscroll), -html:has(body.page-billpost), -html:has(body.page-billbuds), -html:has(body.page-billposts) { - overflow: hidden; -} - body.page-billboard, body.page-billscroll, body.page-billpost, body.page-billbuds, body.page-billposts { - overflow: hidden; - - .container { - overflow: hidden; - display: flex; - flex-direction: column; - flex: 1; - min-height: 0; - } - .row { - flex-shrink: 0; margin-bottom: -1rem; } } diff --git a/src/static_src/scss/_dashboard.scss b/src/static_src/scss/_dashboard.scss index 1402f74..db70db3 100644 --- a/src/static_src/scss/_dashboard.scss +++ b/src/static_src/scss/_dashboard.scss @@ -1,23 +1,8 @@ -html:has(body.page-dashboard) { - overflow: hidden; -} +// Aperture foundation now lives in _base.scss; only the dashboard-specific +// `.row { margin-bottom: -1rem }` pull stays here. -body.page-dashboard { - overflow: hidden; - - .container { - overflow: hidden; - display: flex; - flex-direction: column; - flex: 1; - min-height: 0; - - } - - .row { - flex-shrink: 0; - margin-bottom: -1rem; - } +body.page-dashboard .row { + margin-bottom: -1rem; } #id_dash_content { diff --git a/src/static_src/scss/_gameboard.scss b/src/static_src/scss/_gameboard.scss index b3b5609..3085f69 100644 --- a/src/static_src/scss/_gameboard.scss +++ b/src/static_src/scss/_gameboard.scss @@ -1,21 +1,16 @@ -html:has(body.page-gameboard) { - overflow: hidden; -} +// Aperture foundation (html/body/.container overflow + flex-column) lives +// universally in _base.scss. Gameboard's only divergence: `overflow: clip` +// on .container instead of `hidden` — `clip` prevents the seat tooltip +// scroll-anchoring quirk Firefox triggers under overflow:hidden. The +// `.row { margin-bottom: -1rem }` pull mirrors the billboard/dashboard +// h2-row tightening. body.page-gameboard { - overflow: hidden; - .container { overflow: clip; - display: flex; - flex-direction: column; - flex: 1; - min-height: 0; - } .row { - flex-shrink: 0; margin-bottom: -1rem; } } diff --git a/src/static_src/scss/_sky.scss b/src/static_src/scss/_sky.scss index aee10d1..0044220 100644 --- a/src/static_src/scss/_sky.scss +++ b/src/static_src/scss/_sky.scss @@ -935,27 +935,10 @@ body[class*="-light"] #id_sky_tooltip_2 { } } -// ── Sky full page (aperture + column layout) ────────────────────────────────── - -html:has(body.page-sky) { - overflow: hidden; -} - -body.page-sky { - overflow: hidden; - - .container { - overflow: hidden; - display: flex; - flex-direction: column; - flex: 1; - min-height: 0; - } - - .row { - flex-shrink: 0; - } -} +// ── Sky full page (column layout) ───────────────────────────────────────── +// +// Aperture foundation lives universally in _base.scss; nothing sky-specific +// here besides the .sky-page block below. // Sky page fills the aperture; its content can scroll past the bottom edge. // overflow-x: hidden clips any horizontal overflow that would otherwise create diff --git a/src/static_src/scss/_wallet-tokens.scss b/src/static_src/scss/_wallet-tokens.scss index 6252d11..085fce0 100644 --- a/src/static_src/scss/_wallet-tokens.scss +++ b/src/static_src/scss/_wallet-tokens.scss @@ -22,25 +22,8 @@ > i { opacity: 0.4; } } -html:has(body.page-wallet) { - overflow: hidden; -} - -body.page-wallet { - overflow: hidden; - - .container { - overflow: hidden; - display: flex; - flex-direction: column; - flex: 1; - min-height: 0; - } - - .row { - flex-shrink: 0; - } -} +// Aperture foundation lives universally in _base.scss; nothing +// wallet-specific to override. .wallet-page { position: relative;