CSS modificaitons of navabar

oceanbluesky · Nov 15, 2024 · e2cd547 · e2cd547
1 parent 282306d
commit e2cd547
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 7 deletions.
diff --git a/dist/assets/dioxus/name_bg.wasm b/dist/assets/dioxus/name_bg.wasm
diff --git a/dist/tailwindcsscdffee384e210b4b.css b/dist/tailwindcsscdffee384e210b4b.css
diff --git a/src/components/navbar.rs b/src/components/navbar.rs
@@ -5,46 +5,48 @@ use crate::Route;
 pub fn NavBar() -> Element {
     rsx! {
         nav {
-            ul { class: "flex list-none p-0 m-0 gap-4",
+            class: "flex justify-center", // Centers the navbar
+            ul {
+                class: "flex list-none p-0 m-0 gap-3 text-sm font-medium text-gray-800", // Slightly smaller, closer items, clear font
                 li {
                     Link {
                         to: Route::Home {},
-                        class: "no-underline text-inherit px-4 py-2 hover:bg-gray-200 rounded-md",
+                        class: "no-underline px-3 py-2 hover:bg-blue-200 rounded-md transition-colors duration-200",
                         "Home"
                     }
                 }
                 li {
                     Link {
                         to: Route::About {},
-                        class: "no-underline text-inherit px-4 py-2 hover:bg-gray-200 rounded-md",
+                        class: "no-underline px-3 py-2 hover:bg-blue-200 rounded-md transition-colors duration-200",
                         "About"
                     }
                 }
                 li {
                     Link {
                         to: Route::EssaysList {},
-                        class: "no-underline text-inherit px-4 py-2 hover:bg-gray-200 rounded-md",
+                        class: "no-underline px-3 py-2 hover:bg-blue-200 rounded-md transition-colors duration-200",
                         "Essays"
                     }
                 }
                 li {
                     Link {
                         to: Route::Projects {},
-                        class: "no-underline text-inherit px-4 py-2 hover:bg-gray-200 rounded-md",
+                        class: "no-underline px-3 py-2 hover:bg-blue-200 rounded-md transition-colors duration-200",
                         "Projects"
                     }
                 }
                 li {
                     Link {
                         to: Route::Research {},
-                        class: "no-underline text-inherit px-4 py-2 hover:bg-gray-200 rounded-md",
+                        class: "no-underline px-3 py-2 hover:bg-blue-200 rounded-md transition-colors duration-200",
                         "Research"
                     }
                 }
                 li {
                     Link {
                         to: Route::Contact {},
-                        class: "no-underline text-inherit px-4 py-2 hover:bg-gray-200 rounded-md",
+                        class: "no-underline px-3 py-2 hover:bg-blue-200 rounded-md transition-colors duration-200",
                         "Contact"
                     }
                 }