Micro.blog Styles

Styles Palettes

A cartoon character with pink hair, glasses, and a polka dot shirt is holding a magnifying glass while looking at a laptop, surrounded by various digital icons and web elements.

A collection of styles to spice up your blog.

Just copy the styles you like, head over to ‘Design β†’ Edit CSS’, and paste them in. Tada! πŸŽ‰

Please note that you might have to do some tweaking to make some of the styles play nicely with your theme (I’m using the mnml theme myself).

Contents

🌈 Rainbow logo
✨ Sparkling title
🌼 Avatar shapes
😎 Emoji menu
πŸ’¬ Reply bubbles
πŸ“ Notes styles
πŸ“ƒ Blogroll styles

🌈

A colorful text logo with the name Robert Birming next to a circular photo of a smiling person wearing sunglasses on their head.

Want to sprinkle some rainbow magic over your blog? Use it during Pride Month, or why not keep the joy going all year round? Rainbows never go out of style!

Title

/* Rainbow title */
.site-title {
  font-size: 2.5rem; /* Your title size */
  background: linear-gradient(to right, #ef5350, #f48fb1, #7e57c2, #2196f3, #26c6da, #43a047, #eeff41, #f9a825, #ff5722);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

Avatar

/* Rainbow avatar */
.u-photo {
  height: 50px; /* Your avatar size */
  width: 50px;
  background: linear-gradient(to right, #ef5350 0%, #f9a825 25%, #43a047 50%, #26c6da 75%, #2196f3 100%) border-box;
  background-clip: border-area;
  -webkit-background-clip: border-area;
  border: 3px solid #0000;
  border-radius: 50%;
}

⬆️ Back to menu

✨ Sparkling title

Colorful gradient title with decorative sparkles and dots.

Inspired by the lovely gradient sparkles by Sylvia, this little snippet of code will make your blog title sparkle with eternal joy β€” like fairy dust for your header!

/* Colors: Light mode */
:root {
  --text-color: #4c4f69;
  --gradient: linear-gradient(90deg, #4c4f69 0%, #8839ef 50%, #ea76cb 100%);
}

/* Colors: Dark mode */
@media (prefers-color-scheme: dark) {
  :root {
    --text-color: #cdd6f4;
    --gradient: linear-gradient(90deg, #cdd6f4 0%, #cba6f7 50%, #f5c2e7 100%);
  }
}

/* Sparkling the magic */
.site-title::after {
  padding-left: 5px;
  content: "*:ο½₯ﾟ✧";
  background: var(--gradient);
  color: transparent;
  background-clip: text;
}

⬆️ Back to menu

🌼 Avatar shapes

Three portraits of a man with different decorative frames: a flower shape, an octagon, and a spiked star design.

Pump up your blog one notch by giving your avatar a little makeover. You can choose between three stylish shapes: flower, octagon, or a spiked star. Because who says your face can’t be framed like a work of art?

Flower

/* Flower avatar */
.u-photo {
  height: 50px; /* Your avatar size */
  width: 50px;
  --g:/20.56% 20.56% radial-gradient(#000 calc(71% - 1px),#0000 71%) no-repeat;
  mask: 100% 50% var(--g),93.301% 75% var(--g),75% 93.301% var(--g),50% 100% var(--g),25% 93.301% var(--g),6.699% 75% var(--g),0% 50% var(--g),6.699% 25% var(--g),25% 6.699% var(--g),50% 0% var(--g),75% 6.699% var(--g),93.301% 25% var(--g),radial-gradient(100% 100%,#000 38.366%,#0000 calc(38.366% + 1px));
}

Octagon

/* Octagon avatar */
.u-photo {
  height: 50px; /* Your avatar size */
  width: 50px;
  clip-path: polygon(100% 50%,90.45% 79.39%,65.45% 97.55%,34.55% 97.55%,9.55% 79.39%,0% 50%,9.55% 20.61%,34.55% 2.45%,65.45% 2.45%,90.45% 20.61%);
}

Star

/* Star avatar */
.u-photo {
  height: 50px; /* Your avatar size */
  width: 50px;
  clip-path: polygon(100% 50%,78.98% 57.76%,93.3% 75%,71.21% 71.21%,75% 93.3%,57.76% 78.98%,50% 100%,42.24% 78.98%,25% 93.3%,28.79% 71.21%,6.7% 75%,21.02% 57.76%,0% 50%,21.02% 42.24%,6.7% 25%,28.79% 28.79%,25% 6.7%,42.24% 21.02%,50% 0%,57.76% 21.02%,75% 6.7%,71.21% 28.79%,93.3% 25%,78.98% 42.24%);
}

⬆️ Back to menu

😎 Emoji menu

Emoji menu example.

Why settle for plain text when you can swap menu links for emojis? Turn β€œHome” into 🏠, β€œBlog” into ✍️ β€” and add a playful touch to your site.

.nav-item a[href$="/about/"] {
  text-indent: -9999px;
  display: inline-block;
  line-height: .1;
}
.nav-item a[href$="/about/"]:after {
  text-indent: 0;
  display: flex;
  justify-content: flex-end;
  margin-left: auto;
  line-height: 0;
}
.nav-item > a[href$="/about/"]:hover {
  text-decoration: none;
  transform: scale(1.2);
  transition: transform 0.3s ease;:
}
.nav-item a[href$="/about/"]:after {
  content: "πŸ‘€";
}

⬆️ Back to menu

πŸ’¬ Reply bubbles

Speech bubbles for the replies page

Tired of your replies looking like they came from a tax form? Add a splash of fun with this CSS snippet that turns your plain old messages into playful speech bubbles.

/* Replies */
.reply {
  position: relative;
  margin: 20px;
}
.reply:nth-child(even) {
  background: var(--accent-1);
}
.reply:nth-child(odd) {
  background: var(--accent-2);
}
.reply:nth-child(even):after {
	position: absolute;
	margin-top: -20px;
	margin-left: -20px;
	content: '';
	left: 0;
	top: 50%;
	width: 0;
	height: 0;
	border: 20px solid transparent;
	border-right-color: var(--accent-1);
	border-left: 0;
}
.reply:nth-child(odd):after {
	position: absolute;
	margin-top: -20px;
	margin-right: -20px;
	content: '';
	right: 0;
	top: 50%;
	width: 0;
	height: 0;
	border: 20px solid transparent;
	border-left-color: var(--accent-2);
	border-right: 0;
}

⬆️ Back to menu

πŸ“ Notes styles

A note that mentions updating the Micro.blog Rainbow Logo.

Want to make your short posts stand out? Use this little snippet of code to turn your tiny posts into mighty digital post-its. Small but impossible to ignore!

Please note (no pun intended): Change the .notes part to match the name of the category you’d like to give the post-it look.

/* Notes styles */
.notes {
  background-color: #ffc;
  background-size: 20px 20px;
  background-image: repeating-linear-gradient(0deg, #ddd, #ddd 1px, #ffc 1px, #ffc);
}
.notes p {
  font-family: monospace;
  font-size: 1.6rem;
  color: #555;
  letter-spacing: -.5px;
}
.notes a {
  color: #555;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.25em;
}
.notes .post-date a {
  text-decoration: none;
}

⬆️ Back to menu

πŸ“ƒ Blogroll styles

Blogroll styles example

Your blogroll deserves to look as good as the people on it make you feel. Here’s the style that will do just that! To learn more, check out the Micro.blog blogroll styles blog post.

/* 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;
}

⬆️ Back to menu

Watch this space

I will continue to update this page with more styles. If you’ve created some styles you think would be a good fit for this page, please let me know. I’ll gladly give you credit if I include them!

⬆️ Back to menu