Robert Birming

Grizzly theme for Bear blog

Grizzly theme

Here’s my contribution to the ongoing Bearblog Creation Festival run by the Grizzly Gazette. I really love this initiative.

I had many ideas, but in the end I settled on a theme. Maybe a slightly boring pick since there’s already one submitted. But hey, I love creating themes.

I named it Grizzly. It’s a mix of my themes in general, and the ValenTheme in particular, which you might notice if you’re familiar with my Bear creations.

You can't stay in your corner of the forest waiting for others to come to you. You have to go to them sometimes. Winnie the Pooh

The theme is bear (as in the animal) inspired and comes with paw prints here and there, even for the cursor if you want that, a "Worth a paw?" upvote button, furry colors, and styles for the guestbook and status log.

How to use

If you want to give it a go, simply copy the theme styles below, head over to your Bear theme settings, paste them in, and let the pawsome journey begin.

If you want the cursor effect, add the script to your footer (Dashboard → Settings → Header and footer directives).

Styles

/*
 * Grizzly — a pawsome Bear theme
 * Version 1.0.0 | 2026-02-24
 * Robert Birming | robertbirming.com
 */

:root {
  --amber: #c8762a;
  --amber-dim: rgba(200, 118, 42, 0.10);
  --amber-mid: rgba(200, 118, 42, 0.22);
  --bg: #f5ecd7;
  --text: #3d2b1a;
  --heading: #2c1a0e;
  --link: #7a3b1e;
  --visited: #9e6b45;
  --border: color-mix(in srgb, var(--amber) 55%, var(--bg));
  --surface: #ede0c8;
  --radius-lg: 0.75rem;
  --radius-md: 0.5rem;
  --radius-sm: 0.3125rem;
  --font-main: Georgia, "Times New Roman", serif;
  --font-mono: ui-monospace, monospace;
}

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

html {
  -webkit-text-size-adjust: 100%;
  background-color: #7a3b1e;
  background-image:
    radial-gradient(ellipse 38% 30% at 50% 62%, rgba(93,46,20,0.55) 100%, transparent 100%),
    radial-gradient(circle 10% at 31% 33%, rgba(93,46,20,0.55) 100%, transparent 100%),
    radial-gradient(circle 10% at 69% 33%, rgba(93,46,20,0.55) 100%, transparent 100%),
    radial-gradient(circle 10% at 20% 50%, rgba(93,46,20,0.55) 100%, transparent 100%),
    radial-gradient(circle 10% at 80% 50%, rgba(93,46,20,0.55) 100%, transparent 100%),
    radial-gradient(ellipse 38% 30% at 50% 62%, rgba(93,46,20,0.55) 100%, transparent 100%) 4rem 4rem,
    radial-gradient(circle 10% at 31% 33%, rgba(93,46,20,0.55) 100%, transparent 100%) 4rem 4rem,
    radial-gradient(circle 10% at 69% 33%, rgba(93,46,20,0.55) 100%, transparent 100%) 4rem 4rem,
    radial-gradient(circle 10% at 20% 50%, rgba(93,46,20,0.55) 100%, transparent 100%) 4rem 4rem,
    radial-gradient(circle 10% at 80% 50%, rgba(93,46,20,0.55) 100%, transparent 100%) 4rem 4rem;
  background-size: 8rem 8rem;
  background-attachment: fixed;
}

body {
  max-width: 46rem;
  margin: 2.5rem auto;
  padding: 2.75rem 3rem;
  font-family: system-ui, sans-serif;
  font-size: 1.0625em;
  line-height: 1.55;
  color: var(--text);
  background: var(--bg);
  word-wrap: break-word;
  overflow-wrap: break-word;
  border: 0.5rem solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: 0 1.5rem 3rem rgba(44, 26, 14, 0.22), 0 0.125rem 0 rgba(255, 255, 255, 0.28) inset;
}

@media (max-width: 52rem) {
  body {
    margin: 0.75rem auto;
    padding: 1.5rem 1.375rem;
    border-width: 0.3125rem;
    border-radius: calc(var(--radius-lg) * 0.75);
  }
}

::selection {
  background: var(--amber);
  color: var(--bg);
}

