diff --git a/assets/sass/abstracts/_functions.scss b/assets/sass/abstracts/_functions.scss
index 5cbbdca2..09e251ef 100644
--- a/assets/sass/abstracts/_functions.scss
+++ b/assets/sass/abstracts/_functions.scss
@@ -1,47 +1,15 @@
 @use "sass:math";
-@use "sass:list";
-@use "sass:string";
 
 @use "settings";
 
 // Gradient hack to get our custom underline to wrap:
 // https://www.dannyguo.com/blog/animated-multiline-link-underlines-with-css/
 @function underline-hack($color) {
-  // [deprecated] Calculate lighter underline color compared to text color by mix()'ing with background (#fff) to give
-  // the impression of opacity but with MUCH better compatibility.
-  // $color-opaque-hex: mix($color, $link-opacity-color, $link-underline-opacity);
-
   // Less compatible but better for light/dark mode switching. We fall back to non-alpha hex colors with
   // postcss-color-rgba-fallback to mitigate this.
-
   // stylelint-disable-next-line color-function-notation
   $color-opaque-alpha: rgba($color, math.div(settings.$link-underline-opacity, 100%));
 
   // Return non-gradient linear-gradient():
   @return linear-gradient($color-opaque-alpha, $color-opaque-alpha);
 }
-
-// Returns a list of strings from a given string separated by a given separator (defaults to comma).
-// https://stackoverflow.com/a/65853667/1438024
-@function str-split($str, $separator: ",") {
-  // return immediately if this function isn't necessary
-  @if not string.index("#{$str}", "#{$separator}") {
-    @return $str;
-  }
-
-  $str-list: ();
-
-  @while string.index("#{$str}", "#{$separator}") != null {
-    @if string.index("#{$str}", "#{$separator}") > 1 {
-      $str-list: list.append($str-list, string.slice("#{$str}", 1, string.index("#{$str}", "#{$separator}") - 1));
-    }
-
-    $str: string.slice("#{$str}", string.index("#{$str}", "#{$separator}") + 1, string.length("#{$str}"));
-  }
-
-  @if string.slice("#{$str}", 1, string.length("#{$str}")) != "" {
-    $str-list: list.append($str-list, string.slice("#{$str}", 1, string.length("#{$str}")));
-  }
-
-  @return $str-list;
-}
diff --git a/assets/sass/vendor/_reset.scss b/assets/sass/abstracts/_reset.scss
similarity index 58%
rename from assets/sass/vendor/_reset.scss
rename to assets/sass/abstracts/_reset.scss
index fe9abd32..5328f8bc 100644
--- a/assets/sass/vendor/_reset.scss
+++ b/assets/sass/abstracts/_reset.scss
@@ -1,3 +1,3 @@
 // Browser reset:
 // https://github.com/sindresorhus/modern-normalize
-@import "modern-normalize/modern-normalize.css";
+@import "~modern-normalize/modern-normalize.css";
diff --git a/assets/sass/abstracts/_responsive.scss b/assets/sass/abstracts/_responsive.scss
deleted file mode 100644
index b72c734b..00000000
--- a/assets/sass/abstracts/_responsive.scss
+++ /dev/null
@@ -1,32 +0,0 @@
-@use "../abstracts/settings";
-
-@use "../components/global";
-@use "../components/header";
-@use "../components/footer";
-@use "../components/content";
-
-@use "../pages/home";
-@use "../pages/list";
-@use "../pages/single";
-@use "../pages/videos";
-@use "../pages/etc";
-@use "../pages/projects";
-@use "../pages/contact";
-@use "../pages/fourOhFour";
-
-// Responsive Awesomeness
-@media screen and (max-width: settings.$responsive-width) {
-  @include global.responsive;
-  @include header.responsive;
-  @include footer.responsive;
-  @include content.responsive;
-
-  @include home.responsive;
-  @include list.responsive;
-  @include single.responsive;
-  @include videos.responsive;
-  @include etc.responsive;
-  @include projects.responsive;
-  @include contact.responsive;
-  @include fourOhFour.responsive;
-}
diff --git a/assets/sass/abstracts/_settings.scss b/assets/sass/abstracts/_settings.scss
index 9452b36f..f1e156b6 100644
--- a/assets/sass/abstracts/_settings.scss
+++ b/assets/sass/abstracts/_settings.scss
@@ -1,17 +1,18 @@
 @use "sass:list";
 
