Margin, Field Journal

The brief and the build

Brief: Build a fast, content-first blog. Search and topic filters on the index, a distraction-free article view with text size and typeface controls, a reading-progress bar, and links that work when shared.

Each article has its own URL (a hash route here, a real path in a production build), so links can be shared and the back button works. Search filters as you type and keeps your cursor position, and topic filters combine with it.

Reading controls change text size and switch between serif and sans-serif, and the choice is remembered. Content is escaped on render, so authors can paste text freely. In a production build this front end would sit on Astro and MDX with the same templates.

Light is a classic newspaper layout. Dark is a two-column magazine grid with large serif headlines. Creative is a loud, poster-style masthead with sticker cards.

Results

• Problem: A small publication needed readers to find older articles and read comfortably on any device without a heavy CMS front end.
• Built: A blog front end with live search, topic filters, shareable article URLs, reading controls and a progress bar.
• Lighthouse, light design, mobile profile: Performance 100, Accessibility 100, Best Practices 100, SEO 100. Largest contentful paint 1.0 s, total blocking time 0 ms, layout shift 0. Desktop profile: Performance 100, Accessibility 100, Best Practices 100, SEO 100.
• Weight: page, stylesheet and script total 11.5 KB (5.1 KB gzipped). The script alone is 8.0 KB (3.6 KB gzipped).
• Requests: 3 (page, stylesheet, script). No external requests and no libraries beyond what the browser provides.
• Browser check: all three designs load at 1280 and 390 px wide with no console errors, failed requests or horizontal overflow. The dark and creative designs score 96 and 100 for accessibility (100 in the other three categories); the gap is colour contrast.

Measured on 2026-11-06 with Lighthouse 13.6 in headless Chromium against the built site. Mobile uses Lighthouse’s simulated throttling.

Stack

Highlights

• Search and tag filters
• Reading mode
• Progress indicator
• Shareable URLs
• Remembers preferences