From df99cad98463c97dfaa37192feac60c3b1d77fcb Mon Sep 17 00:00:00 2001 From: Disco DeDisco Date: Sat, 9 May 2026 14:01:16 -0400 Subject: [PATCH] =?UTF-8?q?mobile=20h2=20+=20sky=20wheel=20landscape=20fit?= =?UTF-8?q?:=20per-letter=20flex=20spread=20(justify-content:=20space-betw?= =?UTF-8?q?een=20via=20base.html=20JS=20letter-splitter)=20replaces=20text?= =?UTF-8?q?-justify:=20inter-character=20=E2=80=94=20iOS=20Safari=20+=20Fi?= =?UTF-8?q?refox=20silently=20fall=20back=20to=20inter-word=20for=20Latin?= =?UTF-8?q?=20text,=20leaving=20letters=20clustered=20at=20the=20slot=20st?= =?UTF-8?q?art;=20flex=20layout=20works=20everywhere;=20viewport-fluid=20f?= =?UTF-8?q?ont=20clamp(1.3rem,=205vw,=202rem)=20portrait=20+=20clamp(1.2re?= =?UTF-8?q?m,=204.4vh,=202.75rem)=20landscape=20so=20glyphs=20scale=20w.?= =?UTF-8?q?=20viewport=20instead=20of=20a=20fixed-rem=20ceiling=20that=20o?= =?UTF-8?q?verflowed=20the=2045/55=20slot=20at=20the=20rem-clamp=20floor;?= =?UTF-8?q?=20portrait=20<500px=20gets=20padding-inline=200.4em=E2=86=920.?= =?UTF-8?q?6em=20on=20the=20word-spans=20so=20H-B=20don't=20run=20together?= =?UTF-8?q?=20at=20the=20cramped=20font-size;=20.sky-page=20post-save=20sc?= =?UTF-8?q?roll-snap=20sections=20pinned=20to=20height:=20100%=20(was:=20m?= =?UTF-8?q?in-height:=20100%)=20+=20.sky-svg=20max-height:=20100%=20so=20t?= =?UTF-8?q?he=20wheel=20fits=20exactly=20one=20aperture=20on=20landscape?= =?UTF-8?q?=20mobile=20(was:=20480px=20max=20blew=20past=20~350px=20apertu?= =?UTF-8?q?re,=20leaving=20an=20intermediate=20scroll=20position)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Code architected by Disco DeDisco Git commit message Co-Authored-By: Claude Sonnet 4.6 --- src/static_src/scss/_base.scss | 44 ++++++++++++++++++++++++---------- src/static_src/scss/_sky.scss | 20 +++++++++++++--- src/templates/core/base.html | 26 ++++++++++++++++++++ 3 files changed, 75 insertions(+), 15 deletions(-) diff --git a/src/static_src/scss/_base.scss b/src/static_src/scss/_base.scss index be5178c..bfd9416 100644 --- a/src/static_src/scss/_base.scss +++ b/src/static_src/scss/_base.scss @@ -210,10 +210,20 @@ body { var(--title-shadow-offset) var(--title-shadow-offset) 0 rgba(0, 0, 0, 0.8) ; + // Each word-span hosts per-letter s injected by the + // h2-letter-split script in base.html — display: flex + + // justify-content: space-between distributes those letters + // across the slot's width (or height in landscape's + // writing-mode: vertical-rl). text-justify: inter-character + // would do the same in pure CSS, but iOS Safari + Firefox + // silently fall back to inter-word for Latin scripts, which + // can't split a single word — letters end up clustered at + // the slot's start with empty space trailing. The flex + // approach works everywhere. > span { - text-align: justify; - text-align-last: justify; - text-justify: inter-character; + display: flex; + justify-content: space-between; + align-items: center; box-sizing: border-box; } // Padding-inline (logical) creates the natural visual gap @@ -365,8 +375,14 @@ body { height: 80vh; // explicit height so the flex 45/55 % basis resolves transform: translateY(-50%) rotate(180deg); 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; + // Per-letter flex spread (justify-content: space-between on each word + // span) fills the slot regardless of font-size, so we only need to + // cap font-size by vh so each letter glyph stays smaller than slot / + // letter-count. Worst case: HOWDY STRANGER (8ch second word) in 55% + // of 80vh on a 375-tall iPhone SE landscape → 165px slot ÷ 8 ≈ 20px + // max glyph height; clamp's 4.4vh + 1.2rem floor gives 16.5–16.8px + // at that viewport, well under 20. + font-size: clamp(1.2rem, 4.4vh, 2.75rem); margin: 0; z-index: 85; pointer-events: none; @@ -476,16 +492,20 @@ body { } } + // Per-letter flex spread fills each 45/55 slot regardless of font-size, + // so we just need to cap the glyph size by viewport width to keep the + // worst-case title (HOWDY STRANGER, 8ch second word) from clipping at + // tiny mobile widths. clamp picks max(1.3rem, 5vw) capped at 2rem — + // at 320w → 18.2px, 390w → 19.5px, 430w → 21.5px. + // padding-inline boundary bumped from 0.4em → 0.6em (each side) so the + // last letter of word 1 (H) and first letter of word 2 (B) don't run + // together at the cramped portrait font-size. .row .col-lg-6 h2 { - text-align: center; - text-align-last: center; - letter-spacing: 0.33em; margin: 0; - font-size: 2rem; + font-size: clamp(1.3rem, 5vw, 2rem); - &#id_dash_wallet { - letter-spacing: 0.25em; - } + > span:first-child { padding-inline-end: 0.6em; } + > span:last-child { padding-inline-start: 0.6em; } } } } diff --git a/src/static_src/scss/_sky.scss b/src/static_src/scss/_sky.scss index b32a502..aee10d1 100644 --- a/src/static_src/scss/_sky.scss +++ b/src/static_src/scss/_sky.scss @@ -1089,18 +1089,32 @@ body.sky-saved { .sky-page .sky-form-col { scroll-snap-align: start; scroll-snap-stop: always; - min-height: 100%; + // height (not min-height) pins each section to EXACTLY one aperture so + // the snap-stops land at integer multiples of the viewport. min-height + // alone let .sky-svg's 480px max-height push the wheel section past one + // viewport on landscape mobile (~350px aperture), which created an + // intermediate scroll position between the wheel-end and the form-start. + height: 100%; flex: 0 0 auto; } // Release the wheel-col aspect-ratio cap so the section fills the aperture; // .sky-svg inside still renders square (its own aspect-ratio:1/1) and stays - // centered via the col's align-items:center. + // centered via the col's align-items:center. max-height: 100% caps the SVG + // to the aperture height — without it the .sky-svg's 480px max-* would let + // the wheel render taller than the section, overflowing into the form-col + // on cramped landscape phones. .sky-page .sky-wheel-col { aspect-ratio: auto; max-width: none; - max-height: none; + max-height: 100%; width: 100%; + overflow: hidden; + + .sky-svg { + max-width: 100%; + max-height: 100%; + } } // form-col loses its grow/min-height fill so the snap basis (min-height:100% diff --git a/src/templates/core/base.html b/src/templates/core/base.html index a0ffefb..997b27d 100644 --- a/src/templates/core/base.html +++ b/src/templates/core/base.html @@ -74,6 +74,32 @@ {% block scripts %} {% endblock scripts %} +