Bearming theme

Bearming is a theme system built for Bear, focused on readability, easy customization, and a bit of warmth and personality.
You can use it on its own or shape it further. Swap the colors with a palette, change the look with styles, or add features with add-ons. Mix and match however you like.
To see how everything fits together, check out the style guide. Curious what others think of it? Check out the testimonials.
The theme was last updated 3 days, 20 hours ago.
/*
* Bearming — a personal Bear theme
* Version 5.4.2 | 2026-05-12
* Robert Birming | robertbirming.com
*/

/* Palette: Default */
:root {
  color-scheme: light dark;

  /* Layout */
  --page-width: 67ch;
  --line-height: 1.65;
  --space-block: 1.8rem;
  --radius: 4px;

  /* Typography */
  --font-body: system-ui, sans-serif;
  --font-heading: var(--font-body);
  --font-mono: ui-monospace, monospace;
  --font-size: 1.0625rem;
  --font-small: calc(var(--font-size) * 0.9);

  /* Light */
  --bg: #f8f8f8;
  --text: #2c2d2e;
  --link: #1f5fbf;
  --visited: #7c5a91;
  --accent: var(--link);
  --muted: color-mix(in srgb, var(--accent) 15%, color-mix(in srgb, var(--text) 65%, var(--bg)));
  --surface: color-mix(in srgb, var(--accent) 7%, var(--bg));
  --border: color-mix(in srgb, var(--accent) 22%, var(--bg));
}

@media (prefers-color-scheme: dark) {
  :root {
    /* Dark */
    --bg: #1c1f23;
    --text: #e6e7e8;
    --link: #74b0f4;
    --visited: #c4a8d4;
    --accent: var(--link);
    --muted: color-mix(in srgb, var(--accent) 10%, color-mix(in srgb, var(--text) 80%, var(--bg)));
    --surface: color-mix(in srgb, var(--accent) 13%, var(--bg));
    --border: color-mix(in srgb, var(--accent) 30%, var(--bg));
  }
}

/* =========================
   Base styles
   robertbirming.com/bearming/styles
   ========================= */

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

html {
  -webkit-text-size-adjust: 100%;
  background-color: var(--bg);
}

body {
  margin-inline: auto;
  padding: 1.25rem;
  max-width: var(--page-width);
  font-family: var(--font-body);
  font-size: var(--font-size);
  line-height: var(--line-height);
  overflow-wrap: break-word;
  color: var(--text);
  background-color: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

p {
  margin-block: 1.2em;
}

h1, h2, h3, h4 {
  margin-block: var(--space-block) 0.5em;
  line-height: 1.3;
  font-family: var(--font-heading);
}

h1 { font-size: 1.8rem; }
h2 { font-size: 1.5rem; }
h3 { font-size: 1.3rem; }
h4 { font-size: 1.2rem; }

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

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

@media (hover: hover) {
  a:hover {
    text-decoration: underline;
    text-underline-offset: 0.2em;
  }
}

ul, ol {
  padding-inline-start: 1.5rem;
}

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

hr,
img,
video,
pre,
blockquote {
  margin-block: var(--space-block);
}

hr {
  border: none;
  border-block-start: 1px solid var(--border);
}

img,
video {
  display: block;
  max-width: 100%;
  height: auto;
  border-radius: var(--radius);
}

/* Blockquote: Default */
blockquote {
  margin-inline: 0;
  padding-block: 0;
  padding-inline: 1.2em;
  font-style: italic;
  color: var(--muted);
  border-inline-start: 3px solid var(--accent);
}

pre {
  padding-block: 1rem;
  padding-inline: 1.2rem;
  overflow-x: auto;
  font-family: var(--font-mono);
  font-size: var(--font-small);
  line-height: 1.5;
  tab-size: 2;
  background-color: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

code {
  padding-block: 0.15em;
  padding-inline: 0.3em;
  font-family: var(--font-mono);
  font-size: var(--font-small);
  overflow-wrap: anywhere;
  background-color: var(--surface);
  border-radius: var(--radius);
}

pre code {
  padding: 0;
  background: none;
  border-radius: 0;
  font-size: inherit;
  overflow-wrap: normal;
}

mark {
  padding-inline: 0.15em;
  color: var(--bg);
  background-color: color-mix(in srgb, var(--link) 70%, var(--text));
  border-radius: 2px;
}

table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--font-small);
}

th,
td {
  padding-block: 0.5em;
  padding-inline: 0.75em;
  border: 1px solid var(--border);
  text-align: start;
}

th {
  background-color: var(--surface);
  font-weight: 700;
}

time {
  font-family: var(--font-mono);
  font-size: calc(var(--font-small) * 0.95);
  font-style: normal;
  color: var(--muted);
}

/* Margin trim */
header nav p,
main > :first-child,
.post main > h1 + p {
  margin-block-start: 0;
}

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

/* Header: Default */
header {
  margin-block: 0 var(--space-block);
}

header a.title {
  display: inline-block;
  color: var(--text);
  text-decoration: none;
}

.title h1 {
  margin-block: 0;
  font-size: 1.7rem;
  font-weight: 800;
  letter-spacing: -0.01em;
}

header nav p {
  margin-block: 0.2rem 0;
}

header nav a {
  margin-inline-end: 0.7em;
}

/* Blog list: Default */
.blog-posts {
  margin-block-end: var(--space-block);
  padding: 0;
  list-style: none;
}

.blog-posts li {
  display: flex;
  align-items: baseline;
}

.blog-posts li a {
  margin-inline-end: auto;
}

.blog-posts li span {
  flex: 0 0 7.5rem;
  font-size: var(--font-small);
  color: var(--muted);
  white-space: nowrap;
}

p.tags {
  margin-block: var(--space-block);
}

p.tags a,
p.tags a:visited {
  margin-inline-end: 0.5em;
  font-size: var(--font-small);
  color: var(--muted);
}

/* Upvote button: Default */
#upvote-form .upvote-button {
  cursor: pointer;
}

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

/* Footer: Default */
footer {
  margin-block-start: calc(var(--space-block) * 1.2);
  text-align: center;
  color: var(--muted);
}

footer p {
  margin-block: 0.5em;
}

footer span:last-child {
  font-size: var(--font-small);
}

/* =========================
   Optional add-ons
   robertbirming.com/bearming/add-ons
   ========================= */