From a1bd3f15bd059017e089e188e17bd78fdb62a4ac Mon Sep 17 00:00:00 2001
From: Adam <24621027+adoyle0@users.noreply.github.com>
Date: Fri, 19 Jan 2024 21:35:38 -0500
Subject: [PATCH] style nav

---
 doordesk/app/src/lib.rs     | 12 +++++++-----
 doordesk/style/tailwind.css | 19 ++++++++++++-------
 2 files changed, 19 insertions(+), 12 deletions(-)

diff --git a/doordesk/app/src/lib.rs b/doordesk/app/src/lib.rs
index cc3b7c3..9b764e9 100644
--- a/doordesk/app/src/lib.rs
+++ b/doordesk/app/src/lib.rs
@@ -23,21 +23,23 @@ pub fn App() -> impl IntoView {
             outside_errors.insert_with_default_key(AppError::NotFound);
             view! { <ErrorTemplate outside_errors/> }.into_view()
         }>
+            // Some repetitive nav styling is defined in the main .css file
             <nav class="sticky top-0 z-50 bg-gradient-to-b shadow-lg from-zinc-800 to-zinc-900">
                 <ul class="container flex items-center p-3">
-                    <li class="mx-1.5 sm:mx-6">"DoorDesk"</li>
-                    <li class="mx-1.5 sm:mx-6">
+                    // Logo
+                    <p class="mx-1.5 sm:mx-6">"DoorDesk"</p>
+                    <li>
                         <A href="" exact=true>
                             "Home"
                         </A>
                     </li>
-                    <li class="mx-1.5 sm:mx-6">
+                    <li>
                         <A href="/blog">"Blog"</A>
                     </li>
-                    <li class="mx-1.5 sm:mx-6">
+                    <li>
                         <A href="/projects">"Projects"</A>
                     </li>
-                    <li class="mx-1.5 sm:mx-6">
+                    <li>
                         <a href="https://git.doordesk.net">"Git"</a>
                     </li>
                 </ul>
diff --git a/doordesk/style/tailwind.css b/doordesk/style/tailwind.css
index 8bfb758..efeb7b2 100644
--- a/doordesk/style/tailwind.css
+++ b/doordesk/style/tailwind.css
@@ -2,15 +2,21 @@
 @tailwind components;
 @tailwind utilities;
 
-body {
-  @apply bg-gradient-to-br from-zinc-900 to-zinc-950 bg-fixed;
-  @apply w-screen h-screen;
+html {
   @apply text-orange-50 antialiased font-mono tracking-tighter;
 }
 
-a[aria-current="page"] {
-  border-bottom: 2px solid #de0002;
-  filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));
+body {
+  @apply bg-gradient-to-br from-zinc-900 to-zinc-950 bg-fixed;
+}
+
+nav li {
+  @apply border-b-2 mx-1.5 sm:mx-6;
+  @apply border-transparent hover:border-orange-700 duration-300;
+}
+
+nav li:has(> a[aria-current="page"]) {
+  @apply border-b-orange-700 border-b-2;
 }
 
 /* for innerHTML articles */
@@ -43,7 +49,6 @@ article ol {
   @apply list-decimal;
 }
 
-
 /* Code blocks */
 .hh4 {
   @apply text-orange-600;