Make header links white with orange on hover

astropy · Sep 14, 2021 · 444c0d0 · 444c0d0
1 parent fab52dd
commit 444c0d0
Showing 1 changed file with 22 additions and 3 deletions.
diff --git a/src/components/header.js b/src/components/header.js
@@ -33,10 +33,29 @@ const HeaderContainer = styled.header`
   .astropy-link {
     margin-left: auto;
   }
+
+  a {
+    color: var(--astropy-neutral-900);
+  }
+
+  a:hover {
+    text-decoration: none;
+  }
 `;
 
 const NavItem = styled.div`
+  transition: all 0.2s ease-in-out;
   margin: 0 1em;
+  border-bottom: 2px solid transparent;
+
+  &:hover {
+    border-bottom: 2px solid var(--astropy-primary-color);
+    color: var(--astropy-primary-color);
+  }
+
+  .astropy-link {
+    margin-left: auto;
+  }
 `;
 
 /*
@@ -58,9 +77,9 @@ export default function NavHeader() {
             <Link to="/contributing">Contribute</Link>
           </NavItem>
         </nav>
-        <a className="astropy-link" href="https://astropy.org">
-          Astropy Project
-        </a>
+        <NavItem className="astropy-link">
+          <a href="https://astropy.org">Astropy Project</a>
+        </NavItem>
       </HeaderContainer>
     </>
   );