clean up SCSS and correct some syntax

assets/sass/components/_content.scss

@@ -1,5 +1,6 @@
 @use "../abstracts/themes";
 
+// Main content
 div#content {
   font-size: 0.925em;
   letter-spacing: -0.004em;

assets/sass/components/_embeds.scss

@@ -1,3 +1,4 @@
+// External social embeds
 div.embed {
   &.tweet {
     .twitter-tweet-rendered iframe {

assets/sass/components/_global.scss

@@ -1,8 +1,8 @@
 @use "sass:map";
 
-@use "../abstracts/functions";
 @use "../abstracts/settings";
 @use "../abstracts/themes";
+@use "../abstracts/functions" as *;
 
 // Global Styles
 body {
@@ -30,6 +30,9 @@ body {
   }
 }
 
+// need to set light/dark mode backgrounds outside of the body selector
+@include themes.themed(background-color, "background-outer");
+
 code,
 pre,
 .monospace {
@@ -37,9 +40,6 @@ pre,
   letter-spacing: normal;
 }
 
-// need to set light/dark mode backgrounds outside of the body selector
-@include themes.themed(background-color, "background-outer");
-
 // override above font-family if browser supports variable fonts
 // https://caniuse.com/#feat=variable-fonts
 @supports (font-variation-settings: normal) {
@@ -85,7 +85,7 @@ a {
   // https://www.dannyguo.com/blog/animated-multiline-link-underlines-with-css/
   @each $theme, $map in themes.$themes {
     @at-root body.#{$theme} #{&} {
-      background-image: functions.underline-hack(map-get($map, "links"));
+      background-image: underline-hack(map-get($map, "links"));
     }
   }
 

assets/sass/components/_reset.scss

@@ -1,185 +0,0 @@
-// stylelint-disable
-
-/*! modern-normalize v1.1.0 | MIT License | https://github.com/sindresorhus/modern-normalize */
-
-/*
-Document
-========
-*/
-
-/**
-Use a better box model (opinionated).
-*/
-
-*,
-::before,
-::after {
-  box-sizing: border-box;
-}
-
-/**
-1. Correct the line height in all browsers.
-2. Use a more readable tab size (opinionated).
-3. Prevent adjustments of font size after orientation changes in iOS.
-*/
-
-html {
-  line-height: 1.15; /* 1 */
-  tab-size: 4; /* 2 */
-  -webkit-text-size-adjust: 100%; /* 3 */
-}
-
-/*
-Sections
-========
-*/
-
-/*
-Grouping content
-================
-*/
-
-/**
-1. Add the correct height in Firefox.
-2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)
-*/
-
-hr {
-  height: 0; /* 1 */
-  color: inherit; /* 2 */
-}
-
-/*
-Text-level semantics
-====================
-*/
-
-/**
-Add the correct text decoration in Chrome, Edge, and Safari.
-*/
-
-abbr[title] {
-  text-decoration: underline dotted;
-}
-
-/**
-Add the correct font weight in Edge and Safari.
-*/
-
-b,
-strong {
-  font-weight: bolder;
-}
-
-/**
-Correct the odd 'em' font sizing in all browsers.
-*/
-
-code,
-kbd,
-samp,
-pre {
-  font-size: 1em;
-}
-
-/**
-Add the correct font size in all browsers.
-*/
-
-small {
-  font-size: 80%;
-}
-
-/**
-Prevent 'sub' and 'sup' elements from affecting the line height in all browsers.
-*/
-
-sub,
-sup {
-  font-size: 75%;
-  line-height: 0;
-  position: relative;
-  vertical-align: baseline;
-}
-
-sub {
-  bottom: -0.25em;
-}
-
-sup {
-  top: -0.5em;
-}
-
-/*
-Tabular data
-============
-*/
-
-/**
-1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)
-2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)
-*/
-
-table {
-  text-indent: 0; /* 1 */
-  border-color: inherit; /* 2 */
-}
-
-/*
-Forms
-=====
-*/
-
-/**
-1. Change the font styles in all browsers.
-2. Remove the margin in Firefox and Safari.
-*/
-
-button,
-input,
-optgroup,
-select,
-textarea {
-  font-family: inherit; /* 1 */
-  font-size: 100%; /* 1 */
-  line-height: 1.15; /* 1 */
-  margin: 0; /* 2 */
-}
-
-/**
-Remove the inheritance of text transform in Edge and Firefox.
-*/
-
-button,
-select {
-  text-transform: none;
-}
-
-/**
-Remove the padding so developers are not caught out when they zero out 'fieldset' elements in all browsers.
-*/
-
-legend {
-  padding: 0;
-}
-
-/**
-Add the correct vertical alignment in Chrome and Firefox.
-*/
-
-progress {
-  vertical-align: baseline;
-}
-
-/*
-Interactive
-===========
-*/
-
-/*
-Add the correct display in Chrome and Safari.
-*/
-
-summary {
-  display: list-item;
-}

assets/sass/components/_typography.scss

@@ -1,5 +1,6 @@
-@use "../abstracts/functions";
-@use "../abstracts/settings";
+@use "sass:string";
+
+@use "../abstracts/functions" as *;
 
 // Note to self: got this list after subsetting Inter with glyphhanger or pyftsubset:
 // https://github.com/filamentgroup/glyphhanger
@@ -8,6 +9,38 @@
 // ex: pyftsubset --unicodes="" --layout-features=kern,liga,calt,clig,ss01 --flavor=woff --with-zopfli inter.ttf
 $unicode-subset: U+0000-00FF, U+2000-206F, U+2200-22FF, U+2122;
 
+// Webfont scaffolding
+@mixin font-face(
+  $family,
+  $src,
+  $weight: normal,
+  $style: normal,
+  $display: swap,
+  $variable: false,
+  $base-path: "../fonts/"
+) {
+  @font-face {
+    font-family: string.quote($family);
+    font-style: $style;
+    font-weight: $weight;
+    font-display: $display;
+
+    @if $variable {
+      // All browsers that support variable fonts also support woff2, so a woff
+      // file is unncessary. (see: https://www.w3.org/TR/css-fonts-4/#src-desc)
+      src: url($base-path + $src + ".woff2") format("woff2-variations"),
+        url($base-path + $src + ".woff2") format("woff2");
+    } @else {
+      src: url($base-path + $src + ".woff2") format("woff2"), url($base-path + $src + ".woff") format("woff");
+    }
+
+    // Allow additional rules to be passed in:
+    @content;
+  }
+}
+
+// ----------------
+
 /*!
  * Inter typeface v3.15 - https://rsms.me/inter/
  *
@@ -17,33 +50,35 @@ $unicode-subset: U+0000-00FF, U+2000-206F, U+2200-22FF, U+2122;
  */
 
 // Variable
-@include functions.font-face("Inter var", "inter-subset.var", 100 900, $variable: true) {
+@include font-face("Inter var", "inter-subset.var", 100 900, $variable: true) {
   unicode-range: $unicode-subset;
 }
-@include functions.font-face("Inter var", "inter-italic-subset.var", 100 900, italic, $variable: true) {
+@include font-face("Inter var", "inter-italic-subset.var", 100 900, italic, $variable: true) {
   unicode-range: $unicode-subset;
 }
 
 // Legacy
-@include functions.font-face("Inter", "inter-regular-subset", 400) {
+@include font-face("Inter", "inter-regular-subset", 400) {
   unicode-range: $unicode-subset;
 }
-@include functions.font-face("Inter", "inter-regular-italic-subset", 400, italic) {
+@include font-face("Inter", "inter-regular-italic-subset", 400, italic) {
   unicode-range: $unicode-subset;
 }
-@include functions.font-face("Inter", "inter-medium-subset", 500) {
+@include font-face("Inter", "inter-medium-subset", 500) {
   unicode-range: $unicode-subset;
 }
-@include functions.font-face("Inter", "inter-medium-italic-subset", 500, italic) {
+@include font-face("Inter", "inter-medium-italic-subset", 500, italic) {
   unicode-range: $unicode-subset;
 }
-@include functions.font-face("Inter", "inter-bold-subset", 700) {
+@include font-face("Inter", "inter-bold-subset", 700) {
   unicode-range: $unicode-subset;
 }
-@include functions.font-face("Inter", "inter-bold-italic-subset", 700, italic) {
+@include font-face("Inter", "inter-bold-italic-subset", 700, italic) {
   unicode-range: $unicode-subset;
 }
 
+// ----------------
+
 /*!
  * Roboto Mono typeface v3.000 - https://fonts.google.com/specimen/Roboto+Mono
  *
@@ -53,12 +88,14 @@ $unicode-subset: U+0000-00FF, U+2000-206F, U+2200-22FF, U+2122;
  */
 
 // Variable
-@include functions.font-face("Roboto Mono var", "roboto-mono-subset.var", 100 700, $variable: true);
-@include functions.font-face("Roboto Mono var", "roboto-mono-italic-subset.var", 100 700, italic, $variable: true);
+@include font-face("Roboto Mono var", "roboto-mono-subset.var", 100 700, $variable: true);
+@include font-face("Roboto Mono var", "roboto-mono-italic-subset.var", 100 700, italic, $variable: true);
 
 // Legacy
-@include functions.font-face("Roboto Mono", "roboto-mono-regular-subset", 400);
-@include functions.font-face("Roboto Mono", "roboto-mono-italic-subset", 400, italic);
+@include font-face("Roboto Mono", "roboto-mono-regular-subset", 400);
+@include font-face("Roboto Mono", "roboto-mono-italic-subset", 400, italic);
+
+// ----------------
 
 /*!
  * Comic Neue typeface v2.5 - http://comicneue.com/
@@ -67,9 +104,10 @@ $unicode-subset: U+0000-00FF, U+2000-206F, U+2200-22FF, U+2122;
  * Licensed under the SIL Open Font License, Version 1.1:
  * https://github.com/crozynski/comicneue/blob/v2.5/OFL.txt
  */
-@include functions.font-face("Comic Neue", "comic-neue-regular-subset", 400) {
+
+@include font-face("Comic Neue", "comic-neue-regular-subset", 400) {
   unicode-range: U+0000-00FF, U+2000-206F, U+20A0-20CF, U+2190-21FF, U+2200-22FF, U+2122;
 }
-@include functions.font-face("Comic Neue", "comic-neue-bold-subset", 700) {
+@include font-face("Comic Neue", "comic-neue-bold-subset", 700) {
   unicode-range: U+0000-00FF, U+2000-206F, U+20A0-20CF, U+2190-21FF, U+2200-22FF, U+2122;
 }