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
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:
parent
847e7a3fc5
commit
c4910889de
@ -126,12 +126,23 @@ const jsonLd = {
|
|||||||
</div>
|
</div>
|
||||||
) : (
|
) : (
|
||||||
<ol class="space-y-12 lg:space-y-16 list-none p-0">
|
<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
|
<li
|
||||||
id={data.version}
|
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">
|
<header class="flex items-center flex-wrap gap-3">
|
||||||
<a
|
<a
|
||||||
href={`#${data.version}`}
|
href={`#${data.version}`}
|
||||||
@ -140,11 +151,11 @@ const jsonLd = {
|
|||||||
>
|
>
|
||||||
v{data.version}
|
v{data.version}
|
||||||
</a>
|
</a>
|
||||||
|
{isLatest && (
|
||||||
<span
|
<span
|
||||||
class:list={[
|
class:list={[
|
||||||
"inline-flex items-center text-[11px] uppercase tracking-[0.08em] font-semibold px-2.5 py-1 rounded-full",
|
"inline-flex items-center text-[11px] uppercase tracking-[0.08em] font-semibold px-2.5 py-1 rounded-full",
|
||||||
data.type === "feature" &&
|
data.type === "feature" && "bg-rubis text-cream",
|
||||||
"bg-rubis text-cream",
|
|
||||||
data.type === "improvement" &&
|
data.type === "improvement" &&
|
||||||
"bg-cream-2 text-ink-2 border border-line",
|
"bg-cream-2 text-ink-2 border border-line",
|
||||||
data.type === "fix" &&
|
data.type === "fix" &&
|
||||||
@ -153,6 +164,7 @@ const jsonLd = {
|
|||||||
>
|
>
|
||||||
{typeLabel[data.type]}
|
{typeLabel[data.type]}
|
||||||
</span>
|
</span>
|
||||||
|
)}
|
||||||
<time
|
<time
|
||||||
datetime={data.date.toISOString()}
|
datetime={data.date.toISOString()}
|
||||||
class="text-[13px] text-ink-3 tabular-nums ml-auto"
|
class="text-[13px] text-ink-3 tabular-nums ml-auto"
|
||||||
@ -184,7 +196,8 @@ const jsonLd = {
|
|||||||
<Content />
|
<Content />
|
||||||
</div>
|
</div>
|
||||||
</li>
|
</li>
|
||||||
))}
|
);
|
||||||
|
})}
|
||||||
</ol>
|
</ol>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
@ -283,6 +296,43 @@ const jsonLd = {
|
|||||||
color: var(--color-rubis);
|
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,
|
/* Prose pour le body markdown des entries — typo cohérente avec la landing,
|
||||||
espacements rythmiques, code inline propre. Pas de @tailwindcss/typography
|
espacements rythmiques, code inline propre. Pas de @tailwindcss/typography
|
||||||
pour pas alourdir le bundle, custom suffit largement vu la simplicité. */
|
pour pas alourdir le bundle, custom suffit largement vu la simplicité. */
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user