Procrastination Project

· 4 min

If I had to describe this blog in two words, it would be time sink. It went through many design iterations and each time I thought: "This one looks nice. It can stay like that forever". But there was always something I didn't like. Make it more minimalistic. Make it more efficient. Add a feature here. Change a minor thing there. It became the thing I worked on when I had nothing to do. It became the procrastination project.


I strive towards an elegant, minimalistic design, and nothing is more elegant than a dark theme. There used to be a light one, but I was never quite content with it 1. I couldn't replicate the look and feel I was going for, so I decided to remove it. The current color palette is inspired by Nord 2.

8 shades of hue 220 and 3 shades of hue 206

The minimalization 3 process also included:

  • Removing custom descriptions from posts
  • Removing petite-vue to reduce the JavaScript bundle size to two kilobytes
  • Removing the archive (not needed with the new list format)
  • Adding consistent hover effects
  • Versioning indefinitely cached files

The requirements for a good logo are just like the requirements for a good flag:

  1. Keep it simple
  2. Make it distinct at a distance small size
  3. Three colors of fewer
  4. Symbols, colors and designs should mean something
  5. Words on a flag logo: ideally zero

The initial attempt was based on an AI-generated image by Midjourney.

  • Midjourney version
    Midjourney version
  • SVG version

I even took the time to animate it. Refresh the page to see it. I thought I liked the logo, but it was way too busy — not the elegant and simplistic style I was going for. It also looked horrible at small sizes due to the lines.

The second attempt was much better. I reduced the S to two bold strokes, angled them and rounded some corners for a clean, modern look. One could argue that it's reduced too much and impossible to figure out the letter it's representing, but I think abstract symbols are better than clear letters.

Pure artistic perfection

Quality of Write

This section contains quality of life improvements for me, the writer. For you, the reader 4, nothing has changed.


I didn't know that quotes support headings. It looks ridiculous, and I won't use it anywhere else in this blog, but rest assured, I support them. In fact, quotes are just like any other content, which means lists, code and even quoteception.

If you're going to perform inception, you need imagination. You need the simplest version of the idea, the one that will grow naturally in the subject's mind. Subtle art.


But wait, there is more. Citing someone is now easier than ever. Just wrap the citee into the <cite> tag, and formatting will be handled for you.

> Living life one obsession at a time.
> <cite>Me</cite>

It uses the :has selector under the hood, which is supported by Firefox since today!

Firefox 121 release notes

I also added support for SVG images and made it easier to display multiple images in a fluent 5 list.

- ![](img/logo.svg)
- ![](img/logo.svg)
- ![](img/logo.svg)

Another thing I added is a wrapper around tables, which allows scrolling once the table gets too large for the screen. It seems like a trivial problem, but I had to resort to a regex replacement hack to make it work.

{{ $table := `(<table>(?:.|\n)*?</table>)` }}
{{ $tableWrapper := `<div class="table-wrapper">${1}</div>` }}
{{ .Content | replaceRE $table $tableWrapper | safeHTML }}

Without it, the whole page will scroll instead of the table content, a problem you will find in many blogs.

Final Words

I hope you enjoy the new design of the blog as much as I do. Time to focus on content!

  1. I understand that some people prefer light over dark themes. I tend to switch between both depending on time of day and ambient brightness in the room. ↩︎

  2. It's inspired by its blog background color, to be precise. None of the actual colors are used. ↩︎

  3. That sounds like a made-up word. ↩︎

  4. Maybe some of you are out there and not just in my head. ↩︎

  5. Fluent refers to the way the layout shifts to a column-based one on mobile devices. ↩︎