Update SASS syntax in base (non-font) files

[scottleechua]

Partially fixes issue #3256 by updating SASS syntax in main SCSS files.

To fully address the issue, FontAwesome should be updated to v7.x and Tabler to v3.30 or higher (see Tabler fix here), where the SCSS has been fixed.

[netlify]

✅ Deploy Preview for relaxed-lollipop-b6bc17 ready!

Name	Link
🔨 Latest commit	9e26895
🔍 Latest deploy log	https://app.netlify.com/projects/relaxed-lollipop-b6bc17/deploys/68b63e044fb8eb0008a9609d
😎 Deploy Preview	https://deploy-preview-3281--relaxed-lollipop-b6bc17.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify project configuration.

[george-gca]

I updated FontAwesome in this PR, but Tabler Icons is not easily downloadable as a package anymore, at least I couldn't find it in their site a way do download a built package without paying. I am currently considering the options:

• remove tabler icons from code, since it is only used for 4 icons
• create something to build the package myself

[scottleechua]

I'm in favor of removing Tabler and replacing the search and sun/moon with FontAwesome similar icons. I'm sure there was a good reason to opt for the Tabler version instead, but perhaps the maintenance cost is not equivalent to the benefit at this point.

[george-gca]

Tbh the main reason Tabler Icons was added was because of the "follow system theme" option. Font Awesome doesn't have a free icon that translates this information. I was thinking of using the desktop icon, but I am not sure it translates the information correctly. What do you think?

[scottleechua]

I've implemented a "half and half" sun moon icon to represent the system setting, using Fontawesome sun and moon. I've seen something like this done elsewhere, though I can't remember exactly where, and it seems communicative enough.

If that works for you, the path should be clear for you now to replace the other Tabler icons and remove the package.

On hover:

Without hover: