💾 Archived View for figbert.com › log › 2021-01-02-sass-style-update.gmi captured on 2024-08-25 at 00:07:05. Gemini links have been rewritten to link to archived content

-=-=-=-=-=-=-

SASS and Light Mode

Obviously, this doesn't really apply to the capsule. Gemini doesn't have CSS (or an equivalent), which is something I'm largely appreciative of. It lets you focus on content, rather than how the text looks. Plus, you can still maintain a unique look through the use of emojis, ACII art, and other little personalizations. Regardless, I'm going to keep this post up on Gemini for consistencies sake, so if you want to read a little bit about my the HTTP version of figbert.com, read on.

I'm on a roll! A second blog post in less than a month! Crazy. Anyway, as you may have noticed – depending on whether or not you read this via RSS or on the main site – I changed the site styles. I got rid of dark mode, added styles for code and keyboard blocks, and changed the look of links to a new cool design.

Update: I brought back dark mode. Light mode gave me anxiety.

It all started the other day when I was cruising through cyberspace and noticed a rather unique looking link style. Instead of the traditional underline styling, hyperlinks were surrounded in square brackets (like Markdown). I thought it was a really cool change, and made the site stand out – so I stole the idea and implemented it here! Yay for stealing.

However, when I went to add the new style to my site I noticed that my global.css file had gotten rather lengthy and disorganized. Given that Zola comes with built-in support for Sass, I thought I might try it out. I found it easy enough to pick up given that I already know CSS. I decided to use Sass' indented syntax, which required more work to convert from my existing CSS but – in my humble opinion – looks much cleaner.

Sass indented syntax

Given that I was already tinkering with site styles, I decided to implement a couple other changes. I abandoned the site's dark mode, as though I myself am an avid dark mode user, I couldn't find a way to implement it in a satisfying way. If I figure out a Sass-y way to do so, I may add it back. I added a border around inline code blocks, because I thought I already had done that. Lastly, I added StackExchange's amazing <kbd> styling.

I'm pretty happy with the new styles, but I have no doubt I'll continue to tweak it as I find cool designs around the web.

Thanks for dropping by: see you next time!

FIGBERT

PS: It's interesting that Sass supports both of the two modern syntax paradigms, both the indents and linebreaks camp (Python, etc) and the brackets and semicolons camp (C, Rust, etc). I don't really prefer one over the other, but it's an interesting divide.