Since I first bought my domain in 2010, I’ve used many different colour schemes and styles. I already made a detailed post celebrating 12 years of epps.nl, so I wont go too deep into the history. But in short, since 2016 I’ve been using orange as the primary colour for my site. Sometime late 2023, I made a new avatar using the Team Fortress 2 achievement colour palette. I liked so much that I’ve been using it everywhere for a several months, and with it I felt the time was right to extend it to my personal website.
Colour scheme
As nice as the TF2 achievement colour scheme is, I also noticed it was far too limiting for a website. So, instead I opted to create a hybrid between it and my older orange themes. The result is a 8 colour palette, 2 of which unused and reserved for later use.
The only colour I kept the same was the burned orange. The vibrant orange of the old theme did not play nice on darker backgrounds, and instead was split to 2 colours; a darker toned orange and a lighter de-saturated colour. White was replaced with eggshell, the original grey darkened and a new dark grey background colour was added. While this colour scheme was assembled with a dark theme in mind, it can easily be changed to a light theme. Swapping the use of eggshell and dark grey takes care of 90% of most content, with only the headers requiring a change to the darker orange or “2019 bright orange”.
Typography
With the colours selected, I moved on to my favourite part: typography. One font I recently took a liking too is ITC Avant Garde Gothic, especially when used as large bold text. As it is a licenced font, I instead opted for the free look-a-like TeX Gyre Adventor, made for the LaTeX Project, and made it the font used for all titles and headers.
For regular text I opted for Raleway, a font I’ve used many times before on other projects. It’s a nice, wide, round sans-serif font which just works.
To display quotes I find serif fonts work best to make them stand out. After trying multiple fonts surrounded by text in Raleway and TeX Gyre Adventor, I found LT Cushion to compliment them just fine.
“People Die If They Are Killed”
Shirou Emiya, Fate/Stay Night (2006)
This left me with only code blocks. For programming and code, you want a clear monospace font. More importantly, there must be a clear distinction between look-alike symbols such as Il|O0. While I did look around, I quickly settled on Fira Mono, which is the same font I use in the windows terminal, PuTTY and Notepad++.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Game Over</title>
<script>
function triggerPopup() {
alert("You just lost the game");
}
</script>
</head>
<body>
<!-- Il|O0 -->
<button onclick="triggerPopup()">Trigger Pop-up</button>
</body>
</html>
Code language: HTML, XML (xml)Logo
With the new typography, the site logo too required an update as it now felt out of place. For this, I replaced the previously used Nexa Light with TeX Gyre Adventor. I also removed the colours and that’s that. Finally, I added some shading to the inside of the logo to make it look less flat.
WordPress Theme
Finally, it was time to change WordPress themes. The previous theme, Harest, was showing its age. It had some oddities to it, including broken code blocks and image captions. Being freemium, it was also limited in how much you could change out of the box. While I simply ran a child theme with my css and php changes, it just wasn’t worth the hassle. Instead, I now migrated over to Blocksy, an extremely popular theme with tons of customisation options.
On top of Blocksy, I also use the free version of Elementor to create custom pages. While I prefer Divi, which I use on abunaicon.nl, the free version of Elementor is good enough for this little website.