p {
  margin-block: 1.2em;
}

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

h1 { font-size: 2.2em; }
h2 { font-size: 1.75em; }
h3 { font-size: 1.4em; }
h4 { font-size: 1.2em; }

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

main {
  line-height: 1.65;
}

a {
  color: var(--link);
  cursor: pointer;
  text-decoration: none;
  background: linear-gradient(var(--amber), var(--amber)) no-repeat 0 100% / 0% 0.1rem;
  transition: background-size 200ms ease, color 150ms ease;
}

a:hover {
  background-size: 100% 0.1rem;
  color: var(--heading);
}

a:focus-visible,
button:focus-visible {
  outline: none;
  box-shadow: 0 0 0 0.2rem color-mix(in srgb, var(--amber) 40%, transparent);
  border-radius: var(--radius-sm);
}

main a {
  background: linear-gradient(var(--amber), var(--amber)) no-repeat 0 95% / 100% 0.08rem;
  opacity: 0.95;
}

main a:hover {
  background-size: 100% 0.12rem;
}

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

hr {
  border: 0;
  height: 1px;
  background: linear-gradient(to right, transparent, var(--amber), transparent);
  margin-block: 2.5rem;
  overflow: visible;
  text-align: center;
}

hr::after {
  content: "🐾";
  display: inline-block;
  position: relative;
  top: -0.9rem;
  padding: 0 0.6rem;
  background: var(--bg);
  font-size: 1.1em;
  line-height: 1;
}

blockquote {
  position: relative;
  margin-block: 1.6em;
  padding: 1.1rem 1.3rem;
  border: 1px solid color-mix(in srgb, var(--amber) 28%, var(--bg));
  border-left: 0.25rem solid var(--amber);
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--amber-dim) 80%, transparent);
  color: var(--heading);
  font-style: italic;
  line-height: 1.65;
  box-shadow: 0 0.125rem 0.5rem rgba(44, 26, 14, 0.06);
}

blockquote::after {
  content: "🐾";
  position: absolute;
  bottom: -0.65rem;
  right: 1rem;
  background: var(--bg);
  padding: 0 0.4rem;
  font-size: 0.9rem;
  line-height: 1;
  pointer-events: none;
  opacity: 0.75;
}

blockquote p { margin-block: 0.7em; }
blockquote p:first-child { margin-block-start: 0; }
blockquote p:last-child { margin-block-end: 0; }

cite {
  display: block;
  text-align: right;
  margin-top: 0.8rem;
  font-family: var(--font-main);
  font-style: normal;
  font-size: 0.9em;
  color: color-mix(in srgb, var(--link) 85%, var(--text));
  line-height: 1.4;
}

cite::before {
  content: "— ";
  opacity: 0.6;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
  margin-block: 1.6em;
  border-radius: var(--radius-md);
}

code {
  font-family: var(--font-mono);
  font-size: 0.9em;
  background: var(--surface);
  color: var(--heading);
  border: 1px solid color-mix(in srgb, var(--amber) 20%, transparent);
  border-radius: var(--radius-sm);
  padding: 0.12em 0.4em;
}

.highlight,
.code {
  padding: 0.0625rem 1rem;
  background: var(--surface);
  color: var(--heading);
  border: 1px solid color-mix(in srgb, var(--amber) 22%, transparent);
  border-radius: var(--radius-md);
  margin-block: 1em;
  overflow-x: auto;
}

.inline {
  width: auto !important;
  margin-block: 0;
  display: inline;
}

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

time {
  font-family: var(--font-mono);
  font-size: 0.9em;
  font-style: normal;
  opacity: 0.7;
  white-space: nowrap;
}

header {
  position: relative;
  text-align: center;
  margin-block: 0.5rem 2rem;
  padding-bottom: 1.5rem;
}

header::after {
  content: "";
  display: block;
  position: absolute;
  bottom: 0;
  left: 10%;
  right: 10%;
  height: 0.1875rem;
  background: linear-gradient(90deg, transparent, var(--amber), transparent);
  border-radius: 1px;
}

header a.title {
  display: inline-block;
  background-image: none;
}

header a.title:hover {
  background-image: none;
}

