feat: build step 1 — scaffold, layout, header, footer, SEO; zero JavaScript
Build order step 1 (docs/01): scaffold, tokens, base layout, header, footer, SEO component, plus a temporary /type-scale/ proof sheet that step 2 deletes. THE FONTS WERE NEVER ON DISK. global.css declared six @font-face rules pointing at /fonts/*.woff2 and public/fonts/ did not exist, so every face had been silently falling back to Georgia and the system sans. Six cuts committed, 123,804 bytes, SIL OFL 1.1, provenance in docs/reference/fonts-provenance.md. ?v=1 on every URL because the deploy script serves them immutable for a year. ZERO JAVASCRIPT. The reveal was an inline IntersectionObserver in <head>; docs/05 specifies script-src 'self' with no unsafe-inline, so the only script on the site was the one thing the site's own CSP would refuse to execute. Replaced with animation-timeline: view() behind @supports. 0 script tags and 0 .js files in dist. The infinity mark is lifted verbatim from the deployed site's own smlMark loading thumbnail, not redrawn (Q32 asks whether a canonical vector exists). The proof sheet computes its contrast table from tokens.css rather than restating docs/02 — all eleven ratios reproduce the measured table exactly. Register: Canadian Tax Foundation added (§4, R10 widened); Q30 closed — SML Company Ltd is federally incorporated under the CBCA, and the footer publishes neither that nor the place of business; Q31 closed — Plausible, on EU-only data residency (D15 amended). ROLE constants added for "Director of Firm Operations" and "active litigation exposure" so step 3 does not hand-type them. Lighthouse unavailability now stated in six places rather than left as a control that had silently stopped existing (§7, R11). Both review agents ran twice. The second pass found four defects in the first pass's fixes, including the minifier bug written back into its own fix and a colour-alone repair that used the banned gold-on- cream pairing at 2.10:1. Measured in headless Chrome at thirteen widths with a seventh nav item injected: 0 overflow, 0 tap targets under 44x44, 0 focus-order inversions, state indicators at 12.29:1, 755 words of body text with no JavaScript. Opened: Q32-Q37. Closed: Q30, Q31. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_012XquaEq4BgWMCwUqLEyNkF
This commit is contained in:
co-authored by
Claude Opus 5
parent
8f1df2c27c
commit
8134709548
@@ -152,9 +152,33 @@ interactive elements reachable by keyboard, `prefers-reduced-motion` honoured on
|
||||
every animation. Gold `#c9a876` never sits on cream — it fails contrast at
|
||||
2.10:1. See `docs/02-design-system.md`.
|
||||
|
||||
**A parent cannot style a child component's root element.** Astro does not pass
|
||||
a parent's scope attribute down, so `<Button class="header-cta" />` compiles the
|
||||
parent's rule to `.header-cta[data-astro-cid-<parent>]` while the rendered `<a>`
|
||||
carries only `<Button>`'s own cid. **The rule silently never matches** — no
|
||||
error, no warning, and the CSS looks correct in the source. Wrap the child in an
|
||||
element the parent owns (`<div class="header-cta"><Button …/></div>`), or reach
|
||||
it deliberately with `:global()` from a parent-scoped ancestor. Inherited
|
||||
properties (`white-space`, `color`, `font-*`) do cross the boundary and are the
|
||||
exception. This cost a header CTA that was documented as hidden on mobile,
|
||||
was not hidden, and sat 75 px short of the right edge on desktop — both found by
|
||||
measurement, neither by reading. It will recur with `PracticeCard`,
|
||||
`ArticleCard`, and `Pill`.
|
||||
|
||||
**Never write the `animation` shorthand beside `animation-timeline`.** Longhands
|
||||
only — `animation-name`, `animation-duration`, `animation-timing-function`,
|
||||
`animation-fill-mode`, then `animation-timeline` and `animation-range`.
|
||||
`scroll()` and `view()` are not legal components of the shorthand, and Lightning
|
||||
CSS folds the two declarations together on minify into something invalid, which
|
||||
is then discarded whole. **It works in `npm run dev` and is dead in
|
||||
`npm run build`** — the worst shape a defect can take. It happened twice in one
|
||||
session, the second time inside the fix for the first. `/build` Phase 5 greps
|
||||
`dist` for it; do not remove that check.
|
||||
|
||||
**Images.** Astro `<Image>` with explicit width and height. AVIF/WebP with
|
||||
fallback. Never base64-inline an image into HTML — the old site did this with
|
||||
~1 MB of logo PNGs.
|
||||
~1 MB of logo PNGs — a figure `AGENTS.md` Q34 is now open against, so treat the
|
||||
rule as standing on its own merits rather than on that number.
|
||||
|
||||
**Fonts.** Self-hosted, subset, `font-display: swap`, preloaded. No Google Fonts
|
||||
request at runtime — it costs a round trip and adds a third-party call to a
|
||||
@@ -207,12 +231,21 @@ actually been provisioned is `AGENTS.md` Q22. It must never reach the repo.
|
||||
every page. Under 100 KB of JS on any route. LCP under 2.0 s on a simulated
|
||||
Slow 4G connection. Treat a budget breach as a failing build.
|
||||
|
||||
**Lighthouse cannot currently be run.** `@lhci/cli` was removed on 2026-08-26
|
||||
(it carried 7 high-severity advisories, `0.15.1` is `latest`, and it had no
|
||||
pages and no `lighthouserc` to work with). The budget stands; the instrument is
|
||||
missing. It is re-added at build step 7 under `AGENTS.md` R11 — with a freshly
|
||||
verified pin, not on the assumption that `0.15.1` is still the ceiling. **Say
|
||||
"not run — tool unavailable" rather than silently omitting it.** A documented
|
||||
control that no longer exists is precisely the defect Q22 turned out to be.
|
||||
|
||||
## What "done" means for a page
|
||||
|
||||
- [ ] Copy written from `docs/03-content-spec.md`, every claim traceable to `AGENTS.md` §4
|
||||
- [ ] No `TODO(pouya)` left unlogged in §9
|
||||
- [ ] Unique title, meta description, canonical, OG/Twitter tags, JSON-LD
|
||||
- [ ] Semantic HTML; keyboard navigable; reduced-motion honoured
|
||||
- [ ] Lighthouse ≥ 95 mobile, all four categories
|
||||
- [ ] Lighthouse ≥ 95 mobile, all four categories — **UNAVAILABLE until step 7**
|
||||
(see the performance budget above). Report it as not run; do not tick it
|
||||
- [ ] Renders correctly with JavaScript disabled
|
||||
- [ ] `AGENTS.md` Change Log entry appended
|
||||
|
||||
Reference in New Issue
Block a user