-// Web fonts
+// Web fonts:
 $webfont-sans: "Inter";
 $webfont-sans-variable: "Inter var";
 $webfont-mono: "Roboto Mono";
 $webfont-mono-variable: "Roboto Mono var";
 
-// System fonts
+// System fonts:
 // https://markdotto.com/2018/02/07/github-system-fonts/
 // stylelint-disable-next-line value-keyword-case
-$system-fonts-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji",
-  "Segoe UI Emoji", "Segoe UI Symbol";
+$system-fonts-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica", "Arial", sans-serif;
 $system-fonts-monospace: "SFMono-Regular", "Consolas", "Liberation Mono", "Menlo", "Courier", monospace;
+
+// Prefer web fonts with system fonts as backup:
 $font-stack-sans: list.join($webfont-sans, $system-fonts-sans);
 $font-stack-variable: list.join($webfont-sans-variable, $system-fonts-sans);
 $font-stack-mono: list.join($webfont-mono, $system-fonts-monospace);
@@ -23,12 +24,10 @@ $max-width: 865px;
 // Width at which to switch to mobile styles:
 $responsive-width: 800px;
 
-// Fancy link underline settings
+// Fancy link underline settings:
 $link-underline-opacity: 40%;
 $link-underline-size: 2px;
 $link-opacity-color: #ffffff;
 
 // Elements to fade on dark/light theme toggle:
-$theme-transition-elements: ("color", "background-color", "border-color");
 $theme-transition-duration: 0.15s;
-$theme-transition-function: linear;
diff --git a/assets/sass/abstracts/_themes.scss b/assets/sass/abstracts/_themes.scss
index c57f177f..43041c8e 100644
--- a/assets/sass/abstracts/_themes.scss
+++ b/assets/sass/abstracts/_themes.scss
@@ -1,43 +1,40 @@
 @use "sass:map";
-@use "sass:string";
 @use "sass:list";
+@use "sass:meta";
 
 @use "settings";
 @use "functions" as *;
 
