Bearly

Bearly theme for Bear Blog
Bearly is a simple, readable theme for Bear Blog.
System font, comfortable spacing and a light touch, the kind of theme that steps back and lets the writing do the talking.
It's no longer updated, and neither is Bearming, which took its place as my more complete theme. But Bearly still works well, and this is the last version I made, free to use.
How to use

Copy the styles below and paste them into your theme settings, replacing the default theme.
/*
* Bearly – a lovely Bear theme
* Version 2.0.1 | 2026-02-11
* Robert Birming | robertbirming.com
*/

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

  /* Light mode colors */
  --background: #fafbfc;
  --link:       #3a73c8;
  --text:       #373a3c;

  /* Colors based on text, links, and background */
  --muted:      color-mix(in srgb, var(--text) 60%, var(--background));
  --border:     color-mix(in srgb, var(--link) 20%, var(--background));
  --surface:    color-mix(in srgb, var(--background) 94%, var(--text) 6%);

  /* Font sizes */
  --font-xs:    0.85rem;
  --font-s:     0.95rem;
  --font-m:     1.0625rem;

  /* Line heights */
  --lh-s:       1.3;
  --lh-m:       1.65;

  /* Shapes */
  --line:       1px solid;
  --radius:     4px;

  /* Spacing */
  --space-xs:   0.5em;
  --space-s:    1em;
  --space-m:    1.2em;
  --space-l:    1.5em;
}

@media (prefers-color-scheme: dark) {
:root {
  color-scheme: dark;

  /* Dark mode colors */
  --background: #1c2126;
  --link:       #82aee3;
  --text:       #d9d9d8;
  }
}

/* Layout */
html {
  font-size: 100%;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

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

body {
  max-width: 66ch;
  margin: 0 auto;
  padding: 2.5rem 1.5rem;
  font-family: system-ui, sans-serif;
  font-size: var(--font-m);
  line-height: var(--lh-m);
  color: var(--text);
  background: var(--background);
  overflow-wrap: break-word;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Styles */
h1, h2, h3, h4 {
  margin: 0 0 var(--space-s);
  font-weight: 600;
  line-height: var(--lh-s);
  letter-spacing: 0;
}

h1 { font-size: 1.7rem; }
h2 { font-size: 1.4rem; }
h3 { font-size: 1.2rem; }
h4 { font-size: 1.1rem; }

p {
  margin: 0 0 var(--space-m);
}

ul, ol {
  margin: 0 0 var(--space-m);
  padding-left: var(--space-m);
}

li {
  margin: var(--space-xs) 0;
}

blockquote {
  margin: var(--space-l) 0;
  padding: var(--space-s) var(--space-m);
  font-style: italic;
  border: var(--line) var(--border);
  border-left: 4px solid var(--link);
  border-radius: var(--radius);
  background: var(--surface);
}

blockquote p {
  margin: 0;
}

hr {
  margin: var(--space-l) 0;
  border: 0;
  border-top: var(--line) var(--border);
}

time {
  font-style: normal;
  font-size: var(--font-s);
  font-variant-numeric: tabular-nums;
  line-height: var(--lh-s);
  color: var(--muted);
}

a {
  color: var(--link);
  text-decoration: none;
  text-underline-offset: 0.18em;
}

a:hover,
a:focus-visible {
  text-decoration: underline;
}

strong {
  font-weight: 600;
  color: var(--text);
}

em {
  font-style: italic;
  color: var(--text);
}

img {
  display: block;
  max-width: 100%;
  height: auto;
  margin: var(--space-l) 0;
  border-radius: var(--radius);
}

pre {
  margin: var(--space-l) 0;
  padding: var(--space-s);
  background: var(--surface);
  border: var(--line) var(--border);
  border-radius: var(--radius);
  font-size: var(--font-s);
  overflow-x: auto;
}

code {
  font-family: ui-monospace, monospace;
}

table {
  width: 100%;
  margin: var(--space-l) 0;
  border-collapse: collapse;
  font-size: var(--font-s);
}

th, td {
  padding: var(--space-xs) var(--space-s);
  border: var(--line) var(--border);
}

th {
  background: var(--surface);
  text-align: left;
}

input, textarea, select {
  font: inherit;
  color: var(--text);
  background: var(--surface);
  border: var(--line) var(--border);
  border-radius: var(--radius);
  padding: var(--space-xs);
  width: 100%;
}

input:focus,
textarea:focus,
select:focus {
  outline: 2px solid var(--link);
  outline-offset: 2px;
}

label {
  display: block;
  margin-bottom: var(--space-xs);
}

button:not(.upvote-button),
input[type="submit"],
input[type="button"] {
  font: inherit;
  color: var(--background);
  background: var(--link);
  border: 0;
  padding: var(--space-xs) var(--space-s);
  border-radius: var(--radius);
  cursor: pointer;
}

button:not(.upvote-button):hover,
input[type="submit"]:hover,
input[type="button"]:hover {
  background: color-mix(in srgb, var(--link) 90%, var(--text) 10%);
}

/* Header */
header {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-xs) var(--space-s);
  margin-bottom: var(--space-l);
  padding-bottom: calc(var(--space-l) * 0.8);
  border-bottom: var(--line) var(--border);
}

header .title {
  color: var(--text);
  text-decoration: none;
  transition: inherit;
}

header a.title h1 {
  margin: 0;
  font-size: var(--font-m);
  line-height: var(--lh-s);
}

header nav {
  margin-left: auto;
}

header nav p {
  margin: 0;
  display: flex;
  gap: var(--space-s);
  font-size: var(--font-s);
}

@media (max-width: 600px) {
  header {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--space-xs);
  }

  header nav {
    margin-left: 0;
  }

  header nav p {
    justify-content: center;
    flex-wrap: wrap;
    gap: var(--space-xs) var(--space-s);
  }
}

