diff --git a/package-lock.json b/package-lock.json
index 7ab90114..d96c9241 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "coryd.dev",
-  "version": "24.5.4",
+  "version": "24.5.6",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "coryd.dev",
-      "version": "24.5.4",
+      "version": "24.5.6",
       "license": "MIT",
       "dependencies": {
         "@cdransf/api-text": "^1.5.0",
@@ -1973,9 +1973,9 @@
       }
     },
     "node_modules/finalhandler": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/finalhandler/-/finalhandler-1.2.0.tgz",
-      "integrity": "sha512-5uXcUVftlQMFnWC9qu/svkWv3GTd2PfUhK/3PLkYNAe7FbqJMt3515HaxE6eRL74GdsriiwujiawdaB1BpEISg==",
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/finalhandler/-/finalhandler-1.2.1.tgz",
+      "integrity": "sha512-NpHDfiu6jURpO56pYkM6DEvnBEA9jNrwj4v05Vjs5hmdqEB2/kRA3wugct7BMyqYydjN+kWunMhtTn+itVmxpA==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
diff --git a/package.json b/package.json
index f33f6e0d..4d04908e 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "coryd.dev",
-  "version": "24.5.4",
+  "version": "24.5.6",
   "description": "The source for my personal site. Built using 11ty (and other tools).",
   "type": "module",
   "scripts": {
diff --git a/src/assets/styles/base/index.css b/src/assets/styles/base/index.css
index 81e04b38..3300f5ea 100644
--- a/src/assets/styles/base/index.css
+++ b/src/assets/styles/base/index.css
@@ -49,7 +49,7 @@ body::-webkit-scrollbar {
 }
 
 p {
-  margin: var(--margin-top-base-horizontal-zero);
+  margin: var(--margin-vertical-base-horizontal-zero);
 
   &.books,
   &.concerts,
@@ -79,20 +79,20 @@ p {
   & a {
     text-decoration: underline;
     text-decoration-style: dashed;
-    text-underline-offset: var(--sizing-xs);
+    text-underline-offset: var(--spacing-xs);
   }
 }
 
 blockquote {
   font-size: var(--font-size-lg);
   color: var(--gray-dark);
-  padding-left: var(--sizing-lg);
+  padding-left: var(--spacing-lg);
   border-left: var(--sizing-xs) solid var(--gray-dark);
-  margin: var(--margin-top-base-horizontal-zero);
+  margin: var(--margin-vertical-base-horizontal-zero);
 }
 
 code {
-  padding: var(--padding-xs);
+  padding: var(--spacing-xs);
   color: var(--text-color-inverted);
   background-color: var(--background-color-inverted);
   border-radius: var(--border-radius-slight);
@@ -107,7 +107,7 @@ p:not(.flex-centered):not(.banner p) > svg {
 }
 
 :is(h1, h2, h3, h4, h5, h6):has(svg) {
-  gap: var(--sizing-xs)
+  gap: var(--spacing-xs)
 }
 
 strong,
@@ -201,7 +201,7 @@ a:active,
 :is(a):has(svg) {
   display: inline-flex;
   align-items: center;
-  gap: var(--sizing-xs);
+  gap: var(--spacing-xs);
 
   & svg {
     stroke: var(--accent-color);
@@ -218,7 +218,7 @@ a:active,
 h1, h2, h3, h4, h5, h6 {
   font-weight: var(--font-weight-bold);
   line-height: var(--line-height-reduced);
-  margin: var(--margin-top-base-horizontal-zero);
+  margin: var(--margin-vertical-base-horizontal-zero);
 }
 
 h1 { font-size: var(--font-size-2xl); }
@@ -230,7 +230,7 @@ h6 { font-size: var(--font-size-sm); }
 
 .section-header-wrapper {
   justify-content: space-between;
-  margin: var(--sizing-xl) 0 var(--sizing-lg);
+  margin: var(--spacing-xl) 0 var(--spacing-lg);
 
   & .section-header {
     margin: 0;
@@ -238,11 +238,11 @@ h6 { font-size: var(--font-size-sm); }
 }
 
 .section-header {
-  margin: var(--sizing-xl) 0 var(--sizing-lg);
+  margin: var(--spacing-xl) 0 var(--spacing-lg);
   line-height: 1;
 
   &.posts {
-    margin: 0 0 var(--sizing-lg);
+    margin: 0 0 var(--spacing-lg);
   }
 }
 
@@ -251,7 +251,7 @@ hr {
   height: 1px;
   background-color: var(--gray-light);
   border: 0;
-  margin: var(--margin-top-base-horizontal-zero);
+  margin: var(--margin-vertical-base-horizontal-zero);
 
   & + .section-header {
     margin-top: 0;
@@ -288,7 +288,7 @@ tr:not(:last-child) {
 
 th,
 td {
-  padding: var(--padding-sm);
+  padding: var(--spacing-sm);
   min-width: max-content;
   word-break: break-word;
   width: 100%;
@@ -314,7 +314,7 @@ td {
 }
 
 td {
-  min-width: calc(var(--sizing-3xl) * 2);
+  min-width: calc(var(--spacing-3xl) * 2);
 
   &:first-child {
     background-color: var(--background-color);
@@ -335,7 +335,7 @@ th {
 /* header */
 .main-title {
   width: 100%;
-  padding-top: var(--sizing-3xl);
+  padding-top: var(--spacing-3xl);
   display: flex;
   flex-direction: row;
   align-items: center;
@@ -358,7 +358,7 @@ th {
 
 /* layout */
 .default-wrapper {
-  padding-top: var(--sizing-2xl);
+  padding-top: var(--spacing-2xl);
 
   & .posts-wrapper article:last-of-type,
   & .article-widget-wrapper:last-of-type {
@@ -370,7 +370,7 @@ th {
   }
 
   & > a + h2 {
-    margin-top: var(--sizing-base);
+    margin-top: var(--spacing-base);
   }
 }
 
@@ -389,7 +389,7 @@ main {
 
 .status,
 article {
-  margin-bottom: var(--sizing-base);
+  margin-bottom: var(--spacing-base);
 }
 
 .status,
@@ -403,7 +403,7 @@ article {
 
 .article-widget-wrapper {
   border-bottom: 1px solid var(--gray-light);
-  margin-bottom: var(--sizing-base);
+  margin-bottom: var(--spacing-base);
 
   & article {
     border-bottom: none;
@@ -412,14 +412,14 @@ article {
 
 footer {
   & p:first-of-type {
-    margin: var(--sizing-3xl) 0 var(--sizing-lg);
+    margin: var(--spacing-3xl) 0 var(--spacing-lg);
     font-size: var(--font-size-sm);
   }
 
   & nav {
     &.social {
-      gap: var(--sizing-md);
-      margin-bottom: var(--sizing-lg);
+      gap: var(--spacing-md);
+      margin-bottom: var(--spacing-lg);
       width: 100%;
 
       & svg {
@@ -433,11 +433,11 @@ footer {
 
     &.sub-pages {
       font-size: var(--font-size-sm);
-      padding-bottom: var(--sizing-3xl);
+      padding-bottom: var(--spacing-3xl);
 
       & span:not(.active) {
-        margin-left: var(--sizing-sm);
-        margin-right: var(--sizing-sm);
+        margin-left: var(--spacing-sm);
+        margin-right: var(--spacing-sm);
       }
     }
   }
@@ -458,19 +458,19 @@ article {
     display: block;
     color: var(--gray-dark);
     font-size: var(--font-size-sm);
-    margin-right: var(--sizing-xs);
+    margin-right: var(--spacing-xs);
   }
 }
 
 /* lists */
 ul, ol {
   list-style-position: inside;
-  margin: var(--margin-top-base-horizontal-zero);
-  padding-left: var(--sizing-base);
+  margin: var(--margin-vertical-base-horizontal-zero);
+  padding-left: var(--spacing-base);
 
   & li {
-    margin-top: var(--sizing-lg);
-    margin-bottom: var(--sizing-lg);
+    margin-top: var(--spacing-lg);
+    margin-bottom: var(--spacing-lg);
   }
 }
 
@@ -486,7 +486,7 @@ ul, ol {
 .highlight-text {
   color: var(--color-lightest);
   background-color: var(--accent-color);
-  padding: var(--padding-xs);
+  padding: var(--spacing-xs);
   border-radius: var(--border-radius-slight);
 }
 
diff --git a/src/assets/styles/components/badge-grid.css b/src/assets/styles/components/badge-grid.css
index b5c06ee0..157e3f83 100644
--- a/src/assets/styles/components/badge-grid.css
+++ b/src/assets/styles/components/badge-grid.css
@@ -1,8 +1,8 @@
 .badge-grid {
   display: grid;
-  gap: var(--sizing-md);
+  gap: var(--spacing-md);
   grid-template-columns: repeat(3, 1fr);
-  margin-top: var(--sizing-2xl);
+  margin-top: var(--spacing-2xl);
 
   & > * {
     display: flex;
diff --git a/src/assets/styles/components/banners.css b/src/assets/styles/components/banners.css
index 0551039e..a6e07e9a 100644
--- a/src/assets/styles/components/banners.css
+++ b/src/assets/styles/components/banners.css
@@ -1,15 +1,15 @@
 * + .banner,
 :not(* + .banner) .banner:first-of-type {
-  margin-top: var(--sizing-base);
+  margin-top: var(--spacing-base);
 }
 
 .banner:has(+ *),
 :not(* + .banner) .banner:last-of-type {
-  margin-bottom: var(--sizing-base);
+  margin-bottom: var(--spacing-base);
 }
 
 .banner {
-  padding: var(--padding-md);
+  padding: var(--spacing-md);
   border: 1px solid;
   border-radius: var(--border-radius-slight);
 
@@ -27,7 +27,7 @@
       vertical-align: middle;
       height: var(--sizing-lg);
       width: var(--sizing-lg);
-      margin-right: var(--sizing-sm);
+      margin-right: var(--spacing-sm);
     }
   }
 
diff --git a/src/assets/styles/components/buttons.css b/src/assets/styles/components/buttons.css
index 38320198..f30e464b 100644
--- a/src/assets/styles/components/buttons.css
+++ b/src/assets/styles/components/buttons.css
@@ -13,7 +13,7 @@ button,
   &:not(.theme-toggle) {
     border: 2px solid var(--accent-color);
     border-radius: var(--border-radius-full);
-    padding: var(--sizing-xs) var(--sizing-md);
+    padding: var(--spacing-xs) var(--spacing-md);
     cursor: pointer;
     display: inline-flex;
     flex-direction: row;
@@ -42,7 +42,7 @@ button,
   &:not(.theme-toggle, .active):focus-within {
     transition-property: none;
     outline: var(--outline-default);
-    padding: calc(var(--sizing-xs) + 2px) calc(var(--sizing-md) + 2px);
+    padding: calc(var(--spacing-xs) + 2px) calc(var(--spacing-md) + 2px);
     border: 0;
   }
 
diff --git a/src/assets/styles/components/forms.css b/src/assets/styles/components/forms.css
index 3c585e90..96ade4e4 100644
--- a/src/assets/styles/components/forms.css
+++ b/src/assets/styles/components/forms.css
@@ -15,7 +15,7 @@ textarea {
   background-color: var(--background-color);
   border: var(--border-default);
   border-radius: var(--border-radius-slight);
-  padding: var(--padding-sm);
+  padding: var(--spacing-sm);
   width: 100%;
 }
 
@@ -25,14 +25,14 @@ input[type="email"]:has(+ *),
 input[type="search"]:has(+ *),
 textarea:has(+ *),
 form:has(+ *) {
-  margin-bottom: var(--sizing-base);
+  margin-bottom: var(--spacing-base);
 }
 
 input:focus,
 input:focus-within,
 textarea:focus,
 textarea:focus-within {
-  padding: calc(var(--sizing-sm) + 1px);
+  padding: calc(var(--spacing-sm) + 1px);
 }
 
 input:focus,
@@ -50,7 +50,7 @@ select {
   border: 1px solid var(--text-color);
   border-radius: var(--border-radius-slight);
   background-color: var(--background-color);
-  padding: var(--sizing-xs) var(--sizing-sm);
+  padding: var(--spacing-xs) var(--spacing-sm);
 }
 
 .search__form {
@@ -58,11 +58,11 @@ select {
 }
 
 .search__results {
-  margin: 0 0 var(--sizing-base);
+  margin: 0 0 var(--spacing-base);
   padding: 0;
   list-style: none;
 
   & li {
-    margin: var(--sizing-sm) 0;
+    margin: var(--spacing-sm) 0;
   }
 }
\ No newline at end of file
diff --git a/src/assets/styles/components/media-grid.css b/src/assets/styles/components/media-grid.css
index b04d45b1..7ef336b6 100644
--- a/src/assets/styles/components/media-grid.css
+++ b/src/assets/styles/components/media-grid.css
@@ -5,8 +5,8 @@
 
 .media-grid {
   display: grid;
-  gap: var(--sizing-sm);
-  margin-bottom: var(--sizing-base);
+  gap: var(--spacing-sm);
+  margin-bottom: var(--spacing-base);
 
   &.no-pagination {
     margin-bottom: 0;
@@ -77,8 +77,8 @@
   & .meta-text {
     position: absolute;
     z-index: 2;
-    padding: 0 var(--sizing-sm);
-    bottom: var(--sizing-sm);
+    padding: 0 var(--spacing-sm);
+    bottom: var(--spacing-sm);
     width: 100%;
     box-sizing: border-box;
 
diff --git a/src/assets/styles/components/menu.css b/src/assets/styles/components/menu.css
index 79476a9f..8915a8e9 100644
--- a/src/assets/styles/components/menu.css
+++ b/src/assets/styles/components/menu.css
@@ -4,7 +4,7 @@
   list-style: none;
   margin: 0;
   padding: 0;
-  gap: var(--sizing-md);
+  gap: var(--spacing-md);
 
   & > li {
     margin: 0;
@@ -25,7 +25,7 @@
 .menu-button-container {
   display: none;
   outline: none;
-  margin-left: var(--sizing-md);
+  margin-left: var(--spacing-md);
 
   & svg {
     cursor: pointer;
@@ -75,7 +75,7 @@
     top: 0;
     left: 0;
     gap: 0;
-    margin-top: calc(var(--sizing-3xl) * 2.25);
+    margin-top: calc(var(--spacing-3xl) * 2.25);
     flex-direction: column;
     width: 100%;
     z-index: 3;
@@ -85,7 +85,7 @@
       align-items: center;
       justify-content: center;
       margin: 0;
-      padding: var(--sizing-sm) 0;
+      padding: var(--spacing-sm) 0;
       width: 100%;
       color: var(--text-color);
       background: var(--background-color);
diff --git a/src/assets/styles/components/modal.css b/src/assets/styles/components/modal.css
index 95d47e03..8cdf1c52 100644
--- a/src/assets/styles/components/modal.css
+++ b/src/assets/styles/components/modal.css
@@ -14,12 +14,12 @@
     inset: 0;
     overflow: scroll;
     border-radius: var(--border-radius-slight);
-    padding: var(--sizing-lg) var(--sizing-2xl);
+    padding: var(--spacing-lg) var(--spacing-2xl);
 
     & .modal-close {
       position: absolute;
-      top: var(--sizing-lg);
-      right: var(--sizing-lg);
+      top: var(--spacing-lg);
+      right: var(--spacing-lg);
       height: var(--sizing-svg-base);
       width: var(--sizing-svg-base);
     }
diff --git a/src/assets/styles/components/music-chart.css b/src/assets/styles/components/music-chart.css
index 3aa4138f..9d74638f 100644
--- a/src/assets/styles/components/music-chart.css
+++ b/src/assets/styles/components/music-chart.css
@@ -1,5 +1,5 @@
 .music-chart {
-  margin-bottom: var(--sizing-base);
+  margin-bottom: var(--spacing-base);
 
   & ol {
     padding-left: 0;
@@ -17,11 +17,11 @@
     align-items: start;
 
     &:not(:last-of-type) {
-      margin-bottom: var(--sizing-md);
+      margin-bottom: var(--spacing-md);
     }
 
     & .progress-bar-wrapper {
-      margin-top: var(--sizing-sm);
+      margin-top: var(--spacing-sm);
       max-width: 40%;
     }
 
@@ -39,7 +39,7 @@
     & .meta,
     & .presentation {
       justify-content: start;
-      gap: var(--sizing-md);
+      gap: var(--spacing-md);
     }
 
     & .meta {
@@ -91,16 +91,16 @@
     }
 
     & .timestamp {
-      margin-top: var(--sizing-sm);
+      margin-top: var(--spacing-sm);
       margin-left: 0;
     }
   }
 
   &.grid {
     display: grid;
-    gap: var(--sizing-sm);
+    gap: var(--spacing-sm);
     grid-template-columns: repeat(2, 1fr);
-    margin-bottom: var(--sizing-base);
+    margin-bottom: var(--spacing-base);
 
     & .item .meta {
       max-width: 80%;
@@ -142,7 +142,7 @@
       }
 
       & .timestamp {
-        margin-left: var(--sizing-lg);
+        margin-left: var(--spacing-lg);
         text-align: right;
         white-space: nowrap;
       }
@@ -152,7 +152,7 @@
       }
 
       & .progress-bar-wrapper {
-        margin-left: var(--sizing-lg);
+        margin-left: var(--spacing-lg);
       }
     }
 
diff --git a/src/assets/styles/components/progress-bar.css b/src/assets/styles/components/progress-bar.css
index bddfd543..38421546 100644
--- a/src/assets/styles/components/progress-bar.css
+++ b/src/assets/styles/components/progress-bar.css
@@ -4,9 +4,9 @@
   width: 100%;
   background-color: rgba(217, 222, 228, .6);
   border-radius: var(--border-radius-full);
-  overflow: hidden;
 
   & .progress-bar {
     background-color: var(--accent-color);
+    border-radius: var(--border-radius-full);
   }
 }
\ No newline at end of file
diff --git a/src/assets/styles/components/tab-buttons.css b/src/assets/styles/components/tab-buttons.css
index 36771b37..09db3feb 100644
--- a/src/assets/styles/components/tab-buttons.css
+++ b/src/assets/styles/components/tab-buttons.css
@@ -10,11 +10,11 @@
 
 input[id="tracks-recent"] ~ [for="tracks-recent"],
 input[id="tracks-window"] ~ [for="tracks-window"] {
-  margin-bottom: var(--sizing-base);
+  margin-bottom: var(--spacing-base);
 }
 
 input[id="tracks-recent"] ~ [for="tracks-recent"]:has(+ [for="tracks-window"]) {
-  margin-right: var(--sizing-xs);
+  margin-right: var(--spacing-xs);
 }
 
 #tracks-recent:not(:checked) ~ [for="tracks-recent"]:hover,
diff --git a/src/assets/styles/components/text-toggle.css b/src/assets/styles/components/text-toggle.css
index 558be6d7..b1bf05f7 100644
--- a/src/assets/styles/components/text-toggle.css
+++ b/src/assets/styles/components/text-toggle.css
@@ -3,7 +3,7 @@
     position: relative;
     height: 500px;
     overflow: hidden;
-    margin: var(--margin-top-base-horizontal-zero);
+    margin: var(--margin-vertical-base-horizontal-zero);
 
     & p:first-of-type {
       margin-top: 0;
@@ -22,6 +22,6 @@
   }
 
   & + button[data-toggle-button]:has(+ *) {
-    margin: 0 0 var(--sizing-base);
+    margin: 0 0 var(--spacing-base);
   }
 }
\ No newline at end of file
diff --git a/src/assets/styles/components/theme-toggle.css b/src/assets/styles/components/theme-toggle.css
index bd035995..908a6909 100644
--- a/src/assets/styles/components/theme-toggle.css
+++ b/src/assets/styles/components/theme-toggle.css
@@ -2,7 +2,7 @@ theme-toggle {
   display: flex;
   width: var(--sizing-svg-base);
   height: var(--sizing-svg-base);
-  margin-left: var(--sizing-md);
+  margin-left: var(--spacing-md);
 }
 
 .theme-toggle {
diff --git a/src/assets/styles/defaults/vars.css b/src/assets/styles/defaults/vars.css
index 9991ef6a..ecb35f27 100644
--- a/src/assets/styles/defaults/vars.css
+++ b/src/assets/styles/defaults/vars.css
@@ -108,12 +108,16 @@
   --sizing-svg-sm: 18px;
   --sizing-svg-base: 24px;
 
-  --padding-xs: var(--sizing-xs);
-  --padding-sm: var(--sizing-sm);
-  --padding-md: var(--sizing-md);
-  --padding-lg: var(--sizing-lg);
+  --spacing-xs: var(--sizing-xs);
+  --spacing-sm: var(--sizing-sm);
+  --spacing-md: var(--sizing-md);
+  --spacing-lg: var(--sizing-lg);
+  --spacing-base: var(--sizing-base);
+  --spacing-xl: var(--sizing-xl);
+  --spacing-2xl: var(--sizing-2xl);
+  --spacing-3xl: var(--sizing-3xl);
 
-  --margin-top-base-horizontal-zero: var(--sizing-base) 0;
+  --margin-vertical-base-horizontal-zero: var(--spacing-base) 0;
 
   /* radii */
   --border-radius-slight: var(--sizing-xs);
diff --git a/src/assets/styles/feed.xsl b/src/assets/styles/feed.xsl
index 364bffbc..f84b8e03 100644
--- a/src/assets/styles/feed.xsl
+++ b/src/assets/styles/feed.xsl
@@ -18,12 +18,16 @@
             --sizing-2xl: 2rem;
             --sizing-3xl: 2.25rem;
 
-            --padding-xs: var(--sizing-xs);
-            --padding-sm: var(--sizing-sm);
-            --padding-md: var(--sizing-md);
-            --padding-lg: var(--sizing-lg);
+            --spacing-xs: var(--sizing-xs);
+            --spacing-sm: var(--sizing-sm);
+            --spacing-md: var(--sizing-md);
+            --spacing-lg: var(--sizing-lg);
+            --spacing-base: var(--sizing-base);
+            --spacing-xl: var(--sizing-xl);
+            --spacing-2xl: var(--sizing-2xl);
+            --spacing-3xl: var(--sizing-3xl);
 
-            --margin-top-base-horizontal-zero: var(--sizing-base) 0;
+            --margin-vertical-base-horizontal-zero: var(--sizing-base) 0;
 
             --border-radius-slight: var(--sizing-xs);
             --border-radius-full: 9999px;
@@ -169,7 +173,7 @@
           }
 
           main footer {
-            margin-bottom: var(--sizing-base);
+            margin-bottom: var(--spacing-base);
           }
 
           main footer hr {
@@ -177,7 +181,7 @@
           }
 
           .default-wrapper {
-            padding-top: var(--sizing-2xl);
+            padding-top: var(--spacing-2xl);
           }
 
           .default-wrapper > p:first-of-type {
@@ -185,7 +189,7 @@
           }
 
           .main-title {
-            padding-top: var(--sizing-3xl);
+            padding-top: var(--spacing-3xl);
           }
 
           .main-title h1 {
@@ -205,7 +209,7 @@
           h1, h2, h3 {
             font-weight: var(--font-weight-bold);
             line-height: var(--line-height-reduced);
-            margin-bottom: var(--sizing-base);
+            margin-bottom: var(--spacing-base);
           }
 
           a {
@@ -243,13 +247,13 @@
           }
 
           .item {
-            padding: var(--margin-top-base-horizontal-zero);
+            padding: var(--spacing-base) 0;
             border-bottom: 1px solid var(--border-color);
           }
 
           .item h3 {
             margin-top: 0;
-            margin-bottom: var(--sizing-base);
+            margin-bottom: var(--spacing-base);
           }
 
           .item p:first-of-type {
@@ -270,17 +274,17 @@
             width: 100%;
             height: auto;
             display: block;
-            margin-top: var(--sizing-base);
+            margin-top: var(--spacing-base);
           }
 
           p {
-            margin-bottom: var(--sizing-base)
+            margin-bottom: var(--spacing-base)
           }
 
           p a {
             text-decoration: underline;
             text-decoration-style: dashed;
-            text-underline-offset: var(--sizing-xs);
+            text-underline-offset: var(--spacing-xs);
           }
 
           p:last-of-type {
@@ -296,28 +300,28 @@
             font-size: var(--font-size-lg);
             word-break: break-word;
             color: var(--gray-dark);
-            padding-left: var(--sizing-lg);
+            padding-left: var(--spacing-lg);
             border-left: var(--sizing-xs) solid var(--gray-dark);
-            margin: var(--margin-top-base-horizontal-zero);
+            margin: var(--margin-vertical-base-horizontal-zero);
           }
 
           hr {
             height: 1px;
             background-color: var(--border-color);
             border: 0;
-            margin: var(--margin-top-base-horizontal-zero);
+            margin: var(--margin-vertical-base-horizontal-zero);
           }
 
           .highlight-text {
             color: var(--color-lightest);
             background-color: var(--accent-color);
-            padding: var(--padding-xs);
+            padding: var(--spacing-xs);
           }
 
           pre {
-            padding: var(--sizing-base);
+            padding: var(--spacing-base);
             overflow: auto;
-            margin: var(--margin-top-base-horizontal-zero);
+            margin: var(--margin-vertical-base-horizontal-zero);
             font-size: var(--body-font-size);
           }
 
@@ -346,7 +350,7 @@
           }
 
           pre.small {
-            padding: var(--padding-md);
+            padding: var(--spacing-md);
           }
 
           @media screen and (min-width: 768px) {
diff --git a/src/assets/styles/pages/about.css b/src/assets/styles/pages/about.css
index 1b3e18cb..2440a15a 100644
--- a/src/assets/styles/pages/about.css
+++ b/src/assets/styles/pages/about.css
@@ -3,7 +3,7 @@
 }
 
 .avatar-wrapper {
-  margin-bottom: var(--sizing-sm);
+  margin-bottom: var(--spacing-sm);
   width: 100%;
   justify-content: center;
 
diff --git a/src/assets/styles/pages/books.css b/src/assets/styles/pages/books.css
index 5c8bf161..9fa6c2f0 100644
--- a/src/assets/styles/pages/books.css
+++ b/src/assets/styles/pages/books.css
@@ -2,7 +2,7 @@
   display: flex;
   flex-direction: column;
   align-items: center;
-  gap: var(--sizing-sm);
+  gap: var(--spacing-sm);
 
   &:last-of-type {
     border-bottom: 0;
@@ -64,7 +64,7 @@
   & .book-meta {
     display: flex;
     flex-direction: column;
-    gap: var(--sizing-sm);
+    gap: var(--spacing-sm);
 
     & p {
       &.title {
@@ -91,15 +91,15 @@
 }
 
 .book-focus {
-  margin-top: var(--sizing-base);
+  margin-top: var(--spacing-base);
   border-bottom: 0;
 
   & .book-display {
     display: flex;
     flex-direction: column;
     align-items: center;
-    gap: var(--sizing-base);
-    margin-bottom: var(--sizing-base);
+    gap: var(--spacing-base);
+    margin-bottom: var(--spacing-base);
 
     & .book-meta {
       width: 100%;
@@ -119,7 +119,7 @@
 @media screen and (min-width: 768px) {
   .book-entry {
     flex-direction: row;
-    gap: var(--sizing-base);
+    gap: var(--spacing-base);
     align-items: start;
 
     & .book-meta {
@@ -131,7 +131,7 @@
       }
 
       & .description {
-        margin-bottom: var(--sizing-base);
+        margin-bottom: var(--spacing-base);
       }
     }
   }
diff --git a/src/assets/styles/pages/contact.css b/src/assets/styles/pages/contact.css
index bdd6931c..f904943f 100644
--- a/src/assets/styles/pages/contact.css
+++ b/src/assets/styles/pages/contact.css
@@ -33,7 +33,7 @@
     }
 
     & .column.description {
-      padding-right: var(--sizing-xl);
+      padding-right: var(--spacing-xl);
     }
   }
 }
\ No newline at end of file
diff --git a/src/assets/styles/pages/links.css b/src/assets/styles/pages/links.css
index 34fd9081..49045298 100644
--- a/src/assets/styles/pages/links.css
+++ b/src/assets/styles/pages/links.css
@@ -1,13 +1,13 @@
 .link-grid {
   display: grid;
-  gap: var(--sizing-sm);
+  gap: var(--spacing-sm);
   grid-template-columns: repeat(1, minmax(0, 1fr));
-  margin-bottom: var(--sizing-base);
+  margin-bottom: var(--spacing-base);
 
   & .link-box {
     border: 1px solid var(--gray-light);
     border-radius: var(--border-radius-slight);
-    padding: var(--sizing-xs) var(--sizing-sm);
+    padding: var(--spacing-xs) var(--spacing-sm);
   }
 }
 
diff --git a/src/assets/styles/pages/music.css b/src/assets/styles/pages/music.css
index 13d597d5..757853c7 100644
--- a/src/assets/styles/pages/music.css
+++ b/src/assets/styles/pages/music.css
@@ -8,7 +8,7 @@
 }
 
 .artist-focus {
-  margin-top: var(--sizing-base);
+  margin-top: var(--spacing-base);
 
   & img {
     border: var(--border-default);
@@ -21,14 +21,14 @@
   & .artist-display {
     display: flex;
     flex-direction: column;
-    gap: var(--sizing-xs);
-    margin-bottom: var(--sizing-base);
+    gap: var(--spacing-xs);
+    margin-bottom: var(--spacing-base);
 
     & .artist-meta {
       display: flex;
       flex-direction: column;
-      gap: var(--sizing-sm);
-      margin-top: var(--sizing-base);
+      gap: var(--spacing-sm);
+      margin-top: var(--spacing-base);
 
       & p {
         margin: 0;
@@ -77,7 +77,7 @@ p.concerts + ul + hr {
 
     & .artist-display {
       flex-direction: row;
-      gap: var(--sizing-md);
+      gap: var(--spacing-md);
 
       & .artist-meta {
         margin-top: 0;
diff --git a/src/assets/styles/pages/post.css b/src/assets/styles/pages/post.css
index 2d06ca4d..9d2d2d75 100644
--- a/src/assets/styles/pages/post.css
+++ b/src/assets/styles/pages/post.css
@@ -6,7 +6,7 @@ p + .associated-media,
 img + .associated-media,
 .banner + .associated-media,
 youtube-video + .associated-media {
-  margin-top: var(--sizing-base);
+  margin-top: var(--spacing-base);
   border-top: var(--border-gray)
 }
 
@@ -25,11 +25,11 @@ youtube-video + .associated-media {
   }
 
   & ~ youtube-video {
-    margin-top: var(--sizing-base);
+    margin-top: var(--spacing-base);
   }
 
   & + .associated-media {
-    margin-top: var(--sizing-base);
+    margin-top: var(--spacing-base);
     border-top: var(--border-gray);
   }
 }
diff --git a/src/assets/styles/pages/watching.css b/src/assets/styles/pages/watching.css
index b6576581..d6589cfe 100644
--- a/src/assets/styles/pages/watching.css
+++ b/src/assets/styles/pages/watching.css
@@ -29,8 +29,8 @@ a:active > .watching.hero::after {
     & .meta-text {
       color: white;
       position: absolute;
-      left: var(--sizing-sm);
-      bottom: var(--sizing-sm);
+      left: var(--spacing-sm);
+      bottom: var(--spacing-sm);
       z-index: 2;
       display: flex;
       flex-direction: column;
@@ -42,7 +42,7 @@ a:active > .watching.hero::after {
       & .subheader {
         font-size: var(--font-size-sm);
         display: inline-flex;
-        gap: var(--sizing-xs)
+        gap: var(--spacing-xs)
       }
 
       & .header,
@@ -71,9 +71,9 @@ a:active > .watching.hero::after {
 
   &.grid {
     display: grid;
-    gap: var(--sizing-sm);
+    gap: var(--spacing-sm);
     grid-template-columns: repeat(2, minmax(0, 1fr));
-    margin-bottom: var(--sizing-base);
+    margin-bottom: var(--spacing-base);
 
     & a {
       display: flex;
@@ -97,8 +97,8 @@ a:active > .watching.hero::after {
       & .meta-text {
         position: absolute;
         z-index: 2;
-        padding: 0 var(--sizing-sm);
-        bottom: var(--sizing-sm);
+        padding: 0 var(--spacing-sm);
+        bottom: var(--spacing-sm);
         width: 100%;
         box-sizing: border-box;
         display: flex;
@@ -118,7 +118,7 @@ a:active > .watching.hero::after {
         }
 
         .subheader {
-          gap: var(--sizing-xs);
+          gap: var(--spacing-xs);
         }
 
         & .rating {
@@ -153,7 +153,7 @@ a:active > .watching.hero::after {
 }
 
 .watching-focus {
-  margin-top: var(--sizing-base);
+  margin-top: var(--spacing-base);
   border-bottom: 0;
 
   & img {
@@ -163,8 +163,8 @@ a:active > .watching.hero::after {
   & .watching-meta {
     display: flex;
     flex-direction: column;
-    gap: var(--sizing-sm);
-    margin: var(--margin-top-base-horizontal-zero);
+    gap: var(--spacing-sm);
+    margin: var(--margin-vertical-base-horizontal-zero);
 
     & p {
       margin: 0;
diff --git a/src/assets/styles/pages/webrings.css b/src/assets/styles/pages/webrings.css
index 6a3af2a9..75612456 100644
--- a/src/assets/styles/pages/webrings.css
+++ b/src/assets/styles/pages/webrings.css
@@ -1,8 +1,8 @@
 .webring-wrapper {
-  margin: var(--margin-top-base-horizontal-zero);
+  margin: var(--margin-vertical-base-horizontal-zero);
 
   & .webring-navigation {
-    gap: var(--sizing-sm);
+    gap: var(--spacing-sm);
 
     & a {
       display: flex;
diff --git a/src/assets/styles/plugins/prism.css b/src/assets/styles/plugins/prism.css
index 6bbc86d2..58deab35 100644
--- a/src/assets/styles/plugins/prism.css
+++ b/src/assets/styles/plugins/prism.css
@@ -16,7 +16,7 @@ pre[class*="language-"] {
 }
 
 pre[class*="language-"] {
-  padding: var(--padding-lg);
+  padding: var(--spacing-lg);
   margin: var(--sizing-xl) 0;
   overflow: auto;
   background: var(--gray-darkest);
@@ -24,7 +24,7 @@ pre[class*="language-"] {
 }
 
 :not(pre) > code[class*="language-"] {
-  padding: var(--padding-xs);
+  padding: var(--spacing-xs);
   white-space: normal;
   background: var(--gray-darkest);
   border-radius: var(--border-radius-slight);
diff --git a/src/includes/partials/footer.liquid b/src/includes/partials/footer.liquid
index e1c8bf8d..b2ba3267 100644
--- a/src/includes/partials/footer.liquid
+++ b/src/includes/partials/footer.liquid
@@ -1,4 +1,4 @@
-<footer{% unless updated %} style="margin-top:var(--sizing-3xl)"{% endunless %}>
+<footer{% unless updated %} style="margin-top:var(--spacing-3xl)"{% endunless %}>
   {%- if updated -%}
     <p class="text-centered"><em>This page was last updated on {{ updated | strip }}.</em></p>
   {%- endif -%}