From 60686a9a83c4ba61867e31de06145a105a2bd1eb Mon Sep 17 00:00:00 2001 From: Demetrius Semanko Date: Sat, 4 Jul 2026 13:22:50 -0400 Subject: [PATCH] refactor(CSS): move, scope navbar styling rules The navbar styling rules were moved to their respective components. Specifically, the `Navigation` component contains `NavItem` components. CSS rules that affected the `nav` element were scoped to the `Navigation` component. CSS rules affecting the `a` tags were scoped to the `NavItem` component. --- src/components/NavItem.astro | 39 +++++++++++++++++++++++ src/components/Navigation.astro | 26 +++++++++++++++ src/styles/global.css | 56 --------------------------------- 3 files changed, 65 insertions(+), 56 deletions(-) diff --git a/src/components/NavItem.astro b/src/components/NavItem.astro index a357cb3..bac7217 100644 --- a/src/components/NavItem.astro +++ b/src/components/NavItem.astro @@ -7,6 +7,45 @@ const isActive = href === "/" ? Astro.url.pathname === "/" : Astro.url.pathname.startsWith(href); --- + + nav { + /* Common styles */ + display: flex; + width: 100%; + } + + nav { + /* Small screen styles */ + align-items: center; + justify-content: center; + margin-bottom: 5px; + } + + @media screen and (min-width: 965px) { + /* Large screen styles */ + nav { + align-items: unset; + flex-direction: column; + justify-content: unset; + left: -15px; + position: fixed; + z-index: -1; + } + } +