Micro.blog Styles

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
πŸ“ Notes 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

πŸ“ 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

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