From 74350ca0a595d2854bc26545dd378b2ce759c84e Mon Sep 17 00:00:00 2001 From: builder-1 Date: Sat, 5 Sep 2026 17:41:47 +0000 Subject: [PATCH] fix(proposal): move the spacing onto the layout boundary and make the type fluid The 34rem block toggled type scale and spacing while declaring nothing structural, so a reader between 545 and 599 received a measure set for a layout they did not have. I caused that. #29 lifted `.hero{grid-template-columns}` out of the 34rem block into its own 37.5rem block to fix a horizontal overflow, which left the old boundary purely typographic. Before #29 that block did declare layout. Rather than give the old boundary a structural rule it does not need, the spacing moves to 37.5rem where the hero actually restructures, and the two stepped type sizes become `clamp()` so there is no step to misplace. That is the shape `runbook` and `changelog` already use: one breakpoint, fluid type. media blocks 2 -> 1 structural decls in it 1 font-size in any block 0 step at 540..550 none remaining boundary 600->601, +541, and it restructures 390 2,687 -> 2,687 unchanged 768 1,995 -> 1,987 8px better 1,440 2,060 -> 2,060 unchanged overflow 0 across 992 widths (320-700 step 1, 700-1920 step 2), innerWidth asserted before every recorded measurement Nothing removed, no line-height touched. Co-Authored-By: CRHQ --- templates/proposal.html | 29 +++++++++++++++-------------- 1 file changed, 15 insertions(+), 14 deletions(-) diff --git a/templates/proposal.html b/templates/proposal.html index ebf4dfa..9a9c35d 100644 --- a/templates/proposal.html +++ b/templates/proposal.html @@ -38,7 +38,7 @@ .eyebrow{display:inline-flex;align-items:center;gap:.5rem;color:var(--amber);font-size:.75rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase} .eyebrow::before{content:"";width:1.25rem;height:.1875rem;background:var(--amber)} .mast h1{margin:.625rem 0 0;font-size:clamp(1.875rem,4.4vw,2.75rem);font-weight:700;text-wrap:balance} -.mast .lead{margin-top:.625rem;color:var(--muted);font-size:1.0625rem} +.mast .lead{margin-top:.625rem;color:var(--muted);font-size:clamp(1rem,.9rem + .3vw,1.0625rem)} .route{display:flex;flex-wrap:wrap;gap:.375rem 1.25rem;margin-top:1.125rem;padding-top:.875rem;border-top:1px solid var(--line-2);font-size:.8125rem;color:var(--subtle)} .route b{color:var(--muted);font-weight:600} @@ -55,7 +55,7 @@ /* the argument */ .move{margin-top:2rem;font-size:1rem} -.move h2{display:flex;align-items:baseline;gap:.625rem;font-size:1.1875rem;font-weight:700} +.move h2{display:flex;align-items:baseline;gap:.625rem;font-size:clamp(1.0625rem,.95rem + .36vw,1.1875rem);font-weight:700} .move h2 .i{color:var(--amber);font-size:.8125rem;font-weight:700;font-variant-numeric:tabular-nums} .move p{margin-top:.5rem;color:var(--muted)} .move p+p{margin-top:.625rem} @@ -77,12 +77,21 @@ .colophon{margin-top:2.25rem;padding-top:1rem;border-top:1px solid var(--line-2);color:var(--subtle);font-size:.8125rem} -@media (max-width:34rem){ +@media (max-width:37.5rem){ + /* The hero is `minmax(0,auto) minmax(0,1fr)`: the figure claims ~470px, so below 600 the note + column collapses to 0-49px and its `41 minutes` runs past the viewport (49px of horizontal + overflow at 545, 40 at 560, 0 from 600). Stacking until the two-column layout actually fits + is the fix; the previous breakpoint stacked only to 544 and left 545-599 broken. */ + .hero{grid-template-columns:minmax(0,1fr);gap:.625rem} + .hero .note{padding-bottom:0} + + /* Spacing moves with the layout, not on its own. This block used to toggle at 34rem + declaring only type and spacing — a reader at 545-599 got a measure set for a layout + they did not have. #29 caused that by lifting the hero grid out of it; the fix is to + put the spacing where the restructure is rather than to give the old boundary a + structural rule it does not need. The two type steps are now fluid and gone. */ .page{padding:1.875rem 1rem 2rem} - .mast .lead{font-size:1rem} .support li{padding-block:.3125rem} - .move h2{font-size:1.0625rem} - /* height tightening — spacing only, no content removed */ .route{margin-top:1rem;padding-top:.75rem} .hero{margin-top:1.25rem;padding-bottom:.875rem} .support{margin-top:1rem} @@ -96,14 +105,6 @@ .ask .when{margin-top:.625rem;padding-top:.625rem} .colophon{margin-top:1.25rem;padding-top:.875rem} } -@media (max-width:37.5rem){ - /* The hero is `minmax(0,auto) minmax(0,1fr)`: the figure claims ~470px, so below 600 the note - column collapses to 0-49px and its `41 minutes` runs past the viewport (49px of horizontal - overflow at 545, 40 at 560, 0 from 600). Stacking until the two-column layout actually fits - is the fix; the previous breakpoint stacked only to 544 and left 545-599 broken. */ - .hero{grid-template-columns:minmax(0,1fr);gap:.625rem} - .hero .note{padding-bottom:0} -}