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

Fix light mode nav invisible, logo § calligraphié, typo ronde fine

Browse Source 
- 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>
This commit is contained in:
Yvv
2026-02-23 04:02:10 +01:00
parent 326ae0ca77
commit d412975a4c
6 changed files with 147 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -90,71 +90,93 @@ a {
color-scheme: light; color-scheme: light;
} }
/* Force all white text → adaptive text color in light mode.
Using !important to override scoped component styles and UnoCSS utilities. */
.palette-light, .palette-light,
.palette-light .text-white { .palette-light .text-white {
color: hsl(var(--color-text)); color: hsl(var(--color-text)) !important;
} }
/* white with opacity → dark text with same opacity */ /* white with opacity → dark text with same opacity */
.palette-light .text-white\/20 { color: hsl(var(--color-text) / 0.2); } .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); } .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); } .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); } .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); } .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); } .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); } .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); } .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); } .palette-light .text-white\/85 { color: hsl(var(--color-text) / 0.85) !important; }
/* white backgrounds → surface tones */ /* white backgrounds → surface tones */
.palette-light .bg-white\/5 { background-color: hsl(var(--color-text) / 0.04); } .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); } .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); } .palette-light .bg-white\/10 { background-color: hsl(var(--color-text) / 0.07) !important; }
/* borders */ /* borders */
.palette-light .border-white\/8 { border-color: hsl(var(--color-text) / 0.1); } .palette-light .border-white\/8 { border-color: hsl(var(--color-text) / 0.1) !important; }
/* hover overrides */ /* hover overrides */
.palette-light .hover\:text-white:hover, .palette-light .hover\:text-white:hover,
.palette-light .hover\:text-white\/70:hover, .palette-light .hover\:text-white\/70:hover,
.palette-light .hover\:text-white\/80:hover { .palette-light .hover\:text-white\/80:hover {
color: hsl(var(--color-text)); color: hsl(var(--color-text)) !important;
} }
.palette-light .hover\:text-white\/60:hover { .palette-light .hover\:text-white\/60:hover {
color: hsl(var(--color-text) / 0.6); color: hsl(var(--color-text) / 0.6) !important;
} }
.palette-light .hover\:bg-white\/5:hover { .palette-light .hover\:bg-white\/5:hover {
background-color: hsl(var(--color-text) / 0.04); background-color: hsl(var(--color-text) / 0.04) !important;
} }
.palette-light .hover\:bg-white\/10:hover { .palette-light .hover\:bg-white\/10:hover {
background-color: hsl(var(--color-text) / 0.07); background-color: hsl(var(--color-text) / 0.07) !important;
}
/* group-hover overrides */
.palette-light .group:hover .group-hover\:text-primary\/60 {
color: hsl(var(--color-primary) / 0.6) !important;
} }
/* placeholder overrides */ /* placeholder overrides */
.palette-light .placeholder\:text-white\/30::placeholder { .palette-light .placeholder\:text-white\/30::placeholder {
color: hsl(var(--color-text) / 0.3); color: hsl(var(--color-text) / 0.3) !important;
} }
/* Prose/content in light mode */ /* Prose/content in light mode */
.palette-light .prose { color: hsl(var(--color-text)); } .palette-light .prose { color: hsl(var(--color-text)); }
.palette-light .prose :where(h1,h2,h3,h4,h5,h6) { color: hsl(var(--color-text)); } .palette-light .prose :where(h1,h2,h3,h4,h5,h6) { color: hsl(var(--color-text)); }
/* Active states */ /* text-gradient in light mode — needs transparent fill override */
.palette-light .text-white\! { color: hsl(var(--color-text)) !important; }
.palette-light .active-class .text-white\! { color: hsl(var(--color-text)) !important; }
/* text-gradient in light mode */
.palette-light .text-gradient { .palette-light .text-gradient {
background-image: linear-gradient(to right, hsl(var(--color-primary)), hsl(var(--color-accent))); background-image: linear-gradient(to right, hsl(var(--color-primary)), hsl(var(--color-accent)));
-webkit-background-clip: text; -webkit-background-clip: text;
background-clip: text; background-clip: text;
-webkit-text-fill-color: transparent; -webkit-text-fill-color: transparent;
color: transparent !important;
} }
/* card surfaces */ /* card surfaces */
.palette-light .card-surface { .palette-light .card-surface {
background: hsl(var(--color-surface)); background: hsl(var(--color-surface)) !important;
border-color: hsl(var(--color-text) / 0.1); border-color: hsl(var(--color-text) / 0.1) !important;
}
/* btn-primary text stays white on colored bg */
.palette-light .btn-primary {
color: white !important;
}
/* input fields */
.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);
}
/* Ecouter view toggle buttons */
.palette-light .bg-white\/10 {
background-color: hsl(var(--color-text) / 0.1) !important;
} }
/* Page transitions */ /* Page transitions */

