sass-style-update.md (2656B)
1 +++ 2 title = "SASS and Light Mode" 3 date = 2021-01-02 4 updated = 2022-06-15 5 +++ 6 7 I'm on a roll! A second blog post in less than a month! Crazy. Anyway, 8 as you may have noticed – depending on whether or not you read this 9 via RSS or on the main site – I changed the site styles. I got rid 10 of dark mode, added styles for code and keyboard blocks, and changed 11 the look of links to a new cool design. **Update:** I brought back dark 12 mode. Light mode gave me anxiety. 13 14 <!-- more --> 15 16 It all started the other day when I was cruising through cyberspace 17 and noticed a rather unique looking link style. Instead of the 18 [traditional underline styling][link-recommendation], hyperlinks were 19 surrounded in square brackets (like Markdown). I thought it was a 20 really cool change, and made the site stand out – so I stole the 21 idea and implemented it here! Yay for stealing. ~~More on this in a 22 future post...~~ 23 24 However, when I went to add the new style to my site I noticed that my 25 `global.css` file had gotten rather lengthy and disorganized. Given 26 that [Zola][zola] comes with [built-in support][zola-sass] for 27 [Sass][sass], I thought I might try it out. I found it easy enough to 28 pick up given that I already know CSS. I decided to use Sass' 29 [indented syntax][sass-syntax], which required more work to convert 30 from my existing CSS but – in my humble opinion – looks much 31 cleaner. 32 33 Given that I was already tinkering with site styles, I decided to 34 implement a couple other changes. I abandoned the site's dark mode, 35 as though I myself am an avid dark mode user, I couldn't find a way to 36 implement it in a satisfying way. If I figure out a Sass-y way to do 37 so, I may add it back. I added a border around inline `code` blocks 38 ~~because I thought I already had done that~~. Lastly, I added 39 StackExchange's amazing <kbd>kbd</kbd> styling so I could write 40 <kbd>⌥</kbd> + <kbd>⌘</kbd> + <kbd>N</kbd> in [this article][post]. 41 42 I'm pretty happy with the new styles, but I have no doubt I'll 43 continue to tweak it as I find cool designs around the web. 44 45 Thanks for dropping by: see you next time! 46 47 FIGBERT 48 49 --- 50 51 **PS:** It's interesting that Sass supports both of the two modern 52 syntax paradigms, both the indents and linebreaks camp and the 53 brackets and semicolons camp. I don't really prefer one over the 54 other, but it's an interesting divide. 55 56 [link-recommendation]: https://www.w3.org/WAI/WCAG21/Techniques/general/G183 57 [zola]: https://www.getzola.org/ 58 [zola-sass]: https://www.getzola.org/documentation/content/sass/ 59 [sass]: https://sass-lang.com/ 60 [sass-syntax]: https://sass-lang.com/documentation/syntax 61 [post]: @/posts/how-to-mirror-your-iphone-to-your-mac.md