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++) {