Some Small Site Updates
Over the course of the last couple weeks, I've made some small improvements to my site. None of them are particularly huge, but I like the end result.
Adjusted the Header
I decided to change up the header a little bit. The header isn't horribly different from before, but now I decided to make it span the full width of the browser window. I also added a link to the RSS feed since I feel that's an important feature in today's web. It might have fallen out of favor in some circles, but I still love it. I also moved the light/dark mode switcher from the footer to the header and made it a little more descriptive with a sun and moon icon.
Adjusted the Footer
I also decided to adjust the footer, re-laying out the links and allowing it to fill the full browser window.
Removed SASS
SASS came pre-bundled with Jekyll so when I built the original version of my blog, it made sense to just go with it. Since then, CSS has gotten official variable support as well as a whole bunch of other nice features, so I decided to swap it out with plain old CSS. The conversion wasn't too bad and I feel like I was able to clean up the CSS some in the process, particularly with the light and dark mode.
CSS variables just make applying a light/dark theme so simple
:root {
--font-family: 'Maven Pro', 'Segoe UI', Helvetica, Arial, sans-serif;
--background: #ededed;
--background-image: url('/assets/images/background.png');
--font-color: #444444;
--blue-medium: rgb(6, 44, 156);
--blue: hsl(215.9, 100%, 40%);
--box-shadow: 0 12px 24px 0 hsla(0, 0%, 0%, 0.2);
--dark-grey: hsl(0, 0%, 40%);
--review-border-color: var(--blue);
--svg-display-lightmode: inline;
--svg-display-darkmode: none;
}
@media (prefers-color-scheme: dark) {
:root {
--background: hsl(0, 0%, 13.3%);
--background-image: none;
--font-color: hsl(0, 0%, 93.7%);
--blue-medium: hsl(209.1, 78.5%, 43.7%);
--blue: hsl(199, 98.3%, 45.9%);
--review-border-color: rgb(239, 239, 239);
--svg-display-lightmode: none;
--svg-display-darkmode: inline;
}
}Changed the Light/Dark Mode Toggle
Besides the switch itself, I also changed how I handle overriding the system's theme. The CSS variables definitely helped with this, although I have an item on my to-do list to see if I can't improve this a little more. If you're a user who overrides your system theme, there might be a momentary flash of the system theme before your override takes effect. It's still an option though so I feel like that's a plus.
Started Working with SVGs
SVGs were something that I only recently started looking at. I decided to go with SVGs for both the theme switch and the RSS icon at the top. Learning Inkscape as well as how to integrate it into the page was a fun challenge.
My 'Likes' Page
I used to run weekly posts with links I've liked. I've decided to take a page from Dave Rupert and simply add a page that lists recent articles, podcasts, or anything else that catches my eye. I liked his idea of using his Feedbin starred feed, but felt like I might as well make it manually as I find things elsewhere that I'd want to include. You can veiw this on my Likes page.
Updated Bookshelf & Movies
My reading list & bookshelf, as well as my movies used very similar code to render. I opted to condense the JS that handles them as well as the CSS to make the pages easier to manage. I also ended up shrinking the images and expanding the width some to allow more content to be viewed at once.
I generally like how my blog looks so I didn't go hog-wild, but it was nice to "freshen" it up a bit. I have a few more things I'm thinking of doing, but let me know what you think so far.