/* Footer */
footer {
  border-top: var(--line) var(--border);
  margin-top: var(--space-l);
  padding: calc(var(--space-l) * 1.2) 0;
  text-align: center;
  font-size: var(--font-s);
  line-height: var(--lh-s);
  color: var(--muted);
}

footer span:last-of-type {
  font-size: var(--font-xs);
}

footer span:last-of-type a {
  color: inherit;
}

/* Pages & Posts */
main > h1:first-child {
  margin: 0;
}

:is(.post, .page) main > h1 + p {
  margin: var(--space-xs) 0 var(--space-l);
}

body.post main > h1 + p:has(time) {
  margin: 0 0 var(--space-l);
}

/* Blog list */
ul.blog-posts {
  margin: var(--space-l) 0;
  padding: 0;
  list-style: none;
  border: var(--line) var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  overflow: hidden;
}

ul.blog-posts li {
  display: flex;
  align-items: center;
  gap: var(--space-s);
  padding: var(--space-xs) var(--space-m) var(--space-s);
  border-bottom: var(--line) var(--border);
}

ul.blog-posts li:last-child {
  padding-bottom: var(--space-xs);
  border-bottom: 0;
}

ul.blog-posts li * {
  margin: 0;
}

ul.blog-posts li a {
  order: 1;
  flex: 1 1 auto;
  min-width: 0;
  display: block;
  line-height: var(--lh-s);
  color: inherit;
  text-decoration: none;
  transform: translateX(0);
  transition: transform .18s ease;
}

ul.blog-posts li:hover a,
ul.blog-posts li:focus-within a {
  transform: translateX(6px);
}

ul.blog-posts li a:focus-visible {
  text-decoration: underline;
  text-underline-offset: 0.18em;
}

ul.blog-posts li span {
  order: 2;
  flex: 0 0 auto;
  margin-left: auto;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  text-align: right;
}

ul.blog-posts li span time {
  font-size: var(--font-xs);
  line-height: var(--lh-s);
}

@media (max-width: 600px) {
  ul.blog-posts li {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.1em;
    padding: var(--space-xs) var(--space-m);
  }

  ul.blog-posts li a {
    order: 1;
    width: 100%;
  }

  ul.blog-posts li span {
    order: 2;
    margin-left: 0;
    text-align: left;
  }
}

/* Optional: Upvote button */
:is(.post, .page) .upvote-button {
  display: inline-flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: .25em;
  padding: .15em .3em;
  border: 0;
  background: transparent !important;
  color: inherit;
  font: inherit;
  line-height: 1;
  cursor: pointer;
  white-space: nowrap;
}

:is(.post, .page) .upvote-button svg {
  display: none !important;
}

:is(.post, .page) .upvote-button::before {
  content: "♡";
  font-size: 1.5em;
  line-height: 1;
  color: var(--link);
}

:is(.post, .page) .upvote-button .upvote-count {
  display: inline-block !important;
  width: auto !important;
  flex: 0 0 auto !important;
  margin: 0 !important;
  padding: 0 !important;
  font-size: var(--font-s);
  color: var(--text);
  opacity: .7;
  white-space: nowrap;
  transform: translateY(1px);
}

:is(.post, .page) .upvote-button:is(.upvoted, [aria-pressed="true"], [disabled])::before {
  content: "♥";
}

:is(.post, .page) .upvote-button[disabled] {
  cursor: default;
}

/* Optional: Guestbooks.meadow.cafe */
#guestbooks___guestbook-form-container form {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  margin: var(--space-m) 0;
}

#guestbooks___guestbook-messages-container > div {
  margin: var(--space-m) 0;
  padding: var(--space-m);
  font-size: var(--font-s);
  border: var(--line) var(--border);
  border-radius: var(--radius);
  background: var(--surface);
}

#guestbooks___guestbook-messages-container blockquote {
  margin: 0;
  padding: 0;
  border: 0;
  font-style: normal;
  background: transparent;
}

#guestbooks___guestbook-messages-container p {
  margin-bottom: var(--space-xs);
}

#guestbooks___guestbook-made-with {
  color: var(--muted);
}

/* Post Meta: Tags */
p.tags {
  margin-block: var(--space-l);
  text-align: center;
}

p.tags a {
  color: var(--muted);
  font-size: var(--font-s);
  text-decoration: none;
  padding: 0.3em 0.6em;
  background: var(--surface);
  border-radius: var(--radius);
  transition: all 0.2s ease;
}

p.tags a:hover {
  color: var(--background);
  background: var(--link);
}
Notes

The upvote button and Guestbooks sections at the end are optional. Delete them if you don't use those features.
Bearly is no longer updated, but it should keep working, since it sticks to Bear's standard markup.
Happy blogging!
Want more? Check out the full Bear Blog library.