I’m currently in the process of improving my sites Hugo theme. I removed features I never used and simplified unorganized HTML and CSS, to enable adding new features (like better support for IndieWeb things) later.

My theme was once based on the Hugo theme Mainroad, but I modified so much over the time that almost nothing is left from the original theme. The theme, which was a port of a WordPress theme called “MH Magazine”, supported Internet Explorer 11, but when I discovered CSS variables, I made use of them and broke Internet Explorer support on the way.

Now that I rewrote the whole CSS in SCSS and modified a lot of HTML templates, I removed many browser specific CSS handlings too. I always checked the MDN web docs to make sure all browsers support those features. It seems like in the last years browsers standardized more. Let’s hope that won’t change again through Chromium’s dominance.

Now the theme is working again in Internet Explorer 11, because I added CSS variable fallbacks using an SCSS function. This is the tutorial I followed for that.

I also learned a ton about SCSS and CSS in general. CSS was always some dark magic for me. It still is a bit, but by trying to understand every single line of CSS in my project, I got a much better understanding. I even got the responsive menu working without JavaScript and just pure CSS.