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>