Theme a site

Give a site its own colors, typeface and type scale, then style one kind of page.

You'll theme a small print studio site that works in light and dark schemes. Start from an initialized Quickstart project and keep bun run dev open to watch each change.

Replace paths/index.md:

[@layout.default]: ./site.layout.md

# Harbor Print Studio

Weekly open studio for relief, screen and risograph printing.

## Materials

Bring paper you love. Inks, rollers and the press are ready when you arrive.

### Paper weights

Thicker paper takes more pressure.

Create paths/site.layout.md. It links the theme stylesheet for every page, in the theme cascade layer:

[@styles.global.theme]: ./styles/theme.css

<header class="studio-header"><a href="/">Harbor Print Studio</a></header>
<main class="studio-main"><x-source-content /></main>

Create paths/styles/theme.css. Pair each color with light-dark() so the site follows the reader's scheme:

:root {
  --pmx-color-bg: light-dark(#f7f3ec, #16181d);
  --pmx-color-fg: light-dark(#1f2430, #ece8e1);
  --pmx-color-muted: light-dark(#5c6170, #a7a39b);
  --pmx-color-surface: light-dark(#efe8dc, #20232a);
  --pmx-color-border: light-dark(#ddd3c4, #363941);
  --pmx-color-accent: light-dark(#b8400c, #fb923c);
  --pmx-color-link: var(--pmx-color-accent);
}

The page turns warm paper with burnt-orange links, and charcoal with orange links when your system uses a dark scheme. To design for one scheme instead, lock it in the root index; see Colors and schemes.

Download a variable font with an open license as a .woff2 file, save it as paths/styles/fonts/display.woff2, and keep its license file beside it. Add to the top of theme.css:

@font-face {
  font-family: "Studio Display";
  src: url("./fonts/display.woff2") format("woff2");
  font-weight: 200 800;
  font-display: swap;
}

Then add the heading stack inside the :root rule:

  --pmx-font-heading: "Studio Display", var(--pmx-font-body);

Headings switch to the new face; body text keeps the system font.

The default ratio is 1.25. A print studio can take more contrast; add inside the same :root rule:

  --pmx-prose-scale: 1.333;

Every heading level rebalances: on a laptop the title grows to about 3.2 times the body size, and each level below steps down by the same ratio. Phones use a gentler ratio derived from it. See Heading sizes for other ratios.

Add after the :root rule:

.pmx-heading.level-h2 { margin-block: 2.5rem 0.75rem; }
.level-h1 + p { font-size: 1.25rem; color: var(--pmx-color-muted); }

Sections gain room above their headings, and the sentence under the title reads as an introduction. Heading blocks explains the markup these rules target.

Give events their own layout and stylesheet. Add to paths/index.md, below the first line:

[@layout.event]: ./event.layout.md

Create paths/event.layout.md:

[@layout]: ./site.layout.md
[@styles]: ./styles/event.css

<article class="studio-event"><x-source-content /></article>

Create paths/styles/event.css:

.studio-event {
  border-inline-start: 0.35rem solid var(--pmx-color-accent);
  padding-inline-start: 1.25rem;
}

Create paths/events/open-studio.event.md:

# Open studio night

Drop in to print. Thursday, 6–9 pm.

Open /events/open-studio.event: it keeps the site's theme and adds an accent rule beside the content. The home page does not load event.css. See Style a kind of page for folder landing pages.

• Switch your system between light and dark schemes and compare text, links and focus rings in each.
• Narrow the browser to phone width and confirm nothing scrolls sideways.
• If the site uses Player, check reading, Focus and Slides.

• Themes
• Typography
• Stylesheets
• Layouts