4
app/components/layout/NavMobile.vue
View File

@@ -11,7 +11,7 @@
<Transition name="slide-menu"> <Transition name="slide-menu">
<nav <nav
v-if="open" v-if="open"
class="fixed inset-y-0 right-0 z-50 w-72 bg-surface-600 border-l border-white/8 p-6 shadow-2xl" class="fixed inset-y-0 right-0 z-50 w-72 bg-[hsl(var(--color-surface))] border-l border-[hsl(var(--color-text)/0.1)] p-6 shadow-2xl"
aria-label="Menu mobile" aria-label="Menu mobile"
> >
<div class="flex items-center justify-between mb-8"> <div class="flex items-center justify-between mb-8">
@@ -29,7 +29,7 @@
<li v-for="item in nav" :key="item.to"> <li v-for="item in nav" :key="item.to">
<NuxtLink <NuxtLink
:to="item.to" :to="item.to"
class="flex items-center gap-3 rounded-lg px-4 py-3 text-base font-medium transition-colors hover:bg-white/5" class="flex items-center gap-3 rounded-lg px-4 py-3 text-base font-medium text-[hsl(var(--color-text)/0.7)] transition-colors hover:bg-[hsl(var(--color-text)/0.06)] hover:text-[hsl(var(--color-text))]"
active-class="bg-primary/10 text-primary" active-class="bg-primary/10 text-primary"
@click="emit('update:open', false)" @click="emit('update:open', false)"
> >

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

@@ -1,5 +1,5 @@
<template> <template>
<footer class="footer-wrap border-t border-white/8 bg-surface-600"> <footer class="footer-wrap border-t border-[hsl(var(--color-text)/0.1)] bg-[hsl(var(--color-surface))]">
<!-- 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)">
@@ -42,7 +42,7 @@
<div class="container-content px-4 py-8 relative z-1"> <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"> <div class="flex flex-col items-center gap-4 md:flex-row md:justify-between">
<!-- Credits --> <!-- Credits -->
<p class="text-sm text-white/40"> <p class="text-sm text-[hsl(var(--color-text)/0.4)]">
{{ site?.footer.credits }} {{ site?.footer.credits }}
</p> </p>
@@ -52,7 +52,7 @@
v-for="link in site?.footer.links" v-for="link in site?.footer.links"
:key="link.to" :key="link.to"
:to="link.to" :to="link.to"
class="text-sm text-white/40 transition-colors hover:text-white/70" class="text-sm text-[hsl(var(--color-text)/0.4)] transition-colors hover:text-[hsl(var(--color-text)/0.7)]"
> >
{{ link.label }} {{ link.label }}
</NuxtLink> </NuxtLink>

44
app/components/layout/TheHeader.vue
View File

