Bearming styles

Bearming theme

The style options for Bearming let you change how specific parts of your blog look without replacing your whole theme.

Some add on top of what you already have, others replace a section entirely. Each one notes which. Copy the ones you want and paste them into your theme.¹

The styles library was last updated 1 day, 20 hours ago.

Header styles replace the default header block. Pick one and swap it in.

Centered

The default header style, but centered.

/* Header: Centered */
header {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  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.5rem;
}

header nav p {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75rem;
  margin-block: 0;
}

header nav a {
  margin-inline-end: 0;
}

Horizontal

A simple header with horizontal, plain links.

/* Header: Horizontal */
header {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.1rem 1rem;
  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.5rem;
}

header nav p {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-block: 0;
}

header nav a {
  margin-inline-end: 0;
}

Avatar

The default header with an avatar of your choice to the left.

/* Header: Avatar */
/* Tip: Change --avatar-radius to 0.5rem for rounded squares, or 0 for sharp corners */
:root {
  --avatar-url: url("https://example.com/your-avatar.jpg");
  --avatar-size: 3.3rem;
  --avatar-radius: 50%;
}

header {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  column-gap: 1rem;
  margin-block: 0 var(--space-block);
}

header::before {
  content: "";
  grid-column: 1;
  grid-row: 1 / 3;
  width: var(--avatar-size);
  aspect-ratio: 1;
  background: var(--avatar-url) center / cover no-repeat;
  border-radius: var(--avatar-radius);
}

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

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

header nav p {
  margin-block: 0;
}

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

Card

Centered card with title and nav links separated by a subtle divider.

/* Header: Card */
header {
  margin-block: 0 var(--space-block);
  padding-block: 1rem;
  padding-inline: 1.2rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  text-align: center;
}

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

.title h1 {
  margin: 0;
  font-size: 1.6rem;
  font-weight: 900;
  letter-spacing: -0.02em;
}

header nav {
  margin-block-start: 0.7rem;
  padding-block-start: 0.5rem;
  border-block-start: 1px solid var(--border);
}

header nav p {
  margin: 0;
}

header nav a {
  margin-inline: 0.6em;
  font-size: var(--font-small);
  font-weight: 500;
  color: var(--link);
}

↑ Back to menu

Title

Title styles add on top of whichever header you're using. They change how the blog title looks without touching the layout.

Underline

An animated line that expands on hover.

/* Title: Underline */
header a.title h1 {
  position: relative;
  display: inline-block;
  padding-block-end: 0.4em;
  margin-block-end: 0.2em;
}

header a.title h1::before {
  content: "";
  position: absolute;
  inset-inline: 0;
  inset-block-end: 0;
  height: 2px;
  background: var(--link);
  transform: scaleX(0.25);
  transform-origin: left;
  opacity: 0.8;
}

@media (hover: hover) {
  header a.title h1::before {
    transition: transform 0.25s ease, opacity 0.25s ease;
  }

  header a.title:hover h1::before {
    transform: scaleX(1);
    opacity: 1;
  }
}

header a.title:focus-visible h1::before {
  transform: scaleX(1);
  opacity: 1;
}

Gradient

A gradient using the theme's own colors.

/* Title: Gradient */
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  header a.title h1 {
    --title-gradient: linear-gradient(
      90deg,
      color-mix(in srgb, var(--link) 25%, var(--text)),
      var(--link),
      color-mix(in srgb, var(--link) 55%, var(--text))
    );
    display: inline-block;
    background-image: var(--title-gradient);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
  }

  @media (hover: hover) {
    header a.title h1 {
      background-size: 200% 100%;
      background-position: 0% 50%;
      transition: background-position 0.35s ease;
    }

    header a.title:hover h1,
    header a.title:focus-visible h1 {
      background-position: 100% 50%;
    }
  }
}

Sparkle

A small sparkle after the title, based on the wonderful gradient sparkles by Sylvia.

/* Title: Sparkle */
header a.title h1 {
  position: relative;
  display: inline-block;
}

@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  header a.title h1::after {
    content: "*:･ﾟ✧";
    position: absolute;
    inset-inline-start: 100%;
    inset-block-start: 50%;
    transform: translateY(-50%);
    margin-inline-start: 0.25em;
    white-space: nowrap;
    font-size: 0.95em;
    line-height: 1;
    background-image: linear-gradient(
      90deg,
      color-mix(in srgb, var(--link) 35%, var(--text)),
      var(--link),
      color-mix(in srgb, var(--link) 60%, var(--text))
    );
    background-size: 200% 100%;
    background-position: 0% 50%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    opacity: 0.95;
    pointer-events: none;
    user-select: none;
  }

  @media (hover: hover) {
    header a.title h1::after {
      transition: background-position 0.35s ease, opacity 0.25s ease;
    }

    header a.title:hover h1::after,
    header a.title:focus-visible h1::after {
      background-position: 100% 50%;
      opacity: 1;
    }
  }
}

