Skip to content

fix(templates): hold the height budget at every width, not three samples #30

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
scheemunai wants to merge 2 commits into from
Closed

fix(templates): hold the height budget at every width, not three samples #30

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
2c48dba
fix(templates): hold the height budget at every width, not three samples
crhq Sep 5, 2026
1aad8a6
refactor(templates): restore the prose the byte cap took, and show th…
crhq Sep 5, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
11 changes: 10 additions & 1 deletion templates/case-study.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -94,7 +94,7 @@
.body p+p{margin-top:var(--s3)}
.body h3{margin-top:var(--s5);font-size:1.0625rem}
.body h3:first-child{margin-top:0}
.two{display:grid;grid-template-columns:repeat(auto-fit,minmax(18rem,1fr));gap:var(--s6);
.two{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(18rem,100%),1fr));gap:var(--s6);
margin-top:var(--s6)}
.snag{padding:var(--s5);border:1px solid var(--rust-line);border-radius:.75rem;
background:var(--rust-soft)}
Expand Down Expand Up @@ -143,7 +143,16 @@
.kicker blockquote{font-size:1.0625rem}
.two{gap:var(--s5)}
.body p,.next li,.snag>p{line-height:1.45}
}/* narrow band: spacing + measure, never leading (WCAG 1.4.12). */
@media (max-width:23rem){
:root{--s3:.5rem;--s4:.75rem;--s5:.875rem;--s6:1rem;--s7:1.125rem;--s8:1.25rem}
body{padding-inline:var(--s3)}
.snag,.kicker{padding:var(--s3)}
.ledger tbody tr{padding-block:var(--s2)}
.next li+li{margin-top:var(--s1)}
.colophon{margin-top:var(--s4);padding-top:var(--s2)}
}

</style>
</head>
<body>
Expand Down
2 changes: 1 addition & 1 deletion templates/metrics-dashboard.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -99,13 +99,13 @@
margin-top:var(--s2);color:var(--subtle);font-size:.8125rem}

/* PANELS */
.panels{display:grid;grid-template-columns:repeat(auto-fit,minmax(20rem,1fr));gap:var(--s4);
.panels{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(20rem,100%),1fr));gap:var(--s4);
margin-top:var(--s4);align-items:start}
.panel{padding:var(--s5);border:1px solid var(--line);border-radius:var(--r);background:var(--card)}
.panel>h2{font-size:1rem}
.panel__note{margin-top:var(--s1);color:var(--subtle);font-size:.75rem}
table{width:100%;margin-top:var(--s4);border-collapse:collapse;text-align:left}
th,td{padding:var(--s2) var(--s3) var(--s2) 0;font-size:.8125rem}

Check warning on line 108 in templates/metrics-dashboard.html

View workflow job for this annotation

GitHub Actions / validate

lint/style/noDescendingSpecificity 

Descending specificity selector found. This selector specificity is (0, 0, 1)

Check warning on line 108 in templates/metrics-dashboard.html

View workflow job for this annotation

GitHub Actions / validate

lint/style/noDescendingSpecificity 

Descending specificity selector found. This selector specificity is (0, 0, 1)
thead th{padding-bottom:var(--s2);border-bottom:1px solid var(--line2);color:var(--subtle);
font-size:.6875rem;letter-spacing:.08em;text-transform:uppercase}
tbody th{font-weight:400;color:var(--ink)}
Expand All @@ -114,7 +114,7 @@
.r--key{font-weight:700}
tfoot th,tfoot td{padding-top:var(--s3);border-top:2px solid var(--line2);
font-size:.8125rem}
caption{text-align:left;color:var(--subtle)}

Check warning on line 117 in templates/metrics-dashboard.html

View workflow job for this annotation

GitHub Actions / validate

lint/style/noDescendingSpecificity 

Descending specificity selector found. This selector specificity is (0, 0, 1)

