92 lines
1.7 KiB
Plaintext
92 lines
1.7 KiB
Plaintext
---
|
|
import Logo from "../assets/ci/side-light.svg";
|
|
import ArrowUpRight from "./icons/ArrowUpRight.astro";
|
|
import SkipNavLink from "./SkipNavLink.astro";
|
|
---
|
|
|
|
<header>
|
|
<SkipNavLink contentId="main-content" />
|
|
|
|
{/* Logo */}
|
|
<Logo class="logo" />
|
|
|
|
{/* Contact Link */}
|
|
<a href="mailto:office@tideshiftdigital.com">
|
|
<span class="heading-gradient">Contact us</span>
|
|
<ArrowUpRight class="icon char" />
|
|
</a>
|
|
|
|
{/* Menu Button */}
|
|
{/* <NewMenu 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;
|
|
z-index: 10;
|
|
}
|
|
|
|
.logo {
|
|
width: 12.5rem;
|
|
transform: translate3d(-0.75rem, 0, 0);
|
|
|
|
grid-column: 1 / 3;
|
|
}
|
|
|
|
a {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
grid-column: -1 / -3;
|
|
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;
|
|
}*/
|
|
</style>
|
|
|
|
<script>
|
|
import { gsap } from "gsap";
|
|
import { SplitText } from "gsap/SplitText";
|
|
import { ScrollTrigger } from "gsap/ScrollTrigger";
|
|
|
|
gsap.registerPlugin(SplitText);
|
|
gsap.registerPlugin(ScrollTrigger);
|
|
|
|
const header = document.querySelector("header");
|
|
|
|
if (header) {
|
|
const tl = gsap.timeline();
|
|
|
|
tl.from(header.children, {
|
|
duration: 1,
|
|
yPercent: -120,
|
|
opacity: 0,
|
|
stagger: 0.2,
|
|
ease: "expo.out",
|
|
});
|
|
}
|
|
</script>
|