Add light mode to the site. Still to do: manual override

.gitignore

@@ -3,3 +3,4 @@ src/css/custom-props.css
 _site
 .DS_Store
 .cache
+.idea

src/css/exceptions/blog-nav.css

@@ -1,4 +1,4 @@
 .blog-nav {
-    border-top: 1px solid var(--color-neutral-200);
+    border-top: 1px solid var(--color-secondary);
     padding-top: var(--space-size-2xs);
 }

src/css/exceptions/home.css

@@ -22,7 +22,7 @@
   }
 
   time {
-    color: var(--color-zinc-300);
+    color: var(--color-subtle);
     display: block;
     font-size: var(--text-size-s);
     font-style: italic;

src/css/globals.css

@@ -1,11 +1,28 @@
+:root {
+    --color-primary: var(--color-neutral-200);
+    --color-secondary: var(--color-neutral-800);
+    --color-decoration: var(--color-amber-200);
+    --color-subtle: var(--color-zinc-400);
+}
+
+@media (prefers-color-scheme: light) {
+    :root {
+        --color-secondary: var(--color-neutral-100);
+        --color-primary: var(--color-neutral-800);
+        --color-decoration: var(--color-amber-800);
+        --color-subtle: var(--color-zinc-500);
+    }
+}
+
 body {
-  background-color: var(--color-neutral-800);
+    background-color: var(--color-secondary);
-  color: var(--color-neutral-200);
+    color: var(--color-primary);
     font-family: var(--font-family-mono);
     font-size: var(--text-size-s);
     text-underline-offset: var(--space-size-4xs);
 }
 
+
 h1,
 h2,
 h3,
@@ -39,7 +56,7 @@ a {
     text-decoration: underline;
 
     &:hover {
-    text-decoration-color: var(--color-amber-200);
+        text-decoration-color: var(--color-decoration);
     }
 
     &:visited {
@@ -82,13 +99,3 @@ footer {
     padding: var(--space-size-l) 0 var(--space-size-s);
     width: 100%;
 }
-
-
-aside {
-  background-color: var(--color-slate-800);
-  border: 5px solid var(--color-slate-600);
-  border-radius: 10px;
-  height: fit-content;
-  max-width: 50ch;
-  padding: var(--space-size-xs);
-}