From ad9f7b43edfdb8985b816c682575dbf9e3a731cc Mon Sep 17 00:00:00 2001 From: Disco DeDisco Date: Sat, 9 May 2026 00:18:57 -0400 Subject: [PATCH] h2 padding-inline boundary between the two spans (BILL | BOARD natural gap) + landscape inherits portrait flex split (45/55 vertical, with padding-inline-end on first span = visual break between rotated words) - portrait h2 spans get padding-inline-end / padding-inline-start (0.4em each) at the 45/55 boundary; box-sizing: border-box keeps the flex basis honest. Solves the "B I L L B O A R D" run-together where the L of BILL touches the B of BOARD. - landscape h2 drops the `display: block` override + the > span resets that nuked text-align: justify and flex. Now inherits the portrait flex 45/55 + per-span justify + padding-inline. With writing-mode: vertical-rl, the flex axis runs vertically (45% bottom for BILL post-rotate, 55% top for POST/BOARD/etc.); padding-inline-end resolves to the bottom edge of the first span = natural gap between the two rotated words. - Explicit h2 height: 80vh in landscape so the flex 45/55 percentages have a defined basis to resolve against (block height isn't auto-derived in writing-mode: vertical-rl). - 8 layout/navbar FTs still green; assertions are categorical (position: fixed, etc.) not exact-px. Code architected by Disco DeDisco Git commit message Co-Authored-By: Claude Opus 4.7 (1M context) --- src/static_src/scss/_base.scss | 27 +++++++++++++++------------ 1 file changed, 15 insertions(+), 12 deletions(-) diff --git a/src/static_src/scss/_base.scss b/src/static_src/scss/_base.scss index 86d9236..7503529 100644 --- a/src/static_src/scss/_base.scss +++ b/src/static_src/scss/_base.scss @@ -214,13 +214,20 @@ body { text-align: justify; text-align-last: justify; text-justify: inter-character; + box-sizing: border-box; } + // Padding-inline (logical) creates the natural visual gap + // between the two words at the 45/55 boundary — works for + // both portrait (horizontal) AND the landscape rotated + // wordmark (vertical-rl writing mode). > span:first-child { flex: 0 0 45%; + padding-inline-end: 0.4em; color: rgba(var(--quaUser), 0.75); } > span:last-child { flex: 0 0 55%; + padding-inline-start: 0.4em; } } } @@ -355,24 +362,20 @@ body { left: var(--sidebar-w); width: var(--h2-col-w); top: 50%; + height: 80vh; // explicit height so the flex 45/55 % basis resolves transform: translateY(-50%) rotate(180deg); - writing-mode: vertical-rl; - display: block; // override portrait flex + writing-mode: vertical-rl; // inline axis becomes top-to-bottom; flex stacks on it font-size: 3rem; // rem-fluid → no min-height jumps letter-spacing: 0.4em; margin: 0; z-index: 85; pointer-events: none; - - > span { - // Reset portrait justify; the rotated wordmark is one continuous - // line, not a two-column split. - text-align: initial; - text-align-last: initial; - text-justify: initial; - flex: initial; - display: inline; - } + // Inherits display: flex + the per-span flex 45/55 + padding-inline + // boundary from the portrait base. With writing-mode: vertical-rl the + // flex axis runs vertically, so first-span (BILL) takes 45% of the + // height (becomes bottom 45% after rotate(180deg)) and second-span + // (POST) takes the upper 55%. padding-inline-end resolves to the + // bottom edge of the first span — natural break between words. } // Footer → fixed right sidebar (mirrors navbar approach — explicit right boundary)