/* METERS — magnitude against a target */
.meters{margin-top:var(--s4)}
Expand Down Expand Up @@ -145,10 +145,10 @@
}
@media (max-width:44rem){
/* table -> cards. caption MUST be re-declared: an anonymous table box collapses it. */
table,caption,thead,tbody,tfoot,tr,th,td{display:block}

Check warning on line 148 in templates/metrics-dashboard.html

View workflow job for this annotation

GitHub Actions / validate

lint/style/noDescendingSpecificity 

Descending specificity selector found. This selector specificity is (0, 0, 1)

Check warning on line 148 in templates/metrics-dashboard.html

View workflow job for this annotation

GitHub Actions / validate

lint/style/noDescendingSpecificity 

Descending specificity selector found. This selector specificity is (0, 0, 1)

Check warning on line 148 in templates/metrics-dashboard.html

View workflow job for this annotation

GitHub Actions / validate

lint/style/noDescendingSpecificity 

Descending specificity selector found. This selector specificity is (0, 0, 1)
thead{display:none}
table{margin-top:var(--s3)}
caption{padding-bottom:var(--s2);border-bottom:1px solid var(--line2)}

Check warning on line 151 in templates/metrics-dashboard.html

View workflow job for this annotation

GitHub Actions / validate

lint/style/noDescendingSpecificity 

Descending specificity selector found. This selector specificity is (0, 0, 1)
tbody tr,tfoot tr{display:grid;grid-template-columns:auto auto 1fr;align-items:baseline;
gap:.15rem var(--s3);padding:var(--s3) 0;border-top:1px solid var(--line)}
tbody th,tbody td,tfoot th,tfoot td{padding:0;border-top:0}
Expand Down
41 changes: 24 additions & 17 deletions templates/postmortem.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,19 +6,17 @@
<title>Checkout was unavailable for 3 hours 47 minutes on 12 September</title>
<!--
Agent Artifacts template · research / postmortem
VOICE editorial serif (ui-serif, Charter, Iowan Old Style, Georgia); mono for labels, times, IDs
SCHEME warm paper #f0eae0 · rust accent #a8452a · petrol data hue #2c5670 · inked impact strip
VOICE editorial serif (ui-serif, Charter, Iowan Old Style, Georgia); mono for labels/times/IDs
SCHEME warm paper #f0eae0 · rust #a8452a · petrol data #2c5670 · inked impact strip

REWRITING THIS ARTIFACT
· Blameless: name systems and decisions, never people. People appear only as owners.
· The impact strip is the headline: four measured numbers. Don't know one? Remove
the tile — never write "unknown" in it.
· Impact-start, detection and mitigation are the key timeline entries; their
timestamps must agree with the duration in the strip.
· DELETE, don't empty. No chart? Remove the figure. Never an empty heading.
· Never pin the root to the viewport height and never give html or body a percentage
height; no fixed or sticky positioning. The frame measures this document.
· Nothing external: no web fonts, images, scripts or stylesheets.
· Blameless: name systems and decisions, never people; owners only.
· The impact strip is the headline: four measured numbers; omit any you cannot fill.
· Impact-start, detection and mitigation are the key entries; their timestamps must
match the duration in the strip.
· DELETE, don't empty. No chart? Remove the figure. No empty headings.
· Never pin the root to the viewport height or give html/body a percentage height; no
fixed or sticky positioning. Nothing external: no fonts, images, scripts, styles.
-->
<style>
*,*::before,*::after{box-sizing:border-box}
Expand Down Expand Up @@ -92,7 +90,7 @@
letter-spacing:.1em;text-transform:uppercase;white-space:nowrap}

/* CAUSE + FACTORS */
.two{display:grid;grid-template-columns:repeat(auto-fit,minmax(19rem,1fr));gap:var(--s6);margin-top:var(--s6)}
.two{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(19rem,100%),1fr));gap:var(--s6);margin-top:var(--s6)}
.cause{align-self:start;padding:var(--s5);border:1px solid var(--rust-line);border-radius:.75rem;
background:var(--rust-soft)}
.cause h2{color:var(--rust)}
Expand Down Expand Up @@ -134,6 +132,12 @@
color:var(--subtle);font-size:.8125rem;line-height:1.5}

