Continue Header, Footer, add SkipNavLink

src/components/Header.astro

@@ -1,22 +1,24 @@
 ---
 import ArrowUpRight from "./icons/ArrowUpRight.astro";
-import MenuIcon from "./icons/MenuIcon.astro";
+import Logo from "../assets/ci/side-light.svg";
+import Menu from "./Menu.astro";
+import SkipNavLink from "./SkipNavLink.astro";
 ---
 
 <header>
+  <SkipNavLink contentId="main-content" />
+
   {/* Logo */}
-  <div class="logo"></div>
+  <Logo class="logo" />
 
   {/* Contact Link */}
   <a class="contact">
-    <span>Contact us</span>
+    <span class="heading-gradient">Contact us</span>
     <ArrowUpRight class="icon" />
   </a>
 
   {/* Menu Button */}
-  <button>
-    <MenuIcon class="menu-icon" />
-  </button>
+  <Menu class="menu" />
 </header>
 
 <style>
@@ -24,16 +26,18 @@ import MenuIcon from "./icons/MenuIcon.astro";
     display: grid;
     grid-template-columns: var(--base-grid);
     align-items: center;
-    padding: 2.5rem;
+    padding-inline: 5rem;
+    padding-block: 1rem;
+    max-width: var(--max-content-width);
+    margin-inline: auto;
     position: fixed;
     top: 0;
     inset-inline: 0;
   }
 
   .logo {
-    width: 200px;
-    height: 50px;
-    background-color: salmon;
+    width: 12.5rem;
+    transform: translate3d(-0.75rem, 0, 0);
 
     grid-column: 1 / 3;
   }
@@ -44,28 +48,21 @@ import MenuIcon from "./icons/MenuIcon.astro";
     gap: 0.5rem;
     grid-column: -2 / -4;
     justify-self: end;
-    font-size: 1.5rem;
+    font-size: 1.25rem;
     font-weight: 600;
     text-transform: uppercase;
     letter-spacing: var(--tracking-tight);
+    line-height: var(--leading-title);
   }
 
   .icon {
     display: inline-block;
-    width: 2rem;
-    height: 2rem;
+    width: 1.5rem;
+    height: 1.5rem;
   }
 
-  button {
+  .menu {
     grid-column: -1 / -2;
-    background-color: transparent;
-    border: none;
-
-  }
-
-  .menu-icon {
-    display: inline-block;
-    width: 3.125rem:
-    height: 3.125rem:
+    justify-self: end;
   }
 </style>