@@ -1,10 +1,17 @@
<template> <template>
<header class="sticky top-0 z-40 border-b border-white/8 bg-surface-bg/80 backdrop-blur-xl"> <header class="sticky top-0 z-40 border-b border-[hsl(var(--color-text)/0.08)] bg-[hsl(var(--color-bg)/0.85)] backdrop-blur-xl">
<div class="container-content flex h-[var(--header-height)] items-center justify-between px-4"> <div class="container-content flex h-[var(--header-height)] items-center justify-between px-4">
<!-- Logo --> <!-- Logo -->
<NuxtLink to="/" class="flex items-center gap-2 text-lg tracking-tight"> <NuxtLink to="/" class="logo-link flex items-center gap-2.5">
<div class="i-lucide-book-open h-6 w-6 text-primary" /> <svg class="logo-section" viewBox="0 0 64 80" fill="none" aria-hidden="true">
<span class="font-calligraphy font-bold text-gradient text-xl italic">{{ site?.identity.name }}</span> <path d="M38 8 C28 6 18 10 18 20 C18 28 26 32 34 34 C42 36 48 40 48 48 C48 52 46 55 42 57 L44 40 C44 36 40 32 34 30 C28 28 22 24 22 18 C22 14 24 11 28 10Z" fill="currentColor" opacity="0.9"/>
<path d="M26 72 C36 74 46 70 46 60 C46 52 38 48 30 46 C22 44 16 40 16 32 C16 28 18 25 22 23 L20 40 C20 44 24 48 30 50 C36 52 42 56 42 62 C42 66 40 69 36 70Z" fill="currentColor" opacity="0.9"/>
<path d="M20 16 C20 8 28 4 36 6 C42 8 46 14 44 20" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" fill="none" opacity="0.7"/>
<path d="M44 64 C44 72 36 76 28 74 C22 72 18 66 20 60" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" fill="none" opacity="0.7"/>
<path d="M36 4 Q42 2 46 6" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" fill="none" opacity="0.5"/>
<path d="M28 76 Q22 78 18 74" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" fill="none" opacity="0.5"/>
</svg>
<span class="logo-text">{{ site?.identity.name }}</span>
</NuxtLink> </NuxtLink>
<!-- Desktop navigation --> <!-- Desktop navigation -->
@@ -14,7 +21,7 @@
:key="item.to" :key="item.to"
:to="item.to" :to="item.to"
class="btn-ghost text-sm" class="btn-ghost text-sm"
active-class="text-white! bg-white/5" active-class="!text-[hsl(var(--color-text))] bg-[hsl(var(--color-text)/0.06)]"
> >
{{ item.label }} {{ item.label }}
</NuxtLink> </NuxtLink>
@@ -40,3 +47,30 @@
const { data: site } = await useSiteContent() const { data: site } = await useSiteContent()
const isMobileMenuOpen = ref(false) const isMobileMenuOpen = ref(false)
</script> </script>
<style scoped>
.logo-link {
transition: opacity 0.2s;
}
.logo-link:hover {
opacity: 0.8;
}
.logo-section {
width: 1.6rem;
height: 2rem;
color: hsl(var(--color-primary));
flex-shrink: 0;
}
.logo-text {
font-family: var(--font-display);
font-weight: 300;
font-size: 1.25rem;
letter-spacing: 0.04em;
background-image: linear-gradient(to right, hsl(var(--color-primary)), hsl(var(--color-accent)));
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
}
</style>

53
public/images/logo-section.svg Normal file
View File

