Bear Blog list styles

The default Bear Blog theme keeps the blog list simple, a plain list of dates and titles, no dividers or extra spacing. I'm here to offer you some more options.

This page collects small CSS tweaks and variations for the layout and structure of the blog list. 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 day, 21 hours ago.

Divider

Divider list

ul.blog-posts li {
    padding-block: 0.5em;
    border-block-end: 1px solid color-mix(in srgb, var(--text-color), transparent 85%);
}

ul.blog-posts li:last-child {
    border-block-end: none;
}

Split

Split list

ul.blog-posts {
    border-block: 1px solid color-mix(in srgb, var(--text-color), transparent 85%);
}

ul.blog-posts li {
    padding-block: 0.5em;
    border-block-end: 1px solid color-mix(in srgb, var(--text-color), transparent 85%);
}

ul.blog-posts li:last-child {
    border-block-end: none;
}

ul.blog-posts li a {
    order: 1;
    flex: 1;
    min-width: 0;
}

ul.blog-posts li span {
    order: 2;
    flex: 0 0 auto;
    margin-inline-start: auto;
    white-space: nowrap;
}

Cards

Card list

ul.blog-posts li {
    align-items: baseline;
    padding-block: 0.8em;
    padding-inline: 1em;
    margin-block-end: 0.6em;
    background: color-mix(in srgb, var(--text-color), var(--background-color) 94%);
    border-radius: 8px;
}

ul.blog-posts li a {
    order: 1;
    flex: 1;
    min-width: 0;
}

ul.blog-posts li span {
    order: 2;
    flex: 0 0 auto;
    margin-inline-start: auto;
    white-space: nowrap;
}

ul.blog-posts li span time {
    font-size: 13px;
}

Stacked

Stacked list

ul.blog-posts li {
    display: block;
    margin-block-end: 1em;
}

ul.blog-posts li span {
    display: block;
    font-size: 0.85em;
    color: color-mix(in srgb, var(--text-color), transparent 40%);
    margin-block-start: 0.15em;
}

Boxed

Boxed list

ul.blog-posts {
    padding: 0.5em 1em;
    background: color-mix(in srgb, var(--text-color), var(--background-color) 94%);
    border-radius: 8px;
}

ul.blog-posts li {
    padding-block: 0.6em;
    border-block-end: 1px solid color-mix(in srgb, var(--text-color), transparent 85%);
}

ul.blog-posts li:last-child {
    border-block-end: none;
}

Timeline

Timeline list

ul.blog-posts {
    padding-inline-start: 1.2em;
    border-inline-start: 2px solid var(--link-color);
}

ul.blog-posts li {
    position: relative;
    padding-block: 0.4em;
}

ul.blog-posts li::before {
    content: "";
    position: absolute;
    inset-inline-start: -1.45em;
    inset-block-start: 0.9em;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--link-color);
}

Dotted leaders

Dotted leaders list

ul.blog-posts li {
    display: flex;
    align-items: baseline;
    gap: 0.5em;
    padding-block: 0.4em;
}

ul.blog-posts li a {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    min-width: 0;
}

ul.blog-posts li::after {
    content: "";
    flex: 1;
    border-block-end: 1px dotted color-mix(in srgb, var(--text-color), transparent 75%);
}

ul.blog-posts li span {
    order: 3;
    flex: 0 0 auto;
}

ul.blog-posts li span time {
    font-size: 14px;
}

Alternating rows

Alternating rows list

ul.blog-posts li:nth-child(odd) {
    background: color-mix(in srgb, var(--text-color), transparent 96%);
}

ul.blog-posts li {
    padding-inline: 0.6em;
}

No date

No date list

ul.blog-posts li span {
    display: none;
}

ul.blog-posts li {
    padding-block: 0.3em;
    font-weight: 600;
}

Want more? Check out the full Bear Blog library.