d412975a4c
- Navigation : btn-ghost, active-class, footer, nav mobile → CSS vars adaptatifs - Overrides light mode renforcés avec !important (scoped styles compatibles) - btn-primary garde text-white en light mode (fond coloré) - Logo : symbole § calligraphié SVG inline remplace lucide-book-open - Logo text : font-display weight 300 (ronde fine) + text-gradient - Logo SVG aussi exporté en /public/images/logo-section.svg - Header/footer : backgrounds et bordures via CSS vars Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
86 lines
3.8 KiB
Vue
86 lines
3.8 KiB
Vue
<template>
|
|
<footer class="footer-wrap border-t border-[hsl(var(--color-text)/0.1)] bg-[hsl(var(--color-surface))]">
|
|
<!-- Shadok pattern -->
|
|
<svg class="footer-shadok-pattern" viewBox="0 0 400 80" fill="none" aria-hidden="true">
|
|
<g transform="translate(20,10)">
|
|
<ellipse cx="15" cy="25" rx="12" ry="14" fill="currentColor" opacity="0.2"/>
|
|
<circle cx="15" cy="10" r="7" fill="currentColor" opacity="0.16"/>
|
|
<line x1="10" y1="38" x2="8" y2="55" stroke="currentColor" stroke-width="1.5" opacity="0.15"/>
|
|
<line x1="20" y1="38" x2="22" y2="55" stroke="currentColor" stroke-width="1.5" opacity="0.15"/>
|
|
</g>
|
|
<g transform="translate(80,15)">
|
|
<ellipse cx="15" cy="22" rx="10" ry="12" fill="currentColor" opacity="0.16"/>
|
|
<circle cx="15" cy="8" r="6" fill="currentColor" opacity="0.13"/>
|
|
<line x1="10" y1="33" x2="8" y2="48" stroke="currentColor" stroke-width="1.5" opacity="0.12"/>
|
|
<line x1="20" y1="33" x2="22" y2="48" stroke="currentColor" stroke-width="1.5" opacity="0.12"/>
|
|
</g>
|
|
<g transform="translate(140,8)">
|
|
<ellipse cx="15" cy="25" rx="11" ry="13" fill="currentColor" opacity="0.18"/>
|
|
<circle cx="15" cy="10" r="6.5" fill="currentColor" opacity="0.15"/>
|
|
<line x1="10" y1="37" x2="7" y2="54" stroke="currentColor" stroke-width="1.5" opacity="0.14"/>
|
|
<line x1="20" y1="37" x2="23" y2="54" stroke="currentColor" stroke-width="1.5" opacity="0.14"/>
|
|
</g>
|
|
<g transform="translate(210,18)">
|
|
<ellipse cx="15" cy="20" rx="10" ry="11" fill="currentColor" opacity="0.14"/>
|
|
<circle cx="15" cy="7" r="5.5" fill="currentColor" opacity="0.11"/>
|
|
<line x1="10" y1="30" x2="9" y2="44" stroke="currentColor" stroke-width="1.5" opacity="0.1"/>
|
|
<line x1="20" y1="30" x2="21" y2="44" stroke="currentColor" stroke-width="1.5" opacity="0.1"/>
|
|
</g>
|
|
<g transform="translate(270,12)">
|
|
<ellipse cx="15" cy="24" rx="12" ry="14" fill="currentColor" opacity="0.18"/>
|
|
<circle cx="15" cy="9" r="7" fill="currentColor" opacity="0.15"/>
|
|
<line x1="10" y1="37" x2="7" y2="55" stroke="currentColor" stroke-width="1.5" opacity="0.14"/>
|
|
<line x1="20" y1="37" x2="23" y2="55" stroke="currentColor" stroke-width="1.5" opacity="0.14"/>
|
|
</g>
|
|
<g transform="translate(340,16)">
|
|
<ellipse cx="15" cy="22" rx="10" ry="12" fill="currentColor" opacity="0.16"/>
|
|
<circle cx="15" cy="8" r="6" fill="currentColor" opacity="0.13"/>
|
|
<line x1="10" y1="33" x2="8" y2="48" stroke="currentColor" stroke-width="1.5" opacity="0.12"/>
|
|
<line x1="20" y1="33" x2="22" y2="48" stroke="currentColor" stroke-width="1.5" opacity="0.12"/>
|
|
</g>
|
|
</svg>
|
|
<div class="container-content px-4 py-8 relative z-1">
|
|
<div class="flex flex-col items-center gap-4 md:flex-row md:justify-between">
|
|
<!-- Credits -->
|
|
<p class="text-sm text-[hsl(var(--color-text)/0.4)]">
|
|
{{ site?.footer.credits }}
|
|
</p>
|
|
|
|
<!-- Links -->
|
|
<nav class="flex items-center gap-4" aria-label="Liens du pied de page">
|
|
<NuxtLink
|
|
v-for="link in site?.footer.links"
|
|
:key="link.to"
|
|
:to="link.to"
|
|
class="text-sm text-[hsl(var(--color-text)/0.4)] transition-colors hover:text-[hsl(var(--color-text)/0.7)]"
|
|
>
|
|
{{ link.label }}
|
|
</NuxtLink>
|
|
</nav>
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
const { data: site } = await useSiteContent()
|
|
</script>
|
|
|
|
<style scoped>
|
|
.footer-wrap {
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.footer-shadok-pattern {
|
|
position: absolute;
|
|
bottom: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: auto;
|
|
opacity: 1;
|
|
pointer-events: none;
|
|
color: hsl(var(--color-primary));
|
|
}
|
|
</style>
|