Skip to content

feat: unify site typography and article layout - #166

Merged
f0rr0 merged 15 commits into
nextfrom
f0rr0/article-layout
Sep 26, 2026
Merged

f0rr0 merged 15 commits into
nextfrom
f0rr0/article-layout

Conversation

@f0rr0

@f0rr0 f0rr0 commented Sep 26, 2026 •

Copy link
Copy Markdown
Owner

Article layout and typography varied between the homepage, article bodies, controls, and embeds. This introduces a shared 624px reading column with 944px media tracks, consolidates the type scale and motion styles, and removes unused CSS and article export code.

  • Use DM Sans 16/24 for body text, Instrument Serif 24/32 for titles and 20/28 for section headings, and 14/20 for metadata, controls, captions, charts, and notifications. Code uses Geist Mono 14/20.
  • Keep code at reading width, wider tracks for media, and responsive sidenotes. Remove generated editorial illustrations from articles while retaining social images, screenshots, charts, and tutorial examples.
  • Refresh shadcn components from the base-vega registry; keep retained generated sources unchanged and apply overrides through props and site wrappers. Use shadcn-ui/cn through the shared helper. Disable persistent Turbopack caches after observing stale compiled theme values.
  • Configure Knip, better-tailwindcss, and @shadcn/lint in validate. Account for MDX entry points and scripts; detect unused components, dependencies, unknown/conflicting classes, and raw colors. Restrict application transitions to explicit properties and shared 100/150/240ms durations through the existing Tailwind lint plugin.
  • Remove unused UI components, the typography plugin, and inert selectors. Preserve the complete upstream neutral theme, including sidebar tokens, in globals.css; keep custom palette, typography, and motion overrides in site.css and article layouts in article.css. Consolidate popup and disclosure CSS; scope Tailwind scanning to src. The main stylesheet decreases from 131,041 to 109,715 bytes, or 21,930 to 18,622 bytes gzipped.
  • Fix the disclosure opening jump: translating the measured content by -4px shortened Base UI's scrollHeight measurement, then snapped to full height at completion. Keep the measured content untransformed, preserve reduced motion and find-in-page reveal, and share expansion timing with titles and chevrons.
  • Let Journey role titles, subjects, and markers wrap on mobile. Stack location above dates in the desktop metadata column so role titles and badges fit on one line without changing typography. Preserve Kolkata work-day boundaries and display work-row times in that same timezone without the visible IANA label. Keep publication dates stable across visitor timezones and use the shared formatter for usage-limit reset dates.
  • Remove the article Markdown action, endpoint, rewrite, alternate metadata, analytics event, and export-only image manifest. Point AI context and article references at canonical article pages.

Validation: 289 tests, lint/Knip, type checking (including deployment sources), and the production build pass. Negative probes verify the animation restrictions reject invalid classes. Browser checks cover Journey in 28 light/dark, collapsed/expanded states across 320–1440px: desktop titles and badges stay on one line, mobile subjects wrap, and neither the page nor nested content scrolls horizontally. Other checks cover popup menus, accordion opening/closing/reversal, reduced motion, find-in-page reveal, timezone-stable dates, and removal of Markdown URLs/metadata. Frame sampling shows the former 4px end-of-opening jump is gone. After separating upstream and site CSS, eight light/dark, mobile/desktop page samples retain identical computed styles and widths; the complete globals.css syntax tree matches actual shadcn 4.11.0 init --preset vega --base base output, excluding formatting, the source scope, and the site.css import. Generated font mappings and the current radius scale remain intact; DM Sans and the heatmap radius are site overrides. Live work data is unavailable locally, so disclosure checks use temporary representative work rows, removed before the build. GitHub embed fetches returned 403 during the final local build and used the existing fallback behavior.

@vercel

vercel Bot commented Sep 26, 2026 •

Copy link
Copy Markdown

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Actions Updated
f0rr0-github-io Ready Ready Preview Sep 26, 2026 12:12pm UTC

@f0rr0 f0rr0 changed the title feat: unify article layout, media bleeds, and sidenotes feat: unify site typography and article layout Sep 26, 2026
@f0rr0
f0rr0 merged commit 7a04979 into next Sep 26, 2026
4 checks passed
@f0rr0
f0rr0 deleted the f0rr0/article-layout branch September 26, 2026 12:16

This branch was successfully deployed

1 active deployment
Preview — 449199db Deployed Sep 26, 2026 by vercel[bot]
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant