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/vue": "^5.1.4",
"@astrolib/seo": "1.0.0-beta.8",
"astro": "^5.17.2",
"astro": "^5.17.3",
"astro-robots-txt": "^1.0.0",
"gsap": "^3.14.2",
"vue": "^3.5.28"
pnpm-lock.yaml
Generated
+23 -23
View File
@@ -16,13 +16,13 @@ importers:
version: 3.7.0
'@astrojs/vue':
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':
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:
specifier: ^5.17.2
version: 5.17.2(@types/node@25.0.3)(rollup@4.57.1)(typescript@5.9.3)
specifier: ^5.17.3
version: 5.17.3(@types/node@25.0.3)(rollup@4.57.1)(typescript@5.9.3)
astro-robots-txt:
specifier: ^1.0.0
version: 1.0.0
@@ -712,8 +712,8 @@ packages:
engines: {node: '>=18.0.0'}
hasBin: true
'@rolldown/pluginutils@1.0.0-rc.4':
resolution: {integrity: sha512-1BrrmTu0TWfOP1riA8uakjFc9bpIUGzVKETsOtzY39pPga8zELGDl8eu1Dx7/gjM5CAz14UknsUMpBO8L+YntQ==}
'@rolldown/pluginutils@1.0.0-rc.5':
resolution: {integrity: sha512-RxlLX/DPoarZ9PtxVrQgZhPoor987YtKQqCo5zkjX+0S0yLJ7Vv515Wk6+xtTL67VONKJKxETWZwuZjss2idYw==}
'@rollup/pluginutils@5.3.0':
resolution: {integrity: sha512-5EdhGZtnu3V88ces7s53hhfK5KSASnJZv8Lulpc04cWO3REESroJXg73DFsOmgbU2BhwV0E20bu2IDZb3VKW4Q==}
@@ -1033,8 +1033,8 @@ packages:
astro-robots-txt@1.0.0:
resolution: {integrity: sha512-6JQSLid4gMhoWjOm85UHLkgrw0+hHIjnJVIUqxjU2D6feKlVyYukMNYjH44ZDZBK1P8hNxd33PgWlHzCASvedA==}
astro@5.17.2:
resolution: {integrity: sha512-7jnMqGo53hOQNwo1N/wqeOvUp8wwW/p+DeerSjSkHNx8L/1mhy6P7rVo7EhdmF8DpKqw0tl/B5Fx1WcIzg1ysA==}
astro@5.17.3:
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'}
hasBin: true
@@ -1210,8 +1210,8 @@ packages:
resolution: {integrity: sha512-KxektNH63SrbfUyDiwXqRb1rLwKt33AmMv+5Nhsw1kqZ13SJBRTgZHtGbE+hH3a1mVW1cz+4pqSWVPAtLVXTzQ==}
engines: {node: '>=18'}
devalue@5.6.2:
resolution: {integrity: sha512-nPRkjWzzDQlsejL1WVifk5rvcFi/y1onBRxjaFMjZeR9mFpqu2gmAZ9xUB9/IEanEP/vBtGeGganC/GO1fmufg==}
devalue@5.6.3:
resolution: {integrity: sha512-nc7XjUU/2Lb+SvEFVGcWLiKkzfw8+qHI7zn8WYXKkLMgfGSHbgCEaR6bJpev8Cm6Rmrb19Gfd/tZvGqx9is3wg==}
devlop@1.1.0:
resolution: {integrity: sha512-RWmIqhcFf1lRYBvNmr7qTNuyCt/7/ns2jbpp1+PalgE/rDQcBT0fioSMUpJ93irlUhC5hrg4cYqe6U+0ImW0rA==}
@@ -1346,8 +1346,8 @@ packages:
resolution: {integrity: sha512-3hN7NaskYvMDLQY55gnW3NQ+mesEAepTqlg+VEbj7zzqEMBVNhzcGYYeqFo/TlYz6eQiFcp1HcsCZO+nGgS8zg==}
engines: {node: '>=6.9.0'}
get-east-asian-width@1.4.0:
resolution: {integrity: sha512-QZjmEOC+IT1uk6Rx0sX22V6uHWVwbdbxf1faPqJ1QhLdGgsRGCZoyaQBm/piRdJy/D2um6hM1UP7ZEeQ4EkP+Q==}
get-east-asian-width@1.5.0:
resolution: {integrity: sha512-CQ+bEO+Tva/qlmw24dCejulK5pMzVnUOFOijVogd3KQs07HnRIgp8TGipvCCRT06xeYEbpbgwaCxglFyiuIcmA==}
engines: {node: '>=18'}
get-stream@9.0.1:
@@ -2310,12 +2310,12 @@ snapshots:
transitivePeerDependencies:
- 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:
'@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))
'@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-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)
@@ -2335,9 +2335,9 @@ snapshots:
- tsx
- 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:
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':
dependencies:
@@ -2819,7 +2819,7 @@ snapshots:
dependencies:
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)':
dependencies:
@@ -2980,7 +2980,7 @@ snapshots:
dependencies:
'@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)
vite: 6.4.1(@types/node@25.0.3)
vue: 3.5.28(typescript@5.9.3)
@@ -3131,7 +3131,7 @@ snapshots:
valid-filename: 4.0.0
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:
'@astrojs/compiler': 2.13.1
'@astrojs/internal-helpers': 0.7.5
@@ -3151,7 +3151,7 @@ snapshots:
cssesc: 3.0.0
debug: 4.4.3
deterministic-object-hash: 2.0.2
devalue: 5.6.2
devalue: 5.6.3
diff: 8.0.3
dlv: 1.1.3
dset: 3.1.4
@@ -3376,7 +3376,7 @@ snapshots:
dependencies:
base-64: 1.0.0
devalue@5.6.2: {}
devalue@5.6.3: {}
devlop@1.1.0:
dependencies:
@@ -3542,7 +3542,7 @@ snapshots:
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:
dependencies:
@@ -4395,7 +4395,7 @@ snapshots:
string-width@7.2.0:
dependencies:
emoji-regex: 10.6.0
get-east-asian-width: 1.4.0
get-east-asian-width: 1.5.0
strip-ansi: 7.1.2
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";
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%;