Spicing Up My Website

📆 09 May 2026 11:15 UTC +01:00
📕 969 words ⏳ 8 min.
🏷️#Webdev

In the last week, I’ve been putting a bit of time into spicing up my website. I’ve neglected the aesthetics for so long and now I’m looking to get it looking pretty.

Now it’s been a while since I last worked on the CSS for my website, so I had to reacquaint myself with the code. In the last month or so, I’ve been through and cleaned up the codebase of my website removing a ton of old, unused CSS files, so that made it a lot easier.

I recently changed to using light theme on everything, and after having purely used dark mode on everything. In doing so, I found a number of issues that I had completely missed in my website’s light theme. To fix this, I made a simple change which I should have done from the off.

How my CSS was formatted before

:root {
    --color1: black;
    --color2: white;
    --color3: blue;
    --color4: red;

    --lcolor1: white;
    --lcolor2: black;
    --lcolor3: blue;
    --lcolor4: red;
}

@media (prefers-color-scheme:dark) {
    # CSS for the dark theme - using color.
}

@media (prefers-color-scheme:light) {
    # CSS for the light theme. - using lcolor.
}  

How my CSS is formatted now

@media (prefers-color-scheme:dark) {
    :root {
        --fg: white;
        --bg: black;
        --accent: blue;
        --bg2: grey;
    }
}

@media (prefers-color-scheme:light) {
    :root {
        --fg: black;
        --bg: white;
        --accent: blue;
        --bg2: grey;
    }
}

# CSS for the site, written once, not twice, using color.

This change was needed to make both the light and dark themes have the same aesthetic, which is a big thing. Previously, I was having to write out the CSS code for each element that I was playing around with in both the dark and light theme sections, which where I was using only dark mode, I often missed out the light theme styling. Now, I only have to write the CSS once, with the colour variables being set within the media queries, which has really simplified things.

Site Changes

The styling is not the only thing that has changed around here, I have done a few other things to do with the layout, which I think makes my site look a lot cleaner and nicer.

I’ll quickly list the changes and then go into some detail about each one and why I decided to make the changes.

• Created an about page.
• Updated the homepage - added a small about section with basic information.
• Created a more page for the navbar.
• Removed the custom monospace font as the overall site default font.

Let’s get into the first one. My about page is pretty self explanatory. It’s a page, that is about me. It gives the reader a bit of background around me and what I do with this site. And the page also has a ton of information about the site itself.

The next one is much the same as the last one, a short and sweet little bit on the homepage with a brief introduction to me.

Next, this one will take some more explanation. My navbar was previously like this:

Home  Blog  Contact  ARAT  Blogroll  Bookcave  FlightGear

As you can see, this was a lot! So I devised a simple and minimal way to reduce this, but keeping the access to the pages. I did steal the idea from Joel, where you define the extra links in _data/more.yml and pull the data into the page “dynamically” when the site gets built. I then replaced all of these links in the navbar with More, which makes it look a lot less cluttered and much nicer.

Now, my navbar looks like this:

Home  About  Blog  Contact  More

Now, this next one changed a few things. Removing the custom font I was using was already on my mind, but I finally did. I was using a manually imported to my website and selected within the orbital.css file.

I was using JetBrainsMono as the font for my whole website, because I love the font, but I thought about it and it meant that actual code in code blocks would not stand out as much from the main content of pages, so I decided to remove this custom font. I have included the same font that Joel uses because the default font looks cool. My site now has the mononoki Nerd Font. I have also increased the font size to make it a bit clearer.

Other Stuff

I recently found out about Tiny Pixel Bears by Sylvia which as a pixel artist, I found to be very cute and so I made one, which is now on my homepage.

And that’s all of the changes on my website of recent. Hope you enjoyed, I’ll catch you in the next one. BYEEE!!!