Add hover coloring

Signed-off-by: Nikolaos Karaolidis <nick@karaolidis.com>

assets/sass/header.scss

@@ -2,7 +2,7 @@
   padding: 2rem;
 
   .header-container {
-    max-width: var(--width-max);
+    max-width: $width-max;
 
     width: 100%;
     margin: 0 auto;
@@ -19,6 +19,10 @@
         text-decoration: none;
         color: inherit;
       }
+
+      a:hover {
+        color: var(--text-900);
+      }
     }
 
     .nav {
@@ -35,6 +39,10 @@
           color: inherit;
           display: block;
         }
+
+        li a:hover {
+          color: var(--text-900);
+        }
       }
     }
 
@@ -48,7 +56,7 @@
   }
 }
 
-@media (max-width: var(--width-mobile)) {
+@media (max-width: $width-mobile) {
   $nav-toggle-label-height: 0.75rem;
   $nav-toggle-label-width: 1.5rem;
   $nav-toggle-span-height: 0.125rem;

assets/sass/main.scss

@@ -1,3 +1,7 @@
+$width-mobile: 32rem;
+$width-content: 48rem;
+$width-max: 60rem;
+
 @import "colors";
 @import "fonts";