Yet another redesign

I swear. I change at least 1 CSS rule every day. I tend to this website as if it were a needy tiny creature; I'm constantly checking on it, making sure everything is in right place, with the right margins and paddings.
I believe this to be a coping mechanism that allows me to not get stressed and crushed by more pressing thoughts; I keep my mind occupied on tiny little things to avoid looking at the big picture.

Anyway, this was not supposed to be a philosophical post, nor a rant, but a way for me to let "the world" know that yesterday I outdid myself and actually redesigned a lot — a lot! of the site.
The main changes are:

  • smaller header title and navigation bar
  • increased font size
  • a "Back to top" button for longer pages
  • new colorscheme!!

Okay, maybe it is not that much but it definitely took me hours to decide every little change and find the right colors.

I remember when I first created this site, the font-size was 16px! In my defense, this is what many recommend, but still! I tried setting it to 16 now and I can't believe I once used to think it looked fine.
It was only a couple of months ago that I bumped that up to 17px

i'm saying px but i actually learned how to use rem and em measures and i'm never going back to pixels!

17 looks small too now, so I jumped to 18. I guess it's because I've been exploring some other blogs and many of them have huge fonts (it makes me self-conscious, lol). Or maybe, I've been staring at screens too much for too long and I'm finally paying for this bad habit.


The colorscheme change is even more impactful.
I found a greyscale palette online and used it to define the background and foregrounds (yes, plural), and then used that same site to find a nice, matching accent color. The way it works is: you feed it a number of colors and it generates the remaining ones to create an entire palette. The algorithm is great not just because it always suggests the right colors but also because you can keep requesting new "random" palettes until you find the one you like the most.
I really love that site, I have been using it for years, for various projects. It's just a pity that many of the most useful features are blocked behind a paywall.

Anyway, I gave those greys to the generator and hoped it would give a nice accent color in return. And so it did. The only problem is that it was a warm color while I definitely prefer (and was hoping for) cool ones.
Look, I only apply the accent color on links and it has always been blue, on my site as well as most other sites. This might count as design racism but I didn't want my links to be red.
I felt discouraged because no matter how many times I forced the site to generate new palettes, it always returned a shade of red or yellow. Long story short, I surrendered — I really liked those greys — and, after a bit of tweaking, I settled on this #D2373C, called Poppy.

i won't lie: the reason why i choose this shade instead of the other hundreds of reds was the name

Apart from personal taste, I actually put a lot of thought on accessibility and tested every combination of colors to find one meeting the WCAG guidelines — my previous theme didn't. I used the WebAIM contrast checker, the only one I could find that tests not only foreground against background but also links (accent) against bg and regular fg.

Content only lasted for so long since I now had to think about dark mode.
Background and foregrounds I got quickly by tweaking that same greyscale palette, but the accent color proved to be an ever bigger challenge than before. In the end, I could not find a color that satisfied both me and the online checker. I settled for #DF9568, derived from the light mode one by modifying contrast and brightness.
This color passes one of the tests by being contrasty enough with the background, but it is too bright and might be hard to spot it against the regular text foreground.
I'm sure I'll replace this soon enough but for now I'll stick with it, mainly for aesthetic reasons, but also for lack of patience (sorry).


The "Back to top" button is actually a link I put in the footer.
I dislike those buttons that pop up at the side when you scroll down, especially because I wouldn't know how to design one that fits this site's minimal theme. Admittedly, it would be more useful than this link at the far bottom of the page, but still...

The first time I searched how to implement this back-to-top functionality I came across a simple (and common) solution which consists in having a link pointing to #something.
For example:

<a href="#top">Back to Top</a>

works just fine but I hate that after clicking on that link, if I want to go back to the previous page I visited, the site actually sends me back to the bottom of the current page because that is the last location where I clicked on a link.
I had to implement a Javascript solution and now everything works as expected... unless the user has Javascript disabled on their browser.

<a onclick="document.body.scrollTop=0;document.documentElement.scrollTop=0;">Back to Top</a>

I'm pretty sure, though, that if you're tech savvy enough to disable Javascript you can also find other means to reach the top of the page — with keyboard shortcuts, for example. Or you can simply allow JS execution on my website.

The one thing I'm not sure about yet is whether to add this link on every footer or manually choose which pages are long enough and actually need it.
Adding it everywhere? Design consistency but also uselessness. Only certain pages? Okay, but what does "long enough" mean? What's the limit? Also, a short page on desktop might be long on mobile.
I'll keep it everywhere, for now.