Robert Birming

Bear Blog post reading time

These styles make Herman's official post reading time plugin sit right next to your post date, instead of on its own separate line.1

The plugin estimates reading time from the post's character count and inserts it as its own paragraph. These styles pull it up onto the same line as the date, separated by a small dot.


Preview

Post reading time sitting next to the post date

How to use

Add the plugin script to your footer (Dashboard → Settings → Header and footer directives), then add the styles below to your theme.

Styles

body.post main h1 + p {
  display: inline;
  font-size: calc(var(--font-scale) * 0.9);
}

.reading-time {
  display: inline;
  margin-inline-start: 0.2em;
  opacity: 0.8;
}

.reading-time::before {
  content: "·\00a0";
  margin-inline-end: 0.2em;
}

Want more? Check out the full Bear Blog library.

  1. Requires JavaScript, available on Bear Blog's premium plan.