chore: tokenize spacing

src/assets/styles/components/banners.css

@@ -1,6 +1,6 @@
 .banner {
-  margin: var(--spacing-base) 0;
-  padding: .75rem;
+  margin: var(--sizing-base) 0;
+  padding: var(--sizing-md);
   border: 1px solid;
   border-radius: var(--rounded-lg);
 }

src/assets/styles/components/forms.css

@@ -12,14 +12,14 @@ textarea {
   color: var(--text-color) !important;
   background-color: var(--background-color) !important;
   border: 1px solid var(--accent-color) !important;
-  padding: .5rem !important;
+  padding: var(--sizing-sm) !important;
   font-size: var(--font-size-base) !important;
   width: 100% !important;
   border-radius: var(--rounded-md) !important;
   /* necessary for pagefind overrides */
 
   outline: none;
-  margin-bottom: var(--spacing-base);
+  margin-bottom: var(--sizing-base);
   font-weight: 400 !important;
   line-height: var(--line-height-base);
   transition-property: border-color;
@@ -36,8 +36,8 @@ textarea:focus {
 
 button:not(.theme__toggle, .share, .pagefind-ui__search-clear) {
   border-radius: var(--rounded-full);
-  padding: .5rem 1rem;
-  margin: 0 .25rem .75rem 0;
+  padding: var(--sizing-sm) var(--sizing-lg);
+  margin: 0 var(--sizing-xs) var(--sizing-md) 0;
   cursor: pointer;
   display: inline-flex;
   flex-direction: row;

src/assets/styles/components/mastodon-post.css

@@ -1,7 +1,7 @@
 .mastodon-post-wrapper {
   border-bottom: 1px solid var(--gray-light);
-  margin-bottom: var(--spacing-base);
-  padding-bottom: .25rem;
+  margin-bottom: var(--sizing-base);
+  padding-bottom: var(--sizing-xs);
 }
 
 dl {
@@ -10,9 +10,9 @@ dl {
 }
 
 dd {
-  margin-left: .25rem;
+  margin-left: var(--sizing-xs);
 }
 
 dd:not(:last-child) {
-  margin-right: 1rem;
+  margin-right: var(--sizing-lg);
 }

src/assets/styles/components/media-grid.css

@@ -5,12 +5,12 @@
 }
 
 .now__section--header {
-  margin: 2rem 0 1rem;
+  margin: var(--sizing-3xl) 0 var(--sizing-lg);
 }
 
 .media__grid {
   display: grid;
-  gap: .5rem;
+  gap: var(--sizing-sm);
 }
 
 .media__grid.square {

src/assets/styles/components/pagefind.css

@@ -1,5 +1,5 @@
 .pagefind-ui {
-  margin-bottom: var(--spacing-base);
+  margin-bottom: var(--sizing-base);
   --pagefind-ui-primary: var(--accent-color);
   --pagefind-ui-text: var(--text-color);
   --pagefind-ui-background: var(--color-lightest);
@@ -67,7 +67,7 @@
 }
 
 .pagefind-ui__result-title {
-  margin-bottom: .25rem !important;
+  margin-bottom: var(--sizing-xs) !important;
 }
 
 .pagefind-ui__result-link {
@@ -86,8 +86,8 @@
   color: var(--color-lightest) !important;
   line-height: var(--line-height-base);
   border-radius: var(--rounded-full) !important;
-  padding: .5rem 1rem !important;
-  margin: 0 .25rem .75rem 0;
+  padding: var(--sizing-sm) var(--sizing-lg) !important;
+  margin: 0 var(--sizing-xs) var(--sizing-md) 0;
   cursor: pointer !important;
   height: unset !important;
   text-decoration: none;

src/assets/styles/components/popular-posts.css

@@ -1,3 +1,3 @@
 .popular-posts h2 {
-  margin: var(--spacing-base) 0;
+  margin: var(--sizing-base) 0;
 }

src/assets/styles/components/post-graph.css

@@ -1,12 +1,12 @@
 .post-graph {
-  margin-top: var(--spacing-base);
-  margin-bottom: var(--spacing-base);
+  margin-top: var(--sizing-base);
+  margin-bottom: var(--sizing-base);
 }
 
 .post-graph__wrapper {
   display: flex;
   align-items: center;
-  height: 2rem;
+  height: var(--sizing-3xl);
   margin-bottom: .375rem;
 }
 

src/assets/styles/components/progress-bar.css

@@ -3,9 +3,9 @@
   background-color: rgba(217, 222, 228, .6);
   border-radius: var(--rounded-lg);
   overflow: hidden;
-  height: 1rem;
+  height: var(--sizing-lg);
   width: 100%;
-  margin-bottom: .25rem;
+  margin-bottom: var(--sizing-xs);
 }
 
 .progress-bar {