Notice anything different? Over the past few days, I've been redesigning the entire site to give it a more "modern" and "professional" feel. I've also streamed most of the development process live on my Twitch channel, Opsci. For those of you who weren't there, there's a few changes which I made to the site -
- Dark Mode Is Here! - This feature took me a while to get right, but it was worth it. A quick summary of this feature - when you load the website for the first time, it checks what your preferred system theme is. This was suprisingly easy to implement - It's as simple as adding the following check in the onload function -
if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {And then, based on the result of that conditional, I simply change some root variables in the document's stylesheet usingdocument.documentElement.style.setProperty("--var-name", "color") It's also possible to change your theme using the sun/moon icon on the top right if you don't like the current one. Keep in mind that this palette is not final and some of these colours could change in the future.
- Added Sidebar - For those of you on desktop, you may noticed new sidebar on the page. This contains the latest blog posts, my newest videos, and more! For those on mobile or on smaller screen resolutions, this sidebar is unfortunately not available, as the screen is simply to small.
- Changed The Font - I've gone through a few fonts on the site - first Quicksand, then Ubuntu (I'm actually still using the Ubuntu font for the code blocks), and now I'm using Josefin Sans as my main font.
- Fixed Footer Bug - As some of you may have noticed, the social media icons on the pages' footers where sometimes off. In some cases, they weren't in the footer at all, but rather beside it! Obviously that wasn't supposed to happen, but fortunately I managed to fix it. I simply replaced the div with an ul, and set its text-align property to true, which fixed the problem.