@media (max-width:44rem){
/* compact SPACING from the layout change, not 34rem — see PR. */
:root{--s3:.625rem;--s4:.875rem;--s5:1rem;--s6:1.125rem;--s7:1.25rem;--s8:1.5rem}
.sec,.two,.chart{margin-top:var(--s5)}
.two{gap:var(--s5)}
.h-sec{padding-bottom:var(--s1)}
.colophon{margin-top:var(--s4);padding-top:var(--s2)}
/* 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}
Expand All @@ -149,14 +153,10 @@
.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}
.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)}
Expand All @@ -176,8 +176,15 @@
.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)}
}/* narrow band: spacing + measure; leading untouched (WCAG 1.4.12). */
@media (max-width:23rem){
:root{--s3:.5rem;--s4:.75rem;--s5:.8125rem;--s6:.875rem;--s7:1rem;--s8:1.125rem}
body{padding-inline:var(--s3)}
.impact,.cause{padding:var(--s3)}
.tl li{grid-template-columns:2.75rem minmax(0,1fr)}
.tl__b::before{left:calc(2.75rem + var(--s3))}
}

</style>
</head>
<body>
Expand Down
12 changes: 11 additions & 1 deletion templates/project-status.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -105,7 +105,7 @@
.rail li.risk .rail__s{color:var(--warn)}

/* SCOPE METERS */
.scope{display:grid;grid-template-columns:repeat(auto-fit,minmax(14rem,1fr));gap:var(--s5);
.scope{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(14rem,100%),1fr));gap:var(--s5);
margin-top:var(--s4)}
.m__head{display:flex;align-items:baseline;justify-content:space-between;gap:var(--s2)}
.m__label{font-size:.875rem}
Expand Down Expand Up @@ -175,7 +175,17 @@
.ask__who{margin-top:var(--s2)}
.ask__n{font-size:.6875rem;letter-spacing:.09em;text-transform:uppercase}
.colophon{margin-top:var(--s4);padding-top:var(--s2)}
}/* narrow band: spacing + measure, never leading (WCAG 1.4.12). */
@media (max-width:23rem){
:root{--s3:.5rem;--s4:.75rem;--s5:.875rem;--s6:1rem;--s7:1.125rem;--s8:1.25rem}
body{padding-inline:var(--s3)}
.verdict{padding:var(--s3)}
.blk li{padding-block:var(--s2);padding-inline:var(--s3)}
.ask li{padding-block:var(--s2)}
.rail li{padding-bottom:var(--s1)}
.colophon{margin-top:var(--s4);padding-top:var(--s2)}
}

</style>
</head>
<body>
Expand Down
26 changes: 26 additions & 0 deletions templates/report.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -136,6 +136,15 @@
.next,.colophon{max-width:40rem}
}
@media (max-width:44rem){
/* the band is one column from here down, so the compact SPACING scale starts here rather
than at 30rem — restoring desktop spacing inside a still-narrow sheet is what made this
document taller at 490px than at 390px. Type stays full until 30rem. */
:root{--s3:.625rem;--s4:.875rem;--s5:1rem;--s6:1.25rem;--s7:1.375rem}
.sec{margin-top:var(--s6)}
.sec>p,.sec>h3+p{margin-top:var(--s3)}
.next{padding-top:var(--s5)}
.steps li{padding-block:var(--s3)}
.list li+li{margin-top:var(--s2)}
.lede{grid-template-columns:minmax(0,1fr);gap:var(--s5)}
.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)}
Expand All @@ -161,7 +170,24 @@
.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)}
}/* Below ~360px the sheet wraps hard. Tighten spacing and return measure to the column;
line-height is left alone — 1.5 is the WCAG 1.4.12 baseline and leading is the wrong
thing to spend on a height budget. */
@media (max-width:23rem){
:root{--s3:.5rem;--s4:.75rem;--s5:.8125rem;--s6:1rem;--s7:1.125rem}
.paper{padding-inline:var(--s2)}
.steps li{padding-block:var(--s2)}
.list li+li{margin-top:var(--s1)}
.next{padding-top:var(--s4)}
.colophon{margin-top:var(--s4);padding-top:var(--s3)}
.chart{padding:var(--s3)}
.lede{margin-top:var(--s4);gap:var(--s4)}
.quarter{gap:var(--s3);padding-top:var(--s3)}
.pull{margin:var(--s5) 0;padding-left:var(--s4)}
.sec{margin-top:var(--s5)}
.bars div+div{margin-top:var(--s3)}
}

