Bear Blog status widget

A simple way to display a "current status" message with an emoji of your choice in your blog's footer. No JavaScript, no API calls, no external dependencies, just HTML and CSS.

Update the markup by hand whenever your status changes, or wire it up to a shortcut if you're in the Apple ecosystem.

Preview

How to use

Add the markup below to your footer (Dashboard → Settings → Header and footer directives), then add the styles to your theme. You can change the "Current status" label or remove it completely by editing the content value in the CSS.

Markup

<div class="statuslog">
    <div class="statuslog-emoji">🐻</div>
    <div class="statuslog-content">
        Your current status.
    </div>
</div>

Styles

.statuslog {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.3em 1.2em;
    max-width: 34rem;
    margin-block: 1.5em;
    margin-inline: auto;
    padding-block: 1rem;
    padding-inline: 1.1rem;
    text-align: start;
    background-color: var(--code-background-color);
    border: 1px solid color-mix(in srgb, var(--text-color), transparent 78%);
    border-radius: 4px;
}

.statuslog::before {
    content: "Current status";
    display: block;
    grid-column: 1 / -1;
    margin-block-end: 0.5em;
    font-size: 0.77em;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: color-mix(in srgb, var(--text-color), transparent 45%);
}

.statuslog-emoji {
    font-size: 2.7rem;
    line-height: 1.2;
    align-self: start;
}

.statuslog-content {
    font-size: calc(0.85em * var(--font-scale, 1));
    overflow-wrap: break-word;
}

.statuslog-content > :first-child { margin-block-start: 0; }
.statuslog-content > :last-child { margin-block-end: 0; }

Shortcuts

If you're in the Apple ecosystem, these shortcuts make it a little easier to update your current status.

Please note that you need to change the link to your Bear username (click the three dots and edit the bottom link). I tried making it part of the initial setup, but gave up after a while.

StatusText – a simple way to jump straight to the status log.
StatusLink – share the webpage you're currently browsing.
StatusMusic – share the song and artist you're listening to in Apple Music.
StatusWeather – share your current location and weather conditions.

Want more? Check out the full Bear Blog library.