From 2d92966043aa481e9bc4707823eb0cafd073dc96 Mon Sep 17 00:00:00 2001
From: Michael Zhang <mail@mzhang.io>
Date: Wed, 18 Sep 2024 16:37:23 -0500
Subject: [PATCH] tentative dotted background

---
 src/styles/_colors.scss | 2 ++
 src/styles/global.scss  | 5 +++++
 src/styles/leftNav.scss | 4 ++++
 3 files changed, 11 insertions(+)

diff --git a/src/styles/_colors.scss b/src/styles/_colors.scss
index 5443f95..56738ae 100644
--- a/src/styles/_colors.scss
+++ b/src/styles/_colors.scss
@@ -5,6 +5,7 @@
 
   :root {
     --background-color: #{$backgroundColor};
+    --sidebar-color: #f8f8f8;
     --faded-background-color: #{darken($backgroundColor, 10%)};
     --shadow-color: #{darken($backgroundColor, 10%)};
     --heading-color: #{darken(royalblue, 10%)};
@@ -48,6 +49,7 @@
 
   :root {
     --background-color: #{$backgroundColor};
+    --sidebar-color: hsl(230, 20%, 20%);
     --faded-background-color: #{lighten($backgroundColor, 10%)};
     --shadow-color: #{lighten($backgroundColor, 10%)};
     --heading-color: #{lighten(lightskyblue, 20%)};
diff --git a/src/styles/global.scss b/src/styles/global.scss
index 5e34edf..af87e87 100644
--- a/src/styles/global.scss
+++ b/src/styles/global.scss
@@ -12,6 +12,11 @@ body {
   background-color: var(--background-color);
   color: var(--text-color);
 
+  // Dotted background :)
+  background-image: radial-gradient(var(--faded-background-color) 1px, transparent 0);
+  background-size: 20px 20px;
+  background-position: -19px -19px;
+
   margin: auto;
   width: 100%;
   height: 1px;
diff --git a/src/styles/leftNav.scss b/src/styles/leftNav.scss
index e16b56b..7dc8eb0 100644
--- a/src/styles/leftNav.scss
+++ b/src/styles/leftNav.scss
@@ -64,6 +64,8 @@
 
 @media screen and (max-width: variables.$breakpoint) {
   .side-nav {
+    background: linear-gradient(to top, var(--sidebar-color) 50%, transparent);
+
     .side-nav-content {
       width: 100%;
       padding: 18px 0;
@@ -95,6 +97,8 @@
     width: 300px;
     min-width: 300px;
 
+    background: linear-gradient(to left, var(--sidebar-color) 50%, transparent);
+
     .side-nav-content {
       height: 100vh;
       position: sticky;