From a929d579b946578a67db1afe26614df347a70957 Mon Sep 17 00:00:00 2001
From: Cory Dransfeldt <coryd@hey.com>
Date: Sat, 2 Mar 2024 14:46:21 -0800
Subject: [PATCH] chore: standardize more sizing

---
 src/assets/styles/components/banners.css    |  6 ++---
 src/assets/styles/components/media-grid.css |  4 ++--
 src/assets/styles/components/post-graph.css |  4 ++--
 src/assets/styles/index.css                 | 26 ++++++++++-----------
 src/assets/styles/pages/contact.css         |  2 +-
 src/assets/styles/pages/webrings.css        |  3 +--
 6 files changed, 22 insertions(+), 23 deletions(-)

diff --git a/src/assets/styles/components/banners.css b/src/assets/styles/components/banners.css
index 238cf383..54e24411 100644
--- a/src/assets/styles/components/banners.css
+++ b/src/assets/styles/components/banners.css
@@ -26,7 +26,7 @@
 .banner p > svg {
   display: inline;
   vertical-align: middle;
-  height: .875rem;
-  width: .875rem;
-  margin-right: .125rem;
+  height: var(--sizing-lg);
+  width: var(--sizing-lg);
+  margin-right: var(--sizing-xs);
 }
\ 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 9d4ab00a..5c342466 100644
--- a/src/assets/styles/components/media-grid.css
+++ b/src/assets/styles/components/media-grid.css
@@ -68,9 +68,9 @@
 
 .media__grid .item__meta-text {
   position: absolute;
-  padding: 0 .375rem;
+  padding: 0 var(--sizing-xs);
   width: 90%;
-  bottom: .375rem;
+  bottom: var(--sizing-xs);
 }
 
 .media__grid .item__meta-text .header,
diff --git a/src/assets/styles/components/post-graph.css b/src/assets/styles/components/post-graph.css
index 69a8dc8d..452db91e 100644
--- a/src/assets/styles/components/post-graph.css
+++ b/src/assets/styles/components/post-graph.css
@@ -7,7 +7,7 @@
   display: flex;
   align-items: center;
   height: var(--sizing-3xl);
-  margin-bottom: .375rem;
+  margin-bottom: var(--sizing-sm);
 }
 
 .post-graph__progress {
@@ -21,5 +21,5 @@
 
 .post-graph__progress,
 .post-graph__data {
-  margin-left: .625rem;
+  margin-left: var(--sizing-sm);
 }
\ No newline at end of file
diff --git a/src/assets/styles/index.css b/src/assets/styles/index.css
index 23ab5f4a..e2c27c1d 100644
--- a/src/assets/styles/index.css
+++ b/src/assets/styles/index.css
@@ -26,7 +26,7 @@ blockquote {
 
 blockquote {
   font-size: var(--font-size-lg);
-  padding-left: .875rem;
+  padding-left: var(--sizing-lg);
   color: var(--gray-dark);
   border-left: var(--sizing-xs) solid var(--gray-dark);
   word-break: break-word;
@@ -147,8 +147,8 @@ tr:not(:last-child) {
 
 th,
 td {
-  padding: .375rem;
-  min-width: 4rem;
+  padding: var(--sizing-sm);
+  min-width: calc(var(--sizing-3xl) * 2);
   word-break: break-word;
 }
 
@@ -169,7 +169,7 @@ th {
 .main__title h1 {
   line-height: 1.25;
   margin: 0;
-  padding-bottom: .625rem;
+  padding-bottom: var(--sizing-md);
   font-size: var(--font-size-2xl);
   line-height: var(--line-height-2xl);
 }
@@ -187,11 +187,11 @@ nav ul li {
 }
 
 nav ul li:not(:last-child) {
-  margin-right: .6rem;
+  margin-right: calc(var(--sizing-sm) * 1.225);
 }
 
 nav svg {
-  margin-top: .125rem;
+  margin-top: var(--sizing-sm);
 }
 
 :is(a:hover, a:active, a:focus) svg,
@@ -264,7 +264,7 @@ article {
 }
 
 footer nav:first-child {
-  gap: .6rem;
+  gap: var(--sizing-sm);
   margin-top: var(--sizing-3xl);
   padding: var(--sizing-3xl) 0 var(--sizing-lg);
   width: 100%;
@@ -311,7 +311,7 @@ code {
 article h2 {
   color: var(--text-color);
   line-height: var(--line-height-2xl);
-  margin: 0 0 .85rem;
+  margin: 0 0 var(--sizing-lg);
   transition-property: color;
 }
 
@@ -336,12 +336,12 @@ article [rel="author"] {
 }
 
 article p:first-of-type {
-  margin-top: .4rem;
+  margin-top: var(--sizing-sm);
 }
 
 .tag:not(:last-child) {
-  margin-right: .85rem;
-  margin-bottom: .85rem;
+  margin-right: var(--sizing-lg);
+  margin-bottom: var(--sizing-lg);
   display: inline-block;
 }
 
@@ -379,8 +379,8 @@ li {
 }
 
 .link__list li {
-  margin-top: .375rem;
-  margin-bottom: .375rem;
+  margin-top: var(--sizing-sm);
+  margin-bottom: var(--sizing-sm);
 }
 
 .link__list,
diff --git a/src/assets/styles/pages/contact.css b/src/assets/styles/pages/contact.css
index b12fd7d0..504c55a9 100644
--- a/src/assets/styles/pages/contact.css
+++ b/src/assets/styles/pages/contact.css
@@ -4,7 +4,7 @@
 }
 
 .contact__wrapper textarea {
-  height: 10rem;
+  height: calc(var(--sizing-3xl) * 5);
   resize: none;
 }
 
diff --git a/src/assets/styles/pages/webrings.css b/src/assets/styles/pages/webrings.css
index b686c99e..9ef4ea8f 100644
--- a/src/assets/styles/pages/webrings.css
+++ b/src/assets/styles/pages/webrings.css
@@ -1,6 +1,5 @@
 .webring__wrapper {
-  margin-top: 3rem;
-  margin-bottom: 2.5rem;
+  margin: var(--sizing-base) 0;
 }
 
 .webring__wrapper > .webring__centered {