Bear Blog body text styles

The default Bear Blog theme keeps body text plain, links, lists, and paragraphs with nothing fancy. That leaves a lot of room to add some character to the words themselves.

This page collects small CSS tweaks and variations for paragraphs, links, lists, and other body text elements. 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 1 hour, 39 minutes ago.

Paragraph spacing

Wider spacing between paragraphs

main p {
    margin-block: 1.2em;
}

Lists

Simple bullet spacing for lists

ul, ol {
    padding-left: 2em;
}

li {
    margin-block: 0.15em;
}

Cite

Styled citation text with a dash prefix

cite {
    display: block;
    margin-block-start: 0.5em;
    font-size: calc(var(--font-scale) * 0.85);
    font-style: normal;
    color: color-mix(in srgb, var(--text-color), transparent 30%);
}

cite::before {
    content: "— ";
}

Text selection

Custom highlight color when selecting text

::selection {
    background-color: color-mix(in srgb, var(--link-color), transparent 20%);
    color: var(--background-color);
}

Mark and highlight

Custom highlight color for the mark tag

mark {
    padding-inline: 0.15em;
    color: var(--background-color);
    background-color: color-mix(in srgb, var(--link-color) 60%, var(--text-color));
}

Aside

Boxed aside element with a label

aside {
    background-color: color-mix(in srgb, var(--link-color), var(--background-color) 85%);
    border: 1px solid color-mix(in srgb, var(--text-color), transparent 85%);
    border-radius: 6px;
    padding: 1em 1.25em;
    margin-block: 1.5rem;
}

aside::before {
    content: "Aside";
    display: block;
    font-size: 0.75em;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: color-mix(in srgb, var(--text-color), transparent 25%);
    margin-block-end: 0.5em;
}

Footnote

Footnotes section with a dashed top border

.footnotes {
    margin-block-start: 2rem;
    padding-block-start: 1rem;
    border-block-start: 1px dashed color-mix(in srgb, var(--text-color), transparent 50%);
    font-size: calc(var(--font-scale) * 0.9);
}

.footnotes ol {
    padding-inline-start: 1.2em;
}

.footnote {
    margin-inline-start: 0.3em;
    text-decoration: none !important;
}

Kbd

Boxed keyboard key styling

kbd {
    background-color: var(--code-background-color);
    border: 1px solid var(--code-color);
    border-radius: 3px;
    padding: 0.1em 0.5em;
    font-family: monospace;
    font-size: 0.85em;
}

Small text

Smaller fine print text

small {
    font-size: 0.8em;
    color: color-mix(in srgb, var(--text-color), transparent 20%);
}

Abbreviation

Dotted underline for abbreviations

abbr {
    text-decoration: underline dotted;
    text-decoration-thickness: 1.5px;
    text-underline-offset: 4px;
    cursor: help;
}

Want more? Check out the full Bear Blog library.