Robert Birming

Robeart - my take on Bear's default theme

Robeart is my take on Bear's default theme. I know, I'm running out of pun theme names. Small bonus though: say it out loud and it sounds like my name in Swedish.

At first glance, it looks pretty much like the standard Bear theme. But if you look closer, you'll see that things are a little more tuned and polished.

For example:

Even if the Robeart theme works fine as is, I hope it will also encourage people to start making their own theme. Take it for a test ride. Compare it to the default Bear theme, change things, see what happens, make your own little tweaks.

That's what I used to do when I first got interested in web design some 20 years ago. It's a great way to learn. Knowing some basic CSS will make things so much easier, even if you're using AI. And it's fun too.

If you want to give Robeart a try, simply copy the styles below and paste them into the Bear theme settings. If you want more options, check out the Bear Blog library.

Happy blogging!

/*
* Robeart — a personal take on Bear's default theme
* Robert Birming | robertbirming.com
*/

:root {
  --width: 64ch;
  --font-main: Verdana, sans-serif; /*Tahoma*/
  --font-secondary: Verdana, sans-serif;
  --font-scale: 1rem;
  --background-color: #f8f8f8;
  --heading-color: #2c2d2e;
  --text-color: #2c2d2e;
  --link-color: #2952cc;
  --visited-color: #7c5a91;
  --code-background-color: color-mix(in srgb, var(--background-color), black 5%);
  --code-color: var(--text-color);
  --blockquote-color: var(--text-color);
}

@media (prefers-color-scheme: dark) {
  :root {
    --background-color: #01242e;
    --heading-color: #d5d8dc;
    --text-color: #d5d8dc;
    --link-color: #98cbe3;
    --visited-color: #c9add7;
    --code-background-color: color-mix(in srgb, var(--background-color), white 8%);
    --code-color: var(--text-color);
    --blockquote-color: var(--text-color);
  }
}

html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  max-width: var(--width);
  margin: auto;
  padding: 20px;
  font-family: var(--font-secondary);
  font-size: var(--font-scale);
  letter-spacing: -0.01em;
  line-height: 1.6;
  word-wrap: break-word;
  background-color: var(--background-color);
  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;
  letter-spacing: -0.02em;
}

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);
  text-decoration: underline;
  text-decoration-thickness: 0px;
  text-underline-offset: 0.2em;
  transition: text-decoration-thickness 0.15s ease;
}

body.post main a,
body.page main a {
  text-decoration: underline;
  text-decoration-thickness: 0.5px;
  text-underline-offset: 0.2em;
}

a:hover,
body.post main a:hover,
body.page main a:hover {
  text-decoration-thickness: 1.5px;
}

main a:visited {
  color: var(--visited-color);
}

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

hr,
img,
blockquote {
  margin-block: 1.5rem;
}

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

blockquote {
  border-left: 1px solid color-mix(in srgb, var(--text-color), transparent 50%);
  color: var(--blockquote-color);
  padding-left: 20px;
  font-style: italic;
}

hr {
  border: 0;
  border-top: 1px dashed color-mix(in srgb, var(--text-color), transparent 50%);
}

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

.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;
}

table {
  width: 100%;
  border-collapse: collapse;
}

th, td {
  padding: 0.2em 0;
  text-align: left;
}

button {
  margin: 0;
  cursor: pointer;
}

time {
  font-size: calc(var(--font-scale) * 0.9);
  font-style: normal;
  opacity: 0.8;
}

header {
  margin-block: 0 1.5em;
}

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

a.title {
  color: inherit;
  text-decoration: none;
}

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

nav a {
  margin-inline-end: 0.5em;
}

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

body.post main h1 + p {
  margin-block-start: 0.2em;
}

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

ul.blog-posts li {
  display: flex;
  align-items: baseline;
  gap: 0.5em;
  padding-block: 0.2em;
}

ul.blog-posts li a {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  min-width: 0;
}

ul.blog-posts li::after {
  content: "";
  flex: 1;
  border-block-end: 1px dotted color-mix(in srgb, var(--text-color), transparent 25%);
}

ul.blog-posts li span {
  order: 3;
  flex: 0 0 auto;
  font-variant-numeric: tabular-nums;
}

#upvote-form .upvote-count {
  font-size: inherit;
}

footer {
  padding: 25px 0;
  text-align: center;
  font-size: calc(var(--font-scale) * 0.9);
}

footer p {
  margin-block: 0.5em;
}