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 1 week, 3 days 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.

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.

Better contrast, calmer colors

:root {
  --background-color: #f8f8f8;
  --heading-color: #2c2d2e;
  --text-color: #2c2d2e;
  --link-color: #2952cc;
  --visited-color: #7c5a91;
  --code-background-color: #eaeaea;
  --code-color: #2c2d2e;
  --blockquote-color: #2c2d2e;
}

@media (prefers-color-scheme: dark) {
  :root {
    --background-color: #01242e;
    --heading-color: #d5d8dc;
    --text-color: #d5d8dc;
    --link-color: #98cbe3;
    --visited-color: #c9add7;
    --code-background-color: #16374a;
    --code-color: #d5d8dc;
    --blockquote-color: #d5d8dc;
  }
}

Softer tones instead of pure black and white to make it easier on the eyes. The visited link color is also tweaked: Bear's default fails accessibility contrast standards in both light and dark mode, this one passes.

Link hover and focus

a {
  color: var(--link-color);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
  text-underline-offset: 0.2em;
  text-decoration-thickness: 1.5px;
}

a:focus-visible {
  outline: 2px solid var(--link-color);
  outline-offset: 2px;
}

Underline on hover sits a bit further from the text and gets slightly thicker underlining. The focus outline makes navigating by keyboard show which link is currently selected. Redundant cursor: pointer is removed.

Upvote button

button {
  margin: 0;
  cursor: pointer;
  font-size: inherit;
}

Makes the upvote button match the body font size.

Dates

time {
  font-family: ui-monospace, monospace;
  font-style: normal;
  font-size: 0.95rem;
  opacity: 0.8;
}

A slightly muted look sets dates apart from the surrounding text. Using the system's own monospace font keeps it consistent with the rest of the theme, and rem means it scales properly with the base font size.

Image corners

img {
  display: block;
  max-width: 100%;
  height: auto;
  border-radius: 3px;
}

Slightly rounded corners to soften images a bit.

Want more? Check out the full Bear Blog library.