update

index.html

@@ -76,8 +76,24 @@
     </footer>
     
     <script type="text/javascript">
+      /* Add eventlistener to hash links */
+      var els = document.querySelectorAll('a[href^="#"]');
+      els.forEach(function(el) {
+          el.addEventListener('click',function(e) {
+              setActiveLink(el.getAttribute('href'))
+          });
+      });
+      /* Set the actice hash/class function */
+      function setActiveLink(hash) {
+          var links = document.querySelectorAll('a[href^="#"]');
+          links.forEach(function(link) {
+              link.classList.remove('active');
+              if(link.getAttribute('href')==hash) link.classList.add('active');
+          });
+      }
       /* Make sure a hash is loaded */
       if (window.location.hash == '') window.location.href = '#home';
+      setActiveLink(window.location.hash);
     </script>
 
   </body>

style.css

@@ -20,6 +20,7 @@ div.centered {max-width: 22rem; text-align: center;}
 header {top: 0; padding: 0 3rem 0; height: 14rem; display: flex; flex-direction: column; justify-content: center;}
 header h1 {margin: 0 0 0.5rem;}
 header nav a {border-bottom: 1px solid transparent;}
+header nav a.active,
 header nav a:hover {border-color: #3a3731;}
 footer {padding: 0 3rem 3.5rem; transform: translate(-50%, -100%); font-style: italic; font-size: 0.8rem;}
 main {margin: 0 auto;}