Layout and typography

The layout provides a header, the page body, and a footer. Individual views handle posts, pages, the home page, the not-found page, and tag listings.

Readable defaults

The starter uses system fonts, a restrained accent color, and a limited reading width. Thin borders separate content without turning every paragraph into a card.

Setting Purpose
--color-background The page background
--color-text The primary text color
--color-accent Links and small accents
--content-width The maximum article width
--gutter Space between content and the viewport

Change these tokens in src/assets/css/theme.css to experiment with the design. Each light-dark(light, dark) pair defines both color variants. The system preference selects the mode until a visitor chooses one with the navigation's sun/moon button.

Content should drive the layout

The main content stays in one column on small screens. The home page adds a sidebar only when there is enough room, and the page-navigation links stack vertically on narrower viewports.

Compare this page with the Markdown topic to see the same typography used in a longer article.

Keep the compact reset and the visible focus styles when trying a different visual direction. They provide useful defaults without requiring a framework.

A complete set of views

All seven theme roles are required by the current engine. In particular, keep the tag-list and tag-detail views even when your first few documents have no tags. They become useful as soon as content starts sharing topics.