DEV Community

Cover image for The-Sternblatt
Stephen Omengo
Stephen Omengo

Posted on

The-Sternblatt

#tutorial #learning #productivity

What I built

  • I'm into Mercedes-Benz history and culture, and I wanted somewhere to write about it that felt like an actual magazine — not just another blog template. So I built STERNBLATT, a single-page reader with its own booklet-style design language: stapled article cards, perforated page edges, a flip-open cover, and full article pages with their own URLs.

🔗 Live site: https://stephenomengo.github.io/The-Sternblatt/ 🔗 Source: https://github.com/stephenomengo/The-Sternblatt

The stack (or lack of one)

No React, no build step, no npm install. It's one HTML file with:

  1. Vanilla JavaScript for a small hash-based router (#/, #/article/:slug, #/archive, #/admin)
  2. CSS custom properties for a consistent design system (colors, type, shadows)
  3. Google Fonts (Newsreader for headlines, IBM Plex Sans/Mono for body and labels)
  4. Wikimedia Commons for freely licensed photography

That's it. Open the file in a browser and the whole site runs.

Features

  • Full article pages — each story gets a real page at #/article/, styled like an open booklet with a drop cap and staple marks
  • An archive of back issues, rendered as a grid of "spines" with cover photos
  • A publish page (#/admin) with a form for title, category, teaser, body, and photo — no HTML editing required to add a new story
  • A password gate on the publish page (client-side only — more a deterrent than real security, since anyone reading the page source can see it)

A few design details I liked

  • Article cards use a dashed line and small "staple" marks to look like stapled booklet pages, not blog cards
  • The hero's flip card shows the current issue's cover photo on the front, and a table of contents on the back — hover or tap to flip
  • Archive spines use a photo with a dark gradient scrim so text stays legible over any image

What's next

  • Real backend for persistent publishing
  • More issues in the archive as I write them
  • Possibly RSS, since it's a magazine and that felt fitting

If you build something similar with no framework, I'd be curious to compare notes — happy to answer questions about the routing or the storage setup in the comments.

Top comments (0)