A magazine front page for your blog
view: magazine turns a blog index into a newspaper-style front page: a big hero, two stories, a More posts column, then the rest. Blog lists also get larger, square thumbnails and tidier meta lines.
Your blog index can now open like a newspaper front page. Add view: magazine to a layout: list page or a ```blog block:
---
title: Blog
layout: list
list:
view: magazine
---
- A front page on page 1: a big hero in the middle (your
featured: truepost, or the latest), two stories with large images on the left, and a "More posts" column with small thumbnails on the right, divided by thin rules. The rest follow under "Recent posts", with pages. - Looks right with any number of posts: one, two, three or five posts each get a layout of their own, and posts without images still fit.
- Phones and tablets: the hero goes on top, then the columns; on a phone everything is one column.
- Serif titles from your site's body font. Rename or hide the two headings with
headings: { more: Latest, recent: none }.
Every list looks better too, with nothing to change:
- Larger 3:2 thumbnails (180px wide) with square corners, in lists, grids and post covers.
- When most posts have an image, the others get a quiet placeholder tile, so titles stay lined up.
- Dates and authors in small uppercase letters (
--list-meta-transform: noneturns that off); group headings (group: year) in your accent colour. --list-title-fontswitches every listing title to another font, e.g. a serif, from yourcustom.css.
Polish
- Listing pages keep the title, description and intro together above the rule, with a small RSS button when your site has a feed (
"enableRss": true). - Posts without an image get a soft tile in your accent colour instead of a grey letter; magazine stories without one are clean text-only cards.
- Covers get a hairline edge, and in dark mode they are dimmed slightly so white screenshots don't glare.
- Titles and summaries are plain text: no stray
```or code ticks, and code text is kept, so sentences stay whole. Text likeArray<string>and<https://…>links are kept too. - Author names in "More posts" wrap onto a second line instead of being cut short.
- A magazine page's title uses the same serif as its stories, and "Recent posts" lines up with the front page above it.
- Listing pages no longer show the site-wide comments box or leave a blank gap above the footer.
- For themes and
custom.css: on listing pages your intro is now wrapped in.listing-page-introand the list in.listing-page-listing(which draws the rule), and the title sits in.page-header-title-rowwith.page-header-actionswhen there is a feed link.--list-rest-max-widthno longer defaults to48rem: the magazine's lower rows follow the front page grid, and the variable only caps them when you set it.
See A magazine front page and Styling in Listing pages.
Themes: the official themes support the magazine view from v0.1.10: square images, the full three-column front page and properly sized hero titles. Leaf keeps a 2px corner on its bordered grid cards. If you pin a theme version (theme: leaf@v0.1.9), move to v0.1.10 or later. If your custom.css sets --list-card-radius, it still wins.
