html · chain · relay · step 006 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">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="A properly structured HTML5 document.">
<meta name="color-scheme" content="light dark">
<meta name="theme-color" content="#ffffff" media="(prefers-color-scheme: light)">
<meta name="theme-color" content="#121212" media="(prefers-color-scheme: dark)">
<title>Welcome</title>
<style>
:root {
color-scheme: light dark;
--text: #333;
--background: #fff;
--accent: #0066cc;
}
@media (prefers-color-scheme: dark) {
:root {
--text: #ddd;
--background: #121212;
--accent: #66b3ff;
}
}
*,
*::before,
*::after {
box-sizing: border-box;
}
body {
font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
line-height: 1.6;
max-width: 70ch;
margin: 0 auto;
padding: max(1.25rem, env(safe-area-inset-top)) max(1.25rem, env(safe-area-inset-right)) max(1.25rem, env(safe-area-inset-bottom)) max(1.25rem, env(safe-area-inset-left));
color: var(--text);
background: var(--background);
-webkit-text-size-adjust: 100%;
text-size-adjust: 100%;
}
h1 {
color: var(--accent);
line-height: 1.2;
text-wrap: balance;
}
p {
text-wrap: pretty;
}
a {
color: var(--accent);
text-underline-offset: 0.15em;
}
:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 2px;
}
</style>
</head>
<body>
<main>
<h1>Welcome</h1>
<p>This is a properly structured HTML5 document.</p>
</main>
</body>
</html>
what changed from step 005
+8 / -2 lines
<meta name="description" content="A properly structured HTML5 document."> <meta name="color-scheme" content="light dark">+ <meta name="theme-color" content="#ffffff" media="(prefers-color-scheme: light)">+ <meta name="theme-color" content="#121212" media="(prefers-color-scheme: dark)"> <title>Welcome</title> <style>⋯ line 31 font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; line-height: 1.6;- max-width: 800px;+ max-width: 70ch; margin: 0 auto;- padding: 20px;+ padding: max(1.25rem, env(safe-area-inset-top)) max(1.25rem, env(safe-area-inset-right)) max(1.25rem, env(safe-area-inset-bottom)) max(1.25rem, env(safe-area-inset-left)); color: var(--text); background: var(--background);⋯ line 44 text-wrap: balance; }+ p {+ text-wrap: pretty;+ } a { color: var(--accent);+ text-underline-offset: 0.15em; } :focus-visible {
What the model said
I made four small changes to `0.html`. I haven't opened it in a browser to check them: - **Line length:** `max-width` is now `70ch` instead of `800px`, so lines stay a comfortable length for reading at any font size. - **Notched phones:** the page padding now also accounts for safe areas, so content stays clear of screen notches. - **Browser bar color:** added `theme-color` tags so the mobile browser bar matches the page in both light and dark mode. - **Text details:** paragraphs use `text-wrap: pretty` to avoid a single word left alone on the last line, and link underlines sit a little lower so they're easier to read. The page still has almost no content. If you tell me what it's for (a landing page, a blog post, docs), I can make bigger changes, like adding a header, navigation, footer and a real description tag.