feat: add back-pill class, card hover lift, flash keyframe; remove duplicate story-escape

This commit is contained in:
2026-06-20 12:20:14 +02:00
parent 5bc8d008df
commit 3edc18fe28
+34 -20
View File
@@ -210,6 +210,15 @@ body::after {
color: var(--color-ink-2);
}
@keyframes card-highlight {
0% { background-color: color-mix(in srgb, var(--color-accent) 12%, transparent); }
100% { background-color: transparent; }
}
.entry-card.is-highlighted {
animation: card-highlight 0.7s ease-out forwards;
}
/* ── Single entry ────────────────────────────────────────────────────────────── */
.entry-hero {
@@ -855,6 +864,12 @@ body::after {
background: var(--color-surface-raised);
}
.trip-card:hover,
.entry-card:hover,
.story-card:hover {
background: var(--color-surface-raised);
}
.trip-card-title {
font-family: var(--font-display);
font-size: var(--text-xl);
@@ -955,25 +970,6 @@ body::after {
margin-bottom: var(--space-2);
}
/* ── Story page escape link ──────────────────────────────────────────────────── */
.story-escape {
position: fixed;
top: var(--space-5);
left: var(--space-5);
z-index: 200;
font-size: var(--text-sm);
font-weight: 500;
color: var(--color-ink);
text-decoration: none;
background: rgba(0,0,0,0.6);
padding: var(--space-2) var(--space-4);
border-radius: var(--radius-full);
backdrop-filter: blur(4px);
}
.story-escape:hover { color: var(--color-accent); }
.trip-feed { min-width: 0; }
.trip-sidebar-section {}
@@ -1214,6 +1210,24 @@ body::after {
}
@media (max-width: 640px) { .story-nav-title { display: none; } }
/* ── Back pill (shared navigation pill component) ───────────────────── */
.back-pill {
display: inline-flex;
align-items: center;
font-family: var(--font-ui);
font-size: var(--text-sm);
font-weight: 500;
color: var(--color-ink);
text-decoration: none;
background: var(--color-canvas);
border: 1px solid var(--color-border);
border-radius: var(--radius-full);
padding: 0.4rem 0.9rem;
transition: border-color 0.15s, color 0.15s;
cursor: pointer;
}
.back-pill:hover { border-color: var(--color-accent); color: var(--color-accent); }
/* ── Back to top pill ─────────────────────────────────────── */
.story-totop {
position: fixed;
@@ -1560,7 +1574,7 @@ body::after {
overflow: hidden;
background: var(--color-canvas);
border: 1px solid var(--color-border);
transition: box-shadow 0.2s;
transition: box-shadow 0.2s, background 0.15s;
}
.story-card:hover { box-shadow: var(--shadow-md); }
.story-card__photo { aspect-ratio: 16/9; overflow: hidden; }