Bear Blog text styles

The default Bear Blog theme keeps text simple, plain links, plain headings, 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 links, headings, and other 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 12 hours, 9 minutes ago.

Wider paragraph spacing

Wider spacing between paragraphs

main p {
    margin-block: 1.2em;
}

Heading spacing and sizing

Adjusted spacing and sizing for headings

h1, h2, h3, h4, h5, h6 {
    margin-block: 1.5rem 0.5em;
    line-height: 1.3;
}

h1 {
    font-size: 1.9rem;
    letter-spacing: -0.02em;
}

h2 {
    font-size: 1.5rem;
    letter-spacing: -0.01em;
}

h3 { font-size: 1.3rem; }
h4 { font-size: 1.1rem; }

Link styles

Visited link color and underlined post links

main a:visited {
    color: var(--visited-color);
}

body.post main a {
    text-decoration: underline;
}

List style tweaks

Simple bullet spacing for lists

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

li {
    margin-block: 0.15em;
}

Text selection color

Custom highlight color when selecting text

::selection {
    background-color: var(--link-color);
    color: var(--background-color);
}

Bold and italic treatment

Highlighted background for bold text and wavy underline for italics

strong {
    color: var(--background-color);
    background-color: var(--link-color);
    padding: 0.1em 0.3em;
    border-radius: 3px;
}

em {
    text-decoration: underline wavy;
    text-decoration-color: var(--text-color);
}

Want more? Check out the full Bear Blog library.