Runs/html · chain · Fable 5.1/007
html · chain · Fable 5.1 · step 007 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: 0;
margin-inline: auto;
padding: 1.5rem;
padding-inline: max(1.5rem, env(safe-area-inset-left)) max(1.5rem, env(safe-area-inset-right));
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;
}
</style>
<main>
<h1>0</h1>
</main>
what changed from step 006
+3 / -1 lines
<html lang="en"> <meta charset="utf-8">- <meta name="viewport" content="width=device-width, initial-scale=1">+ <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover"> <meta name="color-scheme" content="light dark"> <title>0</title>⋯ line 16 margin-inline: auto; padding: 1.5rem;+ padding-inline: max(1.5rem, env(safe-area-inset-left)) max(1.5rem, env(safe-area-inset-right)); font: 100%/1.5 system-ui, sans-serif; overflow-wrap: break-word;⋯ line 22 h1 { margin-block: 0 1rem;+ font-size: clamp(2rem, 1.5rem + 2.5vw, 3rem); line-height: 1.2; text-wrap: balance;
What the model said
`0.html` was already in good shape, so I made only two small changes and left the rest alone. I haven't opened it in a browser to check them. ## What changed - **Notched phones:** added `viewport-fit=cover` and made the side padding respect the safe-area insets, so the page background runs edge to edge in landscape while the text stays clear of the notch. - **Heading size:** the `h1` now scales with viewport width, from 2rem on narrow screens up to 3rem on wide ones, instead of the fixed browser default. ## What I left alone The rest already works well: the minimal valid document structure, `lang`, the `color-scheme` meta for automatic dark mode, the empty favicon, logical properties, and `text-wrap: balance`. ## What needs you - **Title and description:** the `<title>` is just "0" and there is no `<meta name="description">`. Both depend on what the page is for, so I didn't invent any. - **Content styles:** the page has only a heading. Styles for paragraphs, links, images or code are worth adding once that content exists.