Bear Blog now log

A small card for showing what you're currently into. A book, a show, a song, or whatever's keeping you company lately.

Each entry gets an emoji, a bold title, and an optional subline underneath. Multiple entries stack with a divider between them.

Preview

Now log widget, showing a book and a music entry stacked with a divider between them

How to use

Add the markup anywhere you want to display the widget, like a /now page. If you'd rather have it left-aligned instead of centered, just remove the margin-inline: auto; line.

Markup

<div class="now-log">

- 📚 The Bear
    - William Faulkner
- 📺 The Bear
    - 2022
- 🎧 Yours to Keep
    - Teddybears

</div>

Styles

.now-log {
  max-width: 30rem;
  margin-block: 1.5rem;
  margin-inline: auto; /* Remove to left-align */
  padding-block: 1rem;
  padding-inline: 1.1rem;
  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: 3px;
}

.now-log ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.now-log > ul > li {
  font-weight: 700;
  color: var(--heading-color);
}

.now-log > ul > li + li {
  margin-block-start: 1rem;
  padding-block-start: 1rem;
  border-block-start: 1px solid color-mix(in srgb, var(--text-color), transparent 85%);
}

.now-log ul ul {
  margin-block-start: 0.2em;
  padding: 0;
  list-style: none;
}

.now-log ul ul li {
  font-weight: 400;
  font-size: calc(var(--font-scale) * 0.85);
  color: color-mix(in srgb, var(--text-color), transparent 40%);
}

Want more? Check out the full Bear Blog library.