Bear Blog Letterboxd widget

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.

Preview

Styles

#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;
}

Want more? Check out the full Bear Blog library.