disable menu for now
This commit is contained in:
@@ -3,6 +3,7 @@ import ArrowUpRight from "./icons/ArrowUpRight.astro";
|
||||
import Logo from "../assets/ci/side-light.svg";
|
||||
import Menu from "./Menu.astro";
|
||||
import SkipNavLink from "./SkipNavLink.astro";
|
||||
import NewMenu from "./NewMenu.astro";
|
||||
---
|
||||
|
||||
<header>
|
||||
@@ -12,13 +13,13 @@ import SkipNavLink from "./SkipNavLink.astro";
|
||||
<Logo class="logo" />
|
||||
|
||||
{/* Contact Link */}
|
||||
<a class="contact">
|
||||
<a class="contact" href="mailto:office@tideshiftdigital.com">
|
||||
<span class="heading-gradient">Contact us</span>
|
||||
<ArrowUpRight class="icon" />
|
||||
</a>
|
||||
|
||||
{/* Menu Button */}
|
||||
<Menu class="menu" />
|
||||
{/* <NewMenu class="menu" /> */}
|
||||
</header>
|
||||
|
||||
<style>
|
||||
@@ -46,7 +47,7 @@ import SkipNavLink from "./SkipNavLink.astro";
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
grid-column: -2 / -4;
|
||||
grid-column: -1 / -3;
|
||||
justify-self: end;
|
||||
|
||||
font-size: 1.25rem;
|
||||
@@ -62,7 +63,7 @@ import SkipNavLink from "./SkipNavLink.astro";
|
||||
height: 1.5rem;
|
||||
}
|
||||
|
||||
.menu {
|
||||
/*.menu {
|
||||
grid-column: -1 / -2;
|
||||
justify-self: end;
|
||||
}*/
|
||||
</style>
|
||||
|
||||
@@ -0,0 +1,62 @@
|
||||
---
|
||||
import MenuIcon from "./icons/MenuIcon.astro";
|
||||
---
|
||||
|
||||
<tsd-menu>
|
||||
<button>
|
||||
<MenuIcon class="menu-icon" />
|
||||
</button>
|
||||
|
||||
<nav>
|
||||
<ul>
|
||||
<li>Home</li>
|
||||
<li>Blog</li>
|
||||
</ul>
|
||||
</nav>
|
||||
</tsd-menu>
|
||||
|
||||
<script>
|
||||
class TsdMenu extends HTMLElement {
|
||||
connectedCallback() {
|
||||
const MENU_CLASS = "menu-open" as const;
|
||||
const menuButton = this.querySelector("button");
|
||||
|
||||
if (!menuButton) return;
|
||||
|
||||
menuButton.addEventListener("click", () => {
|
||||
document.body.classList.toggle(MENU_CLASS);
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
customElements.define("tsd-menu", TsdMenu);
|
||||
</script>
|
||||
|
||||
<style>
|
||||
button {
|
||||
display: flex;
|
||||
width: max-content;
|
||||
height: max-content;
|
||||
border: none;
|
||||
background-color: transparent;
|
||||
color: var(--clr-light-400);
|
||||
}
|
||||
|
||||
.menu-icon {
|
||||
width: 2.25rem;
|
||||
height: 2.25rem;
|
||||
transition: 0.2s ease-out;
|
||||
|
||||
body.menu-open & {
|
||||
transform: rotate3d(0, 0, 1, 135deg);
|
||||
}
|
||||
}
|
||||
|
||||
nav {
|
||||
display: none;
|
||||
|
||||
body.menu-open & {
|
||||
display: initial;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
+138
-128
@@ -3,156 +3,166 @@ const { class: classname, ...rest } = Astro.props;
|
||||
---
|
||||
|
||||
<svg
|
||||
class={classname}
|
||||
width="50"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
height="50"
|
||||
id="screenshot-8003f86b-8663-8006-8007-347270f3a7f8"
|
||||
viewBox="3016 382.207 50 50"
|
||||
style="-webkit-print-color-adjust::exact"
|
||||
xmlns:xlink="http://www.w3.org/1999/xlink"
|
||||
fill="none"
|
||||
version="1.1"
|
||||
{...rest}
|
||||
width="50"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
height="46"
|
||||
viewBox="4466 456 50 46"
|
||||
xmlns:xlink="http://www.w3.org/1999/xlink"
|
||||
fill="none"
|
||||
version="1.1"
|
||||
class={classname}
|
||||
{...rest}
|
||||
>
|
||||
<g
|
||||
id="shape-8003f86b-8663-8006-8007-347270f3a7f8"
|
||||
style="fill:#000000"
|
||||
width="24"
|
||||
class="feather feather-menu"
|
||||
height="24"
|
||||
rx="0"
|
||||
ry="0"
|
||||
>
|
||||
<g id="shape-8003f86b-8663-8006-8007-347270f3a7f9" style="display:none">
|
||||
<g class="fills" id="fills-8003f86b-8663-8006-8007-347270f3a7f9">
|
||||
<rect
|
||||
rx="0"
|
||||
ry="0"
|
||||
x="3016"
|
||||
y="382.206611570248"
|
||||
transform="matrix(-1.000000, 0.000000, 0.000000, -1.000000, 6082.000000, 814.413223)"
|
||||
width="50"
|
||||
height="50"
|
||||
<g id="shape-d5d105b8-8585-808b-8007-a058ef71df83">
|
||||
<g class="frame-container-wrapper">
|
||||
<g class="frame-container-blur">
|
||||
<g class="frame-container-shadows">
|
||||
<g fill="none">
|
||||
<g class="fills" id="fills-d5d105b8-8585-808b-8007-a058ef71df83">
|
||||
<rect
|
||||
rx="0"
|
||||
ry="0"
|
||||
x="4466"
|
||||
y="456"
|
||||
width="50"
|
||||
height="46"
|
||||
transform="matrix(1.000000, 0.000000, 0.000000, 1.000000, 0.000000, 0.000000)"
|
||||
class="frame-background"
|
||||
>
|
||||
</rect>
|
||||
</g>
|
||||
<g class="frame-children">
|
||||
<g
|
||||
id="shape-d5d105b8-8585-808b-8007-a058ef71df84"
|
||||
style="fill:#000000"
|
||||
width="24"
|
||||
class="feather feather-plus"
|
||||
height="24"
|
||||
rx="0"
|
||||
ry="0"
|
||||
>
|
||||
<g
|
||||
id="shape-d5d105b8-8585-808b-8007-a058ef71df85"
|
||||
style="display:none"
|
||||
>
|
||||
<g
|
||||
class="fills"
|
||||
id="fills-d5d105b8-8585-808b-8007-a058ef71df85"
|
||||
>
|
||||
<rect
|
||||
rx="0"
|
||||
ry="0"
|
||||
x="4466"
|
||||
y="456"
|
||||
transform="matrix(1.000000, 0.000000, 0.000000, 1.000000, 0.000000, 0.000000)"
|
||||
width="50"
|
||||
height="46"
|
||||
fill="none"
|
||||
stroke-linejoin="round"
|
||||
style="fill:none"
|
||||
>
|
||||
</rect>
|
||||
</g>
|
||||
<g
|
||||
fill="none"
|
||||
stroke-linejoin="round"
|
||||
style="fill:none"
|
||||
>
|
||||
</rect>
|
||||
</g>
|
||||
<g
|
||||
fill="none"
|
||||
stroke-linejoin="round"
|
||||
id="strokes-b7b76088-9f6d-80d6-8007-90ef313788eb-8003f86b-8663-8006-8007-347270f3a7f9"
|
||||
class="strokes"
|
||||
>
|
||||
<g
|
||||
class="inner-stroke-shape"
|
||||
transform="matrix(-1.000000, 0.000000, 0.000000, -1.000000, 6082.000000, 814.413223)"
|
||||
>
|
||||
<defs>
|
||||
id="strokes-d5d105b8-8585-808b-8007-a059e1681fe2-d5d105b8-8585-808b-8007-a058ef71df85"
|
||||
class="strokes"
|
||||
>
|
||||
<g
|
||||
class="inner-stroke-shape"
|
||||
transform="matrix(1.000000, 0.000000, 0.000000, 1.000000, 0.000000, 0.000000)"
|
||||
>
|
||||
<defs>
|
||||
<clipPath
|
||||
id="inner-stroke-render-658-8003f86b-8663-8006-8007-347270f3a7f9-0"
|
||||
id="inner-stroke-render-5087-d5d105b8-8585-808b-8007-a058ef71df85-0"
|
||||
>
|
||||
<use
|
||||
href="#stroke-shape-render-658-8003f86b-8663-8006-8007-347270f3a7f9-0"
|
||||
>
|
||||
</use>
|
||||
<use
|
||||
href="#stroke-shape-render-5087-d5d105b8-8585-808b-8007-a058ef71df85-0"
|
||||
>
|
||||
</use>
|
||||
</clipPath>
|
||||
<rect
|
||||
rx="0"
|
||||
ry="0"
|
||||
x="3016"
|
||||
y="382.206611570248"
|
||||
width="50"
|
||||
height="50"
|
||||
style="fill:none;fill-opacity:none;stroke-width:6;stroke:#ffffff;stroke-opacity:1"
|
||||
id="stroke-shape-render-658-8003f86b-8663-8006-8007-347270f3a7f9-0"
|
||||
rx="0"
|
||||
ry="0"
|
||||
x="4466"
|
||||
y="456"
|
||||
width="50"
|
||||
height="46"
|
||||
style="fill:none;fill-opacity:none;stroke-width:6;stroke:#e6e6e6;stroke-opacity:1"
|
||||
id="stroke-shape-render-5087-d5d105b8-8585-808b-8007-a058ef71df85-0"
|
||||
>
|
||||
</rect>
|
||||
</defs>
|
||||
<use
|
||||
href="#stroke-shape-render-658-8003f86b-8663-8006-8007-347270f3a7f9-0"
|
||||
clip-path="url('#inner-stroke-render-658-8003f86b-8663-8006-8007-347270f3a7f9-0')"
|
||||
>
|
||||
</use>
|
||||
</defs>
|
||||
<use
|
||||
href="#stroke-shape-render-5087-d5d105b8-8585-808b-8007-a058ef71df85-0"
|
||||
clip-path="url('#inner-stroke-render-5087-d5d105b8-8585-808b-8007-a058ef71df85-0')"
|
||||
>
|
||||
</use>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
<g id="shape-8003f86b-8663-8006-8007-347270f3a7fa">
|
||||
<g class="fills" id="fills-8003f86b-8663-8006-8007-347270f3a7fa">
|
||||
<path
|
||||
d="M3059.75,407.20648193359375L3022.25,407.20648193359375"
|
||||
fill="none"
|
||||
stroke-linejoin="round"
|
||||
style="fill:none"
|
||||
>
|
||||
</path>
|
||||
</g>
|
||||
<g
|
||||
fill="none"
|
||||
stroke-linejoin="round"
|
||||
id="strokes-b7b76088-9f6d-80d6-8007-90ef3137fa64-8003f86b-8663-8006-8007-347270f3a7fa"
|
||||
class="strokes"
|
||||
>
|
||||
<g class="stroke-shape">
|
||||
<g id="shape-d5d105b8-8585-808b-8007-a058ef71df86">
|
||||
<g
|
||||
class="fills"
|
||||
id="fills-d5d105b8-8585-808b-8007-a058ef71df86"
|
||||
>
|
||||
<path
|
||||
d="M3059.75,407.20648193359375L3022.25,407.20648193359375"
|
||||
style="fill:none;fill-opacity:none;stroke-width:3;stroke:#ffffff;stroke-opacity:1"
|
||||
d="M4491,465.5833435058594L4491,492.4166564941406"
|
||||
fill="none"
|
||||
stroke-linejoin="round"
|
||||
style="fill:none"
|
||||
>
|
||||
</path>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
<g id="shape-8003f86b-8663-8006-8007-347270f3a7fb">
|
||||
<g class="fills" id="fills-8003f86b-8663-8006-8007-347270f3a7fb">
|
||||
<path
|
||||
d="M3059.75,419.70648193359375L3038,419.70648193359375"
|
||||
</g>
|
||||
<g
|
||||
fill="none"
|
||||
stroke-linejoin="round"
|
||||
style="fill:none"
|
||||
>
|
||||
</path>
|
||||
</g>
|
||||
<g
|
||||
fill="none"
|
||||
stroke-linejoin="round"
|
||||
id="strokes-b7b76088-9f6d-80d6-8007-90ef31382957-8003f86b-8663-8006-8007-347270f3a7fb"
|
||||
class="strokes"
|
||||
>
|
||||
<g class="stroke-shape">
|
||||
id="strokes-d5d105b8-8585-808b-8007-a059e16857d2-d5d105b8-8585-808b-8007-a058ef71df86"
|
||||
class="strokes"
|
||||
>
|
||||
<g class="stroke-shape">
|
||||
<path
|
||||
d="M4491,465.5833435058594L4491,492.4166564941406"
|
||||
style="fill:none;fill-opacity:none;stroke-width:3;stroke:#e6e6e6;stroke-opacity:1"
|
||||
>
|
||||
</path>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
<g id="shape-d5d105b8-8585-808b-8007-a058ef7209c6">
|
||||
<g
|
||||
class="fills"
|
||||
id="fills-d5d105b8-8585-808b-8007-a058ef7209c6"
|
||||
>
|
||||
<path
|
||||
d="M3059.75,419.70648193359375L3038,419.70648193359375"
|
||||
style="fill:none;fill-opacity:none;stroke-width:3;stroke:#ffffff;stroke-opacity:1"
|
||||
d="M4476.41650390625,479L4505.58349609375,479"
|
||||
fill="none"
|
||||
stroke-linejoin="round"
|
||||
style="fill:none"
|
||||
>
|
||||
</path>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
<g id="shape-8003f86b-8663-8006-8007-347270f3a7fc">
|
||||
<g class="fills" id="fills-8003f86b-8663-8006-8007-347270f3a7fc">
|
||||
<path
|
||||
d="M3059.75,394.70648193359375L3028.5,394.70648193359375"
|
||||
</g>
|
||||
<g
|
||||
fill="none"
|
||||
stroke-linejoin="round"
|
||||
style="fill:none"
|
||||
>
|
||||
</path>
|
||||
</g>
|
||||
<g
|
||||
fill="none"
|
||||
stroke-linejoin="round"
|
||||
id="strokes-b7b76088-9f6d-80d6-8007-90ef31382958-8003f86b-8663-8006-8007-347270f3a7fc"
|
||||
class="strokes"
|
||||
>
|
||||
<g class="stroke-shape">
|
||||
<path
|
||||
d="M3059.75,394.70648193359375L3028.5,394.70648193359375"
|
||||
style="fill:none;fill-opacity:none;stroke-width:3;stroke:#ffffff;stroke-opacity:1"
|
||||
>
|
||||
</path>
|
||||
id="strokes-d5d105b8-8585-808b-8007-a059e16857d3-d5d105b8-8585-808b-8007-a058ef7209c6"
|
||||
class="strokes"
|
||||
>
|
||||
<g class="stroke-shape">
|
||||
<path
|
||||
d="M4476.41650390625,479L4505.58349609375,479"
|
||||
style="fill:none;fill-opacity:none;stroke-width:3;stroke:#e6e6e6;stroke-opacity:1"
|
||||
>
|
||||
</path>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
||||
@@ -1,94 +1,94 @@
|
||||
---
|
||||
import ContactImage from "../../assets/img/contact.jpg";
|
||||
import { Picture } from "astro:assets";
|
||||
import ContactImage from "../../assets/img/contact.jpg";
|
||||
import ArrowUpRight from "../icons/ArrowUpRight.astro";
|
||||
---
|
||||
|
||||
<div class="contact" aria-label="Contact section">
|
||||
<Picture
|
||||
class="image"
|
||||
src={ContactImage}
|
||||
alt="An abstract image of a black and gold background"
|
||||
/>
|
||||
<Picture
|
||||
class="image"
|
||||
src={ContactImage}
|
||||
alt="An abstract image of a black and gold background"
|
||||
/>
|
||||
|
||||
<div class="content">
|
||||
<h2 class="heading-gradient">Building the Web on Your Terms.</h2>
|
||||
<div class="content">
|
||||
<h2 class="heading-gradient">Building the Web on Your Terms.</h2>
|
||||
|
||||
<p>
|
||||
Enough about us, let's talk about you. Every project is individual
|
||||
and comes with its own challenges and specific needs. Get in touch
|
||||
with us now and let's talk about it in a short call.
|
||||
</p>
|
||||
</div>
|
||||
<p>
|
||||
Enough about us, let's talk about you. Every project is individual and
|
||||
comes with its own challenges and specific needs. Get in touch with us now
|
||||
and let's talk about it in a short call.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<a class="link" href="mailto:office@tideshiftdigital.com">
|
||||
<span class="heading-gradient">Contact us</span>
|
||||
<ArrowUpRight />
|
||||
</a>
|
||||
<a class="link" href="mailto:office@tideshiftdigital.com">
|
||||
<span class="heading-gradient">Contact us</span>
|
||||
<ArrowUpRight />
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.contact {
|
||||
display: grid;
|
||||
grid-template-columns: var(--base-grid);
|
||||
max-width: var(--max-content-width);
|
||||
margin-inline: auto;
|
||||
padding-block: 8rem 5.5rem;
|
||||
padding-inline: 5rem;
|
||||
}
|
||||
|
||||
picture {
|
||||
display: block;
|
||||
width: calc(100% + 5rem);
|
||||
grid-column: 1 / 5;
|
||||
/* TODO substitute horizontal spacing with var */
|
||||
transform: translate3d(-5rem, 0, 0);
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
.image {
|
||||
max-width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.content {
|
||||
grid-column: 6 / -1;
|
||||
align-content: center;
|
||||
}
|
||||
|
||||
h2 {
|
||||
max-width: 13ch;
|
||||
font-size: 3rem;
|
||||
line-height: var(--leading-subtitle);
|
||||
letter-spacing: var(--tracking-narrow);
|
||||
}
|
||||
|
||||
p {
|
||||
max-width: 38ch;
|
||||
margin-top: 2rem;
|
||||
font-size: 1.5rem;
|
||||
line-height: var(--leading-paragraph);
|
||||
}
|
||||
|
||||
.link {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 2rem;
|
||||
grid-column: 1 / -1;
|
||||
width: max-content;
|
||||
margin-inline: auto;
|
||||
|
||||
margin-top: 15rem;
|
||||
padding-bottom: 5rem;
|
||||
|
||||
font-size: 6.25rem;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
|
||||
span {
|
||||
line-height: var(--leading-tightest);
|
||||
}
|
||||
.contact {
|
||||
display: grid;
|
||||
grid-template-columns: var(--base-grid);
|
||||
max-width: var(--max-content-width);
|
||||
margin-inline: auto;
|
||||
padding-block: 8rem 10rem;
|
||||
padding-inline: 5rem;
|
||||
}
|
||||
|
||||
picture {
|
||||
display: block;
|
||||
width: calc(100% + 5rem);
|
||||
grid-column: 1 / 5;
|
||||
/* TODO substitute horizontal spacing with var */
|
||||
transform: translate3d(-5rem, 0, 0);
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
.image {
|
||||
max-width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.content {
|
||||
grid-column: 6 / -1;
|
||||
align-content: center;
|
||||
}
|
||||
|
||||
h2 {
|
||||
max-width: 13ch;
|
||||
font-size: 3rem;
|
||||
line-height: var(--leading-subtitle);
|
||||
letter-spacing: var(--tracking-narrow);
|
||||
}
|
||||
|
||||
p {
|
||||
max-width: 38ch;
|
||||
margin-top: 2rem;
|
||||
font-size: 1.5rem;
|
||||
line-height: var(--leading-paragraph);
|
||||
}
|
||||
|
||||
.link {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 2rem;
|
||||
grid-column: 1 / -1;
|
||||
width: max-content;
|
||||
margin-inline: auto;
|
||||
|
||||
margin-top: 15rem;
|
||||
|
||||
font-size: 6.25rem;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
|
||||
span {
|
||||
line-height: var(--leading-tightest);
|
||||
letter-spacing: var(--tracking-narrow);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user