hover links red with offset

2021-09-04 15:03:25 +02:00
parent 413da9b0e9
commit 192e4aa097
2 changed files with 13 additions and 4 deletions
@@ -86,6 +86,8 @@ footer p {
    margin: 0;
    color: #c55e00;
    font-size: 3em;
+    text-decoration: underline 0.1em #c55e00;
+    text-underline-offset: 0.1em;
 }

 .brand-text {
@@ -100,12 +102,17 @@ footer p {
 }
  
 .header-link {
+    color: white;
    margin: 1rem;
-    border-bottom: 3px solid #c55e00;
    font-size: 1rem;
-    color: #222;
-    text-decoration: none;
-    color: #ccc;
+    text-decoration: underline 0.1em #c55e00;
+    text-underline-offset: 0.1em;
+    transition: text-decoration-color 300ms, text-underline-offset 300ms;
+}
+
+.header-link:hover {
+    text-decoration-color: red;
+    text-underline-offset: 0.2em;
 }
  
 .header-text {