[meaningfool]

Implements #29 (part of #35). This is the first unit, so the tokens, fonts, frame, header and footer are built for the later units to reuse.

What changes

• Fonts are self-hosted, and none come from Google Fonts. src/fonts/ holds Latin subsets of DejaVu Sans Mono 2.37 (24 KB) and Newsreader 1.003, regular and italic (58 KB and 65 KB). Newsreader's weight is fixed at 400 and its optical size axis is kept, which is what Google Fonts serves the prototype. scripts/subset-fonts.py remakes the files: it downloads the originals, checks their SHA-256 and gives the same output every time. The licences sit next to the fonts. The mono subset leaves out symbols that also exist as emoji (⚙ ★ ✅), so those still show as emoji. Vite fingerprints the fonts under /_astro/, so they get the long cache, and every page preloads the mono font.
• Removed: Space Mono, Roboto Mono and Poppins, the weight-300 body text, and Google Fonts in the report-only CSP (public/_headers). public/fonts/space-mono-*.woff2 were in fact Google 404 HTML pages, so /documents/ had been falling back to the system mono font.
• Tokens (src/styles/tokens.css): page, ink, muted, line, panel, tint and accent, plus --mono and --serif. It has no element styles, so /documents/ can load it safely. Base styles (src/styles/global.css) follow the prototype: 13px/1.6 mono, links in running text underlined, and the focus ring.
• Frame component: content up to 1240px wide with 24px side padding, with the header above it and the footer below.
  • Header: 84px tall with a 1px line under it. The wordmark (22px, -0.055em, the dot in the accent colour) links to the home. Home and About are 13px and muted; the current page is in ink, underlined in the accent colour with a 6px offset. The nav stays visible on phones.
  • Footer: the wordmark at 16px, then About, LinkedIn, GitHub and X at 12px in muted. Its spacing is the prototype's (96px above, 28px and 48px of padding). Below 900px the links go under the wordmark.
  • Wordmark is its own component, and Layout wraps every page in Frame.
• 404: the new header and footer around the existing copy, in the hero's type style. The not-found view of /documents/ uses the same components and renders pixel for pixel like /404.html.
• Pages not redesigned yet (home, articles, About): their content keeps its old layout and sizes. src/styles/legacy.css holds the old global styles under :where(.legacy), so each rule has the same specificity it had before. Those pages' <main> carries the legacy class. Only the fonts, the weights and the colours change. Article text and About text are in Newsreader; everything else is in DejaVu Sans Mono. Redesign: home page #31, Redesign: article page #32 and Redesign: About page #33 drop the class as they rebuild their page, and the last one deletes the file.

Choices to check

• Side padding: the prototype's body keeps the browser's 8px margin, so on a phone its gutter is 32px. Here it is 24px, as the issue says. At 1440px the header is identical to the prototype's.
• Footer placement: the prototype only shows the footer on the article, inside the 720px column. Here it spans the 1240px frame on every page, as in the Paper article export, and it ends the page with its 48px padding, without the prototype's extra 96px. Redesign: article page #32 can move it into the column if that's wanted.
• /documents/: the portfolio view keeps its own header (wordmark and name). Only its font changes, to DejaVu Sans Mono.
• Bold in articles: Newsreader is loaded in one weight, so strong is drawn as a browser bold (600) until Redesign: article page #32 styles the text.
• The viewport meta now includes initial-scale=1, as on the 404 page and in the prototype. The 404 page also gets the favicon and a doctype; before, it rendered in quirks mode.

Validation

Head commit: 7d38043c7c0f4c48a6537d6e9177551cb5291429, on base b30e3037a74306716125c804e3a0a8bc981f84a4. Node 24.22.1, Bun 1.4.4, content submodule at bf783ba (git submodule update --init --remote).

• bun install, then bun run build: passes, 62 pages.
• bun run test:documents: 10 tests, 10 passed.
• No outside fonts: the built dist/ has no reference to googleapis or gstatic. In headless Chromium, /, /about/, an article, a daily log, an unknown URL (the 404) and /documents/ make no request to any other host. They load only /_astro/dejavu-sans-mono.*.woff2 and, on articles and About, /_astro/newsreader.*.woff2, with no console errors apart from the expected 404 status.
• Prototype comparison at 1440px and 375px (Playwright screenshots of docs/redesign/prototype/index.html and of the built pages):
  • At 1440px, the header's ink is in the same box as the prototype's: wordmark at x=124, Home at x=1223.5 and About at x=1276.9, the line from x=124 to x=1316.
  • The font sizes, the letter-spacing (-1.21px) and the colours read from the browser match the issue.
  • In the footer, the wordmark is 30.6px below the line and the links 29px, 58.1px apart. Below 900px it becomes a column, with the links 61px below the line. All of these are the same as in the prototype.
  • At 375px, the only difference is the 24px gutter.
