padreug/chateaudufaune.ariege.io
1
0
Fork 0
Code Issues Pull requests 1 Projects Releases Packages Wiki Activity Actions

feat(vision): restyle Our Values as an exclusive-open accordion

Browse source 
Replace the 5 numbered value cards with a native <details name=values>
accordion — click a value to expand its description; opening one closes
the others. No JS, keyboard-accessible, degrades gracefully.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01Avi6sNfBVonnK33knbkFDD
This commit is contained in:
Padreug 2026-08-16 17:39:54 +02:00
commit aef2df2a21
1 changed files with 21 additions and 16 deletions
Download patch file Download diff file Expand all files Collapse all files

37
src/views/VisionValuesView.vue
View file

@ -48,24 +48,29 @@ const team = ['patrick', 'coco', 'charlie'] as const
</p>
</PageSection>
<!-- Philosophy -->
<PageSection>
<div class="max-w-3xl">
<h2 class="font-display text-2xl uppercase tracking-wider md:text-3xl">
{{ t('vision.philosophyTitle') }}
</h2>
<p class="mt-3 text-foreground/80">{{ t('vision.philosophySubtitle') }}</p>
</div>
<div class="mt-8 grid gap-6 sm:grid-cols-2 lg:grid-cols-5">
<Card v-for="(p, i) in philosophy" :key="p" class="bg-background p-5">
<div class="font-display text-2xl text-accent">{{ i + 1 }}</div>
<h3 class="mt-2 font-display text-lg uppercase tracking-wider">
{{ t(`vision.philosophy.${p}Title`) }}
</h3>
<p class="mt-2 text-sm leading-relaxed text-foreground/85">
<!-- Values: accordion (exclusive-open) -->
<PageSection width="narrow">
<h2 class="font-display text-2xl uppercase tracking-wider md:text-3xl">
{{ t('vision.philosophyTitle') }}
</h2>
<div class="mt-8 divide-y divide-border overflow-hidden rounded-lg border border-border">
<details v-for="(p, i) in philosophy" :key="p" name="values" class="group">
<summary
class="flex cursor-pointer list-none items-center justify-between gap-4 px-5 py-4 font-display text-base uppercase tracking-wider transition-colors hover:bg-muted/40 [&::-webkit-details-marker]:hidden"
>
<span>
<span class="text-accent">{{ i + 1 }}.</span> {{ t(`vision.philosophy.${p}Title`) }}
</span>
<span
class="shrink-0 text-xl leading-none text-accent transition-transform duration-300 group-open:rotate-45"
>
+
</span>
</summary>
<p class="px-5 pb-5 text-sm leading-relaxed text-foreground/85">
{{ t(`vision.philosophy.${p}Body`) }}
</p>
</Card>
</details>
</div>
</PageSection>