tentative dotted background

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%)};

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;

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;