Header Updates (#108)

Problem
=======

- Get the header updated to the correct colors and width patterns
- Update headers in light mode to be primary
- Move all text-navy to text-primary

Part of #87

package.json

@@ -19,13 +19,13 @@
     "lint": "npm run lint:md && npm run lint:spellcheck"
   },
   "devDependencies": {
-    "@frequency-chain/style-guide": "^0.1.16",
+    "@frequency-chain/style-guide": "^0.1.19",
     "remark": "^15.0.1",
     "remark-cli": "^12.0.1",
     "remark-lint": "^10.0.0",
     "remark-preset-lint-recommended": "^7.0.0",
     "spellchecker-cli": "^7.0.0",
-    "tailwindcss": "^3.4.14"
+    "tailwindcss": "^3.4.15"
   },
   "engines": {
     "node": ">=20"

theme/css/variables.css

@@ -71,7 +71,7 @@
 .light {
   --bg: #fff;
   --fg: #000;
-  --headers: #14313f;
+  --headers: #18465e;
 
   --sidebar-bg: #14313f;
   --sidebar-fg: #fff;

theme/header.hbs

@@ -1,5 +1,5 @@
 <header id="header" class="bg-white header-shadow flex h-[85px] font-title sticky left-0 top-0 w-full z-10">
-	<div class="m-auto flex h-[85px] w-full max-w-screen-lg items-stretch justify-around px-f20 md:px-f32">
+	<div class="m-auto flex h-[85px] w-full max-w-screen-xl justify-between px-[10px] sm:px-[30px] md:px-[40px] lg:px-[80px]">
 		<a href="https://www.frequency.xyz/" target="_blank" class="flex w-[146px] items-center text-teal md:w-[200px]">
 			<svg viewBox="0 0 257 36" fill="none" xmlns="http://www.w3.org/2000/svg">
 				<path
@@ -8,28 +8,28 @@
 				/>
 			</svg>
 		</a>
-		<nav class="hidden items-stretch gap-f40 md:flex">
-			<a href="https://www.frequency.xyz/#mission" target="_blank" class="h6 underline-on-nav-hover border-color hidden content-center px-2 text-navy transition-all duration-1000 after:bg-teal lg:block">
+		<nav class="hidden gap-f32 md:flex">
+			<a href="https://www.frequency.xyz/#mission" target="_blank" class="h6 underline-on-nav-hover border-color hidden content-center px-2 text-primary transition-all duration-1000 after:bg-teal lg:block">
 			 Mission
 			</a>
-			<a href="https://www.frequency.xyz/#about" target="_blank" class="h6 underline-on-nav-hover border-color hidden content-center px-2 text-navy transition-all duration-1000 after:bg-teal lg:block">
+			<a href="https://www.frequency.xyz/#about" target="_blank" class="h6 underline-on-nav-hover border-color hidden content-center px-2 text-primary transition-all duration-1000 after:bg-teal lg:block">
 			 About
 			</a>
-			<a href="https://www.frequency.xyz/#user" target="_blank" class="h6 underline-on-nav-hover border-color hidden content-center px-2 text-navy transition-all duration-1000 after:bg-teal lg:block">
+			<a href="https://www.frequency.xyz/#user" target="_blank" class="h6 underline-on-nav-hover border-color hidden content-center px-2 text-primary transition-all duration-1000 after:bg-teal lg:block">
 			 User
 			</a>
-			<a href="https://www.frequency.xyz/#developers" target="_blank" class="h6 underline-on-nav-hover border-color hidden content-center px-2 text-navy transition-all duration-1000 after:bg-teal lg:block">
+			<a href="https://www.frequency.xyz/#developers" target="_blank" class="h6 underline-on-nav-hover border-color hidden content-center px-2 text-primary transition-all duration-1000 after:bg-teal lg:block">
 			 Developers
 			</a>
-			<a href="https://www.frequency.xyz/#ecosystem" target="_blank" class="h6 underline-on-nav-hover border-color hidden content-center px-2 text-navy transition-all duration-1000 after:bg-teal lg:block">
+			<a href="https://www.frequency.xyz/#ecosystem" target="_blank" class="h6 underline-on-nav-hover border-color hidden content-center px-2 text-primary transition-all duration-1000 after:bg-teal lg:block">
 			 Ecosystem
 			</a>
-			<a href="https://www.frequency.xyz/#contact" target="_blank" class="h6 underline-on-nav-hover border-color hidden content-center px-2 text-navy transition-all duration-1000 after:bg-teal lg:block">
+			<a href="https://www.frequency.xyz/#contact" target="_blank" class="h6 underline-on-nav-hover border-color hidden content-center px-2 text-primary transition-all duration-1000 after:bg-teal lg:block">
 			 Contact
 			</a>
 			<div class="content-center">
 				<a target="_self" href="/" class="pointer-events-auto block">
-					<button class="rounded-full px-f24 py-f8 text-center transition-all bg-teal text-navy hover:bg-tealDark hover:text-black hover:shadow-md w-auto">
+					<button class="rounded-full px-f24 py-f8 text-center transition-all bg-teal text-black hover:bg-tealDark hover:shadow-md w-auto">
 						<div class="font-bold flex items-center justify-center gap-f8 font-sans">Developer Portal</div>
 					</button>
 				</a>
@@ -77,7 +77,7 @@
 				<a href="https://www.frequency.xyz/#ecosystem" target="_blank" class="h4 underline-on-hover font-bold after:bg-white">Ecosystem</a>
 				<a href="https://www.frequency.xyz/#contact" target="_blank" class="h4 underline-on-hover font-bold after:bg-white">Contact</a>
 				<a class="pointer-events-auto block" target="_self" href="/">
-					<button class="rounded-full px-f24 py-f8 text-center transition-all bg-teal text-navy hover:bg-tealDark hover:text-black hover:shadow-md w-full mt-f24 max-w-[360px] md:hidden" target="_self">
+					<button class="rounded-full px-f24 py-f8 text-center transition-all bg-teal text-black hover:bg-tealDark hover:shadow-md w-full mt-f24 max-w-[360px] md:hidden" target="_self">
 						<div class="font-bold flex items-center justify-center gap-f8 font-sans">Developer Portal</div>
 					</button>
 				</a>