ac4aff4985
- Nettoyage paroles : suppression instructions Suno AI, corrections prononciation (11 fichiers) - 4 palettes saisonnières (Automne/Hiver dark, Printemps/Été light) avec sélecteur - Typographie modernisée : Outfit (display) + Inter (sans) remplacent Syne + Space Grotesk - Styles adaptatifs : CSS vars pour couleurs, overrides light mode complets - Mini-player : bouton Next ajouté, flèche expand plus visible - BookPlayer : fix scroll mode paginé, croix de fermeture visible - Illustrations Shadoks inline SVG dans 11 composants/pages - Suppression soulignés navigation, reset boutons, bordures propres Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
158 lines
6.6 KiB
Vue
158 lines
6.6 KiB
Vue
<template>
|
|
<div class="relative overflow-hidden section-padding">
|
|
<!-- Shadok reader: character with big glasses reading a book -->
|
|
<svg class="shadok-reader" viewBox="0 0 240 300" fill="none" aria-hidden="true">
|
|
<!-- Body -->
|
|
<ellipse cx="120" cy="170" rx="45" ry="55" fill="currentColor" opacity="0.85"/>
|
|
<!-- Head -->
|
|
<circle cx="120" cy="100" r="28" fill="currentColor" opacity="0.8"/>
|
|
<!-- Big round glasses -->
|
|
<circle cx="107" cy="94" r="11" stroke="currentColor" stroke-width="2.5" fill="none" opacity="0.5"/>
|
|
<circle cx="133" cy="94" r="11" stroke="currentColor" stroke-width="2.5" fill="none" opacity="0.5"/>
|
|
<line x1="118" y1="94" x2="122" y2="94" stroke="currentColor" stroke-width="2" opacity="0.5"/>
|
|
<!-- Eyes behind glasses -->
|
|
<circle cx="108" cy="93" r="2.5" fill="currentColor" opacity="0.5"/>
|
|
<circle cx="134" cy="93" r="2.5" fill="currentColor" opacity="0.5"/>
|
|
<!-- Arms holding book -->
|
|
<line x1="78" y1="155" x2="60" y2="180" stroke="currentColor" stroke-width="3.5" stroke-linecap="round" opacity="0.6"/>
|
|
<line x1="162" y1="155" x2="180" y2="180" stroke="currentColor" stroke-width="3.5" stroke-linecap="round" opacity="0.6"/>
|
|
<!-- Book (open) -->
|
|
<rect x="55" y="175" width="55" height="40" rx="2" fill="currentColor" opacity="0.35"/>
|
|
<rect x="110" y="175" width="55" height="40" rx="2" fill="currentColor" opacity="0.3"/>
|
|
<line x1="110" y1="175" x2="110" y2="215" stroke="currentColor" stroke-width="2" opacity="0.5"/>
|
|
<!-- Book lines (text) -->
|
|
<line x1="65" y1="188" x2="100" y2="188" stroke="currentColor" stroke-width="1" opacity="0.2"/>
|
|
<line x1="65" y1="195" x2="95" y2="195" stroke="currentColor" stroke-width="1" opacity="0.2"/>
|
|
<line x1="65" y1="202" x2="98" y2="202" stroke="currentColor" stroke-width="1" opacity="0.2"/>
|
|
<!-- Legs -->
|
|
<line x1="105" y1="222" x2="95" y2="270" stroke="currentColor" stroke-width="3.5" stroke-linecap="round" opacity="0.6"/>
|
|
<line x1="135" y1="222" x2="145" y2="270" stroke="currentColor" stroke-width="3.5" stroke-linecap="round" opacity="0.6"/>
|
|
</svg>
|
|
|
|
<!-- Shadok stack: pile of books tilting -->
|
|
<svg class="shadok-stack" viewBox="0 0 160 220" fill="none" aria-hidden="true">
|
|
<!-- Bottom book -->
|
|
<rect x="20" y="170" width="120" height="22" rx="3" fill="currentColor" opacity="0.5" transform="rotate(-2 80 181)"/>
|
|
<!-- Second book -->
|
|
<rect x="30" y="145" width="100" height="20" rx="3" fill="currentColor" opacity="0.45" transform="rotate(3 80 155)"/>
|
|
<!-- Third book -->
|
|
<rect x="25" y="120" width="110" height="18" rx="3" fill="currentColor" opacity="0.4" transform="rotate(-4 80 129)"/>
|
|
<!-- Fourth book -->
|
|
<rect x="35" y="97" width="90" height="18" rx="3" fill="currentColor" opacity="0.35" transform="rotate(5 80 106)"/>
|
|
<!-- Fifth book (tilting more) -->
|
|
<rect x="40" y="74" width="80" height="17" rx="3" fill="currentColor" opacity="0.3" transform="rotate(-7 80 82)"/>
|
|
<!-- Top book (really tilting) -->
|
|
<rect x="45" y="52" width="70" height="16" rx="3" fill="currentColor" opacity="0.25" transform="rotate(10 80 60)"/>
|
|
<!-- Tiny Shadok sitting on top -->
|
|
<ellipse cx="85" cy="42" rx="10" ry="8" fill="currentColor" opacity="0.5"/>
|
|
<circle cx="85" cy="30" r="6" fill="currentColor" opacity="0.45"/>
|
|
<circle cx="87" cy="29" r="1.5" fill="currentColor" opacity="0.3"/>
|
|
</svg>
|
|
|
|
<div class="container-content">
|
|
<header class="mb-12 text-center">
|
|
<p class="mb-2 font-mono text-sm tracking-widest text-primary uppercase">{{ content?.kicker }}</p>
|
|
<h1 class="page-title font-display font-bold tracking-tight text-white">
|
|
{{ content?.title }}
|
|
</h1>
|
|
<p class="mt-4 mx-auto max-w-2xl text-white/60">
|
|
{{ content?.description }}
|
|
</p>
|
|
</header>
|
|
|
|
<div class="mx-auto max-w-3xl">
|
|
<ul class="flex flex-col gap-3">
|
|
<li
|
|
v-for="chapter in chapters"
|
|
:key="chapter.path"
|
|
>
|
|
<NuxtLink
|
|
:to="`/lire/${chapter.stem}`"
|
|
class="card-surface flex items-start gap-4 group"
|
|
>
|
|
<span class="font-mono text-2xl font-bold text-primary/30 leading-none mt-1 w-10 text-right flex-shrink-0">
|
|
{{ String(chapter.order).padStart(2, '0') }}
|
|
</span>
|
|
<div class="min-w-0 flex-1">
|
|
<h2 class="font-display text-lg font-semibold text-white group-hover:text-primary transition-colors">
|
|
{{ chapter.title }}
|
|
</h2>
|
|
<p v-if="chapter.description" class="mt-1 text-sm text-white/50">
|
|
{{ chapter.description }}
|
|
</p>
|
|
<div class="mt-2 flex items-center gap-3">
|
|
<span v-if="chapter.readingTime" class="text-xs text-white/30">
|
|
<span class="i-lucide-clock inline-block h-3 w-3 mr-1 align-middle" />
|
|
{{ chapter.readingTime }}
|
|
</span>
|
|
<SongBadges :chapter-slug="chapter.stem!" />
|
|
</div>
|
|
</div>
|
|
<div class="i-lucide-chevron-right h-5 w-5 text-white/20 group-hover:text-primary/60 transition-colors flex-shrink-0 mt-2" />
|
|
</NuxtLink>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
definePageMeta({
|
|
layout: 'default',
|
|
})
|
|
|
|
const { data: content } = await usePageContent('lire')
|
|
|
|
useHead({
|
|
title: content.value?.meta?.title ?? 'Table des matières',
|
|
})
|
|
|
|
const { data: chapters } = await useAsyncData('book-toc', () =>
|
|
queryCollection('book').order('order', 'ASC').all(),
|
|
)
|
|
</script>
|
|
|
|
<style scoped>
|
|
.page-title {
|
|
font-size: clamp(2rem, 5vw, 2.75rem);
|
|
}
|
|
|
|
.shadok-reader {
|
|
position: absolute;
|
|
right: 2%;
|
|
top: 5%;
|
|
width: clamp(90px, 13vw, 180px);
|
|
opacity: 0.1;
|
|
pointer-events: none;
|
|
color: hsl(var(--color-primary));
|
|
animation: shadok-float-reader 9s ease-in-out infinite;
|
|
}
|
|
|
|
.shadok-stack {
|
|
position: absolute;
|
|
left: 2%;
|
|
bottom: 5%;
|
|
width: clamp(80px, 11vw, 150px);
|
|
opacity: 0.1;
|
|
pointer-events: none;
|
|
color: hsl(var(--color-accent));
|
|
animation: shadok-float-stack 11s ease-in-out infinite;
|
|
}
|
|
|
|
@keyframes shadok-float-reader {
|
|
0%, 100% { transform: translateY(0); }
|
|
50% { transform: translateY(-10px); }
|
|
}
|
|
|
|
@keyframes shadok-float-stack {
|
|
0%, 100% { transform: translateY(0) rotate(0deg); }
|
|
50% { transform: translateY(-8px) rotate(-2deg); }
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.shadok-reader { display: none; }
|
|
.shadok-stack { display: none; }
|
|
}
|
|
</style>
|