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
package.json
+1 -1
View File
@@ -13,7 +13,7 @@
"@astrojs/sitemap": "^3.7.0", "@astrojs/sitemap": "^3.7.0",
"@astrojs/vue": "^5.1.4", "@astrojs/vue": "^5.1.4",
"@astrolib/seo": "1.0.0-beta.8", "@astrolib/seo": "1.0.0-beta.8",
"astro": "^5.17.2", "astro": "^5.17.3",
"astro-robots-txt": "^1.0.0", "astro-robots-txt": "^1.0.0",
"gsap": "^3.14.2", "gsap": "^3.14.2",
"vue": "^3.5.28" "vue": "^3.5.28"
pnpm-lock.yaml
Generated
+23 -23
View File
@@ -16,13 +16,13 @@ importers:
version: 3.7.0 version: 3.7.0
'@astrojs/vue': '@astrojs/vue':
specifier: ^5.1.4 specifier: ^5.1.4
version: 5.1.4(@types/node@25.0.3)(astro@5.17.2(@types/node@25.0.3)(rollup@4.57.1)(typescript@5.9.3))(rollup@4.57.1)(vue@3.5.28(typescript@5.9.3)) version: 5.1.4(@types/node@25.0.3)(astro@5.17.3(@types/node@25.0.3)(rollup@4.57.1)(typescript@5.9.3))(rollup@4.57.1)(vue@3.5.28(typescript@5.9.3))
'@astrolib/seo': '@astrolib/seo':
specifier: 1.0.0-beta.8 specifier: 1.0.0-beta.8
version: 1.0.0-beta.8(astro@5.17.2(@types/node@25.0.3)(rollup@4.57.1)(typescript@5.9.3)) version: 1.0.0-beta.8(astro@5.17.3(@types/node@25.0.3)(rollup@4.57.1)(typescript@5.9.3))
astro: astro:
specifier: ^5.17.2 specifier: ^5.17.3
version: 5.17.2(@types/node@25.0.3)(rollup@4.57.1)(typescript@5.9.3) version: 5.17.3(@types/node@25.0.3)(rollup@4.57.1)(typescript@5.9.3)
astro-robots-txt: astro-robots-txt:
specifier: ^1.0.0 specifier: ^1.0.0
version: 1.0.0 version: 1.0.0
@@ -712,8 +712,8 @@ packages:
engines: {node: '>=18.0.0'} engines: {node: '>=18.0.0'}
hasBin: true hasBin: true
'@rolldown/pluginutils@1.0.0-rc.4': '@rolldown/pluginutils@1.0.0-rc.5':
resolution: {integrity: sha512-1BrrmTu0TWfOP1riA8uakjFc9bpIUGzVKETsOtzY39pPga8zELGDl8eu1Dx7/gjM5CAz14UknsUMpBO8L+YntQ==} resolution: {integrity: sha512-RxlLX/DPoarZ9PtxVrQgZhPoor987YtKQqCo5zkjX+0S0yLJ7Vv515Wk6+xtTL67VONKJKxETWZwuZjss2idYw==}
'@rollup/pluginutils@5.3.0': '@rollup/pluginutils@5.3.0':
resolution: {integrity: sha512-5EdhGZtnu3V88ces7s53hhfK5KSASnJZv8Lulpc04cWO3REESroJXg73DFsOmgbU2BhwV0E20bu2IDZb3VKW4Q==} resolution: {integrity: sha512-5EdhGZtnu3V88ces7s53hhfK5KSASnJZv8Lulpc04cWO3REESroJXg73DFsOmgbU2BhwV0E20bu2IDZb3VKW4Q==}
@@ -1033,8 +1033,8 @@ packages:
astro-robots-txt@1.0.0: astro-robots-txt@1.0.0:
resolution: {integrity: sha512-6JQSLid4gMhoWjOm85UHLkgrw0+hHIjnJVIUqxjU2D6feKlVyYukMNYjH44ZDZBK1P8hNxd33PgWlHzCASvedA==} resolution: {integrity: sha512-6JQSLid4gMhoWjOm85UHLkgrw0+hHIjnJVIUqxjU2D6feKlVyYukMNYjH44ZDZBK1P8hNxd33PgWlHzCASvedA==}
astro@5.17.2: astro@5.17.3:
resolution: {integrity: sha512-7jnMqGo53hOQNwo1N/wqeOvUp8wwW/p+DeerSjSkHNx8L/1mhy6P7rVo7EhdmF8DpKqw0tl/B5Fx1WcIzg1ysA==} resolution: {integrity: sha512-69dcfPe8LsHzklwj+hl+vunWUbpMB6pmg35mACjetxbJeUNNys90JaBM8ZiwsPK689SAj/4Zqb1ayaANls9/MA==}
engines: {node: 18.20.8 || ^20.3.0 || >=22.0.0, npm: '>=9.6.5', pnpm: '>=7.1.0'} engines: {node: 18.20.8 || ^20.3.0 || >=22.0.0, npm: '>=9.6.5', pnpm: '>=7.1.0'}
hasBin: true hasBin: true
@@ -1210,8 +1210,8 @@ packages:
resolution: {integrity: sha512-KxektNH63SrbfUyDiwXqRb1rLwKt33AmMv+5Nhsw1kqZ13SJBRTgZHtGbE+hH3a1mVW1cz+4pqSWVPAtLVXTzQ==} resolution: {integrity: sha512-KxektNH63SrbfUyDiwXqRb1rLwKt33AmMv+5Nhsw1kqZ13SJBRTgZHtGbE+hH3a1mVW1cz+4pqSWVPAtLVXTzQ==}
engines: {node: '>=18'} engines: {node: '>=18'}
devalue@5.6.2: devalue@5.6.3:
resolution: {integrity: sha512-nPRkjWzzDQlsejL1WVifk5rvcFi/y1onBRxjaFMjZeR9mFpqu2gmAZ9xUB9/IEanEP/vBtGeGganC/GO1fmufg==} resolution: {integrity: sha512-nc7XjUU/2Lb+SvEFVGcWLiKkzfw8+qHI7zn8WYXKkLMgfGSHbgCEaR6bJpev8Cm6Rmrb19Gfd/tZvGqx9is3wg==}
devlop@1.1.0: devlop@1.1.0:
resolution: {integrity: sha512-RWmIqhcFf1lRYBvNmr7qTNuyCt/7/ns2jbpp1+PalgE/rDQcBT0fioSMUpJ93irlUhC5hrg4cYqe6U+0ImW0rA==} resolution: {integrity: sha512-RWmIqhcFf1lRYBvNmr7qTNuyCt/7/ns2jbpp1+PalgE/rDQcBT0fioSMUpJ93irlUhC5hrg4cYqe6U+0ImW0rA==}
@@ -1346,8 +1346,8 @@ packages:
resolution: {integrity: sha512-3hN7NaskYvMDLQY55gnW3NQ+mesEAepTqlg+VEbj7zzqEMBVNhzcGYYeqFo/TlYz6eQiFcp1HcsCZO+nGgS8zg==} resolution: {integrity: sha512-3hN7NaskYvMDLQY55gnW3NQ+mesEAepTqlg+VEbj7zzqEMBVNhzcGYYeqFo/TlYz6eQiFcp1HcsCZO+nGgS8zg==}
engines: {node: '>=6.9.0'} engines: {node: '>=6.9.0'}
get-east-asian-width@1.4.0: get-east-asian-width@1.5.0:
resolution: {integrity: sha512-QZjmEOC+IT1uk6Rx0sX22V6uHWVwbdbxf1faPqJ1QhLdGgsRGCZoyaQBm/piRdJy/D2um6hM1UP7ZEeQ4EkP+Q==} resolution: {integrity: sha512-CQ+bEO+Tva/qlmw24dCejulK5pMzVnUOFOijVogd3KQs07HnRIgp8TGipvCCRT06xeYEbpbgwaCxglFyiuIcmA==}
engines: {node: '>=18'} engines: {node: '>=18'}
get-stream@9.0.1: get-stream@9.0.1:
@@ -2310,12 +2310,12 @@ snapshots:
transitivePeerDependencies: transitivePeerDependencies:
- supports-color - supports-color
'@astrojs/vue@5.1.4(@types/node@25.0.3)(astro@5.17.2(@types/node@25.0.3)(rollup@4.57.1)(typescript@5.9.3))(rollup@4.57.1)(vue@3.5.28(typescript@5.9.3))': '@astrojs/vue@5.1.4(@types/node@25.0.3)(astro@5.17.3(@types/node@25.0.3)(rollup@4.57.1)(typescript@5.9.3))(rollup@4.57.1)(vue@3.5.28(typescript@5.9.3))':
dependencies: dependencies:
'@vitejs/plugin-vue': 5.2.4(vite@6.4.1(@types/node@25.0.3))(vue@3.5.28(typescript@5.9.3)) '@vitejs/plugin-vue': 5.2.4(vite@6.4.1(@types/node@25.0.3))(vue@3.5.28(typescript@5.9.3))
'@vitejs/plugin-vue-jsx': 4.2.0(vite@6.4.1(@types/node@25.0.3))(vue@3.5.28(typescript@5.9.3)) '@vitejs/plugin-vue-jsx': 4.2.0(vite@6.4.1(@types/node@25.0.3))(vue@3.5.28(typescript@5.9.3))
'@vue/compiler-sfc': 3.5.28 '@vue/compiler-sfc': 3.5.28
astro: 5.17.2(@types/node@25.0.3)(rollup@4.57.1)(typescript@5.9.3) astro: 5.17.3(@types/node@25.0.3)(rollup@4.57.1)(typescript@5.9.3)
vite: 6.4.1(@types/node@25.0.3) vite: 6.4.1(@types/node@25.0.3)
vite-plugin-vue-devtools: 7.7.9(rollup@4.57.1)(vite@6.4.1(@types/node@25.0.3))(vue@3.5.28(typescript@5.9.3)) vite-plugin-vue-devtools: 7.7.9(rollup@4.57.1)(vite@6.4.1(@types/node@25.0.3))(vue@3.5.28(typescript@5.9.3))
vue: 3.5.28(typescript@5.9.3) vue: 3.5.28(typescript@5.9.3)
@@ -2335,9 +2335,9 @@ snapshots:
- tsx - tsx
- yaml - yaml
'@astrolib/seo@1.0.0-beta.8(astro@5.17.2(@types/node@25.0.3)(rollup@4.57.1)(typescript@5.9.3))': '@astrolib/seo@1.0.0-beta.8(astro@5.17.3(@types/node@25.0.3)(rollup@4.57.1)(typescript@5.9.3))':
dependencies: dependencies:
astro: 5.17.2(@types/node@25.0.3)(rollup@4.57.1)(typescript@5.9.3) astro: 5.17.3(@types/node@25.0.3)(rollup@4.57.1)(typescript@5.9.3)
'@babel/code-frame@7.29.0': '@babel/code-frame@7.29.0':
dependencies: dependencies:
@@ -2819,7 +2819,7 @@ snapshots:
dependencies: dependencies:
dotenv: 16.6.1 dotenv: 16.6.1
'@rolldown/pluginutils@1.0.0-rc.4': {} '@rolldown/pluginutils@1.0.0-rc.5': {}
'@rollup/pluginutils@5.3.0(rollup@4.57.1)': '@rollup/pluginutils@5.3.0(rollup@4.57.1)':
dependencies: dependencies:
@@ -2980,7 +2980,7 @@ snapshots:
dependencies: dependencies:
'@babel/core': 7.29.0 '@babel/core': 7.29.0
'@babel/plugin-transform-typescript': 7.28.6(@babel/core@7.29.0) '@babel/plugin-transform-typescript': 7.28.6(@babel/core@7.29.0)
'@rolldown/pluginutils': 1.0.0-rc.4 '@rolldown/pluginutils': 1.0.0-rc.5
'@vue/babel-plugin-jsx': 1.5.0(@babel/core@7.29.0) '@vue/babel-plugin-jsx': 1.5.0(@babel/core@7.29.0)
vite: 6.4.1(@types/node@25.0.3) vite: 6.4.1(@types/node@25.0.3)
vue: 3.5.28(typescript@5.9.3) vue: 3.5.28(typescript@5.9.3)
@@ -3131,7 +3131,7 @@ snapshots:
valid-filename: 4.0.0 valid-filename: 4.0.0
zod: 3.25.76 zod: 3.25.76
astro@5.17.2(@types/node@25.0.3)(rollup@4.57.1)(typescript@5.9.3): astro@5.17.3(@types/node@25.0.3)(rollup@4.57.1)(typescript@5.9.3):
dependencies: dependencies:
'@astrojs/compiler': 2.13.1 '@astrojs/compiler': 2.13.1
'@astrojs/internal-helpers': 0.7.5 '@astrojs/internal-helpers': 0.7.5
@@ -3151,7 +3151,7 @@ snapshots:
cssesc: 3.0.0 cssesc: 3.0.0
debug: 4.4.3 debug: 4.4.3
deterministic-object-hash: 2.0.2 deterministic-object-hash: 2.0.2
devalue: 5.6.2 devalue: 5.6.3
diff: 8.0.3 diff: 8.0.3
dlv: 1.1.3 dlv: 1.1.3
dset: 3.1.4 dset: 3.1.4
@@ -3376,7 +3376,7 @@ snapshots:
dependencies: dependencies:
base-64: 1.0.0 base-64: 1.0.0
devalue@5.6.2: {} devalue@5.6.3: {}
devlop@1.1.0: devlop@1.1.0:
dependencies: dependencies:
@@ -3542,7 +3542,7 @@ snapshots:
gensync@1.0.0-beta.2: {} gensync@1.0.0-beta.2: {}
get-east-asian-width@1.4.0: {} get-east-asian-width@1.5.0: {}
get-stream@9.0.1: get-stream@9.0.1:
dependencies: dependencies:
@@ -4395,7 +4395,7 @@ snapshots:
string-width@7.2.0: string-width@7.2.0:
dependencies: dependencies:
emoji-regex: 10.6.0 emoji-regex: 10.6.0
get-east-asian-width: 1.4.0 get-east-asian-width: 1.5.0
strip-ansi: 7.1.2 strip-ansi: 7.1.2
stringify-entities@4.0.4: stringify-entities@4.0.4:
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"; // import Logo from "../assets/ci/side-gradient.svg";
function getCurrentYear() { function getCurrentYear() {
return new Date().getFullYear(); return new Date().getFullYear();
} }
--- ---
<footer> <footer>
<SkipNavLink contentId="main-content" /> <SkipNavLink contentId="main-content" />
{/* Footer nav */} {/* Footer nav */}
<nav> <nav>
{/* Explore */} {/* Explore */}
<div class="explore"> <div class="explore">
<span class="list-title">Explore</span> <span class="list-title">Explore</span>
<ul> <ul>
<li><a href="/">Home</a></li> <li><a href="/">Home</a></li>
<li><a href="/blog">Blog</a></li> <li><a href="/blog">Blog</a></li>
</ul> </ul>
</div> </div>
{/* Follow us */} {/* Follow us */}
<div class="follow"> <div class="follow">
<span class="list-title">Reach out to us</span> <span class="list-title">Reach out to us</span>
<ul> <ul>
<li><a href="tel:+436704011885">+43 670 4011 885</a></li> <li><a href="tel:+436704011885">+43 670 4011 885</a></li>
<li> <li>
<a href="mailto:office@tideshiftdigital.com" <a href="mailto:office@tideshiftdigital.com"
>office@tideshiftdigital.com</a >office@tideshiftdigital.com</a
> >
</li> </li>
</ul> </ul>
{/* Socials */} {/* Socials */}
{ {
/*<ul class="socials"> /*<ul class="socials">
<li>icon</li> <li>icon</li>
<li>icon</li> <li>icon</li>
<li>icon</li> <li>icon</li>
</ul> */ </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> </div>
{/* Logo, commented out because of gradient issues */} {/* Legal */}
{/* <Logo class="logo"/> */} <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> </footer>
<style> <style>
footer { footer {
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 5.5rem;
padding-inline: 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, & .no-ai {
.info { text-align: end;
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 2remm;
font-size: 0.875rem;
line-height: var(--leading-title);
} }
}
ul { .logo {
list-style: none; width: 100%;
height: auto;
& * { margin-top: 8rem;
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;
}
</style> </style>
src/components/Header.astro
+1 -1
View File
@@ -48,6 +48,7 @@ import SkipNavLink from "./SkipNavLink.astro";
gap: 0.5rem; gap: 0.5rem;
grid-column: -2 / -4; grid-column: -2 / -4;
justify-self: end; justify-self: end;
font-size: 1.25rem; font-size: 1.25rem;
font-weight: 600; font-weight: 600;
text-transform: uppercase; text-transform: uppercase;
@@ -64,5 +65,4 @@ import SkipNavLink from "./SkipNavLink.astro";
.menu { .menu {
grid-column: -1 / -2; grid-column: -1 / -2;
justify-self: end; justify-self: end;
}
</style> </style>
src/components/Menu.astro
+186 -65
View File
@@ -1,90 +1,211 @@
--- ---
import MenuIcon from "./icons/MenuIcon.astro"; 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; const { class: classname, ...rest } = Astro.props;
--- ---
<tsd-menu class={classname} {...rest}> <div class={classname} {...rest}>
<button> <button popovertarget="menu-popover">
<MenuIcon class="icon" /> <MenuIcon class="open" />
</button> </button>
<div class="menu-content"> <dialog id="menu-popover" popover>
<p>Hallon</p> <nav class="menu-content">
</div> <div class="menu-header">
</tsd-menu> {/* Logo */}
<Logo class="logo" />
<script> {/* Contact Link */}
class Menu extends HTMLElement { <a class="contact">
connectedCallback() { <span class="heading-gradient">Contact us</span>
const body = document.body; <ArrowUpRight class="icon" />
const button = this.querySelector("button"); </a>
if (!button) return; {/* Menu Button */}
<button popovertarget="menu-popover" popovertargetaction="hide">
<MenuX class="close" />
</button>
</div>
button.addEventListener("click", () => { <div class="menu-links">
if (!body.classList.contains("menu-open")) { <ul>
console.log("Open menu"); <li><a href="/">Home</a></li>
body.classList.add("menu-open"); <li><a href="/blog">Blog</a></li>
} else { </ul>
console.log("Close menu"); </div>
body.classList.remove("menu-open");
}
});
}
}
customElements.define("tsd-menu", Menu); <div class="menu-info">
</script> <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> {/* Socials */}
body.menu-open { {
height: 100%; /*<ul class="socials">
overflow: hidden; <li>icon</li>
} <li>icon</li>
</style> <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> <style>
tsd-menu { button {
display: inline-block; background-color: transparent;
width: max-content; 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 { button {
background-color: transparent; grid-row: 1;
border: none; grid-column: -1 / -2;
width: max-content; justify-self: end;
position: relative; color: var(--clr-light-400);
z-index: 2;
} }
.menu-icon { .close {
display: inline-block; display: inline-block;
width: 2.5rem; width: 2.5rem;
height: 2.5rem; height: 2.5rem;
& * {
fill: white;
}
} }
}
.menu-content { ul {
display: none; list-style: none;
opacity: 0; }
width: 100%;
height: 100dvh;
position: absolute;
inset: 0;
z-index: 1;
background-color: salmon;
transition-property: opacity, display; .menu-links {
transition-duration: 0.25s; display: flex;
transition-behavior: allow-discrete; justify-content: center;
align-items: center;
text-align: center;
body.menu-open & { font-size: 3.75rem;
display: flex; font-weight: 600;
opacity: 1; 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> </style>
src/components/SkipNavLink.astro
+24 -24
View File
@@ -1,6 +1,6 @@
--- ---
interface Props { interface Props {
contentId: string; contentId: string;
} }
const { contentId } = Astro.props; const { contentId } = Astro.props;
@@ -9,33 +9,33 @@ const { contentId } = Astro.props;
<a href={`#${contentId}`}>Skip to main content</a> <a href={`#${contentId}`}>Skip to main content</a>
<style> <style>
a { a {
position: fixed; position: fixed;
left: -10000px; left: -10000px;
top: 1.35rem; top: 1.35rem;
width: 1px; width: 1px;
height: 1px; height: 1px;
overflow: hidden; overflow: hidden;
padding: 0.5rem 0.75rem; padding: 0.5rem 0.75rem;
border-radius: 0.5rem; border-radius: 0.5rem;
background-color: oklch(from var(--clr-ts-red-400) calc(l - 0.05) c h); background-color: oklch(from var(--clr-ts-red-400) calc(l - 0.05) c h);
font-weight: 600; font-weight: 600;
z-index: 10; z-index: 10;
opacity: 0; opacity: 0;
@media (prefers-reduced-motion: no-preference) { @media (prefers-reduced-motion: no-preference) {
transition: opacity 250ms; transition: opacity 250ms;
}
} }
}
a:focus { a:focus-visible {
left: 5rem; left: 5rem;
width: auto; width: auto;
height: auto; height: auto;
opacity: 1; opacity: 1;
border: 2px solid var(--clr-light-400); border: 2px solid var(--clr-light-400);
} }
</style> </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 { .image {
width: 100%; max-width: 100%;
height: 100%; height: 100%;
object-fit: cover; object-fit: cover;
} }
@@ -80,7 +80,8 @@ import ArrowUpRight from "../icons/ArrowUpRight.astro";
width: max-content; width: max-content;
margin-inline: auto; margin-inline: auto;
margin-top: 12rem; margin-top: 15rem;
padding-bottom: 5rem;
font-size: 6.25rem; font-size: 6.25rem;
font-weight: 600; font-weight: 600;
src/components/landing/HeroSection.astro
+2 -2
View File
@@ -45,13 +45,13 @@ import ArrowDown from "../icons/ArrowDown.astro";
.image-wrapper { .image-wrapper {
grid-column: -1 / -6; grid-column: -1 / -6;
grid-row: 1; grid-row: 1;
width: 100%; /* width: 100%; */
max-height: clamp(400px, 70vh, 1000px); max-height: clamp(400px, 70vh, 1000px);
} }
.image { .image {
display: inline-block; display: inline-block;
width: 100%; max-width: 100%;
max-height: 100%; max-height: 100%;
object-fit: cover; object-fit: cover;
object-position: bottom; object-position: bottom;
src/components/landing/ServicesCard.astro
+1 -1
View File
@@ -72,7 +72,7 @@ const { title, image, items } = Astro.props;
} }
.image { .image {
display: inline-block; display: block;
width: 100%; width: 100%;
max-width: 100%; max-width: 100%;
height: 100%; height: 100%;