build: align homepage spacing and section order with design intent#76
Merged
Merged
Conversation
Two changes that together implement design-intent §4 (spacing scale)
and §6 (homepage order).
CSS — spacing scale:
- Add --space-2xl (3rem) and --space-3xl (4.5rem) to the scale
- Replace ~30 bare rem literals (margin, padding, gap, border)
with --space-* tokens
- Section-level rhythm now uses --space-3xl, content-level uses
--space-2xl, inline rhythm uses --space-md and below
CSS — density and typography polish:
- Add a min-width: 1100px breakpoint that widens --max-w to 64rem
and bumps the hero h1 to 3.2rem; wide viewports now widen
content rather than padding (design-intent §5)
- Hero h1 down 3rem -> 2.8rem to match the reference points
(Stripe Press / Linear blog) more closely; tagline up 0.85
-> 0.9rem with looser letter-spacing for legibility
Template — section order:
- Move {{timeline}} before .quickstart so the homepage reads
Header -> Timeline -> Quick Start -> Content (design-intent §6).
Verified at 1200x675 X-card crop the hero now shows the
timeline rather than the prompt block, fixing the marketing-site
feel called out on 2026-05-14.
Verified: npm run build passes, 36 pages emitted.
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Contributor
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
wilsonwangdev
added a commit
that referenced
this pull request
Jun 1, 2026
) (#77) ## Summary Archives a 2026-05-08 investigation that had been sitting uncommitted in a feature worktree until today, and closes the loop with the fix that just shipped. [journal/2026-05-08-wide-viewport-whitespace.md](journal/2026-05-08-wide-viewport-whitespace.md) records: - **What happened** — capturing 1280×720 social-launch screenshots revealed ~35% horizontal whitespace because the site had exactly one breakpoint (`max-width: 640px`) and a fixed `--max-w: 52rem` - **Root cause** — review processes (Lighthouse, frontend-interaction-review skill) optimized for correctness, not visual density at wide viewports - **Resolution** — closed by #76, which added `@media (min-width: 1100px)` widening `--max-w` to `64rem`. The two alternative options (2-col layout, decorative frame) were rejected because they conflict with `rules/design-intent.md` §5 (wide viewports widen content, not whitespace or chrome) - **Prevention** — ROADMAP item to add a viewport-density check to the frontend-interaction-review skill's next revision [ROADMAP.md](ROADMAP.md) gains three matching `[x]` rows in **Now** for #74 / #75 / #76. [.gitignore](.gitignore) adds `assets/social/` — launch screenshots are local promotional artifacts. The first batch (May 8) is staying on disk but won't be committed. ## Why this matters The journal entry is exactly the "failures captured for agent self-evolution" use case in CLAUDE.md. Without committing it, the institutional memory of *why* PR #76 added that specific breakpoint at 1100px (and not, say, 1280px or 1440px) would have been lost. This PR makes the chain `1280px screenshot reveals issue → root cause → option list → chosen fix → rule §5` discoverable from a single file. ## Tested Lint-only / docs-only changes. No build impact. Co-authored-by: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Two coordinated changes that implement rules/design-intent.md §4 (spacing scale) and §6 (homepage section order). Depends on #74 conceptually — the rule explains the why for every change in this PR.
CSS — spacing scale (design-intent §4)
--space-2xl(3rem) and--space-3xl(4.5rem) to the scale--space-*tokens — the scale is now the only legal source for those properties, matching the rule's stated constraint--space-3xl, content-level uses--space-2xl, inline uses--space-mdand belowCSS — density and typography (design-intent §5)
min-width: 1100pxbreakpoint that widens--max-wto64remand bumps the heroh1to3.2rem. Wide viewports now widen content rather than centering more padding — handbook is for reading throughput, not breathing room.h1shrinks3rem → 2.8remto read closer to Stripe Press / Linear blog reference points; tagline grows0.85rem → 0.9remwith looser letter-spacing for legibility.Template — section order (design-intent §6)
{{timeline}}before.quickstartin build/templates/index.html so the homepage reads Header → Timeline → Quick Start → Content.Tested
npm run buildpasses, 36 pages emitted, no warnings--space-*substitutions — rhythm preserved at 1.5rem→--space-lgand 1rem→--space-mdboundariesQuality baseline impact
No expected impact on Lighthouse: zero new render-blocking resources, no new fonts, no contrast changes (
--mutedand--accentuntouched), no new layout shifts.Notes for reviewer
padding-right: 4remon.prompt-block preis intentionally not tokenized — it's an asymmetric reservation for the absolute-positioned copy button, not a rhythm value. Worth flagging as a design-intent §4 edge case if reviewers think otherwise..section li afont-size goes1.15rem → 1.1rem— small adjustment for visual balance with the new tagline size.