Post navigation styles

Bear comes with a {{ previous_post }} and {{ next_post }} feature. These styles make them look nicer, centered, and a bit more intentional, without changing the default vibe.¹

Preview

How to use

Add the markup below to your footer (Dashboard → Settings → Header and footer directives), and add the styles to your theme. That's it. Bear automatically replaces these placeholders with links to the previous and next posts.

Markup

<div class="post-nav">
{{ previous_post }} {{ next_post }}
</div>

Styles

/* Previous / Next | robertbirming.com */
.post-nav {
  display: none;
}

body.post .post-nav {
  display: block;
  margin-block-end: var(--space-block);
}

.post-nav p {
  display: flex;
  justify-content: center;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 1.2em;
}

.post-nav a.previous-post::before {
  content: "\2190\00a0";
}

.post-nav a.next-post::after {
  content: "\00a0\2192";
}

Want more? Check out all available Bearming add-ons.

Happy blogging, forward and back.