sucupira
d0d80a105e
- Rebuild complet SvelteKit 2 + Svelte 5 runes + TypeScript, adapter-static - Images self-hébergées optimisées au build (vite-imagetools), fonts Archivo/Inter en woff2 local — BunnyCDN et Google Fonts supprimés (corrige les 403 d'images) - Tokens charte OKI, thème sombre par défaut / clair opt-in, zéro emoji (set SVG) - Motion : KineticText (stagger syncopé gwoka), ScrollProgressBar, View Transitions - Village SVG isométrique pour les services hébergés + fallback accessible - PWA (manifest + SW hors-ligne), 404 en KA, CSP nettoyée (.htaccess + _headers) - Lighthouse mobile : 91/100/100/100 — JS initial 67 Ko gzip
111 lines
2.4 KiB
Svelte
111 lines
2.4 KiB
Svelte
<script lang="ts">
|
|
import BrandIcon from '$lib/components/icons/BrandIcon.svelte';
|
|
import type { Bundle, Locale } from '$lib/i18n';
|
|
|
|
let { t, locale }: { t: Bundle; locale: Locale } = $props();
|
|
|
|
const year = new Date().getFullYear();
|
|
const legalHref = $derived(locale === 'en' ? '/en/legal-notice/' : '/mentions-legales/');
|
|
</script>
|
|
|
|
<footer>
|
|
<div class="flag-bar" aria-hidden="true"></div>
|
|
<div class="footer-content container">
|
|
<p class="footer-name">{t.site.name}</p>
|
|
<p class="footer-meta">© {year} {t.site.name} | {t.site.tagline}</p>
|
|
<p class="footer-legal">
|
|
<a href={legalHref}>{t.footer.legal_link}</a>
|
|
</p>
|
|
<div class="footer-socials">
|
|
<a href="mailto:kontak@o-k-i.net" title="Email" class="social-link" aria-label="Email">
|
|
<BrandIcon name="email" />
|
|
</a>
|
|
<a
|
|
href="https://wa.me/262692229740"
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
title="WhatsApp"
|
|
class="social-link"
|
|
aria-label="WhatsApp"
|
|
>
|
|
<BrandIcon name="whatsapp" />
|
|
</a>
|
|
<a
|
|
href="https://discord.gg/DPvUCA8dD"
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
title="Discord"
|
|
class="social-link"
|
|
aria-label="Discord"
|
|
>
|
|
<BrandIcon name="discord" />
|
|
</a>
|
|
<a
|
|
href="https://labola.o-k-i.net/ORGANISATION-KA-INTERNATIONALE/o-k-i.net"
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
title="Code source sur Labola (Gitea)"
|
|
class="social-link"
|
|
aria-label="Code source sur Labola (Gitea)"
|
|
>
|
|
<BrandIcon name="gitea" />
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
|
|
<style>
|
|
footer {
|
|
background: var(--noir-profond);
|
|
border-top: 1px solid var(--line);
|
|
}
|
|
|
|
.footer-content {
|
|
padding: var(--space-4) var(--space-4);
|
|
text-align: center;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--space-1);
|
|
align-items: center;
|
|
}
|
|
|
|
.footer-name {
|
|
font-family: var(--font-display);
|
|
font-weight: 700;
|
|
text-transform: uppercase;
|
|
letter-spacing: -0.01em;
|
|
color: var(--or-oki);
|
|
}
|
|
|
|
.footer-meta {
|
|
color: var(--muted);
|
|
font-size: 0.9rem;
|
|
}
|
|
|
|
.footer-legal a {
|
|
font-size: 0.9rem;
|
|
}
|
|
|
|
.footer-socials {
|
|
display: flex;
|
|
gap: var(--space-2);
|
|
margin-top: var(--space-1);
|
|
}
|
|
|
|
.social-link {
|
|
color: var(--muted);
|
|
display: inline-flex;
|
|
transition: color var(--dur-tanbou) var(--ease-ka), transform var(--dur-tanbou) var(--ease-ka);
|
|
}
|
|
|
|
.social-link:hover {
|
|
color: var(--or-oki);
|
|
transform: translateY(-2px);
|
|
}
|
|
|
|
.social-link :global(svg) {
|
|
width: 1.4rem;
|
|
height: 1.4rem;
|
|
}
|
|
</style>
|