163 lines
3.4 KiB
Vue
163 lines
3.4 KiB
Vue
<script setup lang="ts">
|
|
import { RouterLink } from 'vue-router'
|
|
import { socialLinks, type SocialLinkLabel } from '@/content/socialLinks'
|
|
|
|
interface FooterLink {
|
|
label: string
|
|
to: string
|
|
}
|
|
|
|
const signatureImage = {
|
|
src: '/assets/signature.png',
|
|
alt: "R' Yehoshua Gerzi",
|
|
}
|
|
|
|
const socialGlyphs: Record<SocialLinkLabel, string> = {
|
|
YouTube: '▶',
|
|
Spotify: '♫',
|
|
}
|
|
|
|
const footerSocialLinks = socialLinks.map((socialLink) => {
|
|
return {
|
|
label: socialLink.label,
|
|
href: socialLink.href,
|
|
glyph: socialGlyphs[socialLink.label],
|
|
}
|
|
})
|
|
|
|
const footerLinkColumns: FooterLink[][] = [
|
|
[
|
|
{ label: 'Torah Media', to: '/media' },
|
|
{ label: 'About', to: '/about' },
|
|
],
|
|
[
|
|
{ label: 'Donate', to: '/donate' },
|
|
{ label: 'Contact', to: '/contact' },
|
|
],
|
|
]
|
|
</script>
|
|
|
|
<template>
|
|
<footer class="site-footer" data-cy="footer">
|
|
<div class="site-footer__inner">
|
|
<div class="site-footer__brand">
|
|
<img v-bind="signatureImage" class="site-footer__signature" />
|
|
<div class="site-footer__social">
|
|
<a
|
|
v-for="socialLink in footerSocialLinks"
|
|
:key="socialLink.label"
|
|
:href="socialLink.href"
|
|
class="site-footer__social-link"
|
|
:aria-label="socialLink.label"
|
|
target="_blank"
|
|
rel="noopener"
|
|
>
|
|
{{ socialLink.glyph }}
|
|
</a>
|
|
</div>
|
|
</div>
|
|
<nav class="site-footer__links" aria-label="Footer navigation">
|
|
<ul
|
|
v-for="(footerLinkColumn, footerLinkColumnIndex) in footerLinkColumns"
|
|
:key="footerLinkColumnIndex"
|
|
class="site-footer__link-column"
|
|
>
|
|
<li v-for="footerLink in footerLinkColumn" :key="footerLink.to">
|
|
<RouterLink :to="footerLink.to">
|
|
{{ footerLink.label }}
|
|
</RouterLink>
|
|
</li>
|
|
</ul>
|
|
</nav>
|
|
</div>
|
|
<p class="site-footer__copyright">© Rabbi Gerzi 2025</p>
|
|
</footer>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.site-footer {
|
|
padding: 4rem 2rem 2rem;
|
|
background: var(--color-white);
|
|
border-top: 1px solid var(--color-border);
|
|
}
|
|
|
|
.site-footer__inner {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
align-items: start;
|
|
max-width: 1100px;
|
|
margin: 0 auto 2rem;
|
|
gap: 2rem;
|
|
}
|
|
|
|
.site-footer__brand {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 1rem;
|
|
}
|
|
|
|
.site-footer__signature {
|
|
width: auto;
|
|
height: 40px;
|
|
}
|
|
|
|
.site-footer__social {
|
|
display: flex;
|
|
gap: 0.75rem;
|
|
}
|
|
|
|
.site-footer__social-link {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 2rem;
|
|
height: 2rem;
|
|
color: var(--color-text-muted);
|
|
border: 1px solid var(--color-border);
|
|
border-radius: 6px;
|
|
}
|
|
|
|
.site-footer__social-link:hover {
|
|
background: var(--color-cream);
|
|
}
|
|
|
|
.site-footer__links {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
gap: 1rem;
|
|
}
|
|
|
|
.site-footer__link-column {
|
|
display: flex;
|
|
flex-direction: column;
|
|
margin: 0;
|
|
padding: 0;
|
|
gap: 0.6rem;
|
|
list-style: none;
|
|
}
|
|
|
|
.site-footer__link-column a {
|
|
color: var(--color-text);
|
|
font-family: var(--font-sans);
|
|
font-size: 0.95rem;
|
|
}
|
|
|
|
.site-footer__link-column a:hover {
|
|
color: var(--color-slate);
|
|
}
|
|
|
|
.site-footer__copyright {
|
|
margin: 0;
|
|
color: var(--color-text-muted);
|
|
font-family: var(--font-sans);
|
|
font-size: 0.85rem;
|
|
text-align: center;
|
|
}
|
|
|
|
@media (max-width: 860px) {
|
|
.site-footer__inner,
|
|
.site-footer__links {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
}
|
|
</style>
|