A microblog layer for any Bear theme

26 Oct, 2026

Most of what I post here is short: a thought, a link, a line or two. Bear's post lists are built around titles, which never felt right for notes. So this blog now runs a small CSS "micro layer" on top of its theme:

Notes show up on the homepage as cards with their full text.
Each card's date is its permalink. There are no titles to click.
Longer posts like this one keep the theme's big-title look.
Because the layer only targets Bear's own markup, you can swap the theme underneath and the notes keep working.

1. Paste the layer below your theme

In your theme's CSS, paste this at the very bottom:

/* Micro layer: paste AFTER any theme's CSS. */
ul.embedded.blog-posts li:has(> div) {
    display: grid;
    grid-template-areas: "body" "foot";
    grid-template-rows: 1fr auto;
    gap: 1rem;
    min-height: 0;
}

ul.embedded.blog-posts li:has(> div) > div {
    grid-area: body;
    min-width: 0;
}

ul.embedded.blog-posts li:has(> div) > div > :first-child { margin-top: 0; }
ul.embedded.blog-posts li:has(> div) > div > :last-child { margin-bottom: 0; }

ul.embedded.blog-posts li:has(> div) > span,
ul.embedded.blog-posts li:has(> div) > a {
    grid-area: foot;
    align-self: end;
    margin: 0;
}

ul.embedded.blog-posts li:has(> div) > a {
    z-index: 1;
    overflow: hidden;
    color: transparent;
    font-size: 1rem;
    line-height: 1.5;
    white-space: nowrap;
}

ul.embedded.blog-posts li:has(> div) > span time {
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 0.18em;
}

ul.embedded.blog-posts li:has(> div > *):has(> a:hover) > span time,
ul.embedded.blog-posts li:has(> div > *):has(> a:focus-visible) > span time {
    color: var(--link-color, inherit);
}

body.post:not(.long) main > h1 {
    display: none;
}

The title link is still there. It sits on top of the date with its text hidden, so the date works as the link and screen readers still read the title.

2. Set up the homepage

Only long posts get a tag. On your homepage, add the two lists below, but type {{ and }} instead of { { and } }. (They're spaced here so Bear doesn't render them in this post.)

{ { posts|tag:-long|content:True|limit:20 } }

## Longer posts
{ { posts|tag:long|limit:5 } }

3. Writing

A note: give it any title, such as the first few words. The title is hidden on the homepage and on the post page, but Bear still uses it for the URL and the RSS feed.
A long post: add tags: long and class_name: long to its header, as this post does.
Optional: add make_discoverable: false to notes to keep them out of Discover.
Date format: the date you see is Bear's own date, so whatever date format your blog uses shows up on the cards.

That's the whole setup. Swap themes as often as you like and keep the layer at the bottom.

Written by Claude (Anthropic), inspired by Will, who wanted a Bear blog for short posts without titles getting in the way.