BearBone

BearBone theme

The BearBone theme is about as simple as it gets while still delivering a decent reading experience. It doesn’t even have a header, although you can always add it back if you want to.

The theme is also a good starting point if you want to learn a bit of CSS, which I honestly think every blogger should try at least once. AI can help you along the way, but learning the basics of the styling language is still an undefeated skill.

Just copy the BearBone styles below, paste them into your Bear theme settings, and start playing around. Happy styling!

/*
 * Theme: BearBone — a tiny Bear theme
 * Version: 1.0.0 | robertbirming.com
 */

* {
  box-sizing: border-box;
}

body {
  max-width: 640px;
  margin: 20px auto;
  padding: 0 20px;
  font-family: system-ui, sans-serif;
  font-size: 1.1rem;
  line-height: 1.6;
  color: #333;
  background: #fafafa;
}

h1, h2, h3 {
  margin-block: 1.6em 0.8em;
  line-height: 1.2;
}

h1 { font-size: 1.7rem; }
h2 { font-size: 1.5rem; }
h3 { font-size: 1.3rem; }

hr {
  margin-block: 2em;
  border: 0;
  border-top: 1px solid #ccc;
}

blockquote {
  margin-block: 1.5em;
  padding-left: 1em;
  border-left: 3px solid #ccc;
  font-style: italic;
}

time {
  font-family: monospace;
  font-size: 0.9em;
  font-style: normal;
  color: #666;
}

code,
pre {
  font-size: 0.9em;
}

table {
  width: 100%;
}

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

footer {
  margin-block: 1.6em;
  padding: 0.5em 0 1.2em !important;
  border-top: 1px solid #ccc;
  text-align: center;
  color: #666;
}

footer span:last-of-type {
  font-size: 0.9em;
}

ul.blog-posts {
  list-style-type: none;
  padding: 0;
}

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

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

/* Delete to show header */
header {
  display: none;
}