@media (prefers-reduced-motion: reduce) {
  header a.title h1::after {
    transition: none;
  }
}

Rainbow

A rainbow gradient, because rainbows never go out of style.

/* Title: Rainbow */
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  header a.title h1 {
    display: inline-block;
    background-image: linear-gradient(
      to right,
      #ef5350, #f48fb1, #7e57c2, #2196f3,
      #26c6da, #43a047, #eeff41, #f9a825, #ff5722
    );
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    transition: filter 0.3s ease;
  }

  @media (hover: hover) {
    header a.title:hover h1,
    header a.title:focus-visible h1 {
      filter: brightness(1.1);
    }
  }
}

@media (prefers-reduced-motion: reduce) {
  header a.title:hover h1,
  header a.title:focus-visible h1 {
    filter: none;
  }
}

Cursor

A blinking cursor next to the title.

/* Title: Cursor */
header a.title h1 {
  position: relative;
  display: inline-block;
  padding-inline-end: 0.45em;
}

header a.title h1::after {
  content: "";
  position: absolute;
  inset-inline-end: 0;
  inset-block: 15% 15%;
  width: 2px;
  background: currentColor;
  opacity: 0.8;
  animation: bearming-cursor 1.1s steps(1, end) infinite;
}

@keyframes bearming-cursor {
  0%, 49% { opacity: 0; }
  50%, 100% { opacity: 0.8; }
}

@media (prefers-reduced-motion: reduce) {
  header a.title h1::after {
    animation: none;
    opacity: 0.6;
  }
}

↑ Back to menu

Blog list

Blog list styles replace the default post list on the blog page. Pick one and swap it in.

Borders

Separates posts with subtle borders.

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

.blog-posts li {
  display: flex;
  align-items: center;
  padding-block: 0.6rem;
  border-block-end: 1px solid var(--border);
}

.blog-posts li:last-child {
  border-block-end: none;
}

.blog-posts li span {
  flex: 0 0 8rem;
}

Inverted

Title on the left, date on the right, with a border divider.

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

.blog-posts li {
  display: flex;
  align-items: center;
  padding-block: 0.6rem;
  border-block-end: 1px solid var(--border);
}

.blog-posts li:last-child {
  border-block-end: none;
}

.blog-posts li a {
  order: 1;
  flex: 1;
  min-width: 0;
}

.blog-posts li span {
  order: 2;
  flex: 0 0 auto;
  margin-inline-start: auto;
  white-space: nowrap;
  text-align: end;
}

Cards

Displays each post in the list as a separate card.

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

.blog-posts li {
  display: flex;
  align-items: center;
  padding-block: 0.8rem;
  padding-inline: 1rem;
  margin-block-end: 0.6rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: calc(var(--radius) * 2);
  transition: background 0.15s ease;
}

.blog-posts li span {
  flex: 0 0 8rem;
}

@media (hover: hover) {
  .blog-posts li:hover {
    background: color-mix(in srgb, var(--text) 8%, var(--bg));
  }
}

Yes. Here's the block to add, needs a description too:

Card

All posts grouped in a single card with dividers between entries.

/* Blog list: Card */
.blog-posts {
  margin-block-end: var(--space-block);
  padding: 0;
  list-style: none;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}

.blog-posts li {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding-block: 0.5rem 0.9rem;
  padding-inline: 1.2rem;
  border-block-end: 1px solid var(--border);
}

.blog-posts li:last-child {
  border-block-end: none;
}

.blog-posts li a {
  flex: 1;
  min-width: 0;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.blog-posts li span {
  order: 2;
  flex: 0 0 auto;
  margin-inline-start: auto;
  white-space: nowrap;
}

@media (max-width: 520px) {
  .blog-posts li {
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
  }

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

  .blog-posts li span {
    margin-inline-start: 0;
  }
}

↑ Back to menu

Blockquote

Blockquote styles replace the default blockquote block. Pick one and swap it in.

Minimal

Just a left border, no background.

/* Blockquote: Minimal */
blockquote {
  margin-inline: 0;
  padding-block: 0.2rem;
  padding-inline: 1.5rem 0;
  font-style: italic;
  color: var(--muted);
  background: none;
  border: none;
  border-inline-start: 3px solid var(--border);
  border-radius: 0;
}

Quote mark

A decorative opening quote with no box.

/* Blockquote: Quote mark */
blockquote {
  position: relative;
  margin-inline: 0;
  padding-block: 0;
  padding-inline: 2.5rem 0;
  font-style: italic;
  color: var(--muted);
  background: none;
  border: none;
  border-radius: 0;
}

blockquote::before {
  content: "\201C";
  position: absolute;
  inset-block-start: -0.1em;
  inset-inline-start: 0;
  font-family: Georgia, serif;
  font-size: 4rem;
  line-height: 1;
  color: var(--border);
}

↑ Back to menu

Upvote buttons

Upvote styles adjust the appearance of Bear's built-in upvote button, keeping the behavior the same while changing how it looks.

Inline

An inline version of the default Bear upvote button.

/* Upvote button: Inline */
#upvote-form .upvote-button {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  gap: 0.2em;
}

