Fix typos blanches admin lightmode + hero audience
All checks were successful
ci/woodpecker/push/woodpecker Pipeline was successful
All checks were successful
ci/woodpecker/push/woodpecker Pipeline was successful
- Remplace color:white → hsl(var(--color-text)) dans tous les composants admin (AdminFieldText, AdminFieldTextarea, AdminFormSection, AdminMarkdownEditor, AdminMediaBrowser, AdminSidebar, book/index, book/[slug], login, messages, site, songs) - Conserve color:white uniquement sur fond primary (AdminSaveButton, login-btn) - Hero home : ajout bloc audience/addressees (clé distincte pour éviter conflit YAML) - home.yml : réordonne axes (citoyenne en premier — effet triangle) - TypewriterText : affiche le second bloc avec séparateur fin Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
@@ -48,6 +48,7 @@ Les fichiers YAML sont dans `site/pages/`, organisés en sous-dossiers par secti
|
||||
- Persisté en `localStorage('palette')` pour les visites suivantes
|
||||
- CSS : variables `--color-primary`, `--color-accent`, etc. + classe `.palette-light`/`.palette-dark`
|
||||
- Overrides light mode dans `main.css` (`.palette-light .text-white` → couleur adaptive)
|
||||
- Admin : tous les `color: white` dans les composants admin sont remplacés par `hsl(var(--color-text))` sauf les boutons sur fond `hsl(var(--color-primary))` (`AdminSaveButton`, `.login-btn`)
|
||||
|
||||
## Shadoks
|
||||
|
||||
|
||||
@@ -48,6 +48,10 @@ site/pages/
|
||||
|
||||
Administration via `/admin/pages` (éditeur YAML, authentifié).
|
||||
|
||||
Le hero de la home (`home.yml`) supporte deux blocs dépliables :
|
||||
- `approach` + `axes` : approche par dimension (numérique → code source, etc.)
|
||||
- `audience` + `addressees` : à qui s'adresse le projet (collectifs, entreprises, collectivités)
|
||||
|
||||
## Développement
|
||||
|
||||
```bash
|
||||
|
||||
@@ -44,7 +44,7 @@ const id = computed(() => `field-${props.label.toLowerCase().replace(/\s+/g, '-'
|
||||
border-radius: 0.5rem;
|
||||
border: 1px solid hsl(var(--color-surface-light));
|
||||
background: hsl(var(--color-bg));
|
||||
color: white;
|
||||
color: hsl(var(--color-text));
|
||||
font-size: 0.875rem;
|
||||
transition: border-color 0.2s;
|
||||
}
|
||||
|
||||
@@ -45,7 +45,7 @@ const id = computed(() => `field-${props.label.toLowerCase().replace(/\s+/g, '-'
|
||||
border-radius: 0.5rem;
|
||||
border: 1px solid hsl(var(--color-surface-light));
|
||||
background: hsl(var(--color-bg));
|
||||
color: white;
|
||||
color: hsl(var(--color-text));
|
||||
font-size: 0.875rem;
|
||||
resize: vertical;
|
||||
min-height: 5rem;
|
||||
|
||||
@@ -32,7 +32,7 @@ defineProps<{
|
||||
padding: 0.75rem 1rem;
|
||||
font-weight: 600;
|
||||
font-size: 0.9rem;
|
||||
color: white;
|
||||
color: hsl(var(--color-text));
|
||||
cursor: pointer;
|
||||
background: hsl(var(--color-bg));
|
||||
user-select: none;
|
||||
|
||||
@@ -129,7 +129,7 @@ const renderedHtml = computed(() => {
|
||||
}
|
||||
|
||||
.md-tab--active {
|
||||
color: white;
|
||||
color: hsl(var(--color-text));
|
||||
background: hsl(var(--color-surface));
|
||||
}
|
||||
|
||||
@@ -139,7 +139,7 @@ const renderedHtml = computed(() => {
|
||||
transition: color 0.2s;
|
||||
}
|
||||
.md-fullscreen:hover,
|
||||
.md-fullscreen--active { color: white; }
|
||||
.md-fullscreen--active { color: hsl(var(--color-text)); }
|
||||
|
||||
.md-body {
|
||||
display: flex;
|
||||
@@ -171,7 +171,7 @@ const renderedHtml = computed(() => {
|
||||
padding: 1rem;
|
||||
border: none;
|
||||
background: hsl(var(--color-bg));
|
||||
color: white;
|
||||
color: hsl(var(--color-text));
|
||||
font-family: var(--font-mono, monospace);
|
||||
font-size: 0.85rem;
|
||||
line-height: 1.7;
|
||||
|
||||
@@ -169,7 +169,7 @@ function formatSize(bytes: number): string {
|
||||
|
||||
.media-name {
|
||||
font-size: 0.72rem;
|
||||
color: white;
|
||||
color: hsl(var(--color-text));
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
|
||||
@@ -139,7 +139,7 @@ async function logout() {
|
||||
|
||||
.sidebar-link:hover {
|
||||
background: hsl(var(--color-surface));
|
||||
color: white;
|
||||
color: hsl(var(--color-text));
|
||||
}
|
||||
|
||||
.sidebar-link--active {
|
||||
|
||||
@@ -65,6 +65,8 @@ const hero = computed(() => {
|
||||
citations: Array.isArray(raw.citations) ? raw.citations : [],
|
||||
approach: raw.approach || '',
|
||||
axes: Array.isArray(raw.axes) ? raw.axes : [],
|
||||
audience: raw.audience || '',
|
||||
addressees: Array.isArray(raw.addressees) ? raw.addressees : [],
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
@@ -34,6 +34,17 @@
|
||||
</div>
|
||||
</dl>
|
||||
</div>
|
||||
|
||||
<!-- Audience + Addressees -->
|
||||
<div v-if="hero.audience" class="hero-approach hero-audience">
|
||||
<p class="hero-approach-text">{{ hero.audience }}</p>
|
||||
<dl v-if="hero.addressees?.length" class="hero-axes">
|
||||
<div v-for="(item, i) in hero.addressees" :key="i" class="hero-axis">
|
||||
<dt>{{ item.label }}</dt>
|
||||
<dd>{{ item.value }}</dd>
|
||||
</div>
|
||||
</dl>
|
||||
</div>
|
||||
</div>
|
||||
</details>
|
||||
</div>
|
||||
@@ -50,6 +61,8 @@ interface HeroData {
|
||||
citations: string[]
|
||||
approach: string
|
||||
axes: HeroAxis[]
|
||||
audience: string
|
||||
addressees: HeroAxis[]
|
||||
}
|
||||
|
||||
defineProps<{
|
||||
@@ -213,6 +226,12 @@ defineProps<{
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.hero-audience {
|
||||
margin-top: 1rem;
|
||||
padding-top: 0.75rem;
|
||||
border-top: 1px solid hsl(var(--color-text) / 0.07);
|
||||
}
|
||||
|
||||
.hero-approach-text {
|
||||
font-family: var(--font-sans);
|
||||
font-size: 0.82rem;
|
||||
|
||||
@@ -219,7 +219,7 @@ async function save() {
|
||||
border-radius: 0.375rem;
|
||||
border: 1px solid hsl(var(--color-surface-light));
|
||||
background: hsl(var(--color-bg));
|
||||
color: white;
|
||||
color: hsl(var(--color-text));
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
|
||||
@@ -271,7 +271,7 @@ async function save() {
|
||||
}
|
||||
|
||||
.song-tag-label:hover {
|
||||
color: white;
|
||||
color: hsl(var(--color-text));
|
||||
}
|
||||
|
||||
.song-star {
|
||||
|
||||
@@ -328,7 +328,7 @@ async function removeChapter(slug: string) {
|
||||
|
||||
.chapter-title {
|
||||
display: block;
|
||||
color: white;
|
||||
color: hsl(var(--color-text));
|
||||
font-weight: 500;
|
||||
text-decoration: none;
|
||||
}
|
||||
@@ -390,7 +390,7 @@ async function removeChapter(slug: string) {
|
||||
border-radius: 0.375rem;
|
||||
border: 1px solid hsl(var(--color-surface-light));
|
||||
background: hsl(var(--color-bg));
|
||||
color: white;
|
||||
color: hsl(var(--color-text));
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
|
||||
|
||||
@@ -107,7 +107,7 @@ async function login() {
|
||||
border-radius: 0.5rem;
|
||||
border: 1px solid hsl(var(--color-surface-light));
|
||||
background: hsl(var(--color-bg));
|
||||
color: white;
|
||||
color: hsl(var(--color-text));
|
||||
font-size: 0.9rem;
|
||||
margin-bottom: 1.25rem;
|
||||
}
|
||||
|
||||
@@ -164,7 +164,7 @@ function formatDate(iso: string) {
|
||||
border-radius: 0.375rem;
|
||||
border: 1px solid hsl(var(--color-surface-light));
|
||||
background: hsl(var(--color-bg));
|
||||
color: white;
|
||||
color: hsl(var(--color-text));
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
|
||||
@@ -189,7 +189,7 @@ function formatDate(iso: string) {
|
||||
|
||||
.action-btn:hover {
|
||||
background: hsl(var(--color-surface));
|
||||
color: white;
|
||||
color: hsl(var(--color-text));
|
||||
}
|
||||
|
||||
.action-btn--save {
|
||||
|
||||
@@ -105,7 +105,7 @@ async function save() {
|
||||
border-radius: 0.375rem;
|
||||
border: 1px solid hsl(var(--color-surface-light));
|
||||
background: hsl(var(--color-bg));
|
||||
color: white;
|
||||
color: hsl(var(--color-text));
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
|
||||
|
||||
@@ -202,7 +202,7 @@ async function save() {
|
||||
border-radius: 0.375rem;
|
||||
border: 1px solid hsl(var(--color-surface-light));
|
||||
background: hsl(var(--color-bg));
|
||||
color: white;
|
||||
color: hsl(var(--color-text));
|
||||
font-size: 0.8rem;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
@@ -12,12 +12,20 @@ hero:
|
||||
- Ce sont les 3 axes de l'espace dans lequel nous naviguons.
|
||||
approach: Dans chaque dimension, nous adressons ce qui est le plus en amont
|
||||
axes:
|
||||
- label: citoyenne
|
||||
value: la décision
|
||||
- label: numérique
|
||||
value: le code source
|
||||
- label: économie
|
||||
value: la création monétaire
|
||||
- label: citoyenne
|
||||
value: la décision
|
||||
audience: "Dans cet espace, nous nous adressons :"
|
||||
addressees:
|
||||
- label: aux collectifs et associations
|
||||
value: de toutes sortes
|
||||
- label: aux entreprises
|
||||
value: qui veulent innover, expérimenter
|
||||
- label: aux collectivités
|
||||
value: qui veulent émanciper leur population
|
||||
book:
|
||||
kicker: Modèle économique
|
||||
title: Une économie du don — enfin concevable
|
||||
|
||||
Reference in New Issue
Block a user