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 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>
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
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"
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-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-8003f86b-8663-8006-8007-347270f3a7f8"
id="shape-d5d105b8-8585-808b-8007-a058ef71df84"
style="fill:#000000"
width="24"
class="feather feather-menu"
class="feather feather-plus"
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">
<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="3016"
y="382.206611570248"
transform="matrix(-1.000000, 0.000000, 0.000000, -1.000000, 6082.000000, 814.413223)"
x="4466"
y="456"
transform="matrix(1.000000, 0.000000, 0.000000, 1.000000, 0.000000, 0.000000)"
width="50"
height="50"
height="46"
fill="none"
stroke-linejoin="round"
style="fill:none"
@@ -43,46 +66,49 @@ const { class: classname, ...rest } = Astro.props;
<g
fill="none"
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"
>
<g
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>
<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"
href="#stroke-shape-render-5087-d5d105b8-8585-808b-8007-a058ef71df85-0"
>
</use>
</clipPath>
<rect
rx="0"
ry="0"
x="3016"
y="382.206611570248"
x="4466"
y="456"
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"
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')"
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 id="shape-8003f86b-8663-8006-8007-347270f3a7fa">
<g class="fills" id="fills-8003f86b-8663-8006-8007-347270f3a7fa">
<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"
d="M4491,465.5833435058594L4491,492.4166564941406"
fill="none"
stroke-linejoin="round"
style="fill:none"
@@ -92,22 +118,25 @@ const { class: classname, ...rest } = Astro.props;
<g
fill="none"
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"
>
<g class="stroke-shape">
<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"
style="fill:none;fill-opacity:none;stroke-width:3;stroke:#e6e6e6;stroke-opacity:1"
>
</path>
</g>
</g>
</g>
<g id="shape-8003f86b-8663-8006-8007-347270f3a7fb">
<g class="fills" id="fills-8003f86b-8663-8006-8007-347270f3a7fb">
<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"
d="M4476.41650390625,479L4505.58349609375,479"
fill="none"
stroke-linejoin="round"
style="fill:none"
@@ -117,40 +146,21 @@ const { class: classname, ...rest } = Astro.props;
<g
fill="none"
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"
>
<g class="stroke-shape">
<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"
style="fill:none;fill-opacity:none;stroke-width:3;stroke:#e6e6e6;stroke-opacity:1"
>
</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"
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>
</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 ContactImage from "../../assets/img/contact.jpg";
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>
<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.
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>
@@ -33,7 +33,7 @@ import ArrowUpRight from "../icons/ArrowUpRight.astro";
grid-template-columns: var(--base-grid);
max-width: var(--max-content-width);
margin-inline: auto;
padding-block: 8rem 5.5rem;
padding-block: 8rem 10rem;
padding-inline: 5rem;
}
@@ -81,7 +81,6 @@ import ArrowUpRight from "../icons/ArrowUpRight.astro";
margin-inline: auto;
margin-top: 15rem;
padding-bottom: 5rem;
font-size: 6.25rem;
font-weight: 600;
@@ -89,6 +88,7 @@ import ArrowUpRight from "../icons/ArrowUpRight.astro";
span {
line-height: var(--leading-tightest);
letter-spacing: var(--tracking-narrow);
}
}
</style>