a bit more SCSS cleanup

assets/sass/abstracts/_settings.scss

@@ -1,5 +1,11 @@
 @use "sass:list";
 
+// The maximum width of the content area:
+$max-width: 865px;
+
+// Width at which to switch to mobile styles:
+$responsive-width: 800px;
+
 // Web fonts:
 $webfont-sans: "Inter";
 $webfont-sans-variable: "Inter var";
@@ -18,16 +24,11 @@ $font-stack-variable: list.join($webfont-sans-variable, $system-fonts-sans);
 $font-stack-mono: list.join($webfont-mono, $system-fonts-monospace);
 $font-stack-mono-variable: list.join($webfont-mono-variable, $system-fonts-monospace);
 
-// The maximum width of the content area:
-$max-width: 865px;
-
-// Width at which to switch to mobile styles:
-$responsive-width: 800px;
-
 // Fancy link underline settings:
 $link-underline-opacity: 40%;
 $link-underline-size: 2px;
 $link-opacity-color: #ffffff;
 
-// Elements to fade on dark/light theme toggle:
+// Default fading style when switching between light/dark themes:
 $theme-transition-duration: 0.15s;
+$theme-transition-function: linear;

assets/sass/abstracts/_themes.scss

@@ -1,9 +1,8 @@
-@use "sass:map";
 @use "sass:list";
+@use "sass:map";
 @use "sass:meta";
 
 @use "settings";
-@use "functions" as *;
 
 // Takes a map of CSS properties and theme keys (see below) and set both body.light and body.dark selectors.
 // ex. @include themes.themed($color: "text", $background-color: "background-inner");
@@ -19,7 +18,7 @@
   // list themed properties under CSS transitions for fancy fading
   transition-property: list.join($properties, (), $separator: comma);
   transition-duration: #{settings.$theme-transition-duration};
-  transition-timing-function: linear;
+  transition-timing-function: #{settings.$theme-transition-function};
 
   // add corresponding body.light and body.dark root selectors
   @each $theme, $map in $themes {
@@ -38,6 +37,9 @@
       }
     }
   }
+
+  // allow anything above to be overridden manually by passing in a content block
+  @content;
 }
 
 // ----------------

assets/sass/components/_footer.scss

@@ -29,7 +29,7 @@ footer {
     padding-bottom: 2px;
     border-bottom: 1px solid;
 
-    @include themes.themed($border-color: "light");
+    @include themes.themed($color: "medium-dark", $border-color: "light");
   }
 }
 

assets/sass/components/_global.scss

@@ -2,7 +2,7 @@
 
 @use "../abstracts/settings";
 @use "../abstracts/themes";
-@use "../abstracts/functions" as *;
+@use "../abstracts/functions";
 
 // Global Styles
 body {
@@ -77,18 +77,18 @@ main {
     background-size: 0% settings.$link-underline-size;
     padding-bottom: settings.$link-underline-size;
 
-    @include themes.themed($color: "links");
+    @include themes.themed($color: "links") {
-
+      // TODO: overriding transition-property from themed() -- very hacky
-    // TODO: overriding transition-property from themed() -- very hacky
+      transition-property: color, background-size;
-    transition-property: color, background-size;
+      transition-duration: #{settings.$theme-transition-duration}, 0.25s;
-    transition-duration: #{settings.$theme-transition-duration}, 0.25s;
+      transition-timing-function: #{settings.$theme-transition-function}, ease-in-out;
-    transition-timing-function: linear, ease-in-out;
+    }
 
     // cool link underlines (via messy SCSS hacking):
     // https://www.dannyguo.com/blog/animated-multiline-link-underlines-with-css/
     @each $theme, $map in themes.$themes {
       @at-root body.#{$theme} #{&} {
-        background-image: underline-hack(map.get($map, "links"));
+        background-image: functions.underline-hack(map.get($map, "links"));
       }
     }
 

assets/sass/components/_header.scss

@@ -62,22 +62,26 @@ header {
 
         a {
           display: inline-flex;
+
+          // hovers are super choppy without this in some browsers
           will-change: transform;
 
-          @include themes.themed($color: "medium-dark");
+          @include themes.themed($color: "medium-dark") {
-
+            // TODO: overriding transition-property from themed() -- very hacky
-          // TODO: overriding transition-property from themed() -- very hacky
+            transition-property: color, transform;
-          transition-property: color, transform;
+            transition-duration: #{settings.$theme-transition-duration};
-          transition-timing-function: linear, ease-in-out;
+            transition-timing-function: #{settings.$theme-transition-function}, ease-in-out;
+          }
 
           &:hover {
             transform: scale(1.1);
 
-            @include themes.themed($color: "links");
+            @include themes.themed($color: "links") {
-
+              // TODO: overriding transition-property from themed() -- very hacky
-            // TODO: overriding transition-property from themed() -- very hacky
+              transition-property: color, transform;
-            transition-property: color, transform;
+              transition-duration: #{settings.$theme-transition-duration};
-            transition-timing-function: linear, ease-in-out;
+              transition-timing-function: #{settings.$theme-transition-function}, ease-in-out;
+            }
           }
 
           span {

assets/sass/pages/_home.scss

@@ -1,5 +1,5 @@
 @use "../abstracts/themes";
-@use "../abstracts/functions" as *;
+@use "../abstracts/functions";
 
 // Colorful Homepage
 $colors-home: (
@@ -193,12 +193,12 @@ div.layout-home {
   }
 }
 
-// Loop through $colors-home (see abstracts/_variables)
+// Loop through $colors-home (see above)
 @each $id, $colors in $colors-home {
   @each $theme, $color in $colors {
     @at-root body.#{$theme} div.layout-home a##{$id} {
       color: $color;
-      background-image: underline-hack($color);
+      background-image: functions.underline-hack($color);
     }
   }
 }