From 524088be72c1cd3a7a054fe8c85af05621608369 Mon Sep 17 00:00:00 2001 From: builder-2 Date: Sat, 5 Sep 2026 15:17:34 +0000 Subject: [PATCH] fix(templates): start the spacing compaction where the layout changes Three templates change height by hundreds of pixels across one pixel of viewport. The compaction ended at 30/34rem and the wider layout did not begin until 44/62rem, so between the two the document ran full desktop spacing inside a still-narrow single column. report 3,337 @481 -> 2,780 @481 research-brief 3,286 @552 -> 2,622 @545 postmortem 2,958 @545 -> 2,464 @545 A cliff is a layout defect at any cap, which is why this is separated from the height work held against the 2,900 re-derivation. No spacing value changes. The existing compaction block is split: the spacing half now starts at the width where the layout actually becomes one column, the type half stays where the measure needs it. Moved declarations are appended at the end of the target block so they still win where they already won -- placing them at the start silently handed three selectors to a later rule and cost postmortem 40px at 320 before it was caught. Rendered content is byte-identical to main for all seven templates. Every change here is CSS, no prose was removed to pay for it, and no gutter or spacing work is bought against the sub-390 band -- that stays frozen, and these three still peak above the cap at 320 as a result. That is the part that genuinely depends on the number. Co-Authored-By: CRHQ --- templates/postmortem.html | 45 +++++++++++++++++++++-------------- templates/report.html | 26 ++++++++++++-------- templates/research-brief.html | 33 +++++++++++++++---------- 3 files changed, 63 insertions(+), 41 deletions(-) diff --git a/templates/postmortem.html b/templates/postmortem.html index e9d14d1..bf69d6b 100644 --- a/templates/postmortem.html +++ b/templates/postmortem.html @@ -137,7 +137,6 @@ /* table -> card. caption MUST be re-declared: an anonymous table box collapses it. */ .acts,.acts caption,.acts tbody,.acts tr,.acts td{display:block} .acts thead{display:none} -.acts caption{margin-bottom:0} .acts tr{display:grid;grid-template-columns:auto auto 1fr;gap:.15rem var(--s3);padding:var(--s3) 0; border-top:1px solid var(--line)} .acts td{padding:0;border-top:0} @@ -147,37 +146,47 @@ .a-due{grid-column:2;grid-row:3;margin-top:.15rem} .a-who::after{content:"ยท";margin-left:.5em;color:var(--line2)} .acts td:last-child{grid-column:2/-1;grid-row:1;justify-self:start} -} -@media (max-width:34rem){ + :root{--s3:.625rem;--s4:.875rem;--s5:1rem;--s6:1.125rem;--s7:1.25rem;--s8:1.5rem} -body{padding:var(--s5) var(--s4) var(--s8);font-size:.9375rem;line-height:1.46} -.ttl{font-size:1.625rem;line-height:1.1} -.summary{margin-top:var(--s3);font-size:1.0625rem} +body{padding:var(--s5) var(--s4) var(--s8)} +.summary{margin-top:var(--s3)} .dl{padding-bottom:var(--s3)} .sec,.two,.chart{margin-top:var(--s5)} .two{gap:var(--s5)} .h-sec{padding-bottom:var(--s1)} -.tl p,.fac p,.well li,.cause>p+p,.acts td{line-height:1.36} .impact{padding:var(--s3) var(--s4)} -.figs{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s2) var(--s4)} -.figs>div+div{padding-left:0;border-left:0} -.figs>div:nth-child(even){padding-left:var(--s4);border-left:1px solid var(--ol)} -.figs dd{font-size:1.25rem} -.figs p{font-size:.75rem;line-height:1.3} -.chart svg{height:82px} -.tl li{grid-template-columns:3.25rem minmax(0,1fr);gap:var(--s3)} +.figs{gap:var(--s2) var(--s4)} +.figs>div+div{padding-left:0} +.figs>div:nth-child(even){padding-left:var(--s4)} +.tl li{gap:var(--s3)} .tl__b{padding-left:var(--s4);padding-bottom:var(--s1)} -.tl__b::before{left:calc(3.25rem + var(--s3))} -.tl__t{font-size:.8125rem} -.tl li.key h3{font-size:1.0625rem} .cause{padding:var(--s3) var(--s4)} -.cause>p.lede{font-size:1.0625rem} .fac li+li{margin-top:var(--s1);padding-top:var(--s1)} .well li+li{margin-top:var(--s1)} .acts tr{padding-block:var(--s1)} .acts caption{margin-bottom:var(--s2);padding-bottom:var(--s1)} .colophon{margin-top:var(--s4);padding-top:var(--s2)} } +@media (max-width:34rem){ +/* Spacing compaction now starts where the layout becomes one column, not here: between + the two, the document jumped hundreds of px across one pixel of viewport. Same + values, earlier start; type stays here. */ +body{font-size:.9375rem;line-height:1.46} +.ttl{font-size:1.625rem;line-height:1.1} +.summary{font-size:1.0625rem} +.tl p,.fac p,.well li,.cause>p+p,.acts td{line-height:1.36} +.figs{grid-template-columns:repeat(2,minmax(0,1fr))} +.figs>div+div{border-left:0} +.figs>div:nth-child(even){border-left:1px solid var(--ol)} +.figs dd{font-size:1.25rem} +.figs p{font-size:.75rem;line-height:1.3} +.chart svg{height:82px} +.tl li{grid-template-columns:3.25rem minmax(0,1fr)} +.tl__b::before{left:calc(3.25rem + var(--s3))} +.tl__t{font-size:.8125rem} +.tl li.key h3{font-size:1.0625rem} +.cause>p.lede{font-size:1.0625rem} +} diff --git a/templates/report.html b/templates/report.html index e11f689..2aeeab6 100644 --- a/templates/report.html +++ b/templates/report.html @@ -140,6 +140,17 @@ .quarter{display:grid;grid-template-columns:repeat(auto-fit,minmax(7.5rem,1fr));gap:var(--s4); padding-left:0;padding-top:var(--s4);border-left:0;border-top:1px solid var(--line2)} .quarter div+div{margin-top:0;padding-top:0;border-top:0} + + :root{--s3:.625rem;--s4:.875rem;--s5:1rem;--s6:1.25rem;--s7:1.375rem} + body{padding:var(--s2) var(--s2) var(--s6)} + .paper{padding:var(--s4) var(--s3) var(--s5)} + .chart{padding:var(--s4)} + .steps li{padding:var(--s3) 0} + .next{padding-top:var(--s5)} + .list li+li{margin-top:var(--s2)} + .sec{margin-top:var(--s6)} + .sec>p,.sec>h3+p{margin-top:var(--s3)} + .colophon{margin-top:var(--s5);padding-top:var(--s3)} } @media (max-width:48rem){ body{padding:var(--s4) var(--s3) var(--s6)} @@ -147,20 +158,15 @@ .byline{gap:var(--s4) var(--s5)} } @media (max-width:30rem){ - :root{--s3:.625rem;--s4:.875rem;--s5:1rem;--s6:1.25rem;--s7:1.375rem} - body{padding:var(--s2) var(--s2) var(--s6);font-size:.9375rem;line-height:1.48} - .paper{padding:var(--s4) var(--s3) var(--s5);border-radius:.625rem} - .chart{padding:var(--s4)} + /* Spacing compaction now starts where the layout becomes one column, not here: between + the two the document ran desktop spacing in a narrow column and jumped hundreds of px + across one pixel of viewport. Same values, earlier start; type stays here. */ + body{font-size:.9375rem;line-height:1.48} + .paper{border-radius:.625rem} .title{line-height:1.14} .lede__lead,.pull{font-size:1rem} .sec h2,.next h2{font-size:1.375rem} - .steps li{padding:var(--s3) 0} - .next{padding-top:var(--s5)} - .list li+li{margin-top:var(--s2)} - .sec{margin-top:var(--s6)} - .sec>p,.sec>h3+p{margin-top:var(--s3)} .list li,.steps p,.lede p{line-height:1.42} - .colophon{margin-top:var(--s5);padding-top:var(--s3)} } diff --git a/templates/research-brief.html b/templates/research-brief.html index 5e9d889..386fe0b 100644 --- a/templates/research-brief.html +++ b/templates/research-brief.html @@ -115,39 +115,46 @@ color:var(--subtle);font-size:.8125rem;line-height:1.55} @media (max-width:62rem){ - .cols{grid-template-columns:minmax(0,1fr);gap:var(--s6)} + .cols{grid-template-columns:minmax(0,1fr)} .rail{grid-template-columns:repeat(auto-fit,minmax(min(15rem,100%),1fr))} -} -@media (max-width:34rem){ + :root{--s3:.625rem;--s4:.875rem;--s5:1rem;--s6:1.125rem;--s7:1.25rem;--s8:1.5rem} - body{padding:var(--s5) var(--s4) var(--s8);font-size:.9375rem;line-height:1.46} - .q{line-height:1.1} + body{padding:var(--s5) var(--s4) var(--s8)} .mast{padding-bottom:var(--s4)} .meta{margin-top:var(--s4);gap:var(--s1) var(--s4)} .answer{padding:var(--s4)} - .answer p{margin-top:var(--s2);font-size:1.0625rem;line-height:1.34} + .answer p{margin-top:var(--s2)} .answer p+p{margin-top:var(--s2)} .cols{margin-top:var(--s5);gap:var(--s5)} .h-sec{padding-bottom:var(--s1)} - .ev p,.bul li,.card>p,.srcs li,.cite{line-height:1.36} .ev__n{padding-top:.1rem} - .ev h3{font-size:1rem;line-height:1.16} .ev p{margin-top:var(--s1)} - .ev li{grid-template-columns:1.75rem minmax(0,1fr);gap:var(--s3);padding-bottom:var(--s3)} + .ev li{gap:var(--s3);padding-bottom:var(--s3)} .ev li+li{padding-top:var(--s3)} .cite{margin-top:var(--s2)} .card{padding:var(--s4)} .card>p{margin-top:var(--s2)} - .conf{line-height:1.2} .scale{margin-top:var(--s2)} .srcs li+li{margin-top:var(--s2);padding-top:var(--s2)} - /* the rail stops being a rail: confidence and method pair up, sources runs full width */ - .rail{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s4)} - .rail>section:nth-child(2){grid-column:1/-1;order:1} + .rail{gap:var(--s4)} .closers{margin-top:var(--s5);padding-top:var(--s3);gap:var(--s4)} .bul li+li{margin-top:var(--s2)} .colophon{margin-top:var(--s5);padding-top:var(--s3)} } +@media (max-width:34rem){ + /* Spacing compaction now starts where the layout becomes one column, not here: between + the two the document ran desktop spacing in a narrow column and jumped hundreds of px + across one pixel of viewport. Same values, earlier start; type stays here. */ + body{font-size:.9375rem;line-height:1.46} + .q{line-height:1.1} + .answer p{font-size:1.0625rem;line-height:1.34} + .ev p,.bul li,.card>p,.srcs li,.cite{line-height:1.36} + .ev h3{font-size:1rem;line-height:1.16} + .ev li{grid-template-columns:1.75rem minmax(0,1fr)} + .conf{line-height:1.2} + .rail{grid-template-columns:repeat(2,minmax(0,1fr))} + .rail>section:nth-child(2){grid-column:1/-1;order:1} +}