From ff3c10cfd22189df0bb0ba0f93cf6003c98a88b6 Mon Sep 17 00:00:00 2001
From: Nikolaos Karaolidis <nick@karaolidis.com>
Date: Wed, 6 Aug 2025 12:32:59 +0200
Subject: [PATCH] Add hover coloring

Signed-off-by: Nikolaos Karaolidis <nick@karaolidis.com>
---
 assets/sass/header.scss | 12 ++++++++++--
 assets/sass/main.scss   |  4 ++++
 2 files changed, 14 insertions(+), 2 deletions(-)

diff --git a/assets/sass/header.scss b/assets/sass/header.scss
index 4cecf7a..5f4648c 100644
--- a/assets/sass/header.scss
+++ b/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;
diff --git a/assets/sass/main.scss b/assets/sass/main.scss
index 4f0f9c2..e456ce6 100644
--- a/assets/sass/main.scss
+++ b/assets/sass/main.scss
@@ -1,3 +1,7 @@
+$width-mobile: 32rem;
+$width-content: 48rem;
+$width-max: 60rem;
+
 @import "colors";
 @import "fonts";