header .title h1 {
  margin-block: 0;
  font-size: 2em;
  letter-spacing: -0.01em;
}

.title h1::after {
  content: " 🐾";
  display: inline-block;
  margin-left: 0.15em;
  font-style: normal;
  transition: transform 200ms ease;
  transform-origin: 50% 60%;
}

.title:hover h1::after {
  transform: rotate(-12deg) scale(1.12);
}

nav {
  margin-top: 0.75rem;
  font-size: 0.9rem;
}

nav,
nav > * {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.3rem 0.4rem;
}

nav p {
  margin-block-start: 0.35rem;
}

nav a {
  display: inline-block;
  margin: 0;
  padding: 0.35rem 0.8rem;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--amber) 35%, transparent);
  background: var(--amber-dim);
  background-image: none;
  color: var(--heading);
  font-weight: 600;
  transition: transform 120ms ease, background-color 120ms ease, box-shadow 120ms ease, border-color 120ms ease;
}

nav a:hover {
  background: var(--amber-mid);
  border-color: var(--amber);
  transform: translateY(-1px);
  box-shadow: 0 0.3rem 0.8rem rgba(44, 26, 14, 0.15);
  background-image: none;
}

nav a:active {
  transform: translateY(0);
}

footer {
  position: relative;
  padding: 1.5rem 0 0.5rem;
  text-align: center;
  margin-top: 2rem;
  font-size: 0.95em;
}

footer::before {
  content: "";
  display: block;
  height: 0.1875rem;
  margin-bottom: 1.25rem;
  background: linear-gradient(90deg, transparent, var(--amber), transparent);
  border-radius: 1px;
}

footer p {
  margin-block: 0.6em;
  opacity: 0.8;
}

footer > span:last-child {
  color: var(--visited);
}

ul.blog-posts {
  list-style: none;
  padding: 0;
  margin-block: 1.6rem 0;
}

ul.blog-posts li {
  display: grid;
  grid-template-columns: max-content 1fr;
  align-items: baseline;
  column-gap: 1.2rem;
  padding-block: 0.5rem;
  border-bottom: 1px solid color-mix(in srgb, var(--text) 12%, var(--bg));
}

ul.blog-posts li:last-child {
  border-bottom: 0;
}

ul.blog-posts li a {
  font-family: var(--font-main);
  font-weight: normal;
  font-size: 1.05em;
  background-image: none;
}

ul.blog-posts li a:hover {
  background-image: none;
  color: var(--amber);
}

@media (max-width: 38rem) {
  ul.blog-posts li {
    grid-template-columns: 1fr;
    row-gap: 0.2rem;
    padding-block: 0.65rem;
  }

  ul.blog-posts li span {
    white-space: normal;
  }
}

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

.post main > h1 + p {
  margin-block-start: 0;
}

.post main time,
.post main > time {
  display: inline-block;
  margin-block: 0 1rem;
}

button {
  margin: 0;
  cursor: pointer;
}

/* Upvote button */
#upvote-form > small {
  display: block;
  margin-top: 1.8rem;
  font-size: 1em;
}

#upvote-form button.upvote-button {
  display: inline-flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  width: fit-content;
  gap: 0.4em;
  margin: 0;
  padding: 0.375rem 0.85rem;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--amber) 35%, transparent);
  background: var(--amber-dim);
  color: var(--heading);
  font-weight: 600;
  font-family: system-ui, -apple-system, sans-serif;
  font-size: 0.95em;
  cursor: pointer;
  background-image: none;
  transition: 
    transform 120ms ease, 
    background-color 120ms ease, 
    box-shadow 120ms ease, 
    border-color 120ms ease;
}

#upvote-form .upvote-button svg,
#upvote-form .upvote-button .upvote-count {
  display: none;
}

#upvote-form .upvote-button::before {
  content: "🐾";
  font-size: 1em;
  line-height: 1;
}

#upvote-form .upvote-button::after {
  content: "Worth a paw?";
  white-space: nowrap;
}

@media (hover: hover) {
  #upvote-form .upvote-button:not([disabled]):not(.upvoted):hover {
    background: var(--amber-mid);
    border-color: var(--amber);
    transform: translateY(-1px);
    box-shadow: 0 0.3rem 0.8rem rgba(44, 26, 14, 0.15);
  }
}

