New Website Look!

Published 18 May 2023 by atctwo
Tags: meta web

I’ve made a new look for this website! In this post I’m going to talk a a bit about how it was created.

A screenshot of the homepage of the new website

New Site

The site is built using Jekyll, with a new custom theme I built with Bootstrap 5.3. The theme is called “atctheme” because I have no imagination, and it’s available to use at GitHub. The font used by the header is Varela Round and the body font is Nunito. The icons are part of the Bootstrap Icons icon set.

The website is deployed on GitHub Pages (and you can view the source here), but it’s using the new-ish beta GitHub Pages GitHub Actions workflow (rather than the classic pages system). This is to allow me to run Jekyll 4, and to allow the use of plugins. Speaking of, here’s a list of plugins this site is using (automatically generated so that it’s up to date!):

The rainbow header / background was created by randomly generating a really big CSS gradient with a load of colours and zooming on it using background-size, then setting up a CSS animation on background-position to pan the background. The idea for this was based on CSS Gradient Animator by Ian Forrest.

For the colour mode selector in the top right of the page, I used a feature new to Bootstrap 5.3: colour modes. In fact, the selector button works pretty much the same way as the one on the Bootstrap website. When you select a colour mode, it applies the colour mode to the root <html> node. It also saves the selected mode to LocalStorage, so when you navigate to a different page, it’s able to set the colour mode before the page even finishes loading.

Bootstrap has different stylesheets for light mode and dark mode, which are applied based on the data-bs-theme attribute of an element (so when the element is the root <html> tag it applies to everything). Because the actual colours are determined using CSS, no JavaScript is needed, except for adding / removing an HTML attribute.

Site History

This is the third version of this website (known internally as web4 for historical reasons). The first version (web2) was handwritten in 2019, and was pretty empty, and also looked pretty basic. The second version (web3) was the first to use Jekyll, and used a modified version of the default theme Minima. It saw a bit more use, but was also quite empty. For this latest version of the site I’m hoping to be able to make it look much more visually appealing, and hopefully I’ll be able to keep updating it.

The first two versions are archived on this site incase you’re curious: web2 and web3.