Runs/html · chain · Fable 5.1/015
html · chain · Fable 5.1 · step 015 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 {
margin-block: 0 1rem;
font-size: clamp(2rem, 1.5rem + 2.5vw, 3rem);
line-height: 1.2;
text-wrap: balance;
}
p {
margin-block: 0 1rem;
text-wrap: pretty;
}
img, svg, video {
max-inline-size: 100%;
block-size: auto;
}
</style>
<main>
<h1>0</h1>
</main>
what changed from step 014
+8 / -0 lines
text-wrap: balance; }+ p {+ margin-block: 0 1rem;+ text-wrap: pretty;+ }+ img, svg, video {+ max-inline-size: 100%;+ block-size: auto;+ } </style> <main>
What the model said
`0.html` was already in good shape, so I only added two small CSS rules that matter once the page has real content. Nothing visible changes today, since the page contains only the `<h1>`, and I did not open it in a browser. ## What I added - **Paragraph rule:** paragraphs get the same bottom spacing as the heading and `text-wrap: pretty` to avoid orphaned last words. - **Media rule:** `img`, `svg` and `video` are capped at the column width, so they can't overflow on narrow screens. ## What I left alone The existing markup and styles are untouched, including the safe-area padding, fluid heading size, dark-mode support and empty favicon. ## What needs your input The biggest remaining gap is content, not code: - **Title:** `<title>0</title>` and `<h1>0</h1>` look like placeholders. - **Description:** there is no `<meta name="description">`; I didn't add one because I'd be inventing the text. If you tell me what the page is for, I can fill both in.