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