From c4bbac0938c9d5ab5cd61061740b1beec344620d Mon Sep 17 00:00:00 2001 From: Disco DeDisco Date: Mon, 25 May 2026 21:40:21 -0400 Subject: [PATCH] =?UTF-8?q?A.7.5-polish-7=20h2=203-letter=20suffix=20spaci?= =?UTF-8?q?ng=20=E2=80=94=20Sky/Sea/Kit=20use=20`space-around`=20instead?= =?UTF-8?q?=20of=20`space-between`=20so=20the=20trio=20doesn't=20park=20le?= =?UTF-8?q?tters=20at=20slot=20edges.=20User-reported=202026-05-25=20PM:?= =?UTF-8?q?=20"These=20three=203-letter=20titles=E2=80=94Sky,=20Sea,=20and?= =?UTF-8?q?=20Kit=E2=80=94take=20up=20way=20too=20much=20space"=20?= =?UTF-8?q?=E2=80=94=20the=20default=20`justify-content:=20space-between`?= =?UTF-8?q?=20on=20the=20suffix=20word-span=20(`=5Fbase.scss:248-253`)=20p?= =?UTF-8?q?ut=20the=20first=20+=20last=20letter=20flush=20against=20the=20?= =?UTF-8?q?slot's=20edges=20+=20left=20a=20yawning=20gap=20mid-span=20("S?= =?UTF-8?q?=20=20=20=20=20=20E=20=20=20=20=20=20A"=20reads=20as=20a=20stre?= =?UTF-8?q?tched-apart=20trio).?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit **Fix** (length-keyed via data attr — extensible to other lengths): 1. `base.html` h2 letter-splitter script adds `span.dataset.letters = String(text.length)` to every word-span as it splits. Length surfaces as `data-letters="3"` / `"4"` / etc. on the DOM. 2. `_base.scss`'s h2 block gets a new `> span[data-letters="3"] { justify-content: space-around; }` override AFTER the default `> span` rule. `space-around` puts equal padding on both sides of each letter, clustering the trio inside the slot rather than splaying it. Surfaces affected (any suffix == 3 letters): Game Sky, Game Sea, Game Kit, Dash Sky — basically every page whose `{% block header_text %}` renders a 3-char suffix tail. Other lengths (Sign / Note / Post / Board / Wallet etc.) unaffected — they keep the default `space-between` because the larger letter count fills the slot naturally w/o looking stretched. **Why length-keyed selector over class-naming**: future expansion. If a 2-letter title ever lands (hypothetical AP / WR), the same selector pattern (`[data-letters="2"]`) bolts in w/o needing a new class taxonomy. The data attr is universal + readable in DevTools. The same hook also opens up `[data-letters]` font-size scaling later if needed. **No regression risk for prefix word**: prefixes are always 4-letter (BILL / DASH / GAME etc. per the `_base.scss` comment at line 222: "First word (always 4 letters)") so `[data-letters="3"]` never matches them; default `space-between` continues for prefix. Verified across all `{% block header_text %}` consumers — none use a 3-letter prefix. Tests: 1314/1314 IT+UT total green (74s; pure SCSS + 1-line JS data-attr addition, no test surface). Visual verify pending user confirmation but the change is contained: the new rule is additive at higher specificity (`> span[data-letters="3"]` = 0,0,2,0 vs `> span` = 0,0,0,1 child combinator) + only justifies-content differently; nothing else cascades. Co-Authored-By: Claude Opus 4.7 (1M context) --- src/static_src/scss/_base.scss | 13 +++++++++++++ src/templates/core/base.html | 7 +++++++ 2 files changed, 20 insertions(+) diff --git a/src/static_src/scss/_base.scss b/src/static_src/scss/_base.scss index 3f8ddce..607e583 100644 --- a/src/static_src/scss/_base.scss +++ b/src/static_src/scss/_base.scss @@ -264,6 +264,19 @@ body { flex: 0 0 55%; padding-inline-start: 0.4em; } + // Sprint A.7.5-polish-7 — 3-letter suffix special case + // (SKY / SEA / KIT). Default `space-between` parks the + // first + last letter at the slot edges + leaves a yawning + // gap mid-span ("S E A"). `space-around` puts + // equal padding on both sides of each letter so the trio + // sits more tightly clustered inside the slot. Data attr + // `data-letters` injected by `base.html`'s splitter script + // — length-keyed so future special cases (e.g. 2-letter + // for a hypothetical AP / WR title) bolt in via the same + // selector pattern. + > span[data-letters="3"] { + justify-content: space-around; + } } } } diff --git a/src/templates/core/base.html b/src/templates/core/base.html index 3454b36..dbc98ee 100644 --- a/src/templates/core/base.html +++ b/src/templates/core/base.html @@ -88,6 +88,13 @@ var text = (span.textContent || '').trim(); if (!text) continue; span.dataset.lettersSplit = '1'; + // Sprint A.7.5-polish-7 — letter count exposed as data-letters + // so CSS can special-case justification per length. 3-letter + // suffixes (SKY/SEA/KIT) get `space-around` instead of the + // default `space-between` to avoid the letters parking at the + // slot edges w. a yawning gap mid-span. See `_base.scss`'s + // `h2 > span[data-letters="3"]` rule. + span.dataset.letters = String(text.length); span.setAttribute('aria-label', text); span.textContent = ''; for (var j = 0; j < text.length; j++) {