Theme styling guide

A look at how a Bear Blog theme actually gets built, one change at a time. Useful if you're new to CSS or want to see how the pieces fit together.

Changes are listed in the order they happened, so you can follow along from the start. Newest updates are further down.

Last updated 0 minutes ago.

This picks up where the theme building guide left off, once the basics were in place.

Fonts and content width

:root {
  --width: 65ch;
  --font-main: system-ui, sans-serif;
  --font-secondary: system-ui, sans-serif;
  --font-scale: 1.0625em;
}

System fonts use whatever's already on the visitor's device, and ch adopts the width to the font itself instead of being fixed. 1.0625em nudges the base size up slightly.

Good source: MDN's own page on this actually lists the whole history of the debate. That's the most credible, neutral link.

Font rendering

html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-text-size-adjust: 100%;
}

The first two make text render a touch crisper on Mac (though it's a genuinely debated technique). The third stops mobile Safari from auto-resizing text on its own, so your layout stays as intended.

Want more? Check out the full Bear Blog library.