Runs/html · chain · Fable 5.1/019
html · chain · Fable 5.1 · step 019 of 64
offline render, Chrome 154, light scheme, 2 s of virtual time
runs in a sandboxed frame with no origin; live pages may fetch CDN fonts the offline render did not
<!DOCTYPE html>
<html lang="en">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
<meta name="color-scheme" content="light dark">
<title>0</title>
<link rel="icon" href="data:,">
<style>
html {
-webkit-text-size-adjust: 100%;
text-size-adjust: 100%;
}
body {
max-inline-size: 40rem;
margin-block: 0;
margin-inline: auto;
padding:
max(1.5rem, env(safe-area-inset-top))
max(1.5rem, env(safe-area-inset-right))
max(1.5rem, env(safe-area-inset-bottom))
max(1.5rem, env(safe-area-inset-left));
font: 100%/1.5 system-ui, sans-serif;
overflow-wrap: break-word;
}
h1, h2, h3, h4, h5, h6 {
margin-block: 0 1rem;
line-height: 1.2;
text-wrap: balance;
}
h1 {
font-size: clamp(2rem, 1.5rem + 2.5vi, 3rem);
}
p, ul, ol, dl, blockquote, pre, table, figure {
margin-block: 0 1rem;
}
p, li, dd, blockquote, figcaption {
text-wrap: pretty;
}
pre {
overflow-x: auto;
tab-size: 2;
}
table {
display: block;
max-inline-size: 100%;
overflow-x: auto;
border-collapse: collapse;
}
:focus-visible {
outline: 2px solid;
outline-offset: 2px;
}
main > :last-child {
margin-block-end: 0;
}
img, svg, video, canvas, iframe {
max-inline-size: 100%;
}
img, svg, video, canvas {
block-size: auto;
}
@media print {
body {
max-inline-size: none;
padding: 0;
}
}
</style>
<main>
<h1>0</h1>
</main>
what changed from step 018
+27 / -3 lines
overflow-wrap: break-word; }- h1 {+ h1, h2, h3, h4, h5, h6 { margin-block: 0 1rem;- font-size: clamp(2rem, 1.5rem + 2.5vi, 3rem); line-height: 1.2; text-wrap: balance; }- p {+ h1 {+ font-size: clamp(2rem, 1.5rem + 2.5vi, 3rem);+ }+ p, ul, ol, dl, blockquote, pre, table, figure { margin-block: 0 1rem;+ }+ p, li, dd, blockquote, figcaption { text-wrap: pretty; }+ pre {+ overflow-x: auto;+ tab-size: 2;+ }+ table {+ display: block;+ max-inline-size: 100%;+ overflow-x: auto;+ border-collapse: collapse;+ }+ :focus-visible {+ outline: 2px solid;+ outline-offset: 2px;+ } main > :last-child { margin-block-end: 0;⋯ line 59 img, svg, video, canvas { block-size: auto;+ }+ @media print {+ body {+ max-inline-size: none;+ padding: 0;+ } } </style>
What the model said
I made a few small additions to the stylesheet in `0.html`. The page was already in good shape, so the rendered page (a single `0` heading) looks the same as before. I haven't opened it in a browser to check. The changes only matter once the page has more content: - **Headings:** `h2`–`h6` now share the `h1`'s margin, line height and balanced wrapping; the fluid font size stays on `h1` only. - **Spacing:** lists, blockquotes, `pre`, tables and figures get the same bottom margin as paragraphs. - **Overflow:** wide `pre` blocks and tables scroll horizontally instead of breaking the layout on narrow screens. - **Keyboard focus:** a visible `:focus-visible` outline that follows the text colour, so it works in light and dark mode. - **Print:** the width cap and screen padding are dropped when printing. I left the markup, the `<title>` and the meta tags alone. I did not add a meta description, because the page has no content to describe yet.