• Pages outside the issue: I diffed the build before and after this change.
  • The <main> content of all 62 pages is identical once the class rename and the scope attributes are set aside.
  • The <head> changes only in the viewport meta (and, on the 404 page, the favicon).
  • rss.xml, the sitemap, _redirects and robots.txt are unchanged, and llms*.txt differ only in their build timestamp.
  • In before-and-after screenshots, the home, an article and About keep their content layout; only the fonts and colours, the new header and footer, and the underlined links in running text change.
  • The daily logs' existing horizontal overflow on phones is still there, slightly smaller: 418px instead of 470px.

🤖 Generated with Claude Code

https://claude.ai/code/session_013MdjUerTCBDeF5DG9puDd2

[github-actions]

Preview: https://pr-36-meaningfool.josselin-perrus.workers.dev

Built from 7d38043 with the latest content. The link stays the same and shows the latest push. Search engines are asked not to index it.

[meaningfool]

Review checkpoint: accepted, no fixes needed

Head: 7d38043c7c0f4c48a6537d6e9177551cb5291429, base b30e3037a74306716125c804e3a0a8bc981f84a4 (origin/redesign). Node 24.22.1, Bun 1.4.4, content submodule at bf783ba.

Build and tests

• bun install, then bun run build: passes, 62 pages. bun run test:documents: 10 of 10 pass. The CI build check passes.
• scripts/subset-fonts.py, run in a scratch directory, gives byte-identical copies of all three .woff2 files. DejaVu Sans Mono 2.37 has 502 code points. Newsreader regular and italic 1.003 each have 224, with the opsz axis kept (6 to 72) and the weight fixed at 400. Every character in the articles and logs is covered by a subset or is an emoji.

Issue #29, point by point

• Fonts are self-hosted and subset. Text in articles and About is Newsreader; everything else is DejaVu Sans Mono. No built page or _headers refers to googleapis or gstatic. In headless Chromium, /, /about/, an article, a daily log, an unknown URL and /documents/ make no request to another host. They load only /_astro/dejavu-sans-mono.*.woff2, and /_astro/newsreader.*.woff2 where the page has article or About text. The preview's HTML references the same font file, and Cloudflare serves it as font/woff2 with the one-year immutable cache.
• The seven colour tokens hold the issue's values. Links in running text are underlined.
• Space Mono, Roboto Mono, Poppins and the weight-300 body text are gone. public/fonts/space-mono-* really were Google's 404 HTML pages.
• All 62 built pages have a doctype, the new header and the new footer. Every internal link ends with a slash. The 404 page uses the new frame, and the not-found view of /documents/ matches /404.html pixel for pixel in full-page screenshots at 1440px and 375px.

Comparison with the prototype (docs/redesign/prototype/index.html: home, #article and #about, at 1440px and 375px)

• Header: 84px tall with a 1px #e5e5e2 line under it. The wordmark is at x=124 (22px, -1.21px letter-spacing, the dot in #b64b00), Home is at x=1223.5 and About at x=1276.9 (13px, #686862). The current page is in #151515, underlined in the accent colour with a 6px offset. These boxes are identical to the prototype's. At 375px, the only difference is the 24px gutter the issue asks for (the prototype has 32px).
• Footer: the wordmark is 28.6px below the line and the links 31px below it, with 58.1px from About to LinkedIn. Below 900px it becomes a column: 27px and 63px below the line. All the same as the prototype's .post-foot. Spanning the frame, with no extra 96px at the end, matches the Paper export article-v2.png.
• At 320, 600, 899, 901, 1024, 1280 and 1920px nothing scrolls sideways, and the nav stays visible. The keyboard order is skip link, wordmark, Home, About, with the accent focus ring.

Pages outside the scope (origin/redesign built and compared)

• Every <main> except the 404 page and /documents/ is identical once the container → legacy rename and the scope attributes are set aside. The <head> changes only by Google Fonts out, the font preload in, and initial-scale=1; on the 404 page it adds the favicon.

• rss.xml, the sitemaps, _redirects, robots.txt, portfolio-entry.js, shared-documents/, document-grants/ and images/ are unchanged. llms*.txt differ only in their build timestamp, and _headers only in the CSP's Google Fonts sources.

• I compared the computed styles of every element in <main> on all 60 home, About, article and log pages at 1440px. The only differences are:

  • links are underlined;
  • the column is 812.8px wide instead of 810.1px, because ch is now measured in DejaVu;
  • the 36px gap under the header moved from the old separator to main.

  Text starts at x=313.6 instead of 314.9. Everything else (margins, paddings, sizes, line heights, list and table styles) is unchanged.

• The portfolio view of /documents/, forced on, renders the same as before. The daily logs still scroll sideways on phones, as on the base, a little less: 418px wide instead of 470px.

Secrets and personal data: none in the diff. The LinkedIn, GitHub and X links were already public on the site.

Notes, not blocking

• The header sits at y=0. The prototype's sits at y=8 because its body keeps the browser's margin.
• With a valid link, the portfolio view of /documents/ keeps its own header and has no footer. The PR says so, and so does AGENTS.md. The owner decides.
• On the not-found view of /documents/, the focus ring is 4px from the element (that page's own :focus-visible), against 3px on /404.html. It only shows on keyboard focus.
• The two licence texts have trailing spaces, copied from upstream. Leave them as they are.

---

Generated by Claude Code