#upvote-form .upvote-count {
  font-size: 1em;
  transform: translateY(0.25em);
}

Heart

A simple heart with a soft interaction.

/* Upvote button: Heart */
#upvote-form > small {
  display: block;
  margin-block-start: var(--space-block);
}

#upvote-form .upvote-button {
  display: inline-flex;
  align-items: center;
  padding: 0;
  border: 0;
  background: none;
  font-size: 1rem;
  color: var(--muted) !important;
  cursor: pointer;
}

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

#upvote-form .upvote-count::before {
  content: "♡";
  display: inline-block;
  margin-inline-end: 0.15em;
  font-size: 1.5rem;
  color: var(--link);
  vertical-align: -0.12em;
  transition: transform 0.15s ease;
}

@media (hover: hover) {
  #upvote-form .upvote-button:not([disabled]):hover .upvote-count::before {
    transform: scale(1.15);
  }
}

#upvote-form .upvote-button[disabled] {
  opacity: 0.7;
  cursor: default;
}

#upvote-form .upvote-button[disabled] .upvote-count::before {
  content: "♥";
}

Star

A star with the count shown underneath.

/* Upvote button: Star */
#upvote-form > small {
  display: block;
  margin-block-start: var(--space-block);
  font-size: 1em;
}

#upvote-form .upvote-button {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3rem;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  font: inherit;
  color: var(--text);
  opacity: 0.9;
}

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

#upvote-form .upvote-button:focus-visible {
  outline: 2px solid var(--link);
  outline-offset: 2px;
  border-radius: var(--radius);
}

#upvote-form .upvote-button::before {
  content: "☆";
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 1.5rem;
  line-height: 1;
  transition: transform 0.15s ease;
}

#upvote-form .upvote-count {
  font-size: 0.8em;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

@media (hover: hover) {
  #upvote-form .upvote-button:not([disabled]):hover {
    opacity: 1;
  }

  #upvote-form .upvote-button:not([disabled]):hover::before {
    transform: scale(1.08);
    color: var(--link);
  }
}

#upvote-form .upvote-button[disabled] {
  opacity: 0.6;
  cursor: default;
}

#upvote-form .upvote-button[disabled]::before {
  content: "★";
}

Text

A simple text-based upvote button without a count.

/* Upvote button: Text (no count) */
#upvote-form > small {
  display: block;
  font-size: 1em;
  margin-block-start: var(--space-block);
}

#upvote-form .upvote-button {
  display: inline-block;
  padding-block: 0.3em;
  padding-inline: 0.6em;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--text);
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 0.9em;
  line-height: 1.3;
  cursor: pointer;
  opacity: 0.9;
  transition:
    color 0.15s ease,
    background 0.15s ease,
    border-color 0.15s ease;
}

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

#upvote-form .upvote-button::before {
  content: "Like it?";
}

#upvote-form .upvote-button:focus-visible {
  outline: 2px solid var(--link);
  outline-offset: 2px;
  border-radius: var(--radius);
}

@media (hover: hover) {
  #upvote-form .upvote-button:not([disabled]):hover {
    color: var(--link);
    border-color: color-mix(in srgb, var(--link) 35%, var(--bg));
    background: color-mix(in srgb, var(--link) 6%, var(--bg));
  }
}

#upvote-form .upvote-button[disabled] {
  opacity: 0.6;
  cursor: default;
}

#upvote-form .upvote-button[disabled]::before {
  content: "Thank you!";
}

↑ Back to menu

Footer styles replace the default footer block. Pick one and swap it in.

Minimal

The default footer without the top border.

/* Footer: Minimal */
footer {
  margin-block-start: var(--space-block);
  padding-block-start: 1.2rem;
  text-align: center;
  font-size: var(--font-small);
  color: var(--muted);
}

footer p {
  margin-block: 0.5em;
}

Left

Left-aligned with the top border.

/* Footer: Left */
footer {
  margin-block-start: var(--space-block);
  padding-block-start: 1.2rem;
  font-size: var(--font-small);
  color: var(--muted);
  border-block-start: 1px solid var(--border);
}

footer p {
  margin-block: 0.5em;
}

Built for the Bearming theme. Using a different theme? Add the Bearming tokens to make them work with your setup.↩

Robert Birming

Bearming styles

Menu

Header

Centered

Horizontal

Avatar

Card

Title

Underline

Gradient

Sparkle

Rainbow

Cursor

Blog list

Borders

Inverted

Cards

Card

Blockquote

Minimal

Quote mark

Upvote buttons

Inline

Heart

Star

Text

Footer

Minimal

Left