</style>
</head>
<body>
Expand Down
63 changes: 45 additions & 18 deletions templates/research-brief.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -102,7 +102,7 @@
margin-top:.15rem}

/* CLOSERS */
.closers{display:grid;grid-template-columns:repeat(auto-fit,minmax(17rem,1fr));gap:var(--s5);
.closers{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(17rem,100%),1fr));gap:var(--s5);
margin-top:var(--s7);padding-top:var(--s5);border-top:2px solid var(--ink)}
.closers h2{font-size:1.1875rem}
.bul{margin-top:var(--s4)}
Expand All @@ -115,39 +115,66 @@
color:var(--subtle);font-size:.8125rem;line-height:1.55}

@media (max-width:62rem){
.cols{grid-template-columns:minmax(0,1fr);gap:var(--s6)}
.rail{grid-template-columns:repeat(auto-fit,minmax(15rem,1fr))}
}
@media (max-width:34rem){
/* One column from here down, so the compact SPACING scale applies from here down too —
not from 34rem. Restoring desktop spacing while the layout is still a single narrow
column is what made this document taller at 550px than at 390px. Type is not touched
here; that stays in the 34rem block where the measure actually needs it. */
: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}
.cols{grid-template-columns:minmax(0,1fr);gap:var(--s5);margin-top:var(--s5)}
.rail{grid-template-columns:repeat(auto-fit,minmax(min(15rem,100%),1fr))}
body{padding:var(--s5) var(--s4) var(--s8)}
.mast{padding-bottom:var(--s4)}
.meta{margin-top:var(--s4);gap:var(--s1) var(--s4)}
.meta{margin-top:var(--s4)}
.answer{padding:var(--s4)}
.answer p{margin-top:var(--s2);font-size:1.0625rem;line-height:1.34}
.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{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}
.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){
body{font-size:.9375rem;line-height:1.46}
.q{line-height:1.1}
.meta{gap:var(--s1) var(--s4)}
.answer p{margin-top:var(--s2);font-size:1.0625rem;line-height:1.34}
.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 li{grid-template-columns:1.75rem minmax(0,1fr);gap:var(--s3)}
.conf{line-height:1.2}
/* 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}
}/* Below ~360px the single column wraps hard and the page grows again. Tighten the SPACING
scale only — line-height stays at 1.46/1.36, because 1.5 is the WCAG 1.4.12 baseline and
compressing leading to hit a height budget is the wrong trade. */
@media (max-width:23rem){
:root{--s3:.5rem;--s4:.75rem;--s5:.8125rem;--s6:.875rem;--s7:1rem;--s8:1.125rem}
/* at this width the height is WRAPPING, not spacing — narrowing the side gutters returns
16px of measure to every paragraph, which buys more than another spacing cut does */
body{padding-inline:var(--s3)}
/* Measured, not assumed: unpairing the rail here makes the page TALLER (2,983 -> 3,023),
so the pairing stays. The saving at this width is in the evidence gutter instead. */
.ev li{grid-template-columns:1.5rem minmax(0,1fr);padding-bottom:var(--s2)}
.ev li+li{padding-top:var(--s2)}
.ev__n{font-size:.75rem}
.mast{padding-bottom:var(--s3)}
.answer{padding:var(--s3) var(--s4)}
.card{padding:var(--s3) var(--s4)}
.srcs li+li{margin-top:var(--s1);padding-top:var(--s1)}
.closers{margin-top:var(--s4);padding-top:var(--s2);gap:var(--s3)}
.bul li+li{margin-top:var(--s1)}
.colophon{margin-top:var(--s4);padding-top:var(--s2)}
}

</style>
</head>
<body>
Expand Down
41 changes: 25 additions & 16 deletions templates/service-health.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,25 +6,23 @@
<title>Every service met its objective and the error budget is 71% gone</title>
<!--
Agent Artifacts template · status / service-health
VOICE neo-grotesque ("Helvetica Neue", Helvetica, Arial, Liberation Sans), tabular figures
SCHEME light neutral #eef0f1 · slate-teal data #2f6d78 · no brand accent
VOICE neo-grotesque ("Helvetica Neue", Helvetica, Arial, Liberation Sans), tabular nums
SCHEME light neutral #eef0f1 · slate-teal data #2f6d78 · no accent

THE ARGUMENT — keep it. A status page answers "are we up?": a state, and the provider's
question. This answers "how much unreliability can we still afford, what did we spend it
on, and what is it costing us?" An objective is a FLOOR, a budget is a TOTAL — so every
service can meet its objective while the quarter's budget is gone. Lead with a CLAIM.
question. This answers how much unreliability is left, what spent it, and what that cost.
An objective is a FLOOR, a budget is a TOTAL: every service can meet its objective while
the quarter's budget is gone. Lead with a CLAIM.

· Ledger sorts by BUDGET CONSUMED, never by date: one incident usually dwarfs the rest.
· "What it has already cost" is not optional. A budget with no consequence is a gauge,
and a gauge is what a status page already gives you.
· Strips are 90 bars, one per day. Healthy baseline is ONE tiled SVG <pattern>; add rects
only for a bad day — a knockout in the CARD colour (#fff) then the shorter state bar.
Day d sits at x = d * 4.
· Bar HEIGHT encodes availability, colour encodes state. Keep both, and keep the counts
in words: red and green are one colour to many readers.
· DELETE, don't empty. No incidents? Say so in the hero and drop the ledger.
· Never pin the root to the viewport height, never give html or body a percentage height,
no fixed or sticky positioning. Nothing external: no fonts, images, scripts, styles.
· Ledger sorts by BUDGET CONSUMED, never date — one incident dwarfs the rest.
· "What it has already cost" is not optional — a budget with no consequence is a gauge.
· Strips are 90 bars, one per day. Baseline is ONE tiled SVG <pattern>; add rects only for
a bad day — a knockout in the CARD colour (#fff) then the state bar. Day d is at x = d*4.
· Bar HEIGHT encodes availability, colour encodes state. Keep both, and the counts in
words: red and green are one colour to many.
· DELETE, don't empty. No incidents? Say so in the hero, drop the ledger.
· Never pin the root to the viewport height or give html/body a percentage height; no
fixed or sticky positioning. Nothing external: no fonts, images, scripts.
-->
<style>
*,*::before,*::after{box-sizing:border-box}
Expand Down Expand Up @@ -165,7 +163,18 @@
.chart svg{height:104px}
.strip{height:24px}
.kicker p{font-size:1em}
}@media (max-width:23rem){
:root{--s5:.875rem;--s6:1rem;--s7:1.125rem;--s8:1.25rem}
body{padding-inline:var(--s3)}
.burn,.board,.kicker{padding:var(--s3)}
.active{padding:var(--s2) var(--s3)}
.ledger tbody tr,.ledger tfoot tr,.cost li,.inc li{padding-block:var(--s1)}
.legend,.stats{margin-top:var(--s2);padding-top:var(--s2)}
.strip{height:20px}
.chart svg{height:88px}
.colophon{margin-top:var(--s4)}
}

</style>
</head>
<body>
Expand Down
Loading