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
+67 -57
View File
@@ -3,37 +3,60 @@ 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="50" height="46"
id="screenshot-8003f86b-8663-8006-8007-347270f3a7f8" viewBox="4466 456 50 46"
viewBox="3016 382.207 50 50"
style="-webkit-print-color-adjust::exact"
xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:xlink="http://www.w3.org/1999/xlink"
fill="none" fill="none"
version="1.1" version="1.1"
class={classname}
{...rest} {...rest}
> >
<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 <g
id="shape-8003f86b-8663-8006-8007-347270f3a7f8" id="shape-d5d105b8-8585-808b-8007-a058ef71df84"
style="fill:#000000" style="fill:#000000"
width="24" width="24"
class="feather feather-menu" class="feather feather-plus"
height="24" height="24"
rx="0" rx="0"
ry="0" ry="0"
> >
<g id="shape-8003f86b-8663-8006-8007-347270f3a7f9" style="display:none"> <g
<g class="fills" id="fills-8003f86b-8663-8006-8007-347270f3a7f9"> id="shape-d5d105b8-8585-808b-8007-a058ef71df85"
style="display:none"
>
<g
class="fills"
id="fills-d5d105b8-8585-808b-8007-a058ef71df85"
>
<rect <rect
rx="0" rx="0"
ry="0" ry="0"
x="3016" x="4466"
y="382.206611570248" y="456"
transform="matrix(-1.000000, 0.000000, 0.000000, -1.000000, 6082.000000, 814.413223)" transform="matrix(1.000000, 0.000000, 0.000000, 1.000000, 0.000000, 0.000000)"
width="50" width="50"
height="50" height="46"
fill="none" fill="none"
stroke-linejoin="round" stroke-linejoin="round"
style="fill:none" style="fill:none"
@@ -43,46 +66,49 @@ const { class: classname, ...rest } = Astro.props;
<g <g
fill="none" fill="none"
stroke-linejoin="round" stroke-linejoin="round"
id="strokes-b7b76088-9f6d-80d6-8007-90ef313788eb-8003f86b-8663-8006-8007-347270f3a7f9" id="strokes-d5d105b8-8585-808b-8007-a059e1681fe2-d5d105b8-8585-808b-8007-a058ef71df85"
class="strokes" class="strokes"
> >
<g <g
class="inner-stroke-shape" class="inner-stroke-shape"
transform="matrix(-1.000000, 0.000000, 0.000000, -1.000000, 6082.000000, 814.413223)" transform="matrix(1.000000, 0.000000, 0.000000, 1.000000, 0.000000, 0.000000)"
> >
<defs> <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>
<g id="shape-8003f86b-8663-8006-8007-347270f3a7fa"> <g id="shape-d5d105b8-8585-808b-8007-a058ef71df86">
<g class="fills" id="fills-8003f86b-8663-8006-8007-347270f3a7fa"> <g
class="fills"
id="fills-d5d105b8-8585-808b-8007-a058ef71df86"
>
<path <path
d="M3059.75,407.20648193359375L3022.25,407.20648193359375" d="M4491,465.5833435058594L4491,492.4166564941406"
fill="none" fill="none"
stroke-linejoin="round" stroke-linejoin="round"
style="fill:none" style="fill:none"
@@ -92,22 +118,25 @@ const { class: classname, ...rest } = Astro.props;
<g <g
fill="none" fill="none"
stroke-linejoin="round" stroke-linejoin="round"
id="strokes-b7b76088-9f6d-80d6-8007-90ef3137fa64-8003f86b-8663-8006-8007-347270f3a7fa" id="strokes-d5d105b8-8585-808b-8007-a059e16857d2-d5d105b8-8585-808b-8007-a058ef71df86"
class="strokes" class="strokes"
> >
<g class="stroke-shape"> <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" style="fill:none;fill-opacity:none;stroke-width:3;stroke:#e6e6e6;stroke-opacity:1"
> >
</path> </path>
</g> </g>
</g> </g>
</g> </g>
<g id="shape-8003f86b-8663-8006-8007-347270f3a7fb"> <g id="shape-d5d105b8-8585-808b-8007-a058ef7209c6">
<g class="fills" id="fills-8003f86b-8663-8006-8007-347270f3a7fb"> <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"
fill="none" fill="none"
stroke-linejoin="round" stroke-linejoin="round"
style="fill:none" style="fill:none"
@@ -117,40 +146,21 @@ const { class: classname, ...rest } = Astro.props;
<g <g
fill="none" fill="none"
stroke-linejoin="round" stroke-linejoin="round"
id="strokes-b7b76088-9f6d-80d6-8007-90ef31382957-8003f86b-8663-8006-8007-347270f3a7fb" id="strokes-d5d105b8-8585-808b-8007-a059e16857d3-d5d105b8-8585-808b-8007-a058ef7209c6"
class="strokes" class="strokes"
> >
<g class="stroke-shape"> <g class="stroke-shape">
<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" style="fill:none;fill-opacity:none;stroke-width:3;stroke:#e6e6e6;stroke-opacity:1"
> >
</path> </path>
</g> </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"
stroke-linejoin="round"
style="fill:none"
>
</path>
</g> </g>
<g </g>
fill="none" </g>
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>
</g> </g>
</g> </g>
</g> </g>
src/components/landing/ContactSection.astro
+6 -6
View File
@@ -1,6 +1,6 @@
--- ---
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";
--- ---
@@ -15,9 +15,9 @@ import ArrowUpRight from "../icons/ArrowUpRight.astro";
<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>
@@ -33,7 +33,7 @@ import ArrowUpRight from "../icons/ArrowUpRight.astro";
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;
} }
@@ -81,7 +81,6 @@ import ArrowUpRight from "../icons/ArrowUpRight.astro";
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;
@@ -89,6 +88,7 @@ import ArrowUpRight from "../icons/ArrowUpRight.astro";
span { span {
line-height: var(--leading-tightest); line-height: var(--leading-tightest);
letter-spacing: var(--tracking-narrow);
} }
} }
</style> </style>