EHV/librodrome
18
0
Fork 1
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Shadoks visibles : opacités ×3, tailles augmentées, fonds moins noirs

Browse Source 
- Opacités Shadoks : 0.1 → 0.25-0.35 (enfin visibles)
- Tailles SVG augmentées (clamp min/max relevés de 20-40%)
- Fix pumper hors écran (right: -15% → 3%)
- Footer pattern : opacités internes ×3
- Fonds palettes dark éclaircis (bg 4% → 7%, surface 9% → 12%)

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Yvv
2026-02-23 03:45:58 +01:00
parent ac4aff4985
commit 326ae0ca77
13 changed files with 72 additions and 72 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
app/assets/css/main.css
View File

@@ -5,11 +5,11 @@
:root { :root {
--color-primary: 18 80% 45%; --color-primary: 18 80% 45%;
--color-accent: 32 85% 50%; --color-accent: 32 85% 50%;
--color-bg: 16 12% 4%; --color-bg: 20 10% 7%;
--color-surface: 16 12% 9%; --color-surface: 20 10% 12%;
--color-surface-light: 16 10% 14%; --color-surface-light: 20 8% 17%;
--color-text: 0 0% 100%; --color-text: 0 0% 100%;
--color-text-muted: 0 0% 60%; --color-text-muted: 0 0% 65%;
--header-height: 4rem; --header-height: 4rem;
--player-height: 0rem; --player-height: 0rem;

8
app/components/home/BookPresentation.vue
View File

@@ -121,10 +121,10 @@ const { data: content } = await usePageContent('home')
.shadok-thinker { .shadok-thinker {
position: absolute; position: absolute;
right: 3%; right: 2%;
bottom: 8%; bottom: 6%;
width: clamp(90px, 12vw, 170px); width: clamp(110px, 14vw, 200px);
opacity: 0.1; opacity: 0.28;
pointer-events: none; pointer-events: none;
color: hsl(var(--color-accent)); color: hsl(var(--color-accent));
animation: shadok-float-thinker 10s ease-in-out infinite; animation: shadok-float-thinker 10s ease-in-out infinite;

8
app/components/home/BookSection.vue
View File

@@ -114,10 +114,10 @@ const { data: content } = await usePageContent('home')
.shadok-pumper { .shadok-pumper {
position: absolute; position: absolute;
right: -15%; right: 3%;
bottom: 5%; bottom: 8%;
width: clamp(60px, 10vw, 120px); width: clamp(90px, 12vw, 180px);
opacity: 0.12; opacity: 0.28;
pointer-events: none; pointer-events: none;
color: hsl(var(--color-primary)); color: hsl(var(--color-primary));
animation: shadok-float 10s ease-in-out infinite; animation: shadok-float 10s ease-in-out infinite;

6
app/components/home/CooperativeVision.vue
View File

@@ -77,9 +77,9 @@ const { data: content } = await usePageContent('home')
.shadok-scale { .shadok-scale {
position: absolute; position: absolute;
left: 2%; left: 2%;
top: 10%; top: 8%;
width: clamp(100px, 14vw, 200px); width: clamp(120px, 16vw, 240px);
opacity: 0.1; opacity: 0.3;
pointer-events: none; pointer-events: none;
color: hsl(var(--color-primary)); color: hsl(var(--color-primary));
animation: shadok-float-scale 9s ease-in-out infinite; animation: shadok-float-scale 9s ease-in-out infinite;

4
app/components/home/GrateWizardTeaser.vue
View File

@@ -92,8 +92,8 @@ const { data: content } = await usePageContent('home')
position: absolute; position: absolute;
right: -2%; right: -2%;
top: -20%; top: -20%;
width: clamp(100px, 15vw, 180px); width: clamp(120px, 16vw, 220px);
opacity: 0.15; opacity: 0.35;
pointer-events: none; pointer-events: none;
color: hsl(var(--color-accent)); color: hsl(var(--color-accent));
animation: shadok-drift 12s ease-in-out infinite; animation: shadok-drift 12s ease-in-out infinite;

8
app/components/home/HeroSection.vue
View File

@@ -76,10 +76,10 @@ const { data: content } = await usePageContent('home')
.shadok-bird { .shadok-bird {
position: absolute; position: absolute;
right: 5%; right: 4%;
top: 15%; top: 12%;
width: clamp(80px, 12vw, 160px); width: clamp(110px, 15vw, 220px);
opacity: 0.12; opacity: 0.3;
pointer-events: none; pointer-events: none;
color: hsl(var(--color-primary)); color: hsl(var(--color-primary));
animation: shadok-float 8s ease-in-out infinite; animation: shadok-float 8s ease-in-out infinite;

10
app/components/home/SongsPreview.vue
View File

@@ -83,12 +83,12 @@ const featuredSongs = computed(() => bookData.getSongs().slice(0, 6))
.shadok-musician { .shadok-musician {
position: absolute; position: absolute;
right: 3%; right: 2%;
top: 5%; top: 4%;
width: clamp(90px, 12vw, 170px); width: clamp(110px, 15vw, 210px);
opacity: 0.1; opacity: 0.28;
pointer-events: none; pointer-events: none;
color: hsl(var(--color-primary)); color: hsl(var(--color-accent));
animation: shadok-float-musician 8s ease-in-out infinite; animation: shadok-float-musician 8s ease-in-out infinite;
} }

50
app/components/layout/TheFooter.vue
View File

@@ -3,40 +3,40 @@
<!-- Shadok pattern --> <!-- Shadok pattern -->
<svg class="footer-shadok-pattern" viewBox="0 0 400 80" fill="none" aria-hidden="true"> <svg class="footer-shadok-pattern" viewBox="0 0 400 80" fill="none" aria-hidden="true">
<g transform="translate(20,10)"> <g transform="translate(20,10)">
<ellipse cx="15" cy="25" rx="12" ry="14" fill="currentColor" opacity="0.08"/> <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.06"/> <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.06"/> <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.06"/> <line x1="20" y1="38" x2="22" y2="55" stroke="currentColor" stroke-width="1.5" opacity="0.15"/>
</g> </g>
<g transform="translate(80,15)"> <g transform="translate(80,15)">
<ellipse cx="15" cy="22" rx="10" ry="12" fill="currentColor" opacity="0.06"/> <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.05"/> <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.05"/> <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.05"/> <line x1="20" y1="33" x2="22" y2="48" stroke="currentColor" stroke-width="1.5" opacity="0.12"/>
</g> </g>
<g transform="translate(140,8)"> <g transform="translate(140,8)">
<ellipse cx="15" cy="25" rx="11" ry="13" fill="currentColor" opacity="0.07"/> <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.06"/> <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.06"/> <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.06"/> <line x1="20" y1="37" x2="23" y2="54" stroke="currentColor" stroke-width="1.5" opacity="0.14"/>
</g> </g>
<g transform="translate(210,18)"> <g transform="translate(210,18)">
<ellipse cx="15" cy="20" rx="10" ry="11" fill="currentColor" opacity="0.05"/> <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.04"/> <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.04"/> <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.04"/> <line x1="20" y1="30" x2="21" y2="44" stroke="currentColor" stroke-width="1.5" opacity="0.1"/>
</g> </g>
<g transform="translate(270,12)"> <g transform="translate(270,12)">
<ellipse cx="15" cy="24" rx="12" ry="14" fill="currentColor" opacity="0.07"/> <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.06"/> <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.06"/> <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.06"/> <line x1="20" y1="37" x2="23" y2="55" stroke="currentColor" stroke-width="1.5" opacity="0.14"/>
</g> </g>
<g transform="translate(340,16)"> <g transform="translate(340,16)">
<ellipse cx="15" cy="22" rx="10" ry="12" fill="currentColor" opacity="0.06"/> <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.05"/> <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.05"/> <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.05"/> <line x1="20" y1="33" x2="22" y2="48" stroke="currentColor" stroke-width="1.5" opacity="0.12"/>
</g> </g>
</svg> </svg>
<div class="container-content px-4 py-8 relative z-1"> <div class="container-content px-4 py-8 relative z-1">
@@ -78,7 +78,7 @@ const { data: site } = await useSiteContent()
left: 0; left: 0;
width: 100%; width: 100%;
height: auto; height: auto;
opacity: 0.6; opacity: 1;
pointer-events: none; pointer-events: none;
color: hsl(var(--color-primary)); color: hsl(var(--color-primary));
} }

6
app/pages/a-propos.vue
View File

@@ -53,9 +53,9 @@ const { data: page } = await useAsyncData('about', () =>
.shadok-philosopher { .shadok-philosopher {
position: absolute; position: absolute;
right: 3%; right: 3%;
bottom: 8%; bottom: 6%;
width: clamp(90px, 13vw, 180px); width: clamp(120px, 15vw, 220px);
opacity: 0.1; opacity: 0.3;
pointer-events: none; pointer-events: none;
color: hsl(var(--color-primary)); color: hsl(var(--color-primary));
animation: shadok-float-philosopher 11s ease-in-out infinite; animation: shadok-float-philosopher 11s ease-in-out infinite;

4
app/pages/ecouter/index.vue
View File

@@ -148,8 +148,8 @@ const filteredSongs = computed(() => {
position: absolute; position: absolute;
right: 2%; right: 2%;
top: 3%; top: 3%;
width: clamp(100px, 14vw, 190px); width: clamp(120px, 16vw, 230px);
opacity: 0.1; opacity: 0.3;
pointer-events: none; pointer-events: none;
color: hsl(var(--color-accent)); color: hsl(var(--color-accent));
animation: shadok-float-dj 8s ease-in-out infinite; animation: shadok-float-dj 8s ease-in-out infinite;

6
app/pages/gratewizard.vue
View File

@@ -140,9 +140,9 @@ code {
.shadok-alchemist { .shadok-alchemist {
position: absolute; position: absolute;
right: 2%; right: 2%;
top: 15%; top: 10%;
width: clamp(100px, 14vw, 190px); width: clamp(120px, 16vw, 230px);
opacity: 0.1; opacity: 0.3;
pointer-events: none; pointer-events: none;
color: hsl(var(--color-accent)); color: hsl(var(--color-accent));
animation: shadok-float-alchemist 10s ease-in-out infinite; animation: shadok-float-alchemist 10s ease-in-out infinite;

10
app/pages/lire/index.vue
View File

@@ -121,9 +121,9 @@ const { data: chapters } = await useAsyncData('book-toc', () =>
.shadok-reader { .shadok-reader {
position: absolute; position: absolute;
right: 2%; right: 2%;
top: 5%; top: 3%;
width: clamp(90px, 13vw, 180px); width: clamp(110px, 15vw, 220px);
opacity: 0.1; opacity: 0.3;
pointer-events: none; pointer-events: none;
color: hsl(var(--color-primary)); color: hsl(var(--color-primary));
animation: shadok-float-reader 9s ease-in-out infinite; animation: shadok-float-reader 9s ease-in-out infinite;
@@ -133,8 +133,8 @@ const { data: chapters } = await useAsyncData('book-toc', () =>
position: absolute; position: absolute;
left: 2%; left: 2%;
bottom: 5%; bottom: 5%;
width: clamp(80px, 11vw, 150px); width: clamp(100px, 13vw, 180px);
opacity: 0.1; opacity: 0.25;
pointer-events: none; pointer-events: none;
color: hsl(var(--color-accent)); color: hsl(var(--color-accent));
animation: shadok-float-stack 11s ease-in-out infinite; animation: shadok-float-stack 11s ease-in-out infinite;

16
app/stores/palette.ts
View File

@@ -20,11 +20,11 @@ const palettes: Record<PaletteName, PaletteColors> = {
automne: { automne: {
primary: '18 80% 45%', // cuivre profond primary: '18 80% 45%', // cuivre profond
accent: '32 85% 50%', // ambre doré accent: '32 85% 50%', // ambre doré
surface: '16 12% 9%', // écorce sombre surface: '20 10% 12%', // écorce
bg: '16 12% 4%', // terre noire bg: '20 10% 7%', // terre sombre
surfaceLight: '16 10% 14%', // bois fumé surfaceLight: '20 8% 17%', // bois fumé
text: '0 0% 100%', text: '0 0% 100%',
textMuted: '0 0% 60%', textMuted: '0 0% 65%',
isLight: false, isLight: false,
label: 'Automne', label: 'Automne',
icon: 'i-lucide-leaf', icon: 'i-lucide-leaf',
@@ -34,11 +34,11 @@ const palettes: Record<PaletteName, PaletteColors> = {
hiver: { hiver: {
primary: '215 55% 52%', // bleu nuit étoilé primary: '215 55% 52%', // bleu nuit étoilé
accent: '195 40% 65%', // givre argenté accent: '195 40% 65%', // givre argenté
surface: '220 15% 10%', // ciel de minuit surface: '222 14% 13%', // ciel de minuit
bg: '225 18% 5%', // nuit polaire bg: '225 16% 8%', // nuit polaire
surfaceLight: '220 12% 15%', // brume nocturne surfaceLight: '220 12% 18%', // brume nocturne
text: '0 0% 100%', text: '0 0% 100%',
textMuted: '210 10% 60%', textMuted: '210 10% 65%',
isLight: false, isLight: false,
label: 'Hiver', label: 'Hiver',
icon: 'i-lucide-snowflake', icon: 'i-lucide-snowflake',