#upvote-form .upvote-button:not([disabled]):not(.upvoted):active {
  transform: translateY(0);
}

#upvote-form button.upvote-button.upvoted,
#upvote-form button.upvote-button[disabled] {
  cursor: default;
  opacity: 1;
  background: var(--surface);
  border-color: var(--amber);
  color: var(--amber);
  box-shadow: inset 0 1px 2px rgba(44, 26, 14, 0.1);
}

#upvote-form button.upvote-button.upvoted::after,
#upvote-form button.upvote-button[disabled]::after {
  content: "You left your mark!";
}

#upvote-form button.upvote-button.upvoted::before {
  filter: sepia(1) saturate(5);
}

/* Guestbook (guestbooks.meadow.cafe) */
#guestbooks___guestbook-form-container form {
  display: flex;
  flex-direction: column;
  gap: 0.8em;
  margin-block: 1.6em;
}

#guestbooks___guestbook-form-container :is(input, textarea, button) {
  font: inherit;
  letter-spacing: inherit;
  appearance: none;
}

#guestbooks___guestbook-form-container :is(input[type="text"], input[type="email"], input[type="url"], textarea) {
  width: 100%;
  padding: 0.65rem 0.9rem;
  color: var(--text);
  background: var(--bg);
  border: 1px solid color-mix(in srgb, var(--amber) 28%, var(--bg));
  border-radius: var(--radius-md);
  outline: none;
}

#guestbooks___guestbook-form-container textarea {
  min-height: 7.5em;
  resize: vertical;
}

#guestbooks___guestbook-form-container :is(input, textarea):focus {
  border-color: var(--amber);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--amber) 18%, transparent);
}

#guestbooks___guestbook-form-container :is(button, input[type="submit"]) {
  align-self: flex-start;
  padding: 0.5rem 0.9rem;
  color: var(--heading);
  background: var(--amber-dim);
  border: 1px solid color-mix(in srgb, var(--amber) 35%, transparent);
  border-radius: 999px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 120ms ease, border-color 120ms ease, transform 120ms ease;
}

@media (hover: hover) {
  #guestbooks___guestbook-form-container :is(button, input[type="submit"]):hover {
    background: var(--amber-mid);
    border-color: var(--amber);
    transform: translateY(-1px);
  }
}

#guestbooks___guestbook-messages-header {
  display: flex;
  align-items: center;
  gap: 0.45em;
  margin-block: 2.2rem 1rem;
}

#guestbooks___guestbook-messages-header::before {
  content: "💬";
  translate: 0 1px;
}

#guestbooks___guestbook-messages-container > div {
  margin-block: 1.2em;
  padding: 1em 1.2em;
  font-size: 0.95em;
  border: 1px solid color-mix(in srgb, var(--amber) 20%, var(--bg));
  border-radius: var(--radius-md);
  background: var(--amber-dim);
}

#guestbooks___guestbook-messages-container p {
  margin: 0.35em 0 0;
  padding: 0;
}

#guestbooks___guestbook-messages-container time {
  font-size: 0.85em;
  opacity: 0.75;
  white-space: nowrap;
}

#guestbooks___guestbook-messages-container blockquote {
  margin: 0.35em 0 0;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font-style: normal;
  box-shadow: none;
}

#guestbooks___guestbook-messages-container blockquote::after {
  content: none;
}

#guestbooks___guestbook-messages-container .guestbook-message-reply {
  position: relative;
  margin-block: 0.9rem 0.2rem;
  margin-inline-start: 1.6rem;
  padding: 0.9em 1.1em;
  background: color-mix(in srgb, var(--text) 4%, transparent);
  border: 1px solid color-mix(in srgb, var(--amber) 18%, var(--bg));
  border-radius: var(--radius-md);
}

#guestbooks___guestbook-messages-container .guestbook-message-reply::before {
  content: "";
  position: absolute;
  top: -1rem;
  left: -0.9rem;
  width: 0.7rem;
  height: 1.6rem;
  border-left: 2px solid color-mix(in srgb, var(--amber) 18%, var(--bg));
  border-bottom: 2px solid color-mix(in srgb, var(--amber) 18%, var(--bg));
  border-bottom-left-radius: var(--radius-sm);
  opacity: 0.6;
}

