feat(landing/changelog): glow rubis sur la dernière version, retire les pills sur les anciennes
All checks were successful
Build & Deploy Landing / build-and-deploy (push) Successful in 52s

Le contexte "Nouveauté" sur 11 cartes à la suite devenait du bruit visuel
(toutes les anciennes versions ont été des nouveautés à un moment, hein).
Le pill de type est maintenant réservé à la version la plus récente — sur
les autres on garde seulement la chip de version + la date.

Pour compenser et ancrer le regard sur le dernier état du produit, la
carte "latest" gagne un glow rubis multi-couches :
- Ring serré 4 px en couleur rubis-glow (contour soft)
- Drop shadow proche teintée rubis (profondeur)
- Bloom large diffus (halo ambiant)
- Animation "respiration" 5 s ease-in-out infini (variation subtile sur
  l'intensité du bloom)
- Désactivée si `prefers-reduced-motion: reduce` côté user.

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
This commit is contained in:
ordinarthur 2026-05-11 00:16:08 +02:00
parent 847e7a3fc5
commit c4910889de

View File

@ -126,12 +126,23 @@ const jsonLd = {
</div>
) : (
<ol class="space-y-12 lg:space-y-16 list-none p-0">
{rendered.map(({ data, Content }) => (
{rendered.map(({ data, Content }, index) => {
// Seule la carte la plus récente porte le pill type — pour les
// autres on retire le bruit visuel (le contexte de "Nouveauté"
// s'épuise quand la version a 2 mois). Le pill survivant est
// accentué par le glow autour de la carte (cf. <style> en bas).
const isLatest = index === 0;
return (
<li
id={data.version}
class="changelog-card scroll-mt-24 bg-white border border-line rounded-card shadow-soft p-7 sm:p-9 lg:p-10"
class:list={[
"changelog-card scroll-mt-24 bg-white border rounded-card p-7 sm:p-9 lg:p-10",
isLatest
? "changelog-card--latest border-rubis/25"
: "border-line shadow-soft",
]}
>
{/* Header : chip version + type + date */}
{/* Header : chip version + (type si latest) + date */}
<header class="flex items-center flex-wrap gap-3">
<a
href={`#${data.version}`}
@ -140,19 +151,20 @@ const jsonLd = {
>
v{data.version}
</a>
<span
class:list={[
"inline-flex items-center text-[11px] uppercase tracking-[0.08em] font-semibold px-2.5 py-1 rounded-full",
data.type === "feature" &&
"bg-rubis text-cream",
data.type === "improvement" &&
"bg-cream-2 text-ink-2 border border-line",
data.type === "fix" &&
"bg-white text-ink-3 border border-line",
]}
>
{typeLabel[data.type]}
</span>
{isLatest && (
<span
class:list={[
"inline-flex items-center text-[11px] uppercase tracking-[0.08em] font-semibold px-2.5 py-1 rounded-full",
data.type === "feature" && "bg-rubis text-cream",
data.type === "improvement" &&
"bg-cream-2 text-ink-2 border border-line",
data.type === "fix" &&
"bg-white text-ink-3 border border-line",
]}
>
{typeLabel[data.type]}
</span>
)}
<time
datetime={data.date.toISOString()}
class="text-[13px] text-ink-3 tabular-nums ml-auto"
@ -184,7 +196,8 @@ const jsonLd = {
<Content />
</div>
</li>
))}
);
})}
</ol>
)
}
@ -283,6 +296,43 @@ const jsonLd = {
color: var(--color-rubis);
}
/* Glow autour de la carte la plus récente — superpose 3 couches d'ombres
pour donner un effet "halo rubis chaud" sans agression visuelle :
1. Ring serré crème-rubis (4 px) qui dessine un contour soft
2. Drop shadow proche teintée rubis pour la profondeur
3. Bloom large diffus pour le glow ambiant
Le tout animé en respiration légère (5 s ease-in-out infini), désactivé
quand l'utilisateur préfère pas d'animation (prefers-reduced-motion). */
.changelog-card--latest {
position: relative;
box-shadow:
0 0 0 4px var(--color-rubis-glow),
0 20px 50px -12px rgba(159, 18, 57, 0.22),
0 0 90px -20px rgba(159, 18, 57, 0.35);
animation: changelog-glow-breath 5s ease-in-out infinite;
}
@keyframes changelog-glow-breath {
0%, 100% {
box-shadow:
0 0 0 4px var(--color-rubis-glow),
0 20px 50px -12px rgba(159, 18, 57, 0.22),
0 0 90px -20px rgba(159, 18, 57, 0.35);
}
50% {
box-shadow:
0 0 0 5px var(--color-rubis-glow),
0 24px 60px -10px rgba(159, 18, 57, 0.28),
0 0 120px -16px rgba(159, 18, 57, 0.45);
}
}
@media (prefers-reduced-motion: reduce) {
.changelog-card--latest {
animation: none;
}
}
/* Prose pour le body markdown des entries — typo cohérente avec la landing,
espacements rythmiques, code inline propre. Pas de @tailwindcss/typography
pour pas alourdir le bundle, custom suffit largement vu la simplicité. */