Robert Birming

Letterboxd widget

Tim Cieplowski has made a cool Letterboxd diary embed that lets you add your latest watched movies to your blog. I added two style options: Default (showing your latest 5 movies) and Widget (a compact, single-movie card).1

Preview

Loading...

How to use

Grab the script from the Letterboxd diary embed page and add it where you want it displayed. Then pick the style you want and add it to your theme. If you want the Widget style, make sure you place the script inside a div like <div class="letterboxd-latest"></div>.

Default

/* Letterboxd widget | robertbirming.com */
#letterboxd-embed-wrapper-tc {
  margin-block: var(--space-block);
}

#letterboxd-embed-wrapper-tc #letterboxd-embed-tc {
  gap: var(--space-block, 1.8rem);
}

#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;
  border-radius: var(--radius, 3px);
  overflow: hidden;
  flex-shrink: 0;
  transition: box-shadow 0.15s ease;
}

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

@media (hover: hover) {
  #letterboxd-embed-wrapper-tc .letterboxd-embed-tc-poster a:hover {
    box-shadow: 0 2px 6px color-mix(in srgb, var(--text, #000) 12%, transparent);
  }
}

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

#letterboxd-embed-wrapper-tc .letterboxd-embed-tc-year,
#letterboxd-embed-wrapper-tc .letterboxd-embed-tc-date,
#letterboxd-embed-wrapper-tc .letterboxd-embed-tc-review {
  color: var(--muted, #888);
}

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

#letterboxd-embed-wrapper-tc .letterboxd-embed-tc-divider {
  border-bottom-color: var(--border, #ddd);
}

#letterboxd-embed-wrapper-tc .letterboxd-embed-tc-footer {
  color: var(--muted, #888);
  text-align: end;
}

Widget

/* Letterboxd widget | 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: var(--surface, #f5f5f5);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.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;
  border-radius: var(--radius, 3px);
  overflow: hidden;
  flex-shrink: 0;
}

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

.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: var(--muted, #888);
}

.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, #3569ba);
}

Want more? Check out the Bear library.

Happy blogging, and happy watching.

  1. This add-on is built for Bearming. Using a different theme? Add the Bearming tokens to make it work with your setup.↩