tideshift/tideshift-website
1
0
Fork 0
Code Activity

disable menu for now

Browse Source
This commit is contained in:
Michael Rieger
2026-02-25 12:36:12 +01:00
parent 30a7d570f4
commit 839cf67fc7
4 changed files with 286 additions and 213 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/Header.astro
+6 -5
View File
@@ -3,6 +3,7 @@ import ArrowUpRight from "./icons/ArrowUpRight.astro";
import Logo from "../assets/ci/side-light.svg"; import Logo from "../assets/ci/side-light.svg";
import Menu from "./Menu.astro"; import Menu from "./Menu.astro";
import SkipNavLink from "./SkipNavLink.astro"; import SkipNavLink from "./SkipNavLink.astro";
import NewMenu from "./NewMenu.astro";
--- ---
<header> <header>
@@ -12,13 +13,13 @@ import SkipNavLink from "./SkipNavLink.astro";
<Logo class="logo" /> <Logo class="logo" />
{/* Contact Link */} {/* Contact Link */}
<a class="contact"> <a class="contact" href="mailto:office@tideshiftdigital.com">
<span class="heading-gradient">Contact us</span> <span class="heading-gradient">Contact us</span>
<ArrowUpRight class="icon" /> <ArrowUpRight class="icon" />
</a> </a>
{/* Menu Button */} {/* Menu Button */}
<Menu class="menu" /> {/* <NewMenu class="menu" /> */}
</header> </header>
<style> <style>
@@ -46,7 +47,7 @@ import SkipNavLink from "./SkipNavLink.astro";
display: flex; display: flex;
align-items: center; align-items: center;
gap: 0.5rem; gap: 0.5rem;
grid-column: -2 / -4; grid-column: -1 / -3;
justify-self: end; justify-self: end;
font-size: 1.25rem; font-size: 1.25rem;
@@ -62,7 +63,7 @@ import SkipNavLink from "./SkipNavLink.astro";
height: 1.5rem; height: 1.5rem;
} }
.menu { /*.menu {
grid-column: -1 / -2; grid-column: -1 / -2;
justify-self: end; }*/
</style> </style>
src/components/NewMenu.astro
+62
View File
@@ -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>
src/components/icons/MenuIcon.astro
+138 -128
View File
@@ -3,156 +3,166 @@ const { class: classname, ...rest } = Astro.props;
--- ---
<svg <svg
class={classname} width="50"
width="50" xmlns="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg" height="46"
height="50" viewBox="4466 456 50 46"
id="screenshot-8003f86b-8663-8006-8007-347270f3a7f8" xmlns:xlink="http://www.w3.org/1999/xlink"
viewBox="3016 382.207 50 50" fill="none"
style="-webkit-print-color-adjust::exact" version="1.1"
xmlns:xlink="http://www.w3.org/1999/xlink" class={classname}
fill="none" {...rest}
version="1.1"
{...rest}
> >
<g <g id="shape-d5d105b8-8585-808b-8007-a058ef71df83">
id="shape-8003f86b-8663-8006-8007-347270f3a7f8" <g class="frame-container-wrapper">
style="fill:#000000" <g class="frame-container-blur">
width="24" <g class="frame-container-shadows">
class="feather feather-menu" <g fill="none">
height="24" <g class="fills" id="fills-d5d105b8-8585-808b-8007-a058ef71df83">
rx="0" <rect
ry="0" rx="0"
> ry="0"
<g id="shape-8003f86b-8663-8006-8007-347270f3a7f9" style="display:none"> x="4466"
<g class="fills" id="fills-8003f86b-8663-8006-8007-347270f3a7f9"> y="456"
<rect width="50"
rx="0" height="46"
ry="0" transform="matrix(1.000000, 0.000000, 0.000000, 1.000000, 0.000000, 0.000000)"
x="3016" class="frame-background"
y="382.206611570248" >
transform="matrix(-1.000000, 0.000000, 0.000000, -1.000000, 6082.000000, 814.413223)" </rect>
width="50" </g>
height="50" <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" fill="none"
stroke-linejoin="round" stroke-linejoin="round"
style="fill:none" id="strokes-d5d105b8-8585-808b-8007-a059e1681fe2-d5d105b8-8585-808b-8007-a058ef71df85"
> class="strokes"
</rect> >
</g> <g
<g class="inner-stroke-shape"
fill="none" transform="matrix(1.000000, 0.000000, 0.000000, 1.000000, 0.000000, 0.000000)"
stroke-linejoin="round" >
id="strokes-b7b76088-9f6d-80d6-8007-90ef313788eb-8003f86b-8663-8006-8007-347270f3a7f9" <defs>
class="strokes"
>
<g
class="inner-stroke-shape"
transform="matrix(-1.000000, 0.000000, 0.000000, -1.000000, 6082.000000, 814.413223)"
>
<defs>
<clipPath <clipPath
id="inner-stroke-render-658-8003f86b-8663-8006-8007-347270f3a7f9-0" id="inner-stroke-render-5087-d5d105b8-8585-808b-8007-a058ef71df85-0"
> >
<use <use
href="#stroke-shape-render-658-8003f86b-8663-8006-8007-347270f3a7f9-0" href="#stroke-shape-render-5087-d5d105b8-8585-808b-8007-a058ef71df85-0"
> >
</use> </use>
</clipPath> </clipPath>
<rect <rect
rx="0" rx="0"
ry="0" ry="0"
x="3016" x="4466"
y="382.206611570248" y="456"
width="50" width="50"
height="50" height="46"
style="fill:none;fill-opacity:none;stroke-width:6;stroke:#ffffff;stroke-opacity:1" style="fill:none;fill-opacity:none;stroke-width:6;stroke:#e6e6e6;stroke-opacity:1"
id="stroke-shape-render-658-8003f86b-8663-8006-8007-347270f3a7f9-0" id="stroke-shape-render-5087-d5d105b8-8585-808b-8007-a058ef71df85-0"
> >
</rect> </rect>
</defs> </defs>
<use <use
href="#stroke-shape-render-658-8003f86b-8663-8006-8007-347270f3a7f9-0" href="#stroke-shape-render-5087-d5d105b8-8585-808b-8007-a058ef71df85-0"
clip-path="url('#inner-stroke-render-658-8003f86b-8663-8006-8007-347270f3a7f9-0')" clip-path="url('#inner-stroke-render-5087-d5d105b8-8585-808b-8007-a058ef71df85-0')"
> >
</use> </use>
</g>
</g>
</g> </g>
</g> <g id="shape-d5d105b8-8585-808b-8007-a058ef71df86">
</g> <g
<g id="shape-8003f86b-8663-8006-8007-347270f3a7fa"> class="fills"
<g class="fills" id="fills-8003f86b-8663-8006-8007-347270f3a7fa"> id="fills-d5d105b8-8585-808b-8007-a058ef71df86"
<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">
<path <path
d="M3059.75,407.20648193359375L3022.25,407.20648193359375" d="M4491,465.5833435058594L4491,492.4166564941406"
style="fill:none;fill-opacity:none;stroke-width:3;stroke:#ffffff;stroke-opacity:1" fill="none"
stroke-linejoin="round"
style="fill:none"
> >
</path> </path>
</g> </g>
</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"
fill="none" fill="none"
stroke-linejoin="round" stroke-linejoin="round"
style="fill:none" id="strokes-d5d105b8-8585-808b-8007-a059e16857d2-d5d105b8-8585-808b-8007-a058ef71df86"
> class="strokes"
</path> >
</g> <g class="stroke-shape">
<g <path
fill="none" d="M4491,465.5833435058594L4491,492.4166564941406"
stroke-linejoin="round" style="fill:none;fill-opacity:none;stroke-width:3;stroke:#e6e6e6;stroke-opacity:1"
id="strokes-b7b76088-9f6d-80d6-8007-90ef31382957-8003f86b-8663-8006-8007-347270f3a7fb" >
class="strokes" </path>
> </g>
<g class="stroke-shape"> </g>
</g>
<g id="shape-d5d105b8-8585-808b-8007-a058ef7209c6">
<g
class="fills"
id="fills-d5d105b8-8585-808b-8007-a058ef7209c6"
>
<path <path
d="M3059.75,419.70648193359375L3038,419.70648193359375" d="M4476.41650390625,479L4505.58349609375,479"
style="fill:none;fill-opacity:none;stroke-width:3;stroke:#ffffff;stroke-opacity:1" fill="none"
stroke-linejoin="round"
style="fill:none"
> >
</path> </path>
</g> </g>
</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"
fill="none" fill="none"
stroke-linejoin="round" stroke-linejoin="round"
style="fill:none" id="strokes-d5d105b8-8585-808b-8007-a059e16857d3-d5d105b8-8585-808b-8007-a058ef7209c6"
> class="strokes"
</path> >
</g> <g class="stroke-shape">
<g <path
fill="none" d="M4476.41650390625,479L4505.58349609375,479"
stroke-linejoin="round" style="fill:none;fill-opacity:none;stroke-width:3;stroke:#e6e6e6;stroke-opacity:1"
id="strokes-b7b76088-9f6d-80d6-8007-90ef31382958-8003f86b-8663-8006-8007-347270f3a7fc" >
class="strokes" </path>
> </g>
<g class="stroke-shape"> </g>
<path
d="M3059.75,394.70648193359375L3028.5,394.70648193359375"
style="fill:none;fill-opacity:none;stroke-width:3;stroke:#ffffff;stroke-opacity:1"
>
</path>
</g> </g>
</g>
</g> </g>
</g>
</g> </g>
</g>
</g> </g>
</g>
</svg> </svg>
src/components/landing/ContactSection.astro
+80 -80
View File
@@ -1,94 +1,94 @@
--- ---
import ContactImage from "../../assets/img/contact.jpg";
import { Picture } from "astro:assets"; import { Picture } from "astro:assets";
import ContactImage from "../../assets/img/contact.jpg";
import ArrowUpRight from "../icons/ArrowUpRight.astro"; import ArrowUpRight from "../icons/ArrowUpRight.astro";
--- ---
<div class="contact" aria-label="Contact section"> <div class="contact" aria-label="Contact section">
<Picture <Picture
class="image" class="image"
src={ContactImage} src={ContactImage}
alt="An abstract image of a black and gold background" alt="An abstract image of a black and gold background"
/> />
<div class="content"> <div class="content">
<h2 class="heading-gradient">Building the Web on Your Terms.</h2> <h2 class="heading-gradient">Building the Web on Your Terms.</h2>
<p> <p>
Enough about us, let's talk about you. Every project is individual Enough about us, let's talk about you. Every project is individual and
and comes with its own challenges and specific needs. Get in touch comes with its own challenges and specific needs. Get in touch with us now
with us now and let's talk about it in a short call. and let's talk about it in a short call.
</p> </p>
</div> </div>
<a class="link" href="mailto:office@tideshiftdigital.com"> <a class="link" href="mailto:office@tideshiftdigital.com">
<span class="heading-gradient">Contact us</span> <span class="heading-gradient">Contact us</span>
<ArrowUpRight /> <ArrowUpRight />
</a> </a>
</div> </div>
<style> <style>
.contact { .contact {
display: grid; display: grid;
grid-template-columns: var(--base-grid); grid-template-columns: var(--base-grid);
max-width: var(--max-content-width); max-width: var(--max-content-width);
margin-inline: auto; margin-inline: auto;
padding-block: 8rem 5.5rem; padding-block: 8rem 10rem;
padding-inline: 5rem; padding-inline: 5rem;
} }
picture { picture {
display: block; display: block;
width: calc(100% + 5rem); width: calc(100% + 5rem);
grid-column: 1 / 5; grid-column: 1 / 5;
/* TODO substitute horizontal spacing with var */ /* TODO substitute horizontal spacing with var */
transform: translate3d(-5rem, 0, 0); transform: translate3d(-5rem, 0, 0);
z-index: -1; z-index: -1;
} }
.image { .image {
max-width: 100%; max-width: 100%;
height: 100%; height: 100%;
object-fit: cover; object-fit: cover;
} }
.content { .content {
grid-column: 6 / -1; grid-column: 6 / -1;
align-content: center; align-content: center;
} }
h2 { h2 {
max-width: 13ch; max-width: 13ch;
font-size: 3rem; font-size: 3rem;
line-height: var(--leading-subtitle); line-height: var(--leading-subtitle);
letter-spacing: var(--tracking-narrow); letter-spacing: var(--tracking-narrow);
} }
p { p {
max-width: 38ch; max-width: 38ch;
margin-top: 2rem; margin-top: 2rem;
font-size: 1.5rem; font-size: 1.5rem;
line-height: var(--leading-paragraph); line-height: var(--leading-paragraph);
} }
.link { .link {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
gap: 2rem; gap: 2rem;
grid-column: 1 / -1; grid-column: 1 / -1;
width: max-content; width: max-content;
margin-inline: auto; margin-inline: auto;
margin-top: 15rem; margin-top: 15rem;
padding-bottom: 5rem;
font-size: 6.25rem;
font-size: 6.25rem; font-weight: 600;
font-weight: 600; text-transform: uppercase;
text-transform: uppercase;
span {
span { line-height: var(--leading-tightest);
line-height: var(--leading-tightest); letter-spacing: var(--tracking-narrow);
}
} }
}
</style> </style>