fix: improve layout and responsiveness of header and navigation elements in styles.css

dist/css/styles.css

@@ -173,6 +173,7 @@ html {
   line-height: 1.6;
   -webkit-text-size-adjust: 100%;
   overflow-x: hidden;
+  height: 100%;
 }
 
 body {
@@ -186,8 +187,6 @@ body {
   min-height: 100vh;
   margin: 0;
   overflow-x: hidden;
-  display: flex;
-  flex-direction: column;
 }
 
 svg,
@@ -256,9 +255,8 @@ a:hover {
 /* Layout containers */
 .page-wrapper {
   min-height: 100vh;
-  display: flex;
-  flex-direction: column;
   overflow-x: hidden;
+  position: relative;
 }
 
 .container {
@@ -276,16 +274,29 @@ a:hover {
 
 /* Header */
 .site-header {
-  position: sticky;
+  position: fixed;
   top: 0;
-  z-index: 100;
-  background: rgba(255, 255, 255, .9);
-  backdrop-filter: blur(10px) saturate(140%);
+  left: 0;
+  right: 0;
+  z-index: 1000;
+  background: rgba(255, 255, 255, .95);
+  backdrop-filter: blur(20px) saturate(150%);
+  -webkit-backdrop-filter: blur(20px) saturate(150%);
   border-bottom: 1px solid var(--border-primary);
   height: var(--header-height);
+  width: 100%;
 }
 
-[data-theme="dark"] .site-header { background: rgba(15, 23, 42, .9); }
+[data-theme="dark"] .site-header { 
+  background: rgba(15, 23, 42, .95); 
+}
+
+/* Main content */
+.main-content {
+  flex: 1;
+  position: relative;
+  padding-top: var(--header-height);
+}
 
 .header-content {
   display: flex;
@@ -448,8 +459,8 @@ a:hover {
   display: flex;
   align-items: center;
   justify-content: center;
-  width: 44px;
-  height: 44px;
+  width: 48px;
+  height: 48px;
   border: 2px solid var(--border-primary);
   border-radius: var(--radius-full);
   background: var(--bg-primary);
@@ -461,15 +472,15 @@ a:hover {
 
 @media (max-width:600px) {
   .dark-mode-toggle {
-    width: 40px;
-    height: 40px
+    width: 40px !important;
+    height: 40px !important;
   }
 }
 
 @media (max-width:380px) {
   .dark-mode-toggle {
-    width: 36px;
-    height: 36px
+    width: 36px !important;
+    height: 36px !important;
   }
 }
 
@@ -506,7 +517,7 @@ a:hover {
   display: none;
   flex-direction: column;
   justify-content: center;
-  gap: 5px;
+  gap: 3px;
   width: 48px;
   height: 48px;
   background: var(--bg-primary);
@@ -521,20 +532,20 @@ a:hover {
 
 @media (max-width:600px) {
   .nav-toggle {
-    width: 40px;
-    height: 40px
+    width: 40px !important;
+    height: 40px !important;
   }
 }
 
 @media (max-width:380px) {
   .nav-toggle {
-    width: 36px;
-    height: 36px
+    width: 36px !important;
+    height: 36px !important;
   }
 }
 
 .nav-toggle-bar {
-  width: 22px;
+  width: 18px;
   height: 2px;
   background: var(--text-primary);
   border-radius: 2px;
@@ -544,7 +555,7 @@ a:hover {
 }
 
 .nav-open .nav-toggle-bar:nth-child(1) {
-  transform: translateY(7px) rotate(45deg);
+  transform: translateY(5px) rotate(45deg);
 }
 
 .nav-open .nav-toggle-bar:nth-child(2) {
@@ -552,7 +563,7 @@ a:hover {
 }
 
 .nav-open .nav-toggle-bar:nth-child(3) {
-  transform: translateY(-7px) rotate(-45deg);
+  transform: translateY(-5px) rotate(-45deg);
 }
 
 .nav-overlay {
@@ -576,7 +587,9 @@ a:hover {
 /* Mobile nav */
 @media (max-width:900px) {
   .nav-toggle {
-    display: inline-flex
+    display: inline-flex;
+    width: 48px !important;
+    height: 48px !important;
   }
 
   .header-nav {
@@ -627,13 +640,18 @@ a:hover {
   .dark-mode-toggle {
     display: flex;
     flex: 0 0 auto;
-    width: 44px;
-    height: 44px;
+    width: 40px !important;
+    height: 40px !important;
     order: 3;
     align-self: center;
     z-index: 110
   }
 
+  .nav-toggle {
+    width: 40px !important;
+    height: 40px !important;
+  }
+
   body:not(.js-ready) .header-nav,
   body:not(.js-ready) .nav-toggle-bar,
   body:not(.js-ready) .nav-overlay {