Plate № 40 · Foundation · surface baseline
A pattern from the gf.cx specimen book
Reconcile a drifted page — by retrieval, not reconstruction
"Patterns are the way out of drift." · "Every time we need a new-page, retrieve the latest pattern." · "Finding the existing pattern is key."
The problem
A surface built before the canonical new-page template drifts, quietly. Its pages declare Atkinson and Newsreader through a fonts.googleapis.com link instead of the CF-localised @font-face block, so they silently render Verdana and Times. Each page re-declares nav, kicker, h1, lede in bespoke CSS that diverges by a pixel here, a weight there. The surface looks almost right, which is worse than looking wrong — nobody notices until someone lines two pages up.
The instinct is to fix each page by hand: eyeball the type, nudge the sizes, copy a sibling that looks closer. But hand-approximation is how the drift got there. Reconstructing the spec from memory reproduces the very divergence you're trying to remove — a fresh guess on every page.
The pattern
Don't rebuild the page. Retrieve the pattern. The canonical template already is the spec — fonts, tokens, the page-header.css primitive, favicon, made-with. Reconciliation is not authoring; it's re-homing: pull the template fresh, drop the page's real content into it unchanged, and let the shared primitives own the chrome again. The move that fixes drift is the same move that prevents it — retrieve, never reconstruct.
Reconciliation is retrieval, not reconstruction. The page's content is preserved byte-for-byte; only the chrome is swapped for the shared source.
The recipe
- Retrieve fresh
curl -sL https://assets.gf.cx/new-page/template.html— never from memory, never by copying a sibling. Take its<head>verbatim; substitute title / description / canonical / og.- Extract body by tag-depth
- Pull the page-wrapper's inner HTML by walking open/close-tag depth to the true matching close — not a greedy regex (see the gotchas). Preserve the content verbatim.
- Partition the CSS
- Drop a rule only if every selector is template-provided base (
:root · * · body · em · a · h1 · h2 · h3 · code · .nav · .kicker · .lede · .stamp). Keep everything else — including.pagewidth overrides and@mediablocks — below the template's marked line. - Print pages are not reading pages
- A print / handoff bundle gets the font-only swap (googleapis → CF
@font-face); don't impose the reading chrome on it. - Prove, then ship
- Diff the tag-stripped body text old-vs-new — it must be identical. Then verify live:
page-header=1,googleapis=0,HTTP 200.
The gotchas — the two that bite
- made-with can live outside
.page - A greedy
<div class="page">(.*)</div>overruns the wrapper's real close when a page'sdata-made-withfooter sits outside it, swallowing the footer and a stray close. Walk tag depth instead. - Custom
:roottokens must survive - Keep the token names the template lacks (
--bg-card · --green · --amber…). Drop the whole:rootand the page's colours break. Shared names (--accent) adopt the template's, so a page with a bespoke accent normalises to the portfolio colour — flag it; if a section colour must persist, give it a named token.
Worked example
The entire library.gf.cx surface — 12 pages — predated the template and carried the googleapis drift. Reconciled in one pass onto the retrieved template: 8 reading pages re-homed, the print handoff bundle font-only, every page's body text preserved byte-identical (tag-stripped diff = 0), all live-verified. One page's bespoke purple accent normalised to the portfolio green — surfaced, not hidden. The companion to the new-page starter: the starter builds a page right; this reconciles a page that predates it.