menu styling and active page state

css/style.css

@@ -154,8 +154,14 @@
   --color-primary-button-hover: var(--color-orange-500);
   --color-primary-button-active: var(--color-orange-red-600);
   
+  --color-menu-button: none;
+  --color-menu-button-hover: light-dark(var(--color-neutral-400), var(--color-neutral-600));
+  
   --color-text-button: var(--color-neutral-900);
-  --color-text-button-active: var(--color-neutral-100);
+  --color-text-button-hover: var(--color-neutral-100);
+  
+  --color-menu-text-button: light-dark(var(--color-neutral-800), var(--color-neutral-200));
+  --color-menu-text-button-hover: light-dark(var(--color-neutral-900), var(--color-neutral-100));
   
   --shadow-box: var(--shadow-light);
   
@@ -346,7 +352,7 @@ a:visited {
   text-decoration-thickness: 0.175rem;
 }
 
-button, .link-button, .logo {
+button, .link-button, .menu-button, .logo {
   appearance: none;
   -webkit-appearance: none;
   display: inline-flex;
@@ -359,15 +365,24 @@ button, .link-button, .logo {
   line-height: var(--line-normal);
   letter-spacing: 0.025rem;
   padding: 0.875rem 1rem;
-  background: var(--color-primary-button);
   font-size: var(--text-button);
-  color: var(--color-text-button);
   border: none;
   border-radius: var(--radius-xxl);
-  box-shadow: var(--shadow-button);
   text-decoration: none;
 }
 
+button, .link-button, .logo, .desktop-nav a[aria-current="page"],
+.mobile-menu a[aria-current="page"] {
+  background: var(--color-primary-button);
+  color: var(--color-text-button);
+  box-shadow: var(--shadow-button);
+}
+
+.menu-button {
+  background: var(--color-menu-button);
+  color: var(--color-menu-text-button);
+}
+
 .logo {
   padding: 1rem;
   aspect-ratio: 1/1;
@@ -384,18 +399,23 @@ button, .link-button, .logo {
   fill: currentColor;
 }
 
-button:hover, .link-button:hover, .logo:hover {
+button:hover, .link-button:hover, .logo:hover, .desktop-nav a[aria-current="page"]:hover, .mobile-menu a[aria-current="page"]:hover {
   background: var(--color-primary-button-hover);
   color: var(--color-text-button);
 }
 
-button:active, .link-button:active, .logo:active {
+.menu-button:hover {
+  background: var(--color-menu-button-hover);
+  color: var(--color-menu-text-button-hover);
+}
+
+button:active, .link-button:active, .logo:active, .desktop-nav a[aria-current="page"]:active, .mobile-menu a[aria-current="page"]:active {
   background: var(--color-primary-button-active);
   box-shadow: var(--shadow-button-active);
   color: var(--color-text-button-active);
 }
 
-button:visited, .link-button:visited, .logo:visited {
+button:visited, .link-button:visited, .logo:visited, .desktop-nav a[aria-current="page"]:hover, .mobile-menu a[aria-current="page"]:hover {
   color: var(--color-text-button);
   text-decoration: none;
 }
@@ -438,9 +458,9 @@ button:visited, .link-button:visited, .logo:visited {
   align-items: center;
   justify-content: space-between;
   gap: 1rem;
-  background: rgb(255 255 255 / 0.88);
+  /* background: rgb(255 255 255 / 0.88);
   backdrop-filter: blur(10px);
-  -webkit-backdrop-filter: blur(10px);
+  -webkit-backdrop-filter: blur(10px); */
 }
 
 .menu-bar .menu-left {
@@ -458,10 +478,11 @@ button:visited, .link-button:visited, .logo:visited {
 
 .desktop-nav {
   flex: 1;  
-  background: var(--color-neutral-200);
+  background: light-dark(var(--color-neutral-200), var(--color-neutral-800));
   border-radius: var(--radius-xxl);
   box-shadow: var(--shadow-button);
-  padding: var(--spacing-1);
+  padding: var(--spacing-2);
+  height: 100%;
 }
 
 .desktop-nav ul,
@@ -473,21 +494,16 @@ button:visited, .link-button:visited, .logo:visited {
 
 .desktop-nav ul {
   display: flex;
-  gap: 1rem;
+  gap: var(--spacing-2);
 }
 
-.desktop-nav ul li {
+/* .desktop-nav ul li {
   margin: 0;
-}
+} */
 
-.desktop-nav ul li a {
+.desktop-nav a[aria-current="page"],
-  align-self: stretch;
+.mobile-menu a[aria-current="page"] {
-}
+  
-
-.desktop-nav a,
-.mobile-menu a {
-  color: inherit;
-  text-decoration: none;
 }
 
 .menu-toggle,

index.html

@@ -38,9 +38,9 @@
       
         <nav class="desktop-nav" aria-label="Primary navigation">
           <ul>
-            <li><a href="#" class="link-button">Home</a></li>
+            <li><a href="/" class="menu-button" aria-current="page">Work</a></li>
-            <li><a href="#" class="link-button">Work</a></li>
+            <li><a href="/legal-notice.html" class="menu-button">About</a></li>
-            <li><a href="#" class="link-button">About</a></li>
+            <li><a href="/privacy.html" class="menu-button">Blog</a></li>
           </ul>
         </nav>
       </div>
@@ -78,9 +78,9 @@
   
     <nav aria-label="Mobile navigation">
       <ul>
-        <li><a href="#" class="link-button">Home</a></li>
+        <li><a href="/" class="link-button" aria-current="page">Work</a></li>
-        <li><a href="#" class="link-button">Work</a></li>
+        <li><a href="/legal-notice.html" class="link-button">About</a></li>
-        <li><a href="#" class="link-button">About</a></li>
+        <li><a href="/privacy.html" class="link-button">Blog</a></li>
       </ul>
     </nav>
   </aside>