diff --git a/app/app.config.ts b/app/app.config.ts index 1a71a36..411a1bd 100644 --- a/app/app.config.ts +++ b/app/app.config.ts @@ -8,8 +8,8 @@ export default defineAppConfig({ height: '4rem', nav: [ { label: 'Autonomie', to: '/autonomie' }, - { label: 'Modèle éco', to: '/lire' }, - { label: 'En musique', to: '/ecouter' }, + { label: 'Modèle éco', to: '/modele-eco' }, + { label: 'En musique', to: '/en-musique' }, { label: 'Évènement', to: '/evenement' }, { label: 'À propos', to: '/a-propos' }, ], diff --git a/app/app.vue b/app/app.vue index 207714b..17b182a 100644 --- a/app/app.vue +++ b/app/app.vue @@ -22,7 +22,7 @@ useHead({ return title ? `${title} — Le Librodrome` : 'Le librodrome' }, meta: [ - { name: 'description', content: 'Une économie du don — enfin concevable. Un livre et 9 chansons, lecture guidée et écoute libre.' }, + { name: 'description', content: 'Une économie du don — enfin concevable. Un livre et des chansons, lecture guidée et écoute libre.' }, ], }) diff --git a/app/assets/css/main.css b/app/assets/css/main.css index a678c75..9f99248 100644 --- a/app/assets/css/main.css +++ b/app/assets/css/main.css @@ -97,24 +97,24 @@ a { color: hsl(var(--color-text)) !important; } -/* white with opacity → dark text with same opacity */ -.palette-light .text-white\/20 { color: hsl(var(--color-text) / 0.2) !important; } -.palette-light .text-white\/30 { color: hsl(var(--color-text) / 0.3) !important; } -.palette-light .text-white\/40 { color: hsl(var(--color-text) / 0.4) !important; } -.palette-light .text-white\/45 { color: hsl(var(--color-text) / 0.45) !important; } -.palette-light .text-white\/50 { color: hsl(var(--color-text) / 0.5) !important; } -.palette-light .text-white\/60 { color: hsl(var(--color-text) / 0.6) !important; } -.palette-light .text-white\/70 { color: hsl(var(--color-text) / 0.7) !important; } -.palette-light .text-white\/80 { color: hsl(var(--color-text) / 0.8) !important; } -.palette-light .text-white\/85 { color: hsl(var(--color-text) / 0.85) !important; } +/* white with opacity → dark text with boosted opacity for punch */ +.palette-light .text-white\/20 { color: hsl(var(--color-text) / 0.28) !important; } +.palette-light .text-white\/30 { color: hsl(var(--color-text) / 0.38) !important; } +.palette-light .text-white\/40 { color: hsl(var(--color-text) / 0.48) !important; } +.palette-light .text-white\/45 { color: hsl(var(--color-text) / 0.52) !important; } +.palette-light .text-white\/50 { color: hsl(var(--color-text) / 0.58) !important; } +.palette-light .text-white\/60 { color: hsl(var(--color-text) / 0.68) !important; } +.palette-light .text-white\/70 { color: hsl(var(--color-text) / 0.78) !important; } +.palette-light .text-white\/80 { color: hsl(var(--color-text) / 0.88) !important; } +.palette-light .text-white\/85 { color: hsl(var(--color-text) / 0.92) !important; } -/* white backgrounds → surface tones */ -.palette-light .bg-white\/5 { background-color: hsl(var(--color-text) / 0.04) !important; } -.palette-light .bg-white\/8 { background-color: hsl(var(--color-text) / 0.06) !important; } -.palette-light .bg-white\/10 { background-color: hsl(var(--color-text) / 0.07) !important; } +/* white backgrounds → surface tones with more contrast */ +.palette-light .bg-white\/5 { background-color: hsl(var(--color-primary) / 0.05) !important; } +.palette-light .bg-white\/8 { background-color: hsl(var(--color-primary) / 0.07) !important; } +.palette-light .bg-white\/10 { background-color: hsl(var(--color-primary) / 0.09) !important; } -/* borders */ -.palette-light .border-white\/8 { border-color: hsl(var(--color-text) / 0.1) !important; } +/* borders with primary tint */ +.palette-light .border-white\/8 { border-color: hsl(var(--color-primary) / 0.15) !important; } /* hover overrides */ .palette-light .hover\:text-white:hover, @@ -123,42 +123,43 @@ a { color: hsl(var(--color-text)) !important; } .palette-light .hover\:text-white\/60:hover { - color: hsl(var(--color-text) / 0.6) !important; + color: hsl(var(--color-text) / 0.7) !important; } .palette-light .hover\:bg-white\/5:hover { - background-color: hsl(var(--color-text) / 0.04) !important; + background-color: hsl(var(--color-primary) / 0.08) !important; } .palette-light .hover\:bg-white\/10:hover { - background-color: hsl(var(--color-text) / 0.07) !important; + background-color: hsl(var(--color-primary) / 0.12) !important; } /* group-hover overrides */ .palette-light .group:hover .group-hover\:text-primary\/60 { - color: hsl(var(--color-primary) / 0.6) !important; + color: hsl(var(--color-primary) / 0.7) !important; } /* placeholder overrides */ .palette-light .placeholder\:text-white\/30::placeholder { - color: hsl(var(--color-text) / 0.3) !important; + color: hsl(var(--color-text) / 0.35) !important; } /* Prose/content in light mode */ .palette-light .prose { color: hsl(var(--color-text)); } .palette-light .prose :where(h1,h2,h3,h4,h5,h6) { color: hsl(var(--color-text)); } -/* text-gradient in light mode — needs transparent fill override */ +/* text-gradient in light mode — vivid gradient */ .palette-light .text-gradient { - background-image: linear-gradient(to right, hsl(var(--color-primary)), hsl(var(--color-accent))); + background-image: linear-gradient(135deg, hsl(var(--color-primary)), hsl(var(--color-accent))); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent !important; } -/* card surfaces */ +/* card surfaces — subtle shadow for depth */ .palette-light .card-surface { background: hsl(var(--color-surface)) !important; - border-color: hsl(var(--color-text) / 0.1) !important; + border-color: hsl(var(--color-primary) / 0.12) !important; + box-shadow: 0 1px 3px hsl(var(--color-text) / 0.06); } /* btn-primary text stays white on colored bg */ @@ -166,17 +167,36 @@ a { color: white !important; } -/* input fields */ +/* input fields — cleaner contrast */ .palette-light input, .palette-light textarea { color: hsl(var(--color-text)); - background-color: hsl(var(--color-surface)); - border-color: hsl(var(--color-text) / 0.12); + background-color: white; + border-color: hsl(var(--color-text) / 0.18); +} + +.palette-light input:focus, +.palette-light textarea:focus { + border-color: hsl(var(--color-primary) / 0.5); + box-shadow: 0 0 0 3px hsl(var(--color-primary) / 0.1); } /* Ecouter view toggle buttons */ .palette-light .bg-white\/10 { - background-color: hsl(var(--color-text) / 0.1) !important; + background-color: hsl(var(--color-primary) / 0.1) !important; +} + +/* Light mode scrollbar — tinted with primary */ +.palette-light ::-webkit-scrollbar-thumb { + background: hsl(var(--color-primary) / 0.2); +} +.palette-light ::-webkit-scrollbar-thumb:hover { + background: hsl(var(--color-primary) / 0.35); +} + +/* Light mode selection — vivid */ +.palette-light ::selection { + background-color: hsl(var(--color-accent) / 0.25); } /* Page transitions */ diff --git a/app/components/admin/AdminMarkdownEditor.vue b/app/components/admin/AdminMarkdownEditor.vue index 3cbf9a3..1b6c00a 100644 --- a/app/components/admin/AdminMarkdownEditor.vue +++ b/app/components/admin/AdminMarkdownEditor.vue @@ -1,34 +1,57 @@