Robert Birming

Letterboxd widget

  1. Bear Blog library
  2. Add-ons

Tim Cieplowski built a Letterboxd diary embed that makes it easy to display your latest watched movies on any Bear Blog page.

It ships with its own default look, but a few CSS tweaks make it feel like a native part of your Bear theme instead of a bolted-on widget. It shows your latest 5 diary entries, each with a poster, title, production year, watched date, rating, and review snippet.1

Preview

Letterboxd widget styled to match the theme

How to use

Grab the script from the Letterboxd diary embed page and add it where you want your movies to appear. Then add the styles below to your theme.

/* Letterboxd widget | robertbirming.com */

#letterboxd-embed-wrapper-tc {
    margin-block: 1.5em;
}

#letterboxd-embed-wrapper-tc #letterboxd-embed-tc {
    gap: 2em;
}

#letterboxd-embed-wrapper-tc .letterboxd-embed-tc-diary-entry {
    gap: 0;
    padding: 0;
}

#letterboxd-embed-wrapper-tc .letterboxd-embed-tc-content {
    align-items: flex-start;
}

#letterboxd-embed-wrapper-tc .letterboxd-embed-tc-poster a {
    display: block;
    overflow: hidden;
    flex-shrink: 0;
    border: 1px solid transparent !important;
}

#letterboxd-embed-wrapper-tc .letterboxd-embed-tc-poster img {
    inline-size: 4.5rem;
    margin-block: 0;
    aspect-ratio: 2 / 3;
    object-fit: cover;
    border: none;
    border-radius: 0;
}

@media (hover: hover) {
    #letterboxd-embed-wrapper-tc .letterboxd-embed-tc-poster a:hover {
        border-color: var(--link-color) !important;
    }
}

#letterboxd-embed-wrapper-tc .letterboxd-embed-tc-title {
    line-height: 1.35;
}

#letterboxd-embed-wrapper-tc .letterboxd-embed-tc-year {
    display: inline-block;
    white-space: nowrap;
    vertical-align: middle;
    color: color-mix(in srgb, var(--text-color), transparent 45%);
}

#letterboxd-embed-wrapper-tc .letterboxd-embed-tc-year::before {
    content: "(";
    margin-inline-end: -0.3em;
}

#letterboxd-embed-wrapper-tc .letterboxd-embed-tc-year::after {
    content: ")";
    margin-inline-start: -0.23em;
}

#letterboxd-embed-wrapper-tc .letterboxd-embed-tc-date {
    font-size: 0.9em;
    color: color-mix(in srgb, var(--text-color), transparent 45%);
}

#letterboxd-embed-wrapper-tc .letterboxd-embed-tc-date::before {
    content: "Watched on ";
}

#letterboxd-embed-wrapper-tc .letterboxd-embed-tc-review {
    font-size: 0.9em;
    color: var(--text-color);
}

#letterboxd-embed-wrapper-tc .letterboxd-embed-tc-rating,
#letterboxd-embed-wrapper-tc .letterboxd-embed-tc-review a {
    color: var(--link-color);
}

#letterboxd-embed-wrapper-tc .letterboxd-embed-tc-divider {
    border-bottom: 1px dashed color-mix(in srgb, var(--text-color), transparent 50%);
}

#letterboxd-embed-wrapper-tc .letterboxd-embed-tc-footer {
    margin-block-start: 0.5em;
    font-size: 0.83em;
    color: color-mix(in srgb, var(--text-color), transparent 45%);
    text-align: end;
}

Latest film card

Prefer a single, compact card with just your most recent film? Wrap the embed script in a letterboxd-latest div:

<div class="letterboxd-latest">
  <!-- Letterboxd embed script goes here -->
</div>

Then add these styles on top of the ones above:

/* Letterboxd latest film card | robertbirming.com */

.letterboxd-latest #letterboxd-embed-wrapper-tc .letterboxd-embed-tc-diary-entry {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0 1rem;
    max-width: 34rem;
    margin-block: 1rem;
    margin-inline: auto;
    padding-block: 1rem;
    padding-inline: 1.1rem;
    background-color: var(--code-background-color);
    border: 1px solid color-mix(in srgb, var(--text-color), transparent 78%);
    border-radius: 4px;
}

/* Only the latest film: hide the rest, the dividers, and the footer */
.letterboxd-latest #letterboxd-embed-wrapper-tc .letterboxd-embed-tc-diary-entry ~ .letterboxd-embed-tc-diary-entry,
.letterboxd-latest #letterboxd-embed-wrapper-tc .letterboxd-embed-tc-divider,
.letterboxd-latest #letterboxd-embed-wrapper-tc .letterboxd-embed-tc-footer {
    display: none;
}

.letterboxd-latest #letterboxd-embed-wrapper-tc .letterboxd-embed-tc-diary-entry::before {
    display: none;
}

.letterboxd-latest #letterboxd-embed-wrapper-tc .letterboxd-embed-tc-poster a {
    display: block;
    overflow: hidden;
    flex-shrink: 0;
    border-radius: 3px;
}

.letterboxd-latest #letterboxd-embed-wrapper-tc .letterboxd-embed-tc-poster img {
    inline-size: 4.5rem;
    margin-block: 0;
    aspect-ratio: 2 / 3;
    object-fit: cover;
    border-radius: 0;
}

.letterboxd-latest #letterboxd-embed-wrapper-tc .letterboxd-embed-tc-content {
    align-self: center;
    overflow-wrap: break-word;
}

.letterboxd-latest #letterboxd-embed-wrapper-tc .letterboxd-embed-tc-title {
    font-size: 1.05rem;
    font-weight: 600;
    line-height: 1.35;
}

.letterboxd-latest #letterboxd-embed-wrapper-tc .letterboxd-embed-tc-year,
.letterboxd-latest #letterboxd-embed-wrapper-tc .letterboxd-embed-tc-date,
.letterboxd-latest #letterboxd-embed-wrapper-tc .letterboxd-embed-tc-review {
    font-size: 0.85rem;
    color: color-mix(in srgb, var(--text-color), transparent 45%);
}

.letterboxd-latest #letterboxd-embed-wrapper-tc .letterboxd-embed-tc-date {
    font-size: 0.75rem;
}

.letterboxd-latest #letterboxd-embed-wrapper-tc .letterboxd-embed-tc-rating {
    font-size: 0.85rem;
    color: var(--link-color);
}

Happy blogging, and happy watching.

Want more? Check out the full Bear Blog library.

  1. Requires JavaScript, available on Bear Blog's premium plan.↩