hover links red with offset

djlearn/pages/static/css/landing.css

@@ -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 {

djlearn/pages/templates/pages/index.html

@@ -25,10 +25,12 @@
             <div class="landing-section-content">
                 <div class="landing-section-content-inner shade">
                     <h1 class="brand">PyHub</h1>
+                    <!--
                     <h2>
                         <span class="brand-text">Land</span>ing
                         <span class="brand-text">Pa</span>ge
                     </h2>
+                    -->
                     <p class="landing-main-text">
                         This is the PyHub landing Page
                         <br>