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>
|
||||
) : (
|
||||
<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é. */
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user