From 7a79133124fd9f172e7806b69f6aaaab486be684 Mon Sep 17 00:00:00 2001
From: Cory Dransfeldt <hi@coryd.dev>
Date: Sat, 5 Oct 2024 18:01:42 -0700
Subject: [PATCH] chore: scrollbars, alignment, overlays

---
 src/assets/styles/base/index.css       | 22 ++++++++++++++++++++++
 src/assets/styles/components/modal.css |  3 ++-
 src/assets/styles/defaults/vars.css    |  6 +++---
 3 files changed, 27 insertions(+), 4 deletions(-)

diff --git a/src/assets/styles/base/index.css b/src/assets/styles/base/index.css
index 9d61fced..35e90e20 100644
--- a/src/assets/styles/base/index.css
+++ b/src/assets/styles/base/index.css
@@ -5,6 +5,11 @@ body {
   font-family: var(--font-mono);
 }
 
+html {
+  scrollbar-width: thin;
+  scrollbar-color: var(--accent-color) var(--gray-light);
+}
+
 body {
   font-size: var(--font-size-base);
   line-height: var(--line-height-base);
@@ -12,6 +17,23 @@ body {
   word-spacing: -.05rem;
 }
 
+::-webkit-scrollbar {
+  width: var(--sizing-md);
+}
+
+::-webkit-scrollbar-track {
+  background: var(--gray-light);
+}
+
+::-webkit-scrollbar-thumb {
+  background: var(--accent-color);
+  border-radius: var(--border-radius-full);
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background: var(--accent-color-hover);
+}
+
 ::selection {
   color: var(--color-lightest);
   background: var(--accent-color);
diff --git a/src/assets/styles/components/modal.css b/src/assets/styles/components/modal.css
index 46ab8b32..67ed85f9 100644
--- a/src/assets/styles/components/modal.css
+++ b/src/assets/styles/components/modal.css
@@ -14,7 +14,7 @@
     inset: 0;
     overflow-y: scroll;
     border-radius: var(--border-radius-slight);
-    padding: var(--spacing-lg) var(--spacing-2xl);
+    padding: var(--spacing-lg) var(--spacing-base);
 
     @media screen and (min-width: 768px) {
       max-height: 75%;
@@ -48,6 +48,7 @@
 .modal-toggle,
 .modal-close {
   cursor: pointer;
+  display: inline-flex;
   vertical-align: middle;
 
   & svg {
diff --git a/src/assets/styles/defaults/vars.css b/src/assets/styles/defaults/vars.css
index 227041b6..a6566419 100644
--- a/src/assets/styles/defaults/vars.css
+++ b/src/assets/styles/defaults/vars.css
@@ -175,9 +175,9 @@
   --text-shadow-default: rgba(0, 0, 0, 0.7) 0px 0px 10px;
 
   /* modals */
-  --modal-overlay-background: #ffffffbf;
+  --modal-overlay-background-light: #ffffffbf;
   --modal-overlay-background-dark: #000000bf;
-  --modal-overlay-background: var(--modal-overlay-background);
+  --modal-overlay-background: var(--modal-overlay-background-light);
 
   /* input accent color */
   accent-color: var(--accent-color);
@@ -194,7 +194,7 @@
   --gray-light: var(--gray-300);
   --gray-lighter: var(--gray-200);
   --gray-dark: var(--gray-800);
-  --modal-overlay-background: var(--modal-overlay-background);
+  --modal-overlay-background: var(--modal-overlay-background-light);
   --brand-github: var(--brand-github-light);
   --article: var(--article-light);
   --about: var(--about-light);