@@ -0,0 +1,53 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 80" fill="none">
<!-- Calligraphic § (section sign) - elegant, flowing strokes -->
<path
d="M38 8
C28 6 18 10 18 20
C18 28 26 32 34 34
C42 36 48 40 48 48
C48 52 46 55 42 57
L44 40
C44 36 40 32 34 30
C28 28 22 24 22 18
C22 14 24 11 28 10
Z"
fill="currentColor" opacity="0.85"
/>
<path
d="M26 72
C36 74 46 70 46 60
C46 52 38 48 30 46
C22 44 16 40 16 32
C16 28 18 25 22 23
L20 40
C20 44 24 48 30 50
C36 52 42 56 42 62
C42 66 40 69 36 70
Z"
fill="currentColor" opacity="0.85"
/>
<!-- Upper curve -->
<path
d="M20 16
C20 8 28 4 36 6
C42 8 46 14 44 20"
stroke="currentColor" stroke-width="2.5" stroke-linecap="round" fill="none" opacity="0.7"
/>
<!-- Lower curve -->
<path
d="M44 64
C44 72 36 76 28 74
C22 72 18 66 20 60"
stroke="currentColor" stroke-width="2.5" stroke-linecap="round" fill="none" opacity="0.7"
/>
<!-- Calligraphic flourish - top -->
<path
d="M36 4 Q42 2 46 6"
stroke="currentColor" stroke-width="1.5" stroke-linecap="round" fill="none" opacity="0.5"
/>
<!-- Calligraphic flourish - bottom -->
<path
d="M28 76 Q22 78 18 74"
stroke="currentColor" stroke-width="1.5" stroke-linecap="round" fill="none" opacity="0.5"
/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.4 KiB

4
uno.config.ts
View File

@@ -75,10 +75,10 @@ export default defineConfig({
shortcuts: { shortcuts: {
'btn-primary': 'inline-flex items-center justify-center px-6 py-3 rounded-lg bg-primary text-white font-display font-semibold tracking-wide border-none transition-all duration-200 hover:bg-primary-600 hover:scale-105 active:scale-95', 'btn-primary': 'inline-flex items-center justify-center px-6 py-3 rounded-lg bg-primary text-white font-display font-semibold tracking-wide border-none transition-all duration-200 hover:bg-primary-600 hover:scale-105 active:scale-95',
'btn-accent': 'inline-flex items-center justify-center px-6 py-3 rounded-lg bg-accent text-surface-bg font-display font-semibold tracking-wide border-none transition-all duration-200 hover:bg-accent-600 hover:scale-105 active:scale-95', 'btn-accent': 'inline-flex items-center justify-center px-6 py-3 rounded-lg bg-accent text-surface-bg font-display font-semibold tracking-wide border-none transition-all duration-200 hover:bg-accent-600 hover:scale-105 active:scale-95',
'btn-ghost': 'inline-flex items-center justify-center px-4 py-2 rounded-lg border-none text-white/70 font-sans transition-all duration-200 hover:bg-white/10 hover:text-white', 'btn-ghost': 'inline-flex items-center justify-center px-4 py-2 rounded-lg border-none text-[hsl(var(--color-text)/0.7)] font-sans transition-all duration-200 hover:bg-[hsl(var(--color-text)/0.1)] hover:text-[hsl(var(--color-text))]',
'card-surface': 'rounded-xl bg-surface border border-white/8 p-6 transition-all duration-300 hover:border-primary/30 hover:shadow-lg hover:shadow-primary/5', 'card-surface': 'rounded-xl bg-surface border border-white/8 p-6 transition-all duration-300 hover:border-primary/30 hover:shadow-lg hover:shadow-primary/5',
'text-gradient': 'bg-gradient-to-r from-primary-300 to-accent bg-clip-text text-transparent', 'text-gradient': 'bg-gradient-to-r from-primary-300 to-accent bg-clip-text text-transparent',
'text-muted': 'text-white/60', 'text-muted': 'text-[hsl(var(--color-text)/0.6)]',
'section-padding': 'px-4 py-16 md:px-8 lg:px-16 lg:py-24', 'section-padding': 'px-4 py-16 md:px-8 lg:px-16 lg:py-24',
'container-content': 'mx-auto max-w-7xl w-full', 'container-content': 'mx-auto max-w-7xl w-full',
'heading-kicker': 'inline-block mb-2 font-mono text-sm tracking-widest uppercase', 'heading-kicker': 'inline-block mb-2 font-mono text-sm tracking-widest uppercase',