yisroelbaum/Rabbi_Gerzi
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

extract site footer

Browse source
This commit is contained in:
Yisroel Baum 2026-06-14 22:02:53 +03:00
parent 09b97b88ea
commit 1ce408cdb6
Signed by: yisroelbaum
GPG key ID: 0FA60884F75520A9
4 changed files with 174 additions and 319 deletions
Download patch file Download diff file Expand all files Collapse all files

166
frontend/rabbi_gerzi/src/components/SiteFooter.vue Normal file
View file

@ -0,0 +1,166 @@
<script setup lang="ts">
import { RouterLink } from 'vue-router'
interface FooterLink {
label: string
to: string
}
interface SocialLink {
label: string
href: string
glyph: string
}
const signatureImage = {
src: '/assets/signature.png',
alt: "R' Yehoshua Gerzi",
}
const socialLinks: SocialLink[] = [
{
label: 'YouTube',
href: '#',
glyph: '▶',
},
{
label: 'Spotify',
href: '#',
glyph: '♫',
},
]
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 socialLinks"
:key="socialLink.label"
:href="socialLink.href"
class="site-footer__social-link"
:aria-label="socialLink.label"
>
{{ 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">&copy; 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>

110
frontend/rabbi_gerzi/src/views/AboutPage.vue
View file

@ -1,6 +1,7 @@
<script setup lang="ts"> <script setup lang="ts">
import { ref } from 'vue' import { ref } from 'vue'
import SiteHeader from '@/components/SiteHeader.vue' import SiteHeader from '@/components/SiteHeader.vue'
import SiteFooter from '@/components/SiteFooter.vue'
interface MissionPoint { interface MissionPoint {
title: string title: string
@ -426,28 +427,7 @@ function submitNewsletter(submitEvent: Event): void {
</section> </section>
</main> </main>
<footer class="site-footer" data-cy="footer"> <SiteFooter />
<div class="site-footer__inner">
<div class="site-footer__brand">
<img src="/assets/signature.png" alt="R' Yehoshua Gerzi" class="site-footer__signature" />
<div class="site-footer__social">
<a href="#" class="site-footer__social-link" aria-label="YouTube"> &#9654; </a>
<a href="#" class="site-footer__social-link" aria-label="Spotify"> &#9835; </a>
</div>
</div>
<nav class="site-footer__links">
<ul class="site-footer__link-column">
<li><a href="/media">Torah Media</a></li>
<li><a href="/about">About</a></li>
</ul>
<ul class="site-footer__link-column">
<li><a href="/donate">Donate</a></li>
<li><a href="/contact">Contact</a></li>
</ul>
</nav>
</div>
<p class="site-footer__copyright">&copy; Rabbi Gerzi 2025</p>
</footer>
</div> </div>
</template> </template>
@ -802,90 +782,10 @@ function submitNewsletter(submitEvent: Event): void {
background: var(--color-slate); background: var(--color-slate);
} }
.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) { @media (max-width: 860px) {
.about-hero__inner, .about-hero__inner,
.about-section__inner--split, .about-section__inner--split,
.get-involved__card, .get-involved__card {
.site-footer__inner {
grid-template-columns: 1fr; grid-template-columns: 1fr;
} }
@ -924,9 +824,5 @@ function submitNewsletter(submitEvent: Event): void {
padding: 2rem; padding: 2rem;
gap: 2rem; gap: 2rem;
} }
.site-footer__links {
grid-template-columns: 1fr;
}
} }
</style> </style>

110
frontend/rabbi_gerzi/src/views/ContactPage.vue
View file

@ -1,6 +1,7 @@
<script setup lang="ts"> <script setup lang="ts">
import { ref } from 'vue' import { ref } from 'vue'
import SiteHeader from '@/components/SiteHeader.vue' import SiteHeader from '@/components/SiteHeader.vue'
import SiteFooter from '@/components/SiteFooter.vue'
interface SocialLink { interface SocialLink {
label: string label: string
@ -187,28 +188,7 @@ function submitNewsletter(submitEvent: Event): void {
</section> </section>
</main> </main>
<footer class="site-footer" data-cy="footer"> <SiteFooter />
<div class="site-footer__inner">
<div class="site-footer__brand">
<img src="/assets/signature.png" alt="R' Yehoshua Gerzi" class="site-footer__signature" />
<div class="site-footer__social">
<a href="#" class="site-footer__social-link" aria-label="YouTube"> &#9654; </a>
<a href="#" class="site-footer__social-link" aria-label="Spotify"> &#9835; </a>
</div>
</div>
<nav class="site-footer__links">
<ul class="site-footer__link-column">
<li><a href="/media">Torah Media</a></li>
<li><a href="/about">About</a></li>
</ul>
<ul class="site-footer__link-column">
<li><a href="/donate">Donate</a></li>
<li><a href="/contact">Contact</a></li>
</ul>
</nav>
</div>
<p class="site-footer__copyright">&copy; Rabbi Gerzi 2025</p>
</footer>
</div> </div>
</template> </template>
@ -440,85 +420,6 @@ function submitNewsletter(submitEvent: Event): void {
margin-top: 0.5rem; margin-top: 0.5rem;
} }
.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) { @media (max-width: 860px) {
.contact-hero { .contact-hero {
padding: 3rem 1rem; padding: 3rem 1rem;
@ -530,8 +431,7 @@ function submitNewsletter(submitEvent: Event): void {
.contact-main__inner, .contact-main__inner,
.contact-form__grid, .contact-form__grid,
.get-involved__card, .get-involved__card {
.site-footer__inner {
grid-template-columns: 1fr; grid-template-columns: 1fr;
} }
@ -543,9 +443,5 @@ function submitNewsletter(submitEvent: Event): void {
padding: 2rem; padding: 2rem;
gap: 2rem; gap: 2rem;
} }
.site-footer__links {
grid-template-columns: 1fr;
}
} }
</style> </style>

107
frontend/rabbi_gerzi/src/views/HomePage.vue
View file

@ -2,6 +2,7 @@
import { ref } from 'vue' import { ref } from 'vue'
import { useRouter } from 'vue-router' import { useRouter } from 'vue-router'
import SiteHeader from '@/components/SiteHeader.vue' import SiteHeader from '@/components/SiteHeader.vue'
import SiteFooter from '@/components/SiteFooter.vue'
const router = useRouter() const router = useRouter()
@ -498,28 +499,7 @@ function projectCardStyle(project: Project): string {
</div> </div>
</section> </section>
<footer class="site-footer" data-cy="footer"> <SiteFooter />
<div class="site-footer__inner">
<div class="site-footer__brand">
<img src="/assets/signature.png" alt="R' Yehoshua Gerzi" class="site-footer__signature" />
<div class="site-footer__social">
<a href="#" class="site-footer__social-link" aria-label="YouTube">▶</a>
<a href="#" class="site-footer__social-link" aria-label="Spotify">♫</a>
</div>
</div>
<nav class="site-footer__links">
<ul class="site-footer__link-column">
<li><a href="/media">Torah Media</a></li>
<li><a href="/about">About</a></li>
</ul>
<ul class="site-footer__link-column">
<li><a href="/donate">Donate</a></li>
<li><a href="/contact">Contact</a></li>
</ul>
</nav>
</div>
<p class="site-footer__copyright">© Rabbi Gerzi 2025</p>
</footer>
</div> </div>
</template> </template>
@ -1200,85 +1180,6 @@ function projectCardStyle(project: Project): string {
background: var(--color-slate); background: var(--color-slate);
} }
.site-footer {
background: var(--color-white);
padding: 4rem 2rem 2rem;
border-top: 1px solid var(--color-border);
}
.site-footer__inner {
max-width: 1100px;
margin: 0 auto 2rem;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 2rem;
align-items: start;
}
.site-footer__brand {
display: flex;
flex-direction: column;
gap: 1rem;
}
.site-footer__signature {
height: 40px;
width: auto;
}
.site-footer__social {
display: flex;
gap: 0.75rem;
}
.site-footer__social-link {
width: 2rem;
height: 2rem;
border-radius: 6px;
border: 1px solid var(--color-border);
display: inline-flex;
align-items: center;
justify-content: center;
color: var(--color-text-muted);
}
.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 {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 0.6rem;
}
.site-footer__link-column a {
font-family: var(--font-sans);
font-size: 0.95rem;
color: var(--color-text);
}
.site-footer__link-column a:hover {
color: var(--color-slate);
}
.site-footer__copyright {
text-align: center;
font-family: var(--font-sans);
font-size: 0.85rem;
color: var(--color-text-muted);
margin: 0;
}
@media (max-width: 768px) { @media (max-width: 768px) {
.testimonials { .testimonials {
--testimonials-card-height: 320px; --testimonials-card-height: 320px;
@ -1346,10 +1247,6 @@ function projectCardStyle(project: Project): string {
padding: 2rem; padding: 2rem;
gap: 2rem; gap: 2rem;
} }
.site-footer__inner {
grid-template-columns: 1fr;
}
} }
@media (max-width: 480px) { @media (max-width: 480px) {