Robert Birming

Theme building 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.

Naming the theme, and a note on comments

First thing, let's start by naming the theme:

/*
* SepThemeBear 2026
* Version 0.0.1 | 2026-09-01
* Robert Birming | robertbirming.com
*/

Anything wrapped in /* */ is a comment. You can write notes to yourself and others, or use it to hide styles from the live look.

Box-sizing reset

Some housekeeping before the real styling starts.

/* Box-sizing reset */
*,
*::before,
*::after {
  box-sizing: border-box;
}

Imagine drawing a box that's 300px wide. Without this rule, adding a border e.g. makes the box sneakily grow bigger. With this rule, the box stays 300px, no matter what you add inside it.

One rule, less guessing. I usually place it before the body section.

Paragraph spacing

p {
  margin-block: 1.2rem;
}

A bit of space above and below each paragraph to give it some breathing room.

Heading spacing and sizes

h1, h2, h3, h4, h5, h6 {
  margin-block: 1.5rem 0.5em;
  line-height: 1.3;
}

h1 { font-size: 1.9rem; }
h2 { font-size: 1.5rem; }
h3 { font-size: 1.3rem; }
h4 { font-size: 1.1rem; }

Headings get a bit more room above than below, so they stay close to the content they introduce. Line-height comes down a notch so wrapped headings stay tight, and each level gets its own size so the hierarchy is easy to read at a glance.

List spacing

ul, ol {
  margin-block: 1rem;
  padding-inline-start: 2em;
}

li,
li > ul,
li > ol {
  margin-block: 0.2em;
}

Lists get breathing room, and each item gets a touch of space too, including nested lists.

Shared vertical spacing

img,
table,
blockquote,
.highlight, .code {
  margin-block: 1.5rem;
}

Images, tables, quotes, and code blocks all get the same space above and below, so they feel consistent no matter the context.

Divider spacing

hr {
  margin-block: 2rem;
}

A bit more space than the other content blocks, making dividers read as stronger breaks.

Image display

img {
  display: block;
  height: auto;
}

Block and height makes sure that images stay consistent and proportional automatically.

Header spacing

.title h1 {
  margin-block: 0;
}

nav p {
  margin-block-start: 0.5em;
}

Take control over the header spacing, and make the navigation more connected to the title.

Post title spacing

body.post main h1 {
  margin-block-end: 0.3rem;
}

body.post main h1 + p {
  margin-block-start: 0.3rem;
}

Make dates connected to the blog post title.

That rounds out the basics. Next up: styling and finishing touches.

If you've applied the suggestions described, your theme should now look something like this:

/*
* SepThemeBear 2026
* Version 0.0.1 | 2026-09-01
* Robert Birming | robertbirming.com
*/

:root {
  --width: 720px;
  --font-main: Verdana, sans-serif;
  --font-secondary: Verdana, sans-serif;
  --font-scale: 1em;
  --background-color: #fff;
  --heading-color: #222;
  --text-color: #444;
  --link-color: #3273dc;
  --visited-color:  #8b6fcb;
  --code-background-color: #f2f2f2;
  --code-color: #222;
  --blockquote-color: #222;
}

@media (prefers-color-scheme: dark) {
  :root {
    --background-color: #01242e;
    --heading-color: #eee;
    --text-color: #ddd;
    --link-color: #8cc2dd;
    --visited-color:  #8b6fcb;
    --code-background-color: #000;
    --code-color: #ddd;
    --blockquote-color: #ccc;
  }
}

/* Box-sizing reset */
*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  font-family: var(--font-secondary);
  font-size: var(--font-scale);
  margin: auto;
  padding: 20px;
  max-width: var(--width);
  text-align: left;
  background-color: var(--background-color);
  word-wrap: break-word;
  overflow-wrap: break-word;
  line-height: 1.5;
  color: var(--text-color);
}

p {
  margin-block: 1.2rem;
}

h1, h2, h3, h4, h5, h6 {
  margin-block: 1.5rem 0.5em;
  font-family: var(--font-main);
  color: var(--heading-color);
  line-height: 1.3;
}

h1 { font-size: 1.9rem; }
h2 { font-size: 1.5rem; }
h3 { font-size: 1.3rem; }
h4 { font-size: 1.1rem; }

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

a:hover {
  text-decoration: underline; 
}

nav a {
  margin-right: 8px;
}

strong, b {
  color: var(--heading-color);
}

ul, ol {
  margin-block: 1rem;
  padding-inline-start: 2em;
}

li,
li > ul,
li > ol {
  margin-block: 0.2em;
}

img,
table,
blockquote,
.highlight, .code {
  margin-block: 1.5rem;
}

button {
  margin: 0;
  cursor: pointer;
}

time {
  font-family: monospace;
  font-style: normal;
  font-size: 15px;
}

main {
  line-height: 1.6;
}

table {
  width: 100%;
}

hr {
  margin-block: 2rem;
  border: 0;
  border-top: 1px dashed;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

code {
  font-family: monospace;
  padding: 2px;
  background-color: var(--code-background-color);
  color: var(--code-color);
  border-radius: 3px;
}

blockquote {
  border-left: 1px solid #999;
  color: var(--blockquote-color);
  padding-left: 20px;
  font-style: italic;
}

footer {
  padding: 25px 0;
  text-align: center;
}

.title:hover {
  text-decoration: none;
}

.title h1 {
  margin-block: 0;
  font-size: 1.5em;
}

nav p {
  margin-block-start: 0.5em;
}

.inline {
  width: auto !important;
}

.highlight, .code {
  padding: 1px 15px;
  background-color: var(--code-background-color);
  color: var(--code-color);
  border-radius: 3px;
  margin-block-start: 1em;
  margin-block-end: 1em;
  overflow-x: auto;
}

body.post main h1 {
  margin-block-end: 0.3rem;
}

body.post main h1 + p {
  margin-block-start: 0.3rem;
}

/* blog post list */
ul.blog-posts {
  list-style-type: none;
  padding: unset;
}

ul.blog-posts li {
  display: flex;
}

ul.blog-posts li span {
  flex: 0 0 130px;
}

ul.blog-posts li a:visited {
  color: var(--visited-color);
}

Want more? Check out the full Bear Blog library.