Bear Blog pagination styles

These styles make Herman's official blog pagination plugin feel like a natural part of your blog rather than a default input dropped onto the page.¹

Loosely inspired by the pagination on Bear's own Discovery feed, plain arrows and a page count, nothing more.

Preview

How to use

Add the plugin script to your footer (Dashboard → Settings → Header and footer directives), or embed it on a page, then add the styles below to your theme. You now have a simple way for readers to browse your posts page by page.

Styles

body.blog .pagination {
    display: flex;
    justify-content: center;
    align-items: baseline;
    gap: 1.2em;
    margin-block: 1.5rem 0;
}

.pagination a {
    cursor: pointer;
}

.pagination #pageInfo {
    color: color-mix(in srgb, var(--text-color), transparent 40%);
    white-space: nowrap;
}

.pagination a[disabled] {
    opacity: 0.4;
    pointer-events: none;
}

.pagination #prevPage::before {
    content: "\00AB\00a0";
}

.pagination #nextPage::after {
    content: "\00a0\00BB";
}

Want more? Check out the full Bear Blog library.