Blog helpers

Small, optional styles you can use to highlight parts of a post or page. Tiny helpers that make content feel a little more personal, more readable, and more put together. Use them whenever it makes sense, and ignore them when it doesn't.¹

Preview

Below is a list of live examples. Have wishes for something to be added? Feel free to reach out.

Centered text

Sometimes you might feel the urge to not just center yourself, but also part of the text you're writing. There's a little center style for that.

This text is centered.

Useful when you want something to stand out a little more.

Subtle text

And if you want to include something in a more subtle way, there's a style for that called meta.

This text is a little quieter.

Perfect for small details, timestamps, or tiny thoughts.

Dividers

And there are a couple of dividers to throw in anywhere. Choose between divider, short-divider, and dots-divider.

Handy whenever you want a little breathing room inside a post or page.

Side note

Sometimes you might just want to add a little side note. There's a style for that too, with the surprising name note.

Optional label And that lovely little side note of yours will look like this.

Simple but effective whenever you feel the need.

Pull quote

And if you want to highlight part of a text, a pull quote can do the trick. It happens magically when you use the pullquote class.

Doing it with a pull quote like this will most likely get your reader's attention.

That part became pretty obvious, right?

How to use

Add the styles below to your theme, then wrap your content using the class you want, like this:

Markup

<div class="center">
Your content.
</div>

Styles

/* Blog helpers | robertbirming.com */
.center {
  text-align: center;
  margin-inline: auto;
}

.meta {
  font-size: var(--font-small);
  color: var(--muted);
}

.small {
  font-size: 0.85em;
}

.divider {
  height: 1px;
  margin-block: var(--space-block);
  background: color-mix(in srgb, var(--text) 22%, transparent);
}

.short-divider {
  width: 20rem;
  height: 1px;
  margin-block: var(--space-block);
  margin-inline: auto;
  background: color-mix(in srgb, var(--text) 22%, transparent);
}

.dots-divider {
  text-align: center;
  margin-block: var(--space-block);
  color: var(--muted);
  letter-spacing: 0.35em;
}

.dots-divider::before {
  content: "• • •";
}

.note {
  display: block;
  padding-block: 1rem;
  padding-inline: 1.2rem;
  margin-block: var(--space-block);
  font-size: var(--font-small);
  border-inline-start: 1px solid color-mix(in srgb, var(--text) 22%, transparent);
  background: color-mix(in srgb, var(--text) 4%, transparent);
}

.note > :first-child {
  margin-block-start: 0;
}

.note > :last-child {
  margin-block-end: 0;
}

/* Optional label inside note
   Example: <span class="note-label">Note</span> */
.note-label {
  display: block;
  font-weight: bold;
  font-size: 0.8em;
  text-transform: uppercase;
  padding-block-end: 0.5em;
  color: var(--muted);
}

.pullquote {
  font-size: 1.35em;
  line-height: 1.4;
  text-align: center;
  margin-block: var(--space-block);
  padding-inline: 1em;
  font-style: italic;
}

Small tip Instead of manually adding divs and classes, create a keyboard shortcut on your device.

Want more? Check out the add-ons. Happy blogging, small helpers, big vibes.

This add-on is built for the Bearming theme. Using a different theme? Add the Bearming tokens to make it work with your setup.↩