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.

That’s all I’ve got for today. Check out some of the other blogs taking part in the #100DaysToOffload challenge using the new challenge blogroll.

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