-// Takes a single CSS property and theme key (see abstracts/_themes) and sets
-// both body.light and body.dark selectors.
-@mixin themed($property, $key, $moreTransitions: "") {
-  // allow root element (body) theming
-  $selectors: str-split("#{&}");
+// 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");
+@mixin themed($colors...) {
+  $selectors: "#{&}";
 
-  // fade colors on theme toggle
-  $transitions: ();
-  @each $element in settings.$theme-transition-elements {
-    $transitions: list.append(
-      $transitions,
-      string.unquote("#{$element} #{settings.$theme-transition-duration} #{settings.$theme-transition-function}")
-    );
-  }
-  @if $moreTransitions != "" {
-    // HACK: $moreTransitions is passed in and appended here because joining multiple transitions is hard :(
-    $transitions: list.append($transitions, string.unquote($moreTransitions));
-  }
-  @each $selector in $selectors {
-    @if $selector == "" {
-      // support root body element
-      $selector: "body";
-    }
-    @at-root #{$selector} {
-      transition: list.join($transitions, (), $separator: comma);
-    }
+  // keep track of each property we're theming
+  $properties: ();
+  @each $property, $color in meta.keywords($colors) {
+    $properties: list.append($properties, $property);
   }
 
-  // set the actual light/dark properties
+  // 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;
+
+  // add corresponding body.light and body.dark root selectors
   @each $theme, $map in $themes {
-    @each $selector in $selectors {
-      @at-root body.#{$theme} #{$selector} {
-        #{$property}: map.get($map, $key);
+    @at-root body.#{$theme} {
+      // support root body element
+      @if $selectors == "body" {
+        @each $property, $color in meta.keywords($colors) {
+          #{$property}: map.get($map, $color);
+        }
+      } @else {
+        #{$selectors} {
+          @each $property, $color in meta.keywords($colors) {
+            #{$property}: map.get($map, $color);
+          }
+        }
       }
     }
   }
diff --git a/assets/sass/components/_typography.scss b/assets/sass/abstracts/_typography.scss
similarity index 89%
rename from assets/sass/components/_typography.scss
rename to assets/sass/abstracts/_typography.scss
index 30949b0f..1bb367b4 100644
--- a/assets/sass/components/_typography.scss
+++ b/assets/sass/abstracts/_typography.scss
@@ -1,6 +1,6 @@
-@use "@fontsource/inter/scss/mixins" as Inter;
-@use "@fontsource/roboto-mono/scss/mixins" as RobotoMono;
-@use "@fontsource/comic-neue/scss/mixins" as ComicNeue;
+@use "~@fontsource/inter/scss/mixins" as Inter;
+@use "~@fontsource/roboto-mono/scss/mixins" as RobotoMono;
+@use "~@fontsource/comic-neue/scss/mixins" as ComicNeue;
 
 /*!
  * Inter typeface - https://rsms.me/inter/
diff --git a/assets/sass/components/_animation.scss b/assets/sass/components/_animation.scss
index 59babf10..4502ebd7 100644
--- a/assets/sass/components/_animation.scss
+++ b/assets/sass/components/_animation.scss
@@ -36,7 +36,7 @@
     }
     // stylelint-enable rule-empty-line-before
 
-    @include themes.themed(background-color, "medium-light");
+    @include themes.themed($background-color: "medium-light");
   }
 }
 
diff --git a/assets/sass/components/_content.scss b/assets/sass/components/_content.scss
index 0daeb4a5..381bd635 100644
--- a/assets/sass/components/_content.scss
+++ b/assets/sass/components/_content.scss
@@ -16,8 +16,7 @@ div#content {
     padding-left: 1.5em;
     border-left: 3px solid;
 
-    @include themes.themed(color, "medium-dark");
-    @include themes.themed(border-color, "links");
+    @include themes.themed($color: "medium-dark", $border-color: "links");
   }
 
   h2,
@@ -42,10 +41,10 @@ div#content {
         content: "\0023"; // pound sign
       }
 
-      @include themes.themed(color, "medium-light");
+      @include themes.themed($color: "medium-light");
 
       &:hover {
-        @include themes.themed(color, "links");
+        @include themes.themed($color: "links");
       }
     }
 
@@ -59,7 +58,7 @@ div#content {
     padding-bottom: 0.25em;
     border-bottom: 1px solid;
 
-    @include themes.themed(border-color, "kinda-light");
+    @include themes.themed($border-color: "kinda-light");
   }
 
   p.center {
@@ -81,7 +80,7 @@ div#content {
       line-height: 1.5;
       margin-top: 0.5em;
 
-      @include themes.themed(color, "medium");
+      @include themes.themed($color: "medium");
     }
   }
 
@@ -100,7 +99,7 @@ div#content {
     height: 2px;
     border: 0;
 
-    @include themes.themed(background-color, "light");
+    @include themes.themed($background-color: "light");
   }
 }
 
diff --git a/assets/sass/components/_embeds.scss b/assets/sass/components/_embeds.scss
index f398447b..ae3fd28f 100644
--- a/assets/sass/components/_embeds.scss
+++ b/assets/sass/components/_embeds.scss
@@ -50,3 +50,8 @@ div.embed {
     }
   }
 }
+
+// Responsive
+// stylelint-disable-next-line block-no-empty
+@mixin responsive() {
+}
diff --git a/assets/sass/components/_footer.scss b/assets/sass/components/_footer.scss
index 44dcae52..f98f7e66 100644
--- a/assets/sass/components/_footer.scss
+++ b/assets/sass/components/_footer.scss
@@ -8,11 +8,10 @@ footer {
   padding: 1.25em 1.5em;
   border-top: 1px solid;
 
-  @include themes.themed(color, "medium-dark");
-  @include themes.themed(border-color, "kinda-light");
+  @include themes.themed($color: "medium-dark", $border-color: "kinda-light");
 
   a {
-    @include themes.themed(color, "medium-dark");
+    @include themes.themed($color: "medium-dark");
   }
 
   div.footer-row {
@@ -30,7 +29,7 @@ footer {
     padding-bottom: 2px;
     border-bottom: 1px solid;
 
-    @include themes.themed(border-color, "light");
+    @include themes.themed($border-color: "light");
   }
 }
 
diff --git a/assets/sass/components/_global.scss b/assets/sass/components/_global.scss
index 4ea4d43d..83977e4c 100644
--- a/assets/sass/components/_global.scss
+++ b/assets/sass/components/_global.scss
@@ -19,6 +19,8 @@ body {
   font-size: 0.975em;
   line-height: 1.5;
 
+  @include themes.themed($background-color: "background-outer");
+
   // set themed lightbulb icons manually
   &.light button.dark-mode-toggle {
     background-image: url(themes.$icon-bulb-on);
@@ -29,9 +31,6 @@ body {
   }
 }
 
-// need to set light/dark mode backgrounds outside of the body selector
-@include themes.themed(background-color, "background-outer");
-
 code,
 pre,
 .monospace {
@@ -70,8 +69,7 @@ main {
   width: 100%;
   padding: 0 1.5em;
 
-  @include themes.themed(color, "text");
-  @include themes.themed(background-color, "background-inner");
+  @include themes.themed($color: "text", $background-color: "background-inner");
 
   a {
     background-position: 0% 100%;
@@ -79,7 +77,12 @@ main {
     background-size: 0% settings.$link-underline-size;
     padding-bottom: settings.$link-underline-size;
 
-    @include themes.themed(color, "links", ("background-size 0.25s ease-in-out"));
+    @include themes.themed($color: "links");
+
+    // TODO: overriding transition-property from themed() -- very hacky
+    transition-property: color, background-size;
+    transition-duration: #{settings.$theme-transition-duration}, 0.25s;
+    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/
diff --git a/assets/sass/components/_header.scss b/assets/sass/components/_header.scss
index 23538c11..b2f35cf8 100644
--- a/assets/sass/components/_header.scss
+++ b/assets/sass/components/_header.scss
@@ -7,7 +7,7 @@ header {
   padding: 0.7em 1.5em;
   border-bottom: 1px solid;
 
-  @include themes.themed(border-color, "kinda-light");
+  @include themes.themed($border-color: "kinda-light");
 
   nav {
     width: 100%;
@@ -21,7 +21,7 @@ header {
       display: flex;
       align-items: center;
 
-      @include themes.themed(color, "medium-dark");
+      @include themes.themed($color: "medium-dark");
 
       img#header-selfie {
         width: 50px;
@@ -30,7 +30,7 @@ header {
         border-radius: 50%;
         user-select: none;
 
-        @include themes.themed(border-color, "light");
+        @include themes.themed($border-color: "light");
       }
 
       span#header-name {
@@ -41,7 +41,7 @@ header {
       }
 
       &:hover {
-        @include themes.themed(color, "links");
+        @include themes.themed($color: "links");
 
         img#header-selfie {
           opacity: 90%;
@@ -64,12 +64,20 @@ header {
           display: inline-flex;
           will-change: transform;
 
-          @include themes.themed(color, "medium-dark", ("transform 0.15s ease-in-out"));
+          @include themes.themed($color: "medium-dark");
+
+          // TODO: overriding transition-property from themed() -- very hacky
+          transition-property: color, transform;
+          transition-timing-function: linear, ease-in-out;
 
           &:hover {
             transform: scale(1.1);
 
-            @include themes.themed(color, "links", ("transform 0.15s ease-in-out"));
+            @include themes.themed($color: "links");
+
+            // TODO: overriding transition-property from themed() -- very hacky
+            transition-property: color, transform;
+            transition-timing-function: linear, ease-in-out;
           }
 
           span {
diff --git a/assets/sass/components/_syntax.scss b/assets/sass/components/_syntax.scss
index 6eb15a01..833ef5c7 100644
--- a/assets/sass/components/_syntax.scss
+++ b/assets/sass/components/_syntax.scss
@@ -64,7 +64,7 @@ div.highlight-clipboard-enabled {
     line-height: 1;
 
     &:hover {
-      @include themes.themed(color, "links");
+      @include themes.themed($color: "links");
     }
   }
 }
diff --git a/assets/sass/main.scss b/assets/sass/main.scss
index a9880e1a..8be364fd 100644
--- a/assets/sass/main.scss
+++ b/assets/sass/main.scss
@@ -1,8 +1,10 @@
 @charset "UTF-8";
 
+@use "abstracts/settings";
+
 // Global Styles
-@use "vendor/reset";
-@use "components/typography";
+@use "abstracts/reset";
+@use "abstracts/typography";
 @use "components/global";
 @use "components/header";
 @use "components/footer";
@@ -23,5 +25,20 @@
 @use "components/syntax";
 @use "components/animation";
 
-// Responsive Mixins
-@use "abstracts/responsive";
+// Responsive Awesomeness
+@media screen and (max-width: settings.$responsive-width) {
+  @include global.responsive;
+  @include header.responsive;
+  @include footer.responsive;
+  @include content.responsive;
+  @include embeds.responsive;
+
+  @include home.responsive;
+  @include list.responsive;
+  @include single.responsive;
+  @include videos.responsive;
+  @include etc.responsive;
+  @include projects.responsive;
+  @include contact.responsive;
+  @include fourOhFour.responsive;
+}
diff --git a/assets/sass/pages/_contact.scss b/assets/sass/pages/_contact.scss
index 6e3a5f70..45636e77 100644
--- a/assets/sass/pages/_contact.scss
+++ b/assets/sass/pages/_contact.scss
@@ -34,9 +34,7 @@ div.layout-contact {
     border-radius: 0.3em;
     font-size: 0.9em;
 
-    @include themes.themed(color, "text");
-    @include themes.themed(background-color, "super-duper-light");
-    @include themes.themed(border-color, "light");
+    @include themes.themed($color: "text", $background-color: "super-duper-light", $border-color: "light");
   }
 
   textarea {
@@ -60,13 +58,11 @@ div.layout-contact {
       line-height: 1.5;
       user-select: none;
 
-      @include themes.themed(color, "text");
-      @include themes.themed(background-color, "kinda-light");
+      @include themes.themed($color: "text", $background-color: "kinda-light");
 
       &:hover,
       &:focus {
-        @include themes.themed(color, "super-duper-light");
-        @include themes.themed(background-color, "links");
+        @include themes.themed($color: "super-duper-light", $background-color: "links");
       }
 
       img.emoji {
@@ -80,11 +76,11 @@ div.layout-contact {
       font-weight: 600;
 
       &#contact-form-result-success {
-        @include themes.themed(color, "success");
+        @include themes.themed($color: "success");
       }
 
       &#contact-form-result-error {
-        @include themes.themed(color, "error");
+        @include themes.themed($color: "error");
       }
     }
   }
diff --git a/assets/sass/pages/_home.scss b/assets/sass/pages/_home.scss
index e7819466..8ee09dae 100644
--- a/assets/sass/pages/_home.scss
+++ b/assets/sass/pages/_home.scss
@@ -184,7 +184,7 @@ div.layout-home {
     }
 
     &#shh {
-      @include themes.themed(color, "medium-light");
+      @include themes.themed($color: "medium-light");
     }
 
     &.wave {
diff --git a/assets/sass/pages/_list.scss b/assets/sass/pages/_list.scss
index b0b284b4..d0d7adf7 100644
--- a/assets/sass/pages/_list.scss
+++ b/assets/sass/pages/_list.scss
@@ -32,7 +32,7 @@ div.layout-list {
         width: 5.25em;
         flex-shrink: 0;
 
-        @include themes.themed(color, "medium");
+        @include themes.themed($color: "medium");
       }
 
       &:last-child {
diff --git a/assets/sass/pages/_projects.scss b/assets/sass/pages/_projects.scss
index d15a238c..f84f41fe 100644
--- a/assets/sass/pages/_projects.scss
+++ b/assets/sass/pages/_projects.scss
@@ -42,8 +42,7 @@ div.layout-projects {
       border-radius: 0.5em;
       font-size: 0.9em;
 
-      @include themes.themed(color, "medium-dark");
-      @include themes.themed(border-color, "kinda-light");
+      @include themes.themed($color: "medium-dark", $border-color: "kinda-light");
 
       a.repo-name {
         font-size: 1.2em;
@@ -64,7 +63,7 @@ div.layout-projects {
           margin-right: 1.5em;
           font-size: 0.925em;
 
-          @include themes.themed(color, "medium");
+          @include themes.themed($color: "medium");
 
           svg {
             display: inline-block;
diff --git a/assets/sass/pages/_single.scss b/assets/sass/pages/_single.scss
index aed3024f..fa9830d8 100644
--- a/assets/sass/pages/_single.scss
+++ b/assets/sass/pages/_single.scss
@@ -13,7 +13,7 @@ div.layout-single {
     line-height: 2.3;
     letter-spacing: 0.04em;
 
-    @include themes.themed(color, "medium");
+    @include themes.themed($color: "medium");
 
     a {
       color: inherit;
@@ -65,7 +65,7 @@ div.layout-single {
           content: "#"; // cosmetically hashtagify tags
           padding-right: 0.125em;
 
-          @include themes.themed(color, "light");
+          @include themes.themed($color: "light");
         }
 
         &:last-of-type {
diff --git a/assets/sass/pages/_videos.scss b/assets/sass/pages/_videos.scss
index 95a705a2..4fb2b690 100644
--- a/assets/sass/pages/_videos.scss
+++ b/assets/sass/pages/_videos.scss
@@ -11,7 +11,7 @@ div.layout-video {
     line-height: 1.5;
     margin: 1.25em 1em 0.5em 1em;
 
-    @include themes.themed(color, "medium-light");
+    @include themes.themed($color: "medium-light");
 
     a {
       font-weight: bold;
diff --git a/yarn.lock b/yarn.lock
index a77fa3a8..0b6f54c4 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -5932,9 +5932,9 @@ keyv@3.0.0:
     json-buffer "3.0.0"
 
 keyv@^4.0.0:
-  version "4.0.3"
-  resolved "https://registry.yarnpkg.com/keyv/-/keyv-4.0.3.tgz#4f3aa98de254803cafcd2896734108daa35e4254"
-  integrity sha512-zdGa2TOpSZPq5mU6iowDARnMBZgtCqJ11dJROFi6tg6kTn4nuUdU09lFyLFSaHrWqpIJ+EBq4E8/Dc0Vx5vLdA==
+  version "4.0.4"
+  resolved "https://registry.yarnpkg.com/keyv/-/keyv-4.0.4.tgz#f040b236ea2b06ed15ed86fbef8407e1a1c8e376"
+  integrity sha512-vqNHbAc8BBsxk+7QBYLW0Y219rWcClspR6WSeoHYKG5mnsSoOH+BL1pWq02DDCVdvvuUny5rkBlzMRzoqc+GIg==
   dependencies:
     json-buffer "3.0.1"