Micro.blog blogroll styles

Micro.blog has a neat built-in feature for creating a blogroll. It seems like quite a few people have missed this little gem — maybe because it’s kind of “hidden” under Design → Edit Recommendations.

If you’re using Micro.blog, I highly recommend giving it a go. The recommendations can then be accessed by anyone through a Recommends [number of] blogs link on your profile (here’s mine).

There’s also a Blogroll shortcode plug-in that lets you embed the list on any page you like. I suggest using the common ‘/blogroll’ URL for it — like this: birming.com/blogroll.

To make it look like mine, you can use the styles included below. They’re based on the wonderful work by Darren Hester.

Depending on your theme (I use mnml by Jim Mitchell) and your style preferences, you might need to tweak the background-color and border-radius values a bit.

Just head over to Design → Edit CSS and paste this in:

/* Blogroll */
ul.blogroll {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 1rem;
  margin: 2em 0;
  padding: 0;
}
ul.blogroll li {
  display: flex;
  flex-direction: column;
  flex: 1 1 22ch;
  margin: 0;
  padding: 1em 1.5em;
  background-color: var(--background);
  border-radius: var(--border-radius);
}
ul.blogroll a {
  font-weight: 700;
}
.blogroll_about {
  margin: .2em 0;
}

Keep on blogrolling! 🤩

These styles are also included on the Micro.blog Styles page.