Bear Blog footer styles

The default Bear Blog theme keeps the footer simple, just a line or two of text. That leaves a lot of room to experiment, and it's the one spot every page shares.

This page collects small CSS tweaks and variations for the layout and structure of the footer. 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 17 hours, 2 minutes ago.

Tighter spacing

Tighter footer spacing

footer {
    margin-block-start: 2rem;
}

footer p {
    margin-block: 0.3em;
}

Split

Split footer

footer {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 8px 16px;
}

footer p {
    margin-block: 0;
}

Bottom border

Bottom border footer

footer {
    margin-block-start: 2rem;
    padding-block-start: 1rem;
    border-block-start: 1px solid;
}

Uppercase

Uppercase footer text

footer {
    font-size: 0.85em;
}

footer p {
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

Card

Card footer

footer {
    margin-block-start: 2rem;
    padding-block: 1rem 1.7rem;
    padding-inline: 1.2rem;
    background: color-mix(in srgb, var(--text-color) 6%, var(--background-color));
    border-radius: 8px;
}

footer p {
    margin-block: 0.7em;
}

Muted

Muted footer

footer {
    padding-block-start: 1rem;
    margin-block: 0.3em;
    font-size: 0.9em;
    color: color-mix(in srgb, var(--text-color) 60%, var(--background-color));
}

Bordered

Bordered footer

footer {
    margin-block-start: 2rem;
    padding-block: 1rem 1.7rem;
    padding-inline: 1.2rem;
    border: 1px solid;
    border-radius: 8px;
}

footer p {
    margin-block: 0.7em;
}

Want more? Check out the full Bear Blog library.