From 2b6bad3348b7c877a3f6560c3d531b668c936282 Mon Sep 17 00:00:00 2001
From: Luis Pereira <luispereira.tkd@gmail.com>
Date: Thu, 9 Oct 2025 18:27:05 +0100
Subject: [PATCH] feat: improved nav styling

---
 static/asteroid.css  | 15 +++++++++++++--
 static/asteroid.lass | 19 +++++++++++++++----
 2 files changed, 28 insertions(+), 6 deletions(-)

diff --git a/static/asteroid.css b/static/asteroid.css
index 1e897b5..66339a2 100644
--- a/static/asteroid.css
+++ b/static/asteroid.css
@@ -43,15 +43,23 @@ body .panel{
 
 body .nav{
     margin: 20px 0;
+    display: flex;
+    gap: 5px;
+    flex-wrap: wrap;
+    justify-content: center;
 }
 
 body .nav a{
     color: #00ffff;
     text-decoration: none;
-    margin: 0 10px;
+    margin: 0;
     padding: 10px 20px;
     border: 1px solid #2a3441;
     background: #1a2332;
+    min-width: 100px;
+    text-align: center;
+    border-sizing: border-box;
+    letter-spacing: 0.08rem;
     cursor: pointer;
     display: inline-block;
 }
@@ -61,7 +69,10 @@ body .nav a:first-child{
 }
 
 body .nav a:hover{
+    text-decoration: underline;
+    text-underline-offset: 5px;
     background: #2a3441;
+    color: #00ff00;
 }
 
 body .nav .btn-logout{
@@ -917,4 +928,4 @@ body .stat-card .stat-label{
     color: #ccc;
     font-size: 0.875rem;
     margin-top: 0.5rem;
-}
\ No newline at end of file
+}
diff --git a/static/asteroid.lass b/static/asteroid.lass
index c60f6db..b95102d 100644
--- a/static/asteroid.lass
+++ b/static/asteroid.lass
@@ -41,13 +41,21 @@
 
     (.nav
      :margin "20px 0"
+     :display "flex"
+     :gap "5px"
+     :flex-wrap "wrap"
+     :justify-content center
      (a
       :color "#00ffff"
       :text-decoration none
-      :margin "0 10px"
+      :margin "0"
       :padding "10px 20px"
       :border "1px solid #2a3441"
       :background "#1a2332"
+      :min-width "100px"
+      :text-align "center"
+      :border-sizing "border-box"
+      :letter-spacing "0.08rem"
       :cursor pointer
       :display inline-block)
 
@@ -55,8 +63,11 @@
        :margin-left "0")
 
       ((:and a :hover)
-          :background "#2a3441")
-      
+       :text-decoration underline
+       :text-underline-offset "5px"
+       :background "#2a3441"
+       :color "#00ff00")
+
       ;; Logout button styling - subtle, not alarming
       (.btn-logout
        :background "#2a3441"
@@ -67,7 +78,7 @@
        :background "#3a4551"
        :border-color "#4a5561"
        :color "#ffaaaa"))
-    
+
     ;; Hide conditional auth elements by default (JavaScript will show them)
     (|[data-show-if-logged-in]|
      :display none)