chore: tokenize spacing

src/assets/styles/pages/404.css

@@ -1,4 +1,4 @@
 .four-oh-four__wrapper .image__banner,
 .four-oh-four__wrapper a {
-  margin-bottom: var(--spacing-base);
+  margin-bottom: var(--sizing-base);
 }

src/assets/styles/pages/about.css

@@ -3,7 +3,7 @@
 }
 
 .avatar__wrapper {
-  margin-bottom: 1.5rem;
+  margin-bottom: var(--sizing-xl);
   width: 100%;
 }
 
@@ -13,7 +13,7 @@
   border: 1px solid var(--accent-color);
   border-radius: var(--rounded-full);
   display: flex;
-  padding: 1rem;
+  padding: var(--sizing-lg);
   background-color: var(--color-lightest);
 }
 

src/assets/styles/pages/blogroll.css

@@ -1,16 +1,15 @@
 :root {
   --grid: repeat(1,minmax(0,1fr));
-  --blog-roll-spacing: .75rem;
 }
 
 .blog__banner--grid {
   display: grid;
-  gap: .5rem;
+  gap: var(--sizing-sm);
   grid-template-columns: var(--grid);
 }
 
 .blog__banner {
-  padding: var(--blog-roll-spacing);
+  padding: var(--sizing-md);
   border: 1px solid var(--gray-light);
   border-radius: var(--rounded-lg);
   display: flex;
@@ -21,7 +20,7 @@
 .blog__banner > p,
 .blog__banner .meta {
   margin-top: 0;
-  margin-bottom: var(--blog-roll-spacing);
+  margin-bottom: var(--sizing-md);
 }
 
 .blog__banner > strong {

src/assets/styles/pages/contact.css

@@ -9,7 +9,7 @@
 }
 
 .contact__wrapper .column.contact__description {
-  margin-bottom: 1.5rem;
+  margin-bottom: var(--sizing-xl);
 }
 
 .contact__wrapper .column.contact__description p:first-child {
@@ -26,7 +26,7 @@
   }
 
   .contact__wrapper .column.contact__description {
-    padding-right: 1.5rem;
+    padding-right: var(--sizing-xl);
     margin-bottom: 0;
   }
 }

src/assets/styles/pages/links.css

@@ -1,5 +1,5 @@
 .link__list {
   padding-left: 0;
   margin-top: 0;
-  margin-bottom: 2rem;
+  margin-bottom: var(--sizing-3xl);
 }

src/assets/styles/pages/now.css

@@ -1,22 +1,21 @@
 /* now */
 .now__section--text {
-  padding-left: 1rem;
+  padding-left: var(--sizing-base);
 }
 
 .now__section--text p {
-  margin-top: .25rem;
-  margin-bottom: .25rem;
+  margin: var(--sizing-xs) 0;
 }
 
 .now__section--text p > svg {
   display: inline;
   vertical-align: middle;
-  height: var(--spacing-base);
-  width: var(--spacing-base);
+  height: var(--sizing-base);
+  width: var(--sizing-base);
 }
 
 .now__section--header {
-  margin: 2rem 0 1rem;
+  margin: var(--sizing-3xl) 0 var(--sizing-lg);
 }
 
 .now__section--header:first-of-type {
@@ -26,11 +25,11 @@
 .now__explainer {
   font-size: var(--font-size-xs);
   line-height: var(--line-height-xs);
-  padding-top: 1rem;
+  padding-top: var(--sizing-lg);
 }
 
 @media screen and (min-width: 768px) {
   .now__section--text {
-    padding-left: 2rem;
+    padding-left: var(--sizing-3xl);
   }
 }

src/assets/styles/pages/post.css

@@ -1,11 +1,11 @@
 /* embeds */
 .eleventy-plugin-youtube-embed {
-  margin-bottom: 1rem;
+  margin-bottom: var(--sizing-lg);
 }
 
 /* footnotes */
 hr.footnotes-sep {
-  margin: var(--spacing-base) 0;
+  margin: var(--sizing-base) 0;
 }
 
 .footnotes-list {
@@ -18,7 +18,7 @@ hr.footnotes-sep {
 }
 
 .footnotes {
-  padding-bottom: 1.25rem;
+  padding-bottom: var(--sizing-base);
 }
 
 .footnote-item > p {