From ab1182725f7a5a57c19cd385237fea0cc684b238 Mon Sep 17 00:00:00 2001
From: Cory Dransfeldt <coryd@hey.com>
Date: Mon, 15 Apr 2024 09:03:07 -0700
Subject: [PATCH] chore: add scrollbar styles; fix units + alignment

---
 src/assets/styles/components/banners.css     |  2 +-
 src/assets/styles/components/forms.css       |  2 +-
 src/assets/styles/components/link-peek.css   |  4 +-
 src/assets/styles/components/media-grid.css  |  2 +-
 src/assets/styles/components/track-chart.css |  2 +-
 src/assets/styles/index.css                  | 42 +++++++++++++++++---
 src/assets/styles/plugins/prism.css          |  4 +-
 7 files changed, 45 insertions(+), 13 deletions(-)

diff --git a/src/assets/styles/components/banners.css b/src/assets/styles/components/banners.css
index f5a818e5..d35f1700 100644
--- a/src/assets/styles/components/banners.css
+++ b/src/assets/styles/components/banners.css
@@ -2,7 +2,7 @@
   margin: var(--sizing-base) 0;
   padding: var(--sizing-md);
   border: 1px solid;
-  border-radius: var(--sizing-xs);
+  border-radius: var(--rounded);
 }
 
 .banner.old-post {
diff --git a/src/assets/styles/components/forms.css b/src/assets/styles/components/forms.css
index 69586b66..e9069874 100644
--- a/src/assets/styles/components/forms.css
+++ b/src/assets/styles/components/forms.css
@@ -14,7 +14,7 @@ textarea {
   padding: var(--sizing-sm);
   font-size: var(--font-size-base);
   width: 100%;
-  border-radius: var(--sizing-xs);
+  border-radius: var(--rounded);
   outline: none;
   margin-bottom: var(--sizing-base);
   font-weight: var(--font-weight-base);
diff --git a/src/assets/styles/components/link-peek.css b/src/assets/styles/components/link-peek.css
index fb7e0f24..c271755e 100644
--- a/src/assets/styles/components/link-peek.css
+++ b/src/assets/styles/components/link-peek.css
@@ -9,7 +9,7 @@ link-peek:defined figure {
   gap: 1rem;
   max-inline-size: max-content;
   border: 1px solid var(--gray-light);
-  border-radius: var(--sizing-xs);
+  border-radius: var(--rounded);
   padding: 1rem;
   margin: 0 0 var(--sizing-base);
   font-size: var(--font-size-sm);
@@ -32,5 +32,5 @@ link-peek img[data-key="data.logo.url"] {
 link-peek img[data-key="data.image.url"] {
   max-inline-size: 100%;
   block-size: auto;
-  border-radius: var(--sizing-xs);
+  border-radius: var(--rounded);
 }
\ 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 bc7af3d6..82ef5852 100644
--- a/src/assets/styles/components/media-grid.css
+++ b/src/assets/styles/components/media-grid.css
@@ -84,7 +84,7 @@
 
 .media__grid img {
   border: 1px solid var(--accent-color);
-  border-radius: var(--sizing-xs);
+  border-radius: var(--rounded);
   transition-property: border-color;
   transition-timing-function: var(--transition-ease-in-out);
   transition-duration: 300ms;
diff --git a/src/assets/styles/components/track-chart.css b/src/assets/styles/components/track-chart.css
index 878b53d5..1a0d7cd1 100644
--- a/src/assets/styles/components/track-chart.css
+++ b/src/assets/styles/components/track-chart.css
@@ -51,7 +51,7 @@
 
 .track__chart--item img {
   border: 1px solid var(--accent-color);
-  border-radius: var(--sizing-xs);
+  border-radius: var(--rounded);
 }
 
 .track__chart--item img,
diff --git a/src/assets/styles/index.css b/src/assets/styles/index.css
index 7fc7262f..c4214ac7 100644
--- a/src/assets/styles/index.css
+++ b/src/assets/styles/index.css
@@ -18,6 +18,37 @@ html {
   background: var(--selection-color);
 }
 
+/* scrollbars */
+body,
+html {
+  scrollbar-width: thin;
+  scrollbar-color: var(--accent-color) var(--gray-light);
+}
+
+::-webkit-scrollbar {
+  width: var(--sizing-xs);
+  height: var(--sizing-xs);
+}
+
+body::-webkit-scrollbar {
+  width: var(--sizing-md);
+  height: var(--sizing-md);
+}
+
+::-webkit-scrollbar-thumb {
+  background: var(--accent-color);
+  border-radius: var(--rounded-full);
+}
+
+::-webkit-scrollbar-track {
+  background-color: var(--gray-light);
+}
+
+::-webkit-scrollbar-button {
+  background-color: var(--accent-color);
+  border-radius: var(--rounded);
+}
+
 p,
 blockquote {
   line-height: var(--line-height-lg);
@@ -113,12 +144,12 @@ hr.large__spacing {
 /* tables */
 table {
   display: block;
-  overflow-x: auto;
+  overflow-x: scroll;
   width: 100%;
   max-width: fit-content;
   margin: 0 auto;
   white-space: nowrap;
-  border-radius: var(--sizing-xs);
+  border-radius: var(--rounded);
   border: 1px solid var(--gray-light);
 }
 
@@ -375,7 +406,7 @@ li {
 /* images */
 .image__banner {
   border: 1px solid var(--accent-color);
-  border-radius: var(--sizing-xs);
+  border-radius: var(--rounded);
   height: auto;
 }
 
@@ -430,8 +461,9 @@ select-pagination {
 .select select,
 select-pagination,
 select-pagination select {
-  min-height: calc(var(--sizing-3xl) * 1.25);
-  min-width:  calc(var(--sizing-3xl) * 4);;
+  min-width:  calc(var(--sizing-3xl) * 4);
+  padding-top: var(--sizing-xs);
+  padding-bottom: var(--sizing-xs);
 }
 
 .select select,
diff --git a/src/assets/styles/plugins/prism.css b/src/assets/styles/plugins/prism.css
index 8a8a78c8..bea61156 100644
--- a/src/assets/styles/plugins/prism.css
+++ b/src/assets/styles/plugins/prism.css
@@ -20,7 +20,7 @@ pre[class*="language-"] {
   padding: 1rem;
   margin: 1.25rem 0;
   overflow: auto;
-  border-radius: var(--sizing-xs);
+  border-radius: var(--rounded);
 }
 
 :not(pre) > code[class*="language-"],
@@ -31,7 +31,7 @@ pre[class*="language-"] {
 /* Inline code */
 :not(pre) > code[class*="language-"] {
   padding: 0.1rem;
-  border-radius: var(--sizing-xs);
+  border-radius: var(--rounded);
   white-space: normal;
 }