From ff90f623aa633b7a0e1e94e511166cc077458b3e Mon Sep 17 00:00:00 2001
From: qhri <qhri@posteo.com>
Date: Tue, 26 Aug 2025 20:31:00 -0400
Subject: [PATCH] added styling to hovered links

---
 src/css.css | 49 +++++++++++++++++++++++++++++++++----------------
 1 file changed, 33 insertions(+), 16 deletions(-)

diff --git a/src/css.css b/src/css.css
index 2c8ec5c..4e9628b 100644
--- a/src/css.css
+++ b/src/css.css
@@ -29,24 +29,28 @@
 }
 
 :root {
-  --bg-color:              hsl(300  25%  90%);
-  --font-color:            hsl(  0   0%  20%);
-  --code-border-color:     hsl(  0   0%  10%);
-  --link-color:            hsl(225  73%  52%);
-  --link-color-visited:    hsl(249  80%  60%);
-  --header-bg-color:       hsl(300  23%  85%);
-  --header-border-color:   hsl(300  22%  75%);
-  --details-bg-color:      hsl(300  25%  95%);
+  --bg-color:                   hsl(300  25%  90%);
+  --font-color:                 hsl(  0   0%  20%);
+  --code-border-color:          hsl(  0   0%  10%);
+  --link-color:                 hsl(225  73%  52%);
+  --link-color-hover:           hsl(225  73%  42%);
+  --link-color-visited:         hsl(249  80%  60%);
+  --link-color-visited-hover:   hsl(249  80%  50%);
+  --header-bg-color:            hsl(300  23%  85%);
+  --header-border-color:        hsl(300  22%  75%);
+  --details-bg-color:           hsl(300  25%  95%);
 
   @media (prefers-color-scheme: dark) {
-    --bg-color:            hsl(300  25%  10%);
-    --font-color:          hsl(  0   0%  80%);
-    --code-border-color:   hsl(  0   0%  20%);
-    --link-color:          hsl(225  73%  62%);
-    --link-color-visited:  hsl(249  80%  70%);
-    --header-bg-color:     hsl(300  23%  15%);
-    --header-border-color: hsl(300  22%  25%);
-    --details-bg-color:    hsl(300  25%   5%);
+    --bg-color:                 hsl(300  25%  10%);
+    --font-color:               hsl(  0   0%  80%);
+    --code-border-color:        hsl(  0   0%  20%);
+    --link-color:               hsl(225  73%  62%);
+    --link-color-hover:         hsl(225  73%  72%);
+    --link-color-visited:       hsl(249  80%  70%);
+    --link-color-visited-hover: hsl(249  80%  80%);
+    --header-bg-color:          hsl(300  23%  15%);
+    --header-border-color:      hsl(300  22%  25%);
+    --details-bg-color:         hsl(300  25%   5%);
   }
 }
 
@@ -76,12 +80,25 @@ code {
 a {
   text-decoration: underline dashed;
 
+  &:hover {
+    text-decoration: underline solid;
+    text-decoration-thickness: 2px;
+  }
+
   &:link {
     color: var(--link-color);
+
+    &:hover {
+      color: var(--link-color-hover);
+    }
   }
 
   &:visited {
     color: var(--link-color-visited);
+
+    &:hover {
+      color: var(--link-color-visited-hover);
+    }
   }
 }