tideshift/tideshift-website
1
0
Fork 0
Code Activity

wip: menu

Browse Source
This commit is contained in:
Michael Rieger
2026-02-24 17:27:44 +01:00
parent fe0e19fed3
commit 30a7d570f4
10 changed files with 522 additions and 230 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/Footer.astro
+111 -111
View File
@@ -4,135 +4,135 @@ import SkipNavLink from "./SkipNavLink.astro";
// import Logo from "../assets/ci/side-gradient.svg";
function getCurrentYear() {
return new Date().getFullYear();
return new Date().getFullYear();
}
---
<footer>
<SkipNavLink contentId="main-content" />
<SkipNavLink contentId="main-content" />
{/* Footer nav */}
<nav>
{/* Explore */}
<div class="explore">
<span class="list-title">Explore</span>
<ul>
<li><a href="/">Home</a></li>
<li><a href="/blog">Blog</a></li>
</ul>
</div>
{/* Footer nav */}
<nav>
{/* Explore */}
<div class="explore">
<span class="list-title">Explore</span>
<ul>
<li><a href="/">Home</a></li>
<li><a href="/blog">Blog</a></li>
</ul>
</div>
{/* Follow us */}
<div class="follow">
<span class="list-title">Reach out to us</span>
<ul>
<li><a href="tel:+436704011885">+43 670 4011 885</a></li>
<li>
<a href="mailto:office@tideshiftdigital.com"
>office@tideshiftdigital.com</a
>
</li>
</ul>
{/* Follow us */}
<div class="follow">
<span class="list-title">Reach out to us</span>
<ul>
<li><a href="tel:+436704011885">+43 670 4011 885</a></li>
<li>
<a href="mailto:office@tideshiftdigital.com"
>office@tideshiftdigital.com</a
>
</li>
</ul>
{/* Socials */}
{
/*<ul class="socials">
{/* Socials */}
{
/*<ul class="socials">
<li>icon</li>
<li>icon</li>
<li>icon</li>
</ul> */
}
</div>
{/* Legal */}
<div class="legal">
<span class="list-title">Legal</span>
<ul>
<li><a href="/privacy-policy">Privacy Policy</a></li>
<li><a href="/imprint">Imprint</a></li>
</ul>
</div>
</nav>
{/* Copyright */}
<div class="info">
<span>&copy; {getCurrentYear()} Tideshift Digital e.U.</span>
<span class="made">Made with ❤️ in Vienna.</span>
<div class="no-ai">All content made by humans.</div>
}
</div>
{/* Logo, commented out because of gradient issues */}
{/* <Logo class="logo"/> */}
{/* Legal */}
<div class="legal">
<span class="list-title">Legal</span>
<ul>
<li><a href="/privacy-policy">Privacy Policy</a></li>
<li><a href="/imprint">Imprint</a></li>
</ul>
</div>
</nav>
{/* Copyright */}
<div class="info">
<span>&copy; {getCurrentYear()} Tideshift Digital e.U.</span>
<span class="made">Made with ❤️ in Vienna.</span>
<div class="no-ai">All content made by humans.</div>
</div>
{/* Logo, commented out because of gradient issues */}
{/* <Logo class="logo"/> */}
</footer>
<style>
footer {
max-width: var(--max-content-width);
margin-inline: auto;
padding-block: 8rem 5.5rem;
padding-inline: 5rem;
footer {
max-width: var(--max-content-width);
margin-inline: auto;
padding-block: 8rem 5.5rem;
padding-inline: 5rem;
}
nav,
.info {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 2remm;
font-size: 0.875rem;
line-height: var(--leading-title);
}
ul {
list-style: none;
& * {
margin-top: 0.75rem;
}
}
.explore {
}
.follow {
text-align: center;
}
.socials {
display: flex;
justify-content: center;
align-items: center;
gap: 2rem;
margin-top: 2rem;
}
.legal {
text-align: end;
}
.list-title {
color: var(--clr-light-600);
}
.info {
align-items: center;
justify-content: center;
margin-top: 3.5rem;
color: var(--clr-light-600);
& .made {
text-align: center;
}
nav,
.info {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 2remm;
font-size: 0.875rem;
line-height: var(--leading-title);
& .no-ai {
text-align: end;
}
}
ul {
list-style: none;
& * {
margin-top: 0.75rem;
}
}
.explore {
}
.follow {
text-align: center;
}
.socials {
display: flex;
justify-content: center;
align-items: center;
gap: 2rem;
margin-top: 2rem;
}
.legal {
text-align: end;
}
.list-title {
color: var(--clr-light-600);
}
.info {
align-items: center;
justify-content: center;
margin-top: 3.5rem;
color: var(--clr-light-600);
& .made {
text-align: center;
}
& .no-ai {
text-align: end;
}
}
.logo {
width: 100%;
height: auto;
margin-top: 8rem;
}
.logo {
width: 100%;
height: auto;
margin-top: 8rem;
}
</style>
src/components/Header.astro
+1 -1
View File
@@ -48,6 +48,7 @@ import SkipNavLink from "./SkipNavLink.astro";
gap: 0.5rem;
grid-column: -2 / -4;
justify-self: end;
font-size: 1.25rem;
font-weight: 600;
text-transform: uppercase;
@@ -64,5 +65,4 @@ import SkipNavLink from "./SkipNavLink.astro";
.menu {
grid-column: -1 / -2;
justify-self: end;
}
</style>
src/components/Menu.astro
+186 -65
View File
@@ -1,90 +1,211 @@
---
import MenuIcon from "./icons/MenuIcon.astro";
import MenuX from "./icons/MenuX.astro";
import Logo from "../assets/ci/side-light.svg";
import ArrowUpRight from "./icons/ArrowUpRight.astro";
const { class: classname, ...rest } = Astro.props;
---
<tsd-menu class={classname} {...rest}>
<button>
<MenuIcon class="icon" />
</button>
<div class={classname} {...rest}>
<button popovertarget="menu-popover">
<MenuIcon class="open" />
</button>
<div class="menu-content">
<p>Hallon</p>
</div>
</tsd-menu>
<dialog id="menu-popover" popover>
<nav class="menu-content">
<div class="menu-header">
{/* Logo */}
<Logo class="logo" />
<script>
class Menu extends HTMLElement {
connectedCallback() {
const body = document.body;
const button = this.querySelector("button");
{/* Contact Link */}
<a class="contact">
<span class="heading-gradient">Contact us</span>
<ArrowUpRight class="icon" />
</a>
if (!button) return;
{/* Menu Button */}
<button popovertarget="menu-popover" popovertargetaction="hide">
<MenuX class="close" />
</button>
</div>
button.addEventListener("click", () => {
if (!body.classList.contains("menu-open")) {
console.log("Open menu");
body.classList.add("menu-open");
} else {
console.log("Close menu");
body.classList.remove("menu-open");
}
});
}
}
<div class="menu-links">
<ul>
<li><a href="/">Home</a></li>
<li><a href="/blog">Blog</a></li>
</ul>
</div>
customElements.define("tsd-menu", Menu);
</script>
<div class="menu-info">
<div class="follow">
<span class="list-title">Reach out to us</span>
<ul>
<li><a href="tel:+436704011885">+43 670 4011 885</a></li>
<li>
<a href="mailto:office@tideshiftdigital.com"
>office@tideshiftdigital.com</a
>
</li>
</ul>
<style is:global>
body.menu-open {
height: 100%;
overflow: hidden;
}
</style>
{/* Socials */}
{
/*<ul class="socials">
<li>icon</li>
<li>icon</li>
<li>icon</li>
</ul> */
}
</div>
{/* Legal */}
<div class="legal">
<span class="list-title">Legal</span>
<ul>
<li><a href="/privacy-policy">Privacy Policy</a></li>
<li><a href="/imprint">Imprint</a></li>
</ul>
</div>
</div>
</nav>
</dialog>
</div>
<style>
tsd-menu {
display: inline-block;
width: max-content;
button {
background-color: transparent;
border: none;
width: max-content;
}
.open {
display: inline-block;
width: 2.5rem;
height: 2.5rem;
}
dialog {
--anim-duration: 0.5s;
--anim-easing: ease-in-out;
background-color: var(--clr-dark-400);
width: 100%;
height: 100dvh;
animation: close-menu var(--anim-duration);
}
dialog:popover-open {
animation: open-menu var(--anim-duration);
body:has(&) {
overflow: hidden;
}
}
.menu-content {
display: grid;
grid-template-rows: max-content 1fr max-content;
padding-inline: 5rem;
padding-block: 1rem 2rem;
height: 100%;
}
.menu-header {
display: grid;
grid-template-columns: var(--base-grid);
grid-column: 1 / -1;
& .logo {
width: 12.5rem;
transform: translate3d(-0.75rem, 0, 0);
grid-column: 1 / 3;
}
& .contact {
display: flex;
align-items: center;
gap: 0.5rem;
grid-column: -2 / -4;
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;
}
button {
background-color: transparent;
border: none;
width: max-content;
position: relative;
z-index: 2;
grid-row: 1;
grid-column: -1 / -2;
justify-self: end;
color: var(--clr-light-400);
}
.menu-icon {
display: inline-block;
width: 2.5rem;
height: 2.5rem;
& * {
fill: white;
}
.close {
display: inline-block;
width: 2.5rem;
height: 2.5rem;
}
}
.menu-content {
display: none;
opacity: 0;
width: 100%;
height: 100dvh;
position: absolute;
inset: 0;
z-index: 1;
background-color: salmon;
ul {
list-style: none;
}
transition-property: opacity, display;
transition-duration: 0.25s;
transition-behavior: allow-discrete;
.menu-links {
display: flex;
justify-content: center;
align-items: center;
text-align: center;
body.menu-open & {
display: flex;
opacity: 1;
}
font-size: 3.75rem;
font-weight: 600;
text-transform: uppercase;
}
.menu-info {
display: flex;
justify-content: space-between;
font-size: 0.875rem;
ul > * {
margin-top: 0.75rem;
}
}
.list-title {
color: var(--clr-light-600);
}
@keyframes open-menu {
from {
animation-timing-function: var(--anim-easing);
/*opacity: 0;*/
transform: translate3d(0, 100lvh, 0);
}
to {
/*opacity: 1;*/
transform: translate3d(0, 0, 0);
}
}
@keyframes close-menu {
from {
animation-timing-function: var(--anim-easing);
/*opacity: 1;*/
transform: translate3d(0, 0, 0);
}
to {
/*opacity: 0;*/
transform: translate3d(0, 100lvh, 0);
}
}
</style>
src/components/SkipNavLink.astro
+24 -24
View File
@@ -1,6 +1,6 @@
---
interface Props {
contentId: string;
contentId: string;
}
const { contentId } = Astro.props;
@@ -9,33 +9,33 @@ const { contentId } = Astro.props;
<a href={`#${contentId}`}>Skip to main content</a>
<style>
a {
position: fixed;
left: -10000px;
top: 1.35rem;
width: 1px;
height: 1px;
overflow: hidden;
a {
position: fixed;
left: -10000px;
top: 1.35rem;
width: 1px;
height: 1px;
overflow: hidden;
padding: 0.5rem 0.75rem;
border-radius: 0.5rem;
background-color: oklch(from var(--clr-ts-red-400) calc(l - 0.05) c h);
font-weight: 600;
padding: 0.5rem 0.75rem;
border-radius: 0.5rem;
background-color: oklch(from var(--clr-ts-red-400) calc(l - 0.05) c h);
font-weight: 600;
z-index: 10;
opacity: 0;
z-index: 10;
opacity: 0;
@media (prefers-reduced-motion: no-preference) {
transition: opacity 250ms;
}
@media (prefers-reduced-motion: no-preference) {
transition: opacity 250ms;
}
}
a:focus {
left: 5rem;
width: auto;
height: auto;
opacity: 1;
a:focus-visible {
left: 5rem;
width: auto;
height: auto;
opacity: 1;
border: 2px solid var(--clr-light-400);
}
border: 2px solid var(--clr-light-400);
}
</style>
src/components/icons/MenuX.astro
+170
View File
@@ -0,0 +1,170 @@
---
const { class: classname, ...rest } = Astro.props;
---
<svg
width="50"
xmlns="http://www.w3.org/2000/svg"
height="50"
id="screenshot-7dfb52c4-3c28-808c-8007-9f5d04f1d9f4"
viewBox="4464 381.207 50 50"
style="-webkit-print-color-adjust::exact"
xmlns:xlink="http://www.w3.org/1999/xlink"
fill="none"
version="1.1"
class={classname}
{...rest}
>
<g id="shape-7dfb52c4-3c28-808c-8007-9f5d04f1d9f4">
<g class="frame-container-wrapper">
<g class="frame-container-blur">
<g class="frame-container-shadows">
<g fill="none">
<g class="fills" id="fills-7dfb52c4-3c28-808c-8007-9f5d04f1d9f4">
<rect
rx="0"
ry="0"
x="4464"
y="381.206611570248"
width="50"
height="50"
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-7dfb52c4-3c28-808c-8007-9f5d04f1d9f5"
style="fill:#000000"
width="24"
class="feather feather-x"
height="24"
rx="0"
ry="0"
>
<g
id="shape-7dfb52c4-3c28-808c-8007-9f5d04f1d9f6"
style="display:none"
>
<g
class="fills"
id="fills-7dfb52c4-3c28-808c-8007-9f5d04f1d9f6"
>
<rect
rx="0"
ry="0"
x="4464"
y="381.206611570248"
transform="matrix(1.000000, 0.000000, 0.000000, 1.000000, 0.000000, 0.000000)"
width="50"
height="50"
fill="none"
stroke-linejoin="round"
style="fill:none"
>
</rect>
</g>
<g
fill="none"
stroke-linejoin="round"
id="strokes-7dfb52c4-3c28-808c-8007-9f5d52cbca40-7dfb52c4-3c28-808c-8007-9f5d04f1d9f6"
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-10202-7dfb52c4-3c28-808c-8007-9f5d04f1d9f6-0"
>
<use
href="#stroke-shape-render-10202-7dfb52c4-3c28-808c-8007-9f5d04f1d9f6-0"
>
</use>
</clipPath>
<rect
rx="0"
ry="0"
x="4464"
y="381.206611570248"
width="50"
height="50"
style="fill:none;fill-opacity:none;stroke-width:6;stroke:#e6e6e6;stroke-opacity:1"
id="stroke-shape-render-10202-7dfb52c4-3c28-808c-8007-9f5d04f1d9f6-0"
>
</rect>
</defs>
<use
href="#stroke-shape-render-10202-7dfb52c4-3c28-808c-8007-9f5d04f1d9f6-0"
clip-path="url('#inner-stroke-render-10202-7dfb52c4-3c28-808c-8007-9f5d04f1d9f6-0')"
>
</use>
</g>
</g>
</g>
<g id="shape-7dfb52c4-3c28-808c-8007-9f5d04f1d9f7">
<g
class="fills"
id="fills-7dfb52c4-3c28-808c-8007-9f5d04f1d9f7"
>
<path
d="M4501.5,393.70660400390625L4476.5,418.70660400390625"
fill="none"
stroke-linejoin="round"
style="fill:none"
>
</path>
</g>
<g
fill="none"
stroke-linejoin="round"
id="strokes-7dfb52c4-3c28-808c-8007-9f5d52cbca41-7dfb52c4-3c28-808c-8007-9f5d04f1d9f7"
class="strokes"
>
<g class="stroke-shape">
<path
d="M4501.5,393.70660400390625L4476.5,418.70660400390625"
style="fill:none;fill-opacity:none;stroke-width:3;stroke:#e6e6e6;stroke-opacity:1"
>
</path>
</g>
</g>
</g>
<g id="shape-7dfb52c4-3c28-808c-8007-9f5d04f1d9f8">
<g
class="fills"
id="fills-7dfb52c4-3c28-808c-8007-9f5d04f1d9f8"
>
<path
d="M4476.5,393.70660400390625L4501.5,418.70660400390625"
fill="none"
stroke-linejoin="round"
style="fill:none"
>
</path>
</g>
<g
fill="none"
stroke-linejoin="round"
id="strokes-7dfb52c4-3c28-808c-8007-9f5d52cbca42-7dfb52c4-3c28-808c-8007-9f5d04f1d9f8"
class="strokes"
>
<g class="stroke-shape">
<path
d="M4476.5,393.70660400390625L4501.5,418.70660400390625"
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>
src/components/landing/ContactSection.astro
+3 -2
View File
@@ -47,7 +47,7 @@ import ArrowUpRight from "../icons/ArrowUpRight.astro";
}
.image {
width: 100%;
max-width: 100%;
height: 100%;
object-fit: cover;
}
@@ -80,7 +80,8 @@ import ArrowUpRight from "../icons/ArrowUpRight.astro";
width: max-content;
margin-inline: auto;
margin-top: 12rem;
margin-top: 15rem;
padding-bottom: 5rem;
font-size: 6.25rem;
font-weight: 600;
src/components/landing/HeroSection.astro
+2 -2
View File
@@ -45,13 +45,13 @@ import ArrowDown from "../icons/ArrowDown.astro";
.image-wrapper {
grid-column: -1 / -6;
grid-row: 1;
width: 100%;
/* width: 100%; */
max-height: clamp(400px, 70vh, 1000px);
}
.image {
display: inline-block;
width: 100%;
max-width: 100%;
max-height: 100%;
object-fit: cover;
object-position: bottom;
src/components/landing/ServicesCard.astro
+1 -1
View File
@@ -72,7 +72,7 @@ const { title, image, items } = Astro.props;
}
.image {
display: inline-block;
display: block;
width: 100%;
max-width: 100%;
height: 100%;