adrian-altner.com/src/components/Footer.astro

182 lines
6 KiB
Text

---
interface Props {
dark?: boolean | undefined;
}
const { dark } = Astro.props;
---
<footer class={`footer${dark ? " footer--dark" : ""}`}>
<div class="footer__inner">
<p class="footer__license">
© 2026 Adrian Altner · Content: <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/" target="_blank" rel="noopener noreferrer">CC BY-NC-SA 4.0</a> · Code: <a href="https://mit-license.org/" target="_blank" rel="noopener noreferrer">MIT</a> · <a href="/imprint">Imprint</a> · <a href="/privacy-policy">Privacy Policy</a> · <a href="/contact">Contact</a>
</p>
<div class="footer__icons">
<a href="https://mastodon.social/@altner" aria-label="Mastodon" target="_blank" rel="me noopener noreferrer">
<svg
width="18"
height="18"
viewBox="0 0 24 24"
fill="currentColor"
stroke="none"
aria-hidden="true"
>
<path d="M23.193 7.879c0-5.206-3.411-6.732-3.411-6.732C18.062.357 15.108.025 12.041 0h-.076c-3.068.025-6.02.357-7.74 1.147 0 0-3.413 1.526-3.413 6.732 0 1.192-.023 2.618.015 4.129.124 5.092.934 10.11 5.641 11.355 2.17.574 4.034.695 5.535.612 2.722-.15 4.25-.972 4.25-.972l-.09-1.975s-1.945.613-4.129.539c-2.165-.074-4.449-.233-4.799-2.891a5.499 5.499 0 0 1-.048-.745s2.125.52 4.817.643c1.647.076 3.19-.096 4.758-.283 3.007-.359 5.625-2.212 5.954-3.905.517-2.665.475-6.507.475-6.507zm-4.024 6.709h-2.497V8.469c0-1.29-.543-1.944-1.629-1.944-1.2 0-1.801.776-1.801 2.312v3.349h-2.483v-3.35c0-1.536-.601-2.312-1.802-2.312-1.086 0-1.629.655-1.629 1.944v6.119H4.831V8.284c0-1.29.328-2.313.988-3.07.68-.758 1.569-1.146 2.674-1.146 1.278 0 2.246.491 2.886 1.474l.622 1.043.623-1.043c.64-.983 1.608-1.474 2.886-1.474 1.104 0 1.994.388 2.674 1.146.66.757.987 1.78.987 3.07v6.304z"/>
</svg>
</a>
<a href="https://www.instagram.com/adrian.altner/" aria-label="Instagram" target="_blank" rel="noopener noreferrer">
<svg
width="18"
height="18"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
aria-hidden="true"
>
<rect x="2" y="2" width="20" height="20" rx="5" ry="5"></rect><path
d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z"></path><line
x1="17.5"
y1="6.5"
x2="17.51"
y2="6.5"></line>
</svg>
</a>
<a href="https://www.linkedin.com/in/adrian-altner/" aria-label="LinkedIn" target="_blank" rel="noopener noreferrer">
<svg
width="18"
height="18"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
aria-hidden="true"
>
<path
d="M16 8a6 6 0 0 1 6 6v7h-4v-7a2 2 0 0 0-2-2 2 2 0 0 0-2 2v7h-4v-7a6 6 0 0 1 6-6z"
></path><rect x="2" y="9" width="4" height="12"></rect><circle
cx="4"
cy="4"
r="2"></circle>
</svg>
</a>
<a href="https://codeberg.org/adrian-altner" aria-label="Codeberg" target="_blank" rel="noopener noreferrer">
<svg
width="18"
height="18"
viewBox="0 0 24 24"
fill="currentColor"
stroke="none"
aria-hidden="true"
>
<path d="M11.999.747A11.974 11.974 0 0 0 0 12.75c0 2.254.635 4.465 1.833 6.376L11.837 6.19c.072-.092.251-.092.323 0l4.178 5.402h-2.992l.065.239h3.113l.882 1.138h-3.674l.103.374h3.86l.777 1.003h-4.358l.135.483h4.593l.695.894h-5.038l.165.589h5.326l.609.785h-5.717l.182.65h6.038l.562.727h-6.397l.183.65h6.717A12.003 12.003 0 0 0 24 12.75 11.977 11.977 0 0 0 11.999.747zm3.654 19.104.182.65h5.326c.173-.204.353-.433.513-.65zm.385 1.377.18.65h3.563c.233-.198.485-.428.712-.65zm.383 1.377.182.648h1.203c.356-.204.685-.412 1.042-.648z"/>
</svg>
</a>
<a href="https://github.com/adrian-altner" aria-label="GitHub" target="_blank" rel="noopener noreferrer">
<svg
width="18"
height="18"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
aria-hidden="true"
>
<path
d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 0 0-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0 0 20 4.77 5.07 5.07 0 0 0 19.91 1S18.73.65 16 2.48a13.38 13.38 0 0 0-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 0 0 5 4.77a5.44 5.44 0 0 0-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 0 0 9 18.13V22"
></path>
</svg>
</a>
<a href="/rss.xml" aria-label="RSS">
<svg
width="18"
height="18"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
aria-hidden="true"
>
<path d="M4 11a9 9 0 0 1 9 9"></path><path d="M4 4a16 16 0 0 1 16 16"
></path><circle cx="5" cy="19" r="1"></circle>
</svg>
</a>
</div>
</div>
</footer>
<style>
.footer {
width: 100%;
display: block;
}
.footer--dark {
background: #111;
color: #f5f5f3;
}
.footer--dark .footer__inner a {
color: #f5f5f3;
}
.footer__inner {
display: flex;
justify-content: space-between;
align-items: flex-end;
gap: 1.75rem;
padding: 2.5rem 2.5rem;
max-width: var(--width-shell);
margin-inline: auto;
}
.footer__icons {
display: flex;
gap: 1.75rem;
}
.footer__inner a {
color: #111;
opacity: 0.75;
display: flex;
align-items: center;
}
.footer__license {
font-size: 0.8rem;
opacity: 0.75;
margin-right: auto;
line-height: 1.5;
}
.footer__license a {
display: inline;
color: inherit;
opacity: 1;
text-decoration: underline;
}
.footer__inner a:hover {
opacity: 1;
}
@media (max-width: 640px) {
.footer__inner {
flex-direction: column-reverse;
align-items: flex-start;
gap: 0.75rem;
padding: 1.5rem;
}
.footer__license {
font-size: 0.65rem;
}
}
</style>