/* Status log */
.statuslog {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.2rem 1.2rem;
  max-width: 34rem;
  margin: 1.6em auto;
  padding: 1rem 1.1rem;
  color: var(--text);
  background: color-mix(in srgb, var(--text) 4%, var(--bg));
  border: 1px solid color-mix(in srgb, var(--text) 12%, var(--bg));
  border-radius: 3px;
}

.statuslog::before {
  content: "Current status";
  display: block;
  grid-column: 1 / -1;
  margin-bottom: 0.35rem;
  font-size: 0.72em;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--text) 55%, var(--bg));
}

.statuslog-emoji {
  font-size: 2.7rem;
  line-height: 1;
  align-self: start;
}

footer .statuslog {
  font-size: 1em;
  text-align: left;
}

.statuslog-content > :first-child {
  margin-top: 0;
}

.statuslog-content > :last-child {
  margin-bottom: 0;
}

/* Copy code plugin */
.copy-code-button {
  color: var(--text);
  opacity: 0.6;
}

.copy-code-button:focus-visible {
  opacity: 1;
}

@media (hover: hover) {
  .highlight:hover .copy-code-button {
    opacity: 1;
  }
}

/* Paw cursor effect */
.cursor-paw {
  position: fixed;
  pointer-events: none;
  transform: translate(-50%, -50%);
  font-size: 1.2rem;
  opacity: 0.85;
  user-select: none;
  z-index: 9999;
  will-change: transform, opacity;
  animation: paw-fade 1s ease-out forwards;
}

@keyframes paw-fade {
  0% {
    opacity: 0.85;
    transform: translate(-50%, -50%) scale(1) rotate(var(--paw-angle, -15deg));
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -130%) scale(0.5) rotate(var(--paw-angle, -15deg));
  }
}

/* Preview images */
.preview {
  margin-block: 1.6em;
  padding: 0.75rem;
  background: color-mix(in srgb, var(--amber) 6%, var(--bg));
  border: 1px solid color-mix(in srgb, var(--amber) 22%, var(--bg));
  border-radius: var(--radius-md);
  box-shadow: 0 0.125rem 0.4rem rgba(44, 26, 14, 0.05);
}

.preview img {
  display: block;
  width: 100%;
  height: auto;
  margin: 0;
  border-radius: var(--radius-sm);
}

.preview p {
  margin: 0;
}

/* Breadcrumbs */
.breadcrumbs {
  margin-block: 0 1.8rem;
  font-size: 0.9em;
  line-height: 1.4;
  color: color-mix(in srgb, var(--text) 75%, var(--bg));
  opacity: 0.9;
}

.breadcrumbs p {
  margin: 0;
}

main > h1 + .breadcrumbs {
  margin-block-start: 0;
}

main > h1:has(+ .breadcrumbs) {
  margin-block-end: 0.25em;
}

.breadcrumbs a {
  color: inherit;
  background-image: none;
  text-decoration: none;
}

@media (hover: hover) {
  .breadcrumbs a:hover {
    color: var(--heading);
  }
}

.breadcrumbs a + a::before,
.breadcrumbs a:last-of-type::after {
  content: "›";
  margin-inline: 0.45em;
  color: color-mix(in srgb, var(--amber) 60%, var(--text));
  opacity: 0.75;
}

Script

<script>
document.addEventListener("pointerdown", function(e) {
  const paw = document.createElement("span");
  paw.className = "cursor-paw";
  paw.textContent = "🐾";
  const angle = (Math.random() * 50 - 25) + "deg";
  const size = (Math.random() * 0.55 + 0.95).toFixed(2);
  paw.style.setProperty("--paw-angle", angle);
  paw.style.fontSize = (1.1 * size) + "rem";
  paw.style.left = e.clientX + "px";
  paw.style.top = e.clientY + "px";
  document.body.appendChild(paw);
  paw.addEventListener("animationend", () => paw.remove());
});
</script>

Happy blogging!