Skip to main content

Magazine theme

The magazine theme is built for long-form editorial content — news sites, online magazines, content-heavy blogs where typography and reading experience are the priority.

Visual style​

  • Magazine-style home — split hero (image + headline) on top, featured posts below, sidebar widgets (most-read + promo card)
  • Long-form single-post layout — wide reading column, generous typography, optional pull-quotes and figures
  • Category archives with sidebar — full category list visible while reading any archive
  • Author profiles with social links chips
  • Material 3 colour palette — RGB triplets stored for Tailwind alpha-modifier support
  • Editorial typography — serif for body (Newsreader by default), clean sans for chrome (Work Sans by default)

CSS pipeline​

The magazine theme uses Tailwind. The pipeline:

  1. scripts/build-theme-tailwind.mjs (runs as prebuild and predev) invokes Tailwind CLI on src/themes/magazine/theme.css → produces theme.compiled.css
  2. The manifest's cssText is import cssText from "./theme.compiled.css?inline" — Vite embeds the compiled CSS as a string in the bundle
  3. The theme's compileCss(config) hook regenerates the CSS with user style overrides (colour tokens, fonts) baked in
  4. The result is uploaded to /theme-assets/magazine.css on the public site

Iterative editing of the magazine theme's CSS during development:

# In one terminal:
npx tailwindcss \
  -c src/themes/magazine/tailwind.config.cjs \
  -i src/themes/magazine/theme.css \
  -o src/themes/magazine/theme.compiled.css \
  --watch

# In another:
npm run dev

Edit theme.css → Tailwind rewrites theme.compiled.css → Vite HMR picks it up.

Settings page​

Three tabs: General + Style + Home.

General tab​

  • Logo upload — same as default theme (uploads /theme-assets/magazine-logo.webp)
  • Logo enabled — toggle

Style tab​

Similar to default but with Material 3 colour tokens stored as RGB triplets (e.g. --color-primary: 0 0 0). This format is required for Tailwind 3's alpha-modifier syntax (bg-primary/50):

  • The Style tab still surfaces hex via <input type="color"> — compileCss converts hex → triplet at upload time
  • Only :type === "color" specs get the conversion; length values pass through verbatim

22 tokens grouped by Surfaces / Foreground / Outlines / Accent / Spacing / Radius / Typography (same shape as default).

The font picker offers the same Google Fonts pairs as default, with Newsreader (serif) + Work Sans (sans) as defaults — appropriate for editorial content.

Home tab​

Layout for the magazine-style home page:

  • Sidebar top widget — pick which block to render at the top of the home sidebar (mostRead | promoCard | none)
  • Sidebar bottom widget — same, for the bottom slot
  • Featured post count — how many featured-on-home posts to show
  • Latest list count — how many posts in the "Latest" list

Saving these requires running Themes → Regenerate site → Home page only to apply (the home page is one HTML file).

Theme blocks​

BlockPurpose
magazine/hero-splitTwo-column hero — image left, headline + lead right. Used at the top of feature articles or static-page homes.
magazine/most-readSidebar widget listing most-read posts. When the search plugin is enabled with view tracking, sorted by views. Otherwise sorted by recency.
magazine/promo-cardCompact promotional card — image + title + CTA. For newsletter sign-ups, related products, etc.

See Theme blocks (in the editor) for the editing experience.

Templates​

Six React templates in src/themes/magazine/templates/:

  • BaseLayout — fixed-header layout with data-cms-menu containers, head-extra + body-end sentinels
  • HomeTemplate — split hero + featured posts + sidebar (consumes mostReadHtml / promoCardHtml from the publisher)
  • SingleTemplate — full-width hero image (when set), then narrow reading column with byline + body + share row + tag chips
  • CategoryTemplate — header with category description + sidebar of all categories + posts grid
  • AuthorTemplate — author hero (avatar + bio + socials) + posts grid
  • NotFoundTemplate — branded 404 with search box

Image variants​

imageFormats: {
  inputFormats: [".jpg", ".jpeg", ".png", ".webp"],
  outputFormat: "webp",
  quality: 82,
  formats: {
    small:  { width: 480,  height: 320, fit: "cover" },
    medium: { width: 1024, height: 576, fit: "cover" },
    large:  { width: 1920, height: 1080, fit: "cover" },
    portrait: { width: 800, height: 1200, fit: "cover" },
  },
  defaultFormat: "medium",
}

Note the portrait variant — used for hero images on featured articles where a 2:3 portrait crop reads better than landscape.

Companion JS​

  • magazine-menu.js — same role as default-menu.js but with magazine's burger animation
  • magazine-posts.js — fetches /posts.json for sidebar widgets (most-read, related)

When to use it​

  • News sites — clear hierarchy, breaking-news-friendly feature post on home
  • Editorial blogs — long-form articles with serif typography and figures
  • Online magazines — sidebar widgets, category-driven navigation, social sharing

When to pick a different theme​

Continue​