Bear Blog post styles

The default Bear Blog theme keeps the post page simple, a title, a date, and the content underneath. That leaves plenty of room to add some character to the pieces around your writing.

This page collects small CSS tweaks and variations for the post page. Each one works out of the box, but they're just as much meant as a starting point. Mix and match, tweak the values, or use them to learn more about theme styling.

Last updated 41 minutes ago.

Tighter spacing

Tighter title and date spacing

body.post main h1 {
    margin-block-end: 0;
}

body.post main h1 + p {
    margin-block-start: 0.2em;
}

Centered

Centered post title and date

body.post main h1 {
    text-align: center;
    margin-block-end: 0;
}

body.post main h1 + p {
    text-align: center;
    margin-block-start: 0.2em;
}

Bottom border

Bottom border post title and date

body.post main h1 {
    padding-block-end: 0.5rem;
    border-block-end: 1px solid;
    margin-block-end: 0.5rem;
}

body.post main h1 + p {
    margin-block-start: 0;
}

Inline

Inline post title and date

body.post main h1 {
    display: inline;
    margin-block-end: 0;
}

body.post main h1 + p {
    display: inline;
    margin-inline-start: 0.6em;
    font-size: 0.85em;
}

Accent border

Accent border post title and date

body.post main {
    padding-inline-start: 1.1rem;
    border-inline-start: 2px solid var(--link-color);
}

body.post main h1 {
    margin-block-end: 0;
}

body.post main h1 + p {
    margin-block-start: 0.2em;
}

Eyebrow date

Eyebrow date above post title

body.post main {
    position: relative;
}

body.post main h1 {
    padding-block-start: 0.7em;
    margin-block-end: 0;
}

body.post main h1 + p {
    position: absolute;
    inset-block-start: 0;
    inset-inline-start: 0;
    margin: 0;
    font-size: 0.8em;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

Boxed date

Boxed date above post title

body.post main h1 {
    margin-block-end: 0.4em;
}

body.post main h1 + p {
    display: inline-block;
    margin-block-end: 0.5em;
    padding: 2px 10px;
    border: 1px solid;
    font-size: 0.8em;
}

Double border

Double border around post content

body.post main {
    padding-block-start: 0;
    padding-block-end: 1.5rem;
    padding-inline: 1.5rem;
    border: 4px double;
}

Want more? Check out the full Bear Blog library.