Tweaking Some CSS

Written By: Jake Bauer | Posted: 2020-04-27 | Last Updated: 2020-04-27

Today is a work day so I didn’t do much that I can talk about in a blog post. I was also not really browsing the internet today so I don’t have interesting things to share. However, I did do a little bit of fiddling with the look of my website.

Taking inspiration from different site themes that I’ve seen around the internet, I decided to make a few tweaks. I made the backgrounds a little bit brighter, gave them a slight blue tinge to match with the link colours, and I also made a few elements like the table of contents and code tags have rounded corners. Using the Firefox accessibility tools and sites like Tanaguru Contrast Finder and WebAIM: Contrast Checker, I made sure that these new colours had enough contrast so that there weren’t accessibility issues with the new scheme.

I also did a little bit of code cleanup in the CSS file. I removed colours and elements that I no longer use on the site such as the danger colour and kbd element styling and I consolidated some often-used values like font-size into variables. This shrunk the size of my unminified CSS file from 4.7K to 3.6K.

This is my third post for the #100DaysToOffload challenge. You can learn more about this challenge over at https://100daystooffload.com.