moved all css to vars & hover state + transition on nav

src/components/Nav.svelte

@@ -60,10 +60,14 @@
     top: 0;
     left: 1.12em;
     position: absolute;
+    transition: all 500ms ease;
   }
   li a div.active {
     background-color: var(--clr-secondary);
   }
+  li:hover a div:not(.active) {
+    background-color: var(--clr-light);
+  }
 
   h1 {
     margin: 0;

src/components/PostPreview.svelte

@@ -19,7 +19,7 @@
     position: relative;
     top: 0;
     transition: var(--animation);
-    background-color: #fff;
+    background-color: var(--clr-light);
   }
   a:hover h2 {
     top: -1em;

static/global.css

@@ -9,6 +9,8 @@
   --ff: 'Jost', Roboto, -apple-system, BlinkMacSystemFont, Segoe UI, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans,
     Helvetica Neue, sans-serif;
   --ff-alt: 'Playfair Display', serif;
+  --clr-light: #ffffff;
+  --clr-dark: #010101;
   --clr-primary: hsl(219, 90%, 80%);
   --clr-secondary: hsl(64, 93%, 51%);
   --clr-error: hsl(0, 73.9%, 65.5%);
@@ -19,12 +21,12 @@ body {
   margin: 0;
   overflow: hidden;
 
-  background-color: #ffffff;
+  background-color: var(--clr-light);
 
   font-family: var(--ff);
   font-size: 1em;
   font-weight: lighter;
-  color: #000;
+  color: var(--clr-dark);
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   text-rendering: optimizeLegibility;
@@ -73,10 +75,10 @@ ul {
   box-sizing: border-box;
   width: 100%;
   position: relative;
-  background: #fff;
+  background: var(--clr-light);
   margin: 0.5em 0;
   padding: 0.1em 0.5em;
-  border: 1px solid black;
+  border: 1px solid var(--clr-dark);
 }
 
 .progress > span {