From 3f10dd4c0770d8b1f3f93df99b4769682789a9b9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bartal=20L=C3=A6arsson?= <bartal@flo.fo>
Date: Mon, 22 Jun 2026 13:28:56 +0100
Subject: [PATCH] footer

---
 static/app.css      |  9 +++++++++
 templates/page.html | 28 +++++++++++++++++++++-------
 2 files changed, 30 insertions(+), 7 deletions(-)

diff --git a/static/app.css b/static/app.css
index 44bf478..951cb13 100644
--- a/static/app.css
+++ b/static/app.css
@@ -187,6 +187,15 @@ nav a {
 }
 nav a:hover { color: var(--fg); border-bottom-color: transparent; }
 
+nav a.active {
+  color: var(--fg);
+  border-bottom-color: var(--fg);
+}
+.offcanvas-links a.active {
+  color: var(--fg);
+  border-bottom-color: var(--fg);
+}
+
 footer {
   padding: 0.9rem 1.5rem;
   color: var(--muted);
diff --git a/templates/page.html b/templates/page.html
index e1780f3..6b8689c 100644
--- a/templates/page.html
+++ b/templates/page.html
@@ -24,9 +24,9 @@
   <a href="https://fló.fo" class="back-link">← FLÓ.FO</a>
   <span class="brand">FLÓ <span class="brand-sep">/</span> <span class="brand-sub">ZEITKORT</span></span>
   <nav class="nav-desktop">
-    <a href="/">Timer</a>
-    <a hx-get="/settings" hx-target="#main" href="javascript:void(0)">Settings</a>
-    <a hx-get="/about" hx-target="#main" href="javascript:void(0)">About</a>
+    <a href="/">[TIMER]</a>
+    <a hx-get="/settings" hx-target="#main" href="javascript:void(0)">[SETTINGS]</a>
+    <a hx-get="/about" hx-target="#main" href="javascript:void(0)">[ABOUT]</a>
   </nav>
   <button id="nav-hamburger" class="nav-hamburger" aria-label="Open menu">
     <span></span><span></span><span></span>
@@ -36,14 +36,14 @@
 <!-- Off-canvas mobile menu -->
 <div id="nav-overlay" class="nav-overlay"></div>
 <div id="nav-offcanvas" class="nav-offcanvas">
-  <div class="offcanvas-header">
+  <div class="offcanvas-header">I
     <span class="brand">FLÓ <span class="brand-sep">/</span> <span class="brand-sub">ZEITKORT</span></span>
     <button id="nav-close" class="nav-close" aria-label="Close menu">&#x2715;</button>
   </div>
   <div class="offcanvas-links">
-    <a href="/">Timer</a>
-    <a hx-get="/settings" hx-target="#main" href="javascript:void(0)">Settings</a>
-    <a hx-get="/about" hx-target="#main" href="javascript:void(0)">About</a>
+    <a href="/">[TIMER]</a>
+    <a hx-get="/settings" hx-target="#main" href="javascript:void(0)">[SETTINGS]</a>
+    <a hx-get="/about" hx-target="#main" href="javascript:void(0)">[ABOUT]</a>
   </div>
 </div>
 
@@ -100,6 +100,20 @@
   if (closeBtn) closeBtn.addEventListener('click', close);
   if (overlay) overlay.addEventListener('click', close);
   panel.querySelectorAll('a').forEach(function(a) { a.addEventListener('click', close); });
+
+  // Mark active link on click
+  document.querySelectorAll('nav a, .offcanvas-links a').forEach(function(a) {
+    a.addEventListener('click', function() {
+      document.querySelectorAll('nav a, .offcanvas-links a').forEach(function(el) {
+        el.classList.remove('active');
+      });
+      var href = a.getAttribute('hx-get') || a.getAttribute('href');
+      document.querySelectorAll('nav a, .offcanvas-links a').forEach(function(el) {
+        var elHref = el.getAttribute('hx-get') || el.getAttribute('href');
+        if (elHref === href) el.classList.add('active');
+      });
+    });
+  });
 })();
 </script>
 </body>