69 lines
1.3 KiB
Plaintext
69 lines
1.3 KiB
Plaintext
---
|
|
import ArrowUpRight from "./icons/ArrowUpRight.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 */}
|
|
<Logo class="logo" />
|
|
|
|
{/* Contact Link */}
|
|
<a class="contact">
|
|
<span class="heading-gradient">Contact us</span>
|
|
<ArrowUpRight class="icon" />
|
|
</a>
|
|
|
|
{/* Menu Button */}
|
|
<Menu class="menu" />
|
|
</header>
|
|
|
|
<style>
|
|
header {
|
|
display: grid;
|
|
grid-template-columns: var(--base-grid);
|
|
align-items: center;
|
|
padding-inline: 5rem;
|
|
padding-block: 1rem;
|
|
max-width: var(--max-content-width);
|
|
margin-inline: auto;
|
|
position: fixed;
|
|
top: 0;
|
|
inset-inline: 0;
|
|
}
|
|
|
|
.logo {
|
|
width: 12.5rem;
|
|
transform: translate3d(-0.75rem, 0, 0);
|
|
|
|
grid-column: 1 / 3;
|
|
}
|
|
|
|
.contact {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
grid-column: -2 / -4;
|
|
justify-self: end;
|
|
|
|
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: 1.5rem;
|
|
height: 1.5rem;
|
|
}
|
|
|
|
.menu {
|
|
grid-column: -1 / -2;
|
|
justify-self: end;
|
|
</style>
|