+
-
-
+
@@ -38,22 +61,38 @@ const props = defineProps<{
rows?: number
}>()
-defineEmits<{
+const emit = defineEmits<{
'update:modelValue': [value: string]
}>()
-const tab = ref<'edit' | 'preview'>('edit')
+const tab = ref<'edit' | 'preview' | 'split'>('split')
+const fullscreen = ref(false)
+const textareaRef = ref
+
+
+
$1') .replace(/^### (.+)$/gm, '
$1
') .replace(/^## (.+)$/gm, '$1
') .replace(/^# (.+)$/gm, '$1
') + .replace(/^- (.+)$/gm, '- $&
') - .replace(/^(?!<[hp])(.+)/gm, '
$1
') + .replace(/^(?!<[hpulob])(.+)/gm, '$1
') }) @@ -64,14 +103,23 @@ const renderedHtml = computed(() => { overflow: hidden; } -.md-tabs { +.md-toolbar { display: flex; + align-items: center; + justify-content: space-between; background: hsl(20 8% 6%); border-bottom: 1px solid hsl(20 8% 14%); } +.md-tabs { + display: flex; +} + .md-tab { - padding: 0.5rem 1rem; + display: flex; + align-items: center; + gap: 0.375rem; + padding: 0.5rem 0.875rem; border: none; background: none; color: hsl(20 8% 50%); @@ -85,6 +133,39 @@ const renderedHtml = computed(() => { background: hsl(20 8% 10%); } +.md-fullscreen { + padding: 0.5rem 0.75rem; + color: hsl(20 8% 40%); + transition: color 0.2s; +} +.md-fullscreen:hover, +.md-fullscreen--active { color: white; } + +.md-body { + display: flex; +} + +.md-body--split .md-textarea, +.md-body--split .md-preview { + width: 50%; +} + +.md-body--split .md-preview { + border-left: 1px solid hsl(20 8% 14%); +} + +.md-body--fullscreen { + position: fixed; + inset: 0; + z-index: 50; + background: hsl(20 8% 4%); +} + +.md-body--fullscreen .md-textarea, +.md-body--fullscreen .md-preview { + height: 100vh; +} + .md-textarea { width: 100%; padding: 1rem; @@ -95,7 +176,8 @@ const renderedHtml = computed(() => { font-size: 0.85rem; line-height: 1.7; resize: vertical; - min-height: 20rem; + min-height: 24rem; + tab-size: 2; } .md-textarea:focus { @@ -104,7 +186,9 @@ const renderedHtml = computed(() => { .md-preview { padding: 1rem; - min-height: 20rem; + min-height: 24rem; + max-height: 70vh; + overflow-y: auto; background: hsl(20 8% 4%); } diff --git a/app/components/admin/AdminSidebar.vue b/app/components/admin/AdminSidebar.vue index b7882e8..c268f01 100644 --- a/app/components/admin/AdminSidebar.vue +++ b/app/components/admin/AdminSidebar.vue @@ -27,17 +27,17 @@ Accueil -
-
-
-
-
-
-
-
-
- 
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- {{ bpContent?.cover.title }}
-{{ bpContent?.cover.subtitle }}
-- {{ bpContent?.cover.description }} -
- -
+
+
@@ -86,73 +50,85 @@
- ()
const viewportEl = ref()
const contentEl = ref()
-// ── Phase state ──
-const phase = ref<'intro' | 'cover' | 'reading'>('intro')
-const chapterIdx = ref(0)
+const trackIdx = ref(0)
const currentPage = ref(0)
const totalPages = ref(1)
const colWidth = ref(500)
const showSommaire = ref(false)
const isTurning = ref(false)
-const { init: initBookData, getSongs, getPrimarySong, getPlaylistOrder } = useBookData()
+// ── Reading mode ──
+const readingMode = ref<'paginated' | 'scroll'>('scroll')
+const isScrollMode = computed(() => readingMode.value === 'scroll')
+const scrollPercent = ref(0)
+
+// When switching back to paginated, recalc pages
+watch(readingMode, async (mode) => {
+ if (mode === 'paginated') {
+ await nextTick()
+ await nextTick()
+ setTimeout(recalcPages, 100)
+ }
+})
+
+function onViewportScroll() {
+ if (!isScrollMode.value || !viewportEl.value) return
+ const el = viewportEl.value
+ const max = el.scrollHeight - el.clientHeight
+ scrollPercent.value = max > 0 ? Math.round((el.scrollTop / max) * 100) : 0
+}
+
+const { init: initBookData, getPlaylistOrder } = useBookData()
const audioPlayer = useAudioPlayer()
const playerStore = usePlayerStore()
-// ── Content from Nuxt Content ──
-const chaptersContent = ref([])
-const contentLoaded = ref(false)
-
-async function loadContent() {
- if (contentLoaded.value) return
- try {
- const data = await queryCollection('book').order('order', 'ASC').all()
- chaptersContent.value = data
- contentLoaded.value = true
- }
- catch (err) {
- console.error('Failed to load book content:', err)
- }
-}
-
-const activeChapter = computed(() => {
- if (chapterIdx.value < 0 || !chaptersContent.value.length) return null
- return chaptersContent.value[chapterIdx.value] ?? null
+// ── Tracks: built from playlist order (songs), not chapters ──
+const tracks = computed(() => {
+ return playerStore.playlist.map(song => ({
+ id: song.id,
+ title: song.title,
+ song,
+ }))
})
-// ── Chapter metadata ──
-const chapters = [
- { slug: 'introduction', title: 'Introduction' },
- { slug: 'de-quel-don-parlons-nous', title: 'De quel don parlons-nous ?' },
- { slug: 'la-mesure-du-don', title: 'La mesure du don' },
- { slug: 'raison-d-etre-d-une-monnaie', title: 'Raison d\'être d\'une monnaie' },
- { slug: 'la-trm', title: 'La TRM' },
- { slug: 'creer-une-economie', title: 'Créer une économie ?' },
- { slug: 'echanger', title: 'Échanger' },
- { slug: 'relation-institutionnelle', title: 'Relation institutionnelle' },
- { slug: 'autres-greffes', title: 'Autres greffes' },
- { slug: 'et-maintenant', title: 'Et maintenant ?… action ?' },
- { slug: 'annexes', title: 'Chapitres annexes' },
-]
+const currentTrack = computed(() => tracks.value[trackIdx.value] ?? null)
+const currentSong = computed(() => currentTrack.value?.song ?? null)
-// ── Per-chapter color hues ──
-const chapterHues: [number, number][] = [
- [12, 36], // cover (intro + cover phases)
- [15, 35], // 1
- [350, 15], // 2
- [36, 50], // 3
- [170, 200], // 4
- [220, 250], // 5
- [270, 300], // 6
- [320, 345], // 7
- [150, 170], // 8
- [190, 220], // 9
- [40, 20], // 10
- [210, 240], // 11
+const currentLyrics = computed(() => {
+ return currentSong.value?.lyrics?.trim() || ''
+})
+
+const currentLyricsHtml = computed(() => {
+ if (!currentLyrics.value) return ''
+ return currentLyrics.value
+ .replace(/&/g, '&')
+ .replace(//g, '>')
+ .replace(/\[([^\]]+)\]/g, '[$1]')
+ .replace(/\n\n/g, '
})
-const chapterSong = computed(() => {
- if (phase.value !== 'reading') return null
- return getPrimarySong(chapters[chapterIdx.value].slug)
+// ── CSS columns pagination ──
+const contentStyle = computed(() => {
+ if (isScrollMode.value) return {}
+ return {
+ columnWidth: colWidth.value + 'px',
+ columnGap: COL_GAP + 'px',
+ transform: `translateX(-${currentPage.value * (colWidth.value + COL_GAP)}px)`,
+ }
})
-// ── CSS columns pagination ──
-const contentStyle = computed(() => ({
- columnWidth: colWidth.value + 'px',
- columnGap: COL_GAP + 'px',
- transform: `translateX(-${currentPage.value * (colWidth.value + COL_GAP)}px)`,
-}))
-
function recalcPages() {
+ if (isScrollMode.value) return
if (!contentEl.value || !viewportEl.value) return
colWidth.value = viewportEl.value.offsetWidth
const sw = contentEl.value.scrollWidth
@@ -269,25 +252,17 @@ function recalcPages() {
let resizeObs: ResizeObserver | null = null
-// Recalc when chapter content changes
-watch(activeChapter, async () => {
+// Recalc when track changes
+watch(trackIdx, async () => {
currentPage.value = 0
- // Wait for ContentRenderer to update DOM
await nextTick()
await nextTick()
setTimeout(recalcPages, 100)
})
-// ── Phase transitions ──
-function onSpinEnd() {
- phase.value = 'cover'
-}
-
-async function startReading() {
- await loadContent()
- chapterIdx.value = 0
+async function initReading() {
+ trackIdx.value = 0
currentPage.value = 0
- phase.value = 'reading'
await nextTick()
await nextTick()
// Set up ResizeObserver
@@ -298,14 +273,36 @@ async function startReading() {
setTimeout(recalcPages, 200)
}
-// ── Navigation ──
-function goToChapter(idx: number) {
- chapterIdx.value = idx
+// ── Navigation by tracks (songs) ──
+let _skipSongWatch = false
+
+function goToTrack(idx: number) {
+ if (idx < 0 || idx >= tracks.value.length) return
+ trackIdx.value = idx
currentPage.value = 0
showSommaire.value = false
- // Play chapter song
- const song = getPrimarySong(chapters[idx].slug)
- if (song) audioPlayer.loadAndPlay(song)
+ // Scroll to top in scroll mode
+ if (isScrollMode.value && viewportEl.value) {
+ viewportEl.value.scrollTop = 0
+ }
+ // Play the song
+ const song = tracks.value[idx]?.song
+ if (song) {
+ _skipSongWatch = true
+ audioPlayer.loadAndPlay(song)
+ }
+}
+
+function nextTrack() {
+ if (trackIdx.value < tracks.value.length - 1) {
+ goToTrack(trackIdx.value + 1)
+ }
+}
+
+function prevTrack() {
+ if (trackIdx.value > 0) {
+ goToTrack(trackIdx.value - 1)
+ }
}
function nextPage() {
@@ -313,9 +310,8 @@ function nextPage() {
triggerTurn()
currentPage.value++
}
- else if (chapterIdx.value < chapters.length - 1) {
- // Next chapter
- goToChapter(chapterIdx.value + 1)
+ else if (trackIdx.value < tracks.value.length - 1) {
+ goToTrack(trackIdx.value + 1)
}
}
@@ -324,22 +320,8 @@ function prevPage() {
triggerTurn()
currentPage.value--
}
- else if (chapterIdx.value > 0) {
- // Previous chapter, go to last page
- chapterIdx.value--
- currentPage.value = 0
- showSommaire.value = false
- const song = getPrimarySong(chapters[chapterIdx.value].slug)
- if (song) audioPlayer.loadAndPlay(song)
- // After content loads, go to last page
- watch(activeChapter, async () => {
- await nextTick()
- await nextTick()
- setTimeout(() => {
- recalcPages()
- currentPage.value = Math.max(0, totalPages.value - 1)
- }, 150)
- }, { once: true })
+ else if (trackIdx.value > 0) {
+ goToTrack(trackIdx.value - 1)
}
}
@@ -353,15 +335,26 @@ function close() {
}
function handleKeydown(e: KeyboardEvent) {
- if (phase.value === 'reading') {
+ // CRITICAL: stop propagation so useKeyboardShortcuts doesn't also fire
+ e.stopPropagation()
+
+ if (e.key === 'Escape') { close(); return }
+
+ if (e.key === ' ') {
+ e.preventDefault()
+ audioPlayer.togglePlayPause()
+ return
+ }
+
+ if (isScrollMode.value) {
+ if (e.key === 'ArrowRight') { e.preventDefault(); nextTrack() }
+ else if (e.key === 'ArrowLeft') { e.preventDefault(); prevTrack() }
+ }
+ else {
if (e.key === 'ArrowRight') { e.preventDefault(); nextPage() }
else if (e.key === 'ArrowLeft') { e.preventDefault(); prevPage() }
- else if (e.key === 'ArrowDown') { e.preventDefault(); if (chapterIdx.value < chapters.length - 1) goToChapter(chapterIdx.value + 1) }
- else if (e.key === 'ArrowUp') { e.preventDefault(); if (chapterIdx.value > 0) goToChapter(chapterIdx.value - 1) }
- else if (e.key === 'Escape') close()
- }
- else if (e.key === 'Escape') {
- close()
+ else if (e.key === 'ArrowDown') { e.preventDefault(); nextTrack() }
+ else if (e.key === 'ArrowUp') { e.preventDefault(); prevTrack() }
}
}
@@ -373,6 +366,7 @@ function onTouchStart(e: TouchEvent) {
}
function onTouchEnd(e: TouchEvent) {
+ if (isScrollMode.value) return
const diff = touchStartX - (e.changedTouches[0]?.screenX ?? 0)
if (Math.abs(diff) > 50) {
if (diff > 0) nextPage()
@@ -383,11 +377,7 @@ function onTouchEnd(e: TouchEvent) {
// ── Lifecycle ──
watch(isOpen, async (open) => {
if (open) {
- phase.value = 'intro'
- chapterIdx.value = 0
- currentPage.value = 0
showSommaire.value = false
- contentLoaded.value = false
await initBookData()
await nextTick()
overlayRef.value?.focus()
@@ -396,8 +386,11 @@ watch(isOpen, async (open) => {
// Load playlist & play first song
const playlist = getPlaylistOrder()
if (playlist.length) playerStore.setPlaylist(playlist)
- const first = getSongs().find(s => s.id === 'chanson-01')
- if (first) audioPlayer.loadAndPlay(first)
+ if (playlist.length) {
+ _skipSongWatch = true
+ audioPlayer.loadAndPlay(playlist[0])
+ }
+ await initReading()
}
else {
overlayRef.value?.removeEventListener('touchstart', onTouchStart)
@@ -406,6 +399,24 @@ watch(isOpen, async (open) => {
}
})
+// ── Sync: when song changes externally (persistent player controls), update trackIdx ──
+watch(() => playerStore.currentSong, (song) => {
+ if (!song || !isOpen.value) return
+ if (_skipSongWatch) {
+ _skipSongWatch = false
+ return
+ }
+ const idx = tracks.value.findIndex(t => t.id === song.id)
+ if (idx !== -1 && idx !== trackIdx.value) {
+ trackIdx.value = idx
+ currentPage.value = 0
+ showSommaire.value = false
+ if (isScrollMode.value && viewportEl.value) {
+ viewportEl.value.scrollTop = 0
+ }
+ }
+})
+
watch(isOpen, (open) => {
if (import.meta.client) document.body.style.overflow = open ? 'hidden' : ''
})
@@ -442,7 +453,7 @@ onUnmounted(() => {
align-items: center;
outline: none;
overflow: hidden;
- padding-bottom: 4.5rem;
+ padding-bottom: 1rem;
transition: --scene-h1 1.6s ease, --scene-h2 1.6s ease;
}
@@ -519,33 +530,10 @@ onUnmounted(() => {
50% { opacity: 1; transform: translate(-50%, -50%) scale(1.04); }
}
-/* ─── CLOSE ─── */
-.bp-close {
- position: absolute;
- top: 1rem; right: 1rem;
- z-index: 75;
- display: flex;
- align-items: center;
- justify-content: center;
- width: 2.5rem; height: 2.5rem;
- border-radius: 50%;
- background: hsl(20 8% 8% / 0.6);
- backdrop-filter: blur(12px);
- color: hsl(20 8% 55%);
- border: 1px solid hsl(20 8% 18% / 0.5);
- cursor: pointer;
- transition: all 0.3s;
-}
-.bp-close:hover {
- background: hsl(var(--scene-h1) 60% 45% / 0.25);
- color: white;
- border-color: hsl(var(--scene-h1) 60% 50% / 0.4);
-}
-
/* ─── HINT ─── */
.bp-hint {
position: absolute;
- bottom: 5rem;
+ bottom: 0.5rem;
left: 50%;
transform: translateX(-50%);
z-index: 10;
@@ -565,135 +553,7 @@ onUnmounted(() => {
align-items: center;
width: 100%;
flex: 1;
-}
-
-/* Phase transitions */
-.phase-enter-active { animation: phase-in 0.5s cubic-bezier(0.16, 1, 0.3, 1) both; }
-.phase-leave-active { animation: phase-out 0.3s cubic-bezier(0.7, 0, 0.84, 0) both; }
-@keyframes phase-in {
- from { opacity: 0; transform: scale(0.97); filter: blur(4px); }
- to { opacity: 1; transform: scale(1); filter: blur(0); }
-}
-@keyframes phase-out {
- from { opacity: 1; transform: scale(1); filter: blur(0); }
- to { opacity: 0; transform: scale(0.97); filter: blur(4px); }
-}
-
-/* ═══════════════════════════════════════
- INTRO: 3D SPINNING BOOK
- ═══════════════════════════════════════ */
-.bp-intro {
- justify-content: center;
-}
-.spin-scene {
- perspective: 1200px;
-}
-.spin-book {
- position: relative;
- width: min(220px, 45vw);
- aspect-ratio: 3 / 4;
- transform-style: preserve-3d;
- animation: book-spin 2.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
-}
-.spin-face {
- position: absolute;
- inset: 0;
- backface-visibility: hidden;
- border-radius: 0.5rem;
- overflow: hidden;
- border: 1px solid hsl(20 8% 18%);
- box-shadow: 0 20px 60px hsl(0 0% 0% / 0.5);
-}
-.spin-front img {
- width: 200%;
- height: 100%;
- object-fit: cover;
- transform: translateX(-50%);
-}
-.spin-back {
- transform: rotateY(180deg);
-}
-.spin-back img {
- width: 200%;
- height: 100%;
- object-fit: cover;
-}
-
-@keyframes book-spin {
- 0% { transform: rotateY(0deg) scale(0.65); opacity: 0; }
- 8% { opacity: 1; }
- 45% { transform: rotateY(180deg) scale(0.9); }
- 75% { transform: rotateY(320deg) scale(1); }
- 90% { transform: rotateY(352deg) scale(1); }
- 100% { transform: rotateY(360deg) scale(1); }
-}
-
-/* ═══════════════════════════════════════
- COVER
- ═══════════════════════════════════════ */
-.bp-cover {
- justify-content: center;
- text-align: center;
-}
-.cover-frame {
- width: min(200px, 42vw);
- aspect-ratio: 3 / 4;
- border-radius: 0.625rem;
- overflow: hidden;
- border: 1px solid hsl(20 8% 18%);
- box-shadow:
- 0 25px 60px hsl(0 0% 0% / 0.5),
- 0 0 40px hsl(var(--scene-h1) 60% 40% / 0.1);
- margin-bottom: 2rem;
- animation: cover-float 7s ease-in-out infinite;
-}
-.cover-img {
- width: 200%; height: 100%;
- object-fit: cover;
- transform: translateX(-50%);
-}
-@keyframes cover-float {
- 0%, 100% { transform: translateY(0) rotate(-0.5deg); }
- 50% { transform: translateY(-10px) rotate(0.5deg); }
-}
-.cover-title {
- font-family: var(--font-display, 'Syne', sans-serif);
- font-size: clamp(1.75rem, 5vw, 2.75rem);
- font-weight: 800;
- line-height: 1.1;
- margin-bottom: 0.25rem;
-}
-.cover-sub {
- font-family: var(--font-display, 'Syne', sans-serif);
- font-size: clamp(1rem, 3vw, 1.4rem);
- color: hsl(20 8% 55%);
- margin-bottom: 1.5rem;
-}
-.cover-desc {
- font-size: 0.9rem;
- color: hsl(20 8% 45%);
- max-width: 26rem;
- line-height: 1.65;
- margin-bottom: 2rem;
-}
-.cover-cta {
- display: inline-flex;
- align-items: center;
- padding: 0.75rem 2rem;
- border-radius: 9999px;
- background: hsl(var(--scene-h1) 70% 45%);
- color: white;
- font-weight: 600;
- font-size: 0.95rem;
- border: none;
- cursor: pointer;
- transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
- box-shadow: 0 0 24px hsl(var(--scene-h1) 70% 45% / 0.3);
-}
-.cover-cta:hover {
- background: hsl(var(--scene-h1) 70% 52%);
- box-shadow: 0 0 36px hsl(var(--scene-h1) 70% 50% / 0.45);
- transform: translateY(-2px);
+ min-height: 0;
}
/* ═══════════════════════════════════════
@@ -704,14 +564,15 @@ onUnmounted(() => {
max-width: 52rem;
padding: 0 1rem;
gap: 0;
+ min-height: 0;
}
/* ─── Top bar ─── */
.reader-bar {
display: flex;
align-items: center;
- gap: 0.75rem;
- padding: 0.75rem 0;
+ gap: 0.5rem;
+ padding: 0.5rem 0;
width: 100%;
}
.reader-bar-btn {
@@ -720,18 +581,24 @@ onUnmounted(() => {
justify-content: center;
width: 2.25rem; height: 2.25rem;
border-radius: 0.5rem;
- background: hsl(20 8% 8% / 0.5);
- backdrop-filter: blur(8px);
- color: hsl(20 8% 55%);
- border: 1px solid hsl(20 8% 16% / 0.5);
+ background: transparent;
+ color: hsl(20 8% 45%);
+ border: none;
cursor: pointer;
transition: all 0.3s;
flex-shrink: 0;
}
.reader-bar-btn:hover {
color: white;
- background: hsl(var(--scene-h1) 50% 40% / 0.2);
- border-color: hsl(var(--scene-h1) 50% 50% / 0.3);
+ background: hsl(0 0% 100% / 0.06);
+}
+.reader-bar-close {
+ color: hsl(0 0% 100% / 0.7);
+ background: hsl(0 0% 100% / 0.08);
+}
+.reader-bar-close:hover {
+ color: white;
+ background: hsl(0 70% 55% / 0.3);
}
.reader-bar-title {
flex: 1;
@@ -844,12 +711,11 @@ onUnmounted(() => {
position: relative;
flex: 1;
width: 100%;
- overflow: hidden;
+ overflow: hidden auto;
border-radius: 0.75rem;
background: hsl(20 8% 5% / 0.4);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
- border: 1px solid hsl(20 8% 14% / 0.4);
}
.reader-columns {
@@ -860,6 +726,23 @@ onUnmounted(() => {
max-width: none;
}
+/* ─── Scroll mode overrides ─── */
+.reader-viewport--scroll {
+ overflow: hidden auto;
+ min-height: 0;
+}
+.reader-columns--scroll {
+ height: auto;
+ column-fill: unset;
+ column-width: unset !important;
+ transition: none;
+}
+
+/* Lyrics: preserve line breaks from \n in text nodes */
+.reader-columns :deep(p) {
+ white-space: pre-line;
+}
+
/* Tighten prose for column context */
.reader-columns :deep(h1) {
font-size: clamp(1.5rem, 3.5vw, 2rem);
@@ -880,12 +763,42 @@ onUnmounted(() => {
.reader-columns :deep(h3) {
break-after: avoid;
}
-.reader-columns :deep(p),
.reader-columns :deep(blockquote),
.reader-columns :deep(ul),
.reader-columns :deep(ol) {
break-inside: avoid;
}
+/* Lyrics content */
+.lyrics-content {
+ white-space: pre-line;
+ line-height: 1.9;
+ font-size: clamp(0.9rem, 2vw, 1.05rem);
+}
+.lyrics-content :deep(.lyrics-tag) {
+ display: block;
+ margin-top: 1.5rem;
+ margin-bottom: 0.5rem;
+ font-size: 0.75rem;
+ font-weight: 600;
+ text-transform: uppercase;
+ letter-spacing: 0.05em;
+ opacity: 0.35;
+}
+.lyrics-content :deep(p) {
+ break-inside: auto;
+ overflow-y: auto;
+}
+.lyrics-empty {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ min-height: 200px;
+}
+
+.reader-columns :deep(p) {
+ break-inside: auto;
+ overflow-y: auto;
+}
/* Page-turn shadow overlay */
.reader-shadow {
@@ -910,7 +823,7 @@ onUnmounted(() => {
align-items: center;
justify-content: space-between;
width: 100%;
- padding: 0.5rem 0;
+ padding: 0.25rem 0;
gap: 1rem;
}
.reader-nav-btn {
@@ -919,18 +832,16 @@ onUnmounted(() => {
justify-content: center;
width: 2.5rem; height: 2.5rem;
border-radius: 50%;
- background: hsl(20 8% 8% / 0.5);
- backdrop-filter: blur(8px);
- color: hsl(20 8% 55%);
- border: 1px solid hsl(20 8% 16% / 0.5);
+ background: transparent;
+ color: hsl(20 8% 45%);
+ border: none;
cursor: pointer;
transition: all 0.3s;
flex-shrink: 0;
}
.reader-nav-btn:hover {
- background: hsl(var(--scene-h1) 60% 42% / 0.2);
+ background: hsl(0 0% 100% / 0.06);
color: white;
- border-color: hsl(var(--scene-h1) 60% 50% / 0.35);
}
.reader-nav-btn--hidden {
opacity: 0;
diff --git a/app/components/book/ChapterContent.vue b/app/components/book/ChapterContent.vue
index fcd71dc..a8a2aea 100644
--- a/app/components/book/ChapterContent.vue
+++ b/app/components/book/ChapterContent.vue
@@ -1,5 +1,5 @@
-
+
@@ -9,3 +9,9 @@ defineProps<{
content: any
}>()
+
+
diff --git a/app/components/book/ChapterHeader.vue b/app/components/book/ChapterHeader.vue
index 261503a..3d29322 100644
--- a/app/components/book/ChapterHeader.vue
+++ b/app/components/book/ChapterHeader.vue
@@ -57,6 +57,6 @@ function playSong(song: Song) {
.chapter-title {
font-size: clamp(2rem, 5vw, 2.75rem);
padding-bottom: 0.75rem;
- border-bottom: 2px solid hsl(12 76% 48% / 0.4);
+ border-bottom: 2px solid hsl(var(--color-primary) / 0.4);
}
diff --git a/app/components/book/ChapterNav.vue b/app/components/book/ChapterNav.vue
index f499b29..2ff2559 100644
--- a/app/components/book/ChapterNav.vue
+++ b/app/components/book/ChapterNav.vue
@@ -6,7 +6,7 @@
{{ bpContent?.reader.sommaireTitle ?? 'Sommaire' }}
+
@@ -177,90 +153,97 @@ const overlayRef = ref
-
-
-
+
+
- {{ chapterSong.title }}
+ {{ currentSong.title }}
- - {{ bpContent?.reader.hints.desktop }} - {{ bpContent?.reader.hints.mobile }} + + {{ bpContent?.reader.hints.desktopScroll ?? '← → morceaux · Défilement libre · Esc fermer' }} + {{ bpContent?.reader.hints.mobileScroll ?? 'Défilez pour lire' }} - {{ bpContent?.reader.hints.default }} + {{ bpContent?.reader.hints.desktop }} + {{ bpContent?.reader.hints.mobile }}
')
+ .replace(/\n/g, '
')
+ .replace(/^/, '
') + .replace(/$/, '
') +}) + +// ── Per-track color hues (9 tracks) ── +const trackHues: [number, number][] = [ + [15, 35], // 1 Ce livre est une façon + [350, 15], // 2 De quel don nous parlons + [36, 50], // 3 Les asymétries + [170, 200], // 4 Inverser les flux + [220, 250], // 5 Ainsi soit-il + [270, 300], // 6 La croissance + [320, 345], // 7 Monnaie libre + [150, 170], // 8 Créer une économie + [190, 220], // 9 Coder la liberté ] const sceneVars = computed(() => { - const idx = phase.value === 'reading' ? chapterIdx.value + 1 : 0 - const [h1, h2] = chapterHues[idx] ?? chapterHues[0] + const [h1, h2] = trackHues[trackIdx.value] ?? trackHues[0] return { '--scene-h1': h1, '--scene-h2': h2 } as Record-
diff --git a/app/components/home/BookPresentation.vue b/app/components/home/BookPresentation.vue index eca5d0b..c6eb131 100644 --- a/app/components/home/BookPresentation.vue +++ b/app/components/home/BookPresentation.vue @@ -1,5 +1,56 @@ - + + + + + + + @@ -63,10 +114,10 @@ const { data: content } = await usePageContent('home') aspect-ratio: 3 / 4; border-radius: 0.75rem; overflow: hidden; - border: 1px solid hsl(20 8% 18%); + border: 1px solid hsl(var(--color-text) / 0.1); box-shadow: - 0 12px 40px hsl(0 0% 0% / 0.5), - 0 0 0 1px hsl(20 8% 15%); + 0 12px 40px hsl(var(--color-text) / 0.15), + 0 0 0 1px hsl(var(--color-text) / 0.08); transition: transform 0.5s cubic-bezier(0.645, 0.045, 0.355, 1), box-shadow 0.5s ease; max-width: 360px; @@ -75,8 +126,8 @@ const { data: content } = await usePageContent('home') .book-cover-3d:hover { transform: rotateY(-8deg) rotateX(3deg) scale(1.02); box-shadow: - 12px 16px 48px hsl(0 0% 0% / 0.6), - 0 0 0 1px hsl(12 76% 48% / 0.2); + 12px 16px 48px hsl(var(--color-text) / 0.2), + 0 0 0 1px hsl(var(--color-primary) / 0.2); } .book-cover-img { @@ -89,4 +140,41 @@ const { data: content } = await usePageContent('home') .heading-section { font-size: clamp(1.625rem, 4vw, 2.125rem); } + +.shadok-thinker { + position: absolute; + right: 2%; + bottom: 6%; + width: clamp(110px, 14vw, 200px); + opacity: 0.28; + pointer-events: none; + color: hsl(var(--color-accent)); + animation: shadok-float-thinker 10s ease-in-out infinite; +} + +@keyframes shadok-float-thinker { + 0%, 100% { transform: translateY(0); } + 50% { transform: translateY(-8px); } +} + +.shadok-menuisier { + position: absolute; + left: 2%; + top: 5%; + width: clamp(100px, 13vw, 190px); + opacity: 0.25; + pointer-events: none; + color: hsl(var(--color-primary)); + animation: shadok-float-menuisier 10s ease-in-out infinite; +} + +@keyframes shadok-float-menuisier { + 0%, 100% { transform: translateY(0); } + 50% { transform: translateY(-9px); } +} + +@media (max-width: 768px) { + .shadok-thinker { display: none; } + .shadok-menuisier { display: none; } +} diff --git a/app/components/home/BookSection.vue b/app/components/home/BookSection.vue index f4ca75a..5249837 100644 --- a/app/components/home/BookSection.vue +++ b/app/components/home/BookSection.vue @@ -4,7 +4,24 @@- ++ +diff --git a/app/components/home/CooperativeVision.vue b/app/components/home/CooperativeVision.vue index b29ccb9..c6aa436 100644 --- a/app/components/home/CooperativeVision.vue +++ b/app/components/home/CooperativeVision.vue @@ -1,5 +1,37 @@ -
+ + + + @@ -41,4 +73,24 @@ const { data: content } = await usePageContent('home') .heading-section { font-size: clamp(1.625rem, 4vw, 2.125rem); } + +.shadok-scale { + position: absolute; + left: 2%; + top: 8%; + width: clamp(120px, 16vw, 240px); + opacity: 0.3; + pointer-events: none; + color: hsl(var(--color-primary)); + animation: shadok-float-scale 9s ease-in-out infinite; +} + +@keyframes shadok-float-scale { + 0%, 100% { transform: translateY(0) rotate(0deg); } + 50% { transform: translateY(-10px) rotate(2deg); } +} + +@media (max-width: 768px) { + .shadok-scale { display: none; } +} diff --git a/app/components/home/GrateWizardTeaser.vue b/app/components/home/GrateWizardTeaser.vue index 069d4be..02c16d4 100644 --- a/app/components/home/GrateWizardTeaser.vue +++ b/app/components/home/GrateWizardTeaser.vue @@ -2,8 +2,20 @@ - -++ + +