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:
Pouya Lajevardi
co-authored by
Claude Opus 5
Claude Opus 5
parent
8f1df2c27c
commit
8134709548
+190
-65
@@ -5,41 +5,98 @@
|
||||
@import './tokens.css';
|
||||
|
||||
/* --- Fonts: self-hosted, subset, swap. No runtime Google Fonts request. ----
|
||||
TODO(claude-code): place subset woff2 files in /public/fonts/ and preload
|
||||
Instrument Serif 400 and Geist 400 in BaseLayout — they are the only two
|
||||
faces used above the fold. */
|
||||
Files and their provenance: docs/reference/fonts-provenance.md.
|
||||
Filenames are stable on purpose — a preload needs a path that does not change
|
||||
between builds, which rules out Astro's hashed asset pipeline.
|
||||
|
||||
`?v=1` IS LOAD-BEARING. scripts/deploy-local.sh serves /fonts/* with
|
||||
`max-age=31536000, immutable`, so a returning visitor holds these bytes for a
|
||||
year and a CloudFront invalidation cannot reach their browser cache. Bump the
|
||||
query when a file's contents change — here AND on the preload in
|
||||
BaseLayout.astro, which must match byte for byte or the preload is a second,
|
||||
wasted request instead of a warmed cache.
|
||||
|
||||
The `latin` cut of each face is listed FIRST and the `latin-ext` cut second.
|
||||
Order matters: where two @font-face rules for one family both match a
|
||||
codepoint, the last wins. Latin-ext is the wider, heavier file; putting it
|
||||
last would hand it every ASCII character on the page. */
|
||||
|
||||
@font-face {
|
||||
font-family: 'Instrument Serif';
|
||||
src: url('/fonts/instrument-serif-400.woff2') format('woff2');
|
||||
src: url('/fonts/instrument-serif-latin-400-normal.woff2?v=1') format('woff2');
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
font-display: swap;
|
||||
unicode-range: U+0000-00FF, U+0100-017F, U+2000-206F, U+2190-21BB;
|
||||
unicode-range:
|
||||
U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
|
||||
U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212,
|
||||
U+2215, U+FEFF, U+FFFD;
|
||||
}
|
||||
@font-face {
|
||||
font-family: 'Instrument Serif';
|
||||
src: url('/fonts/instrument-serif-400-italic.woff2') format('woff2');
|
||||
src: url('/fonts/instrument-serif-latin-ext-400-normal.woff2?v=1')
|
||||
format('woff2');
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
font-display: swap;
|
||||
unicode-range:
|
||||
U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304,
|
||||
U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB,
|
||||
U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
|
||||
}
|
||||
/* Italic is the one flourish the design allows (docs/02) — a phrase inside a
|
||||
headline, never a paragraph. Latin only; there is no latin-ext italic file. */
|
||||
@font-face {
|
||||
font-family: 'Instrument Serif';
|
||||
src: url('/fonts/instrument-serif-latin-400-italic.woff2?v=1') format('woff2');
|
||||
font-weight: 400;
|
||||
font-style: italic;
|
||||
font-display: swap;
|
||||
unicode-range: U+0000-00FF, U+0100-017F, U+2000-206F;
|
||||
unicode-range:
|
||||
U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
|
||||
U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212,
|
||||
U+2215, U+FEFF, U+FFFD;
|
||||
}
|
||||
|
||||
/* Geist and Geist Mono are variable fonts: one file spans the whole weight
|
||||
axis, so 300/400/500/600 cost nothing extra. `font-weight: 100 900` declares
|
||||
the axis range the file actually carries — narrowing it here would make the
|
||||
browser synthesise weights it already has. */
|
||||
@font-face {
|
||||
font-family: 'Geist';
|
||||
src: url('/fonts/geist-latin-wght-normal.woff2?v=1')
|
||||
format('woff2-variations');
|
||||
font-weight: 100 900;
|
||||
font-style: normal;
|
||||
font-display: swap;
|
||||
unicode-range:
|
||||
U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
|
||||
U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212,
|
||||
U+2215, U+FEFF, U+FFFD;
|
||||
}
|
||||
@font-face {
|
||||
font-family: 'Geist';
|
||||
src: url('/fonts/geist-variable.woff2') format('woff2-variations');
|
||||
font-weight: 300 600;
|
||||
src: url('/fonts/geist-latin-ext-wght-normal.woff2?v=1')
|
||||
format('woff2-variations');
|
||||
font-weight: 100 900;
|
||||
font-style: normal;
|
||||
font-display: swap;
|
||||
unicode-range: U+0000-00FF, U+0100-017F, U+2000-206F, U+2190-21BB;
|
||||
unicode-range:
|
||||
U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304,
|
||||
U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB,
|
||||
U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
|
||||
}
|
||||
@font-face {
|
||||
font-family: 'Geist Mono';
|
||||
src: url('/fonts/geist-mono-variable.woff2') format('woff2-variations');
|
||||
font-weight: 400 500;
|
||||
src: url('/fonts/geist-mono-latin-wght-normal.woff2?v=1')
|
||||
format('woff2-variations');
|
||||
font-weight: 100 900;
|
||||
font-style: normal;
|
||||
font-display: swap;
|
||||
unicode-range: U+0000-00FF, U+2000-206F;
|
||||
unicode-range:
|
||||
U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
|
||||
U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212,
|
||||
U+2215, U+FEFF, U+FFFD;
|
||||
}
|
||||
|
||||
/* --- Reset ---------------------------------------------------------------- */
|
||||
@@ -56,7 +113,19 @@
|
||||
html {
|
||||
-webkit-text-size-adjust: 100%;
|
||||
scroll-behavior: smooth;
|
||||
scroll-padding-top: var(--space-8);
|
||||
/* No offset by default: below 64rem the header is not sticky, so nothing is
|
||||
covering the target. See the media query below. */
|
||||
scroll-padding-top: var(--space-4);
|
||||
}
|
||||
|
||||
/* The header is sticky from 64rem up, and `scroll-padding-top` has to clear it
|
||||
or "Skip to content" drops the reader behind it — the one control that exists
|
||||
specifically for keyboard users, landing them on content they cannot see.
|
||||
--header-h is defined in tokens.css beside the value it has to match. */
|
||||
@media (min-width: 64rem) {
|
||||
html {
|
||||
scroll-padding-top: calc(var(--header-h) + var(--space-4));
|
||||
}
|
||||
}
|
||||
|
||||
body {
|
||||
@@ -69,8 +138,12 @@ body {
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
text-rendering: optimizeLegibility;
|
||||
overflow-x: hidden;
|
||||
min-height: 100vh;
|
||||
/* No `overflow-x: hidden`. It was here, and it was hiding a real defect: at
|
||||
320px the page overflowed by 72px and three cells sat outside the viewport
|
||||
with no scrollbar to reach them — WCAG 1.4.10 content loss, silently
|
||||
masked. A global overflow clamp turns every future layout bug on nineteen
|
||||
pages into an invisible one. Fix the overflow; do not hide it. */
|
||||
}
|
||||
|
||||
img,
|
||||
@@ -146,9 +219,10 @@ h4 {
|
||||
vertical-align: 0.15em;
|
||||
}
|
||||
|
||||
p {
|
||||
max-inline-size: var(--width-prose);
|
||||
}
|
||||
/* NO GLOBAL `p { max-inline-size }`. It was here, and it capped every paragraph
|
||||
on the site — inside cards, footers, and form hints — so components had to
|
||||
opt back out one by one, and it made `.prose` below a class with no effect,
|
||||
since every <p> was already capped. Long-form opts IN. */
|
||||
|
||||
a {
|
||||
color: var(--link);
|
||||
@@ -202,7 +276,11 @@ a:hover {
|
||||
.wrap-wide {
|
||||
max-inline-size: var(--width-wide);
|
||||
}
|
||||
.prose {
|
||||
/* The reading measure, opted into. docs/02 caps body copy at 68ch; the old
|
||||
build ran full-bleed paragraphs at 1400px. Wrap long-form in `.prose`, and
|
||||
let the MDX `Prose` component own it for articles. */
|
||||
.prose,
|
||||
.prose p {
|
||||
max-inline-size: var(--width-prose);
|
||||
}
|
||||
.section {
|
||||
@@ -241,53 +319,81 @@ hr {
|
||||
border: 0;
|
||||
}
|
||||
|
||||
/* --- Reveal ---------------------------------------------------------------
|
||||
Progressive enhancement, not a dependency. Content is rendered and visible
|
||||
in the HTML; `.reveal` only takes effect once JS adds `js-reveal` to <html>.
|
||||
If the observer never runs, every page reads normally. The previous build
|
||||
had this backwards and shipped a blank page to anything without JS. */
|
||||
/* --- Reveal ----------------------------------------------------------------
|
||||
Scroll-driven CSS. There is NO JavaScript on this site, and this block is
|
||||
why: the reveal used to be an inline IntersectionObserver in <head>, which
|
||||
collided with the Content-Security-Policy docs/05-backend-spec.md specifies
|
||||
(`script-src 'self'`, no `unsafe-inline`, "use a hash or nonce for the reveal
|
||||
script"). A per-build hash is a moving target and drifts from the policy.
|
||||
`animation-timeline: view()` is what docs/02 §Motion offers as the
|
||||
alternative, and it removes the script — and the problem — entirely.
|
||||
|
||||
.js-reveal .reveal {
|
||||
opacity: 0;
|
||||
transform: translateY(20px);
|
||||
The @supports gate is load-bearing, not defensive. Without it a browser that
|
||||
ignores `animation-timeline` would run the animation once against the
|
||||
document timeline at load; with it, that browser gets no animation and fully
|
||||
visible content. Content is never hidden behind a feature that might not
|
||||
arrive. The previous build had this backwards and shipped a blank page to
|
||||
anything without JavaScript. */
|
||||
|
||||
@supports (animation-timeline: view()) {
|
||||
@media (prefers-reduced-motion: no-preference) {
|
||||
/* LONGHANDS ONLY. `animation: reveal-in linear both` beside
|
||||
`animation-timeline: view()` is folded by Lightning CSS on minify into
|
||||
`animation: linear both reveal-in view()`, which is invalid — `view()` is
|
||||
not a component of the shorthand — so the whole declaration is thrown
|
||||
away. It works in `npm run dev` and is dead in `npm run build`. This is
|
||||
the same defect the header's condense had; it was found there first and
|
||||
written straight back into the fix for it. Grep dist for it (Phase 5). */
|
||||
.reveal {
|
||||
animation-name: reveal-in;
|
||||
animation-duration: 1ms;
|
||||
animation-timing-function: linear;
|
||||
animation-fill-mode: both;
|
||||
animation-timeline: view();
|
||||
animation-range: entry 0% cover 22%;
|
||||
}
|
||||
.reveal-stagger > * {
|
||||
animation-name: reveal-in;
|
||||
animation-duration: 1ms;
|
||||
animation-timing-function: linear;
|
||||
animation-fill-mode: both;
|
||||
animation-timeline: view();
|
||||
}
|
||||
/* Stagger is expressed as timeline range, not delay: a scroll-driven
|
||||
animation has no wall clock to delay against. Each child completes a
|
||||
little further into the scroll than the one before. Six children by
|
||||
design (docs/02) — a seventh simply lands with the sixth. */
|
||||
.reveal-stagger > *:nth-child(1) {
|
||||
animation-range: entry 0% cover 18%;
|
||||
}
|
||||
.reveal-stagger > *:nth-child(2) {
|
||||
animation-range: entry 0% cover 22%;
|
||||
}
|
||||
.reveal-stagger > *:nth-child(3) {
|
||||
animation-range: entry 0% cover 26%;
|
||||
}
|
||||
.reveal-stagger > *:nth-child(4) {
|
||||
animation-range: entry 0% cover 30%;
|
||||
}
|
||||
.reveal-stagger > *:nth-child(5) {
|
||||
animation-range: entry 0% cover 34%;
|
||||
}
|
||||
.reveal-stagger > *:nth-child(6) {
|
||||
animation-range: entry 0% cover 38%;
|
||||
}
|
||||
}
|
||||
}
|
||||
.js-reveal .reveal.is-in {
|
||||
opacity: 1;
|
||||
transform: none;
|
||||
transition:
|
||||
opacity var(--dur-reveal) var(--ease),
|
||||
transform var(--dur-reveal) var(--ease);
|
||||
|
||||
@keyframes reveal-in {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(20px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: none;
|
||||
}
|
||||
}
|
||||
.js-reveal .reveal-stagger > * {
|
||||
opacity: 0;
|
||||
transform: translateY(16px);
|
||||
}
|
||||
.js-reveal .reveal-stagger.is-in > * {
|
||||
opacity: 1;
|
||||
transform: none;
|
||||
transition:
|
||||
opacity var(--dur-reveal) var(--ease),
|
||||
transform var(--dur-reveal) var(--ease);
|
||||
}
|
||||
.js-reveal .reveal-stagger.is-in > *:nth-child(1) {
|
||||
transition-delay: 0ms;
|
||||
}
|
||||
.js-reveal .reveal-stagger.is-in > *:nth-child(2) {
|
||||
transition-delay: 70ms;
|
||||
}
|
||||
.js-reveal .reveal-stagger.is-in > *:nth-child(3) {
|
||||
transition-delay: 140ms;
|
||||
}
|
||||
.js-reveal .reveal-stagger.is-in > *:nth-child(4) {
|
||||
transition-delay: 210ms;
|
||||
}
|
||||
.js-reveal .reveal-stagger.is-in > *:nth-child(5) {
|
||||
transition-delay: 280ms;
|
||||
}
|
||||
.js-reveal .reveal-stagger.is-in > *:nth-child(6) {
|
||||
transition-delay: 350ms;
|
||||
}
|
||||
/* Stagger caps at six children by design. */
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
html {
|
||||
@@ -301,8 +407,27 @@ hr {
|
||||
transition-duration: 0.01ms !important;
|
||||
scroll-behavior: auto !important;
|
||||
}
|
||||
.js-reveal .reveal,
|
||||
.js-reveal .reveal-stagger > * {
|
||||
/* Belt and braces. The @supports block above is already gated on
|
||||
no-preference, so nothing here should be animating at all — this keeps the
|
||||
guarantee true even if a later rule forgets the gate. */
|
||||
.reveal,
|
||||
.reveal-stagger > * {
|
||||
animation: none !important;
|
||||
opacity: 1 !important;
|
||||
transform: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* A scroll-driven animation has no timeline when printing, so every revealed
|
||||
element would render at its `from` state — which is `opacity: 0`. Measured
|
||||
before this block existed: printing the page to PDF dropped four card
|
||||
headings from the output entirely. `/about/` is written to be printed by
|
||||
people evaluating an appointment; content that vanishes at Cmd-P is not a
|
||||
cosmetic problem. */
|
||||
@media print {
|
||||
.reveal,
|
||||
.reveal-stagger > * {
|
||||
animation: none !important;
|
||||
opacity: 1 !important;
|
||||
transform: none !important;
|
||||
}
|
||||
|
||||
+15
-1
@@ -102,10 +102,24 @@
|
||||
--space-10: 8rem; /* 128 */
|
||||
--space-11: 10rem; /* 160 */
|
||||
|
||||
--section-y: clamp(var(--space-9), 6vw + 2rem, var(--space-11));
|
||||
/* docs/02: "Section rhythm: --space-9 (96px) mobile, --space-11 (160px)
|
||||
desktop." The previous curve was `6vw + 2rem`, which reaches 160px only at
|
||||
a 2133px viewport — measured 128px at 1600px, 108.8px at 1280px. The upper
|
||||
bound was unreachable on any real screen, so the token read as if it
|
||||
delivered a rhythm it never delivered. `9vw + 1rem` hits 160px at 1600px
|
||||
and still clamps to 96px on a phone. [measured 2026-08-26] */
|
||||
--section-y: clamp(var(--space-9), 9vw + 1rem, var(--space-11));
|
||||
|
||||
/* --- Layout ------------------------------------------------------------ */
|
||||
|
||||
/* Sticky-header height at >= 64rem, where the header IS sticky. global.css
|
||||
drives `scroll-padding-top` off this, so the skip link does not drop the
|
||||
reader behind the header. If SiteHeader's padding or nav sizing changes,
|
||||
re-measure and change this with it — one fact living in two files.
|
||||
[measured 2026-08-26 — headless Chrome at 1024/1100/1280/1440px, with six
|
||||
nav items and with a seventh injected: 77px at every one] */
|
||||
--header-h: 4.8125rem; /* 77 — measured, not chosen */
|
||||
|
||||
--width-content: 80rem; /* 1280 */
|
||||
--width-wide: 90rem; /* 1440 */
|
||||
--width-prose: 68ch; /* reading measure — never exceed for body copy */
|
||||
|
||||
Reference in New Issue
Block a user