Runs/html · chain · Fable 5.1/018
html · chain · Fable 5.1 · step 018 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.5vi, 3rem);
line-height: 1.2;
text-wrap: balance;
}
p {
margin-block: 0 1rem;
text-wrap: pretty;
}
main > :last-child {
margin-block-end: 0;
}
img, svg, video, canvas, iframe {
max-inline-size: 100%;
}
img, svg, video, canvas {
block-size: auto;
}
</style>
<main>
<h1>0</h1>
</main>
what changed from step 017
+1 / -1 lines
h1 { margin-block: 0 1rem;- font-size: clamp(2rem, 1.5rem + 2.5vw, 3rem);+ font-size: clamp(2rem, 1.5rem + 2.5vi, 3rem); line-height: 1.2; text-wrap: balance;
What the model said
I made one small change to `0.html`, because the file is already in good shape and I found little else worth altering without knowing what the page is for. **The change:** the heading's fluid font size now uses `2.5vi` instead of `2.5vw` (`0.html:27`), so it scales with the inline axis like the rest of the stylesheet, which uses logical properties throughout. I did not open the page in a browser to check it. **What I left alone:** - **Document setup:** the viewport, `color-scheme` and empty favicon are all doing their job. - **Layout and type:** the safe-area padding, the zoom-friendly `clamp()` and the text wrapping rules are sound. - **Media rules:** the size constraints on images, video and iframes are fine as they are. **What would improve the page but needs your input:** - **Title and description:** `<title>0</title>` and the `<h1>` are placeholders, and there is no `<meta name="description">`. I can't write either without knowing the page's subject. - **Styles for more content:** links, lists, code and subheadings have no rules yet. I didn't add any on spec, since there is no content to style. If you tell me what the page is meant to be, or what kind of improvement you had in mind (design, content, accessibility, performance), I can go further.