feat(story): sticky nav title + floating back-to-top pill
Nav title: absolutely centered in the site-header, fades in via IntersectionObserver when .story-hero__content scrolls above the fold. Hidden on mobile (< 640px) where there is no room. Back-to-top: fixed bottom-right pill, appears after 80% of the hero viewport is scrolled past, smooth-scrolls to top on click. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01Vgmzx8VTTTmCskSpQtsLTr
This commit is contained in:
@@ -1194,6 +1194,52 @@ body::after {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
/* ── Story nav title (desktop: fades into header center) ─────── */
|
||||
.story-nav-title {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
transform: translateX(-50%) translateY(-50%);
|
||||
font-family: var(--font-ui);
|
||||
font-size: var(--text-sm);
|
||||
font-weight: 500;
|
||||
color: var(--color-ink);
|
||||
white-space: nowrap;
|
||||
max-width: 40%;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
opacity: 0;
|
||||
transition: opacity 0.35s ease;
|
||||
pointer-events: none;
|
||||
}
|
||||
.story-nav-title.is-visible { opacity: 1; }
|
||||
@media (max-width: 640px) { .story-nav-title { display: none; } }
|
||||
|
||||
/* ── Back to top pill ─────────────────────────────────────── */
|
||||
.story-totop {
|
||||
position: fixed;
|
||||
bottom: 1.5rem;
|
||||
right: 1.5rem;
|
||||
font-family: var(--font-ui);
|
||||
font-size: var(--text-xs);
|
||||
font-weight: 500;
|
||||
letter-spacing: 0.04em;
|
||||
color: var(--color-ink);
|
||||
background: var(--color-canvas);
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: 9999px;
|
||||
padding: 0.4rem 0.9rem;
|
||||
cursor: pointer;
|
||||
opacity: 0;
|
||||
transform: translateY(6px);
|
||||
transition: opacity 0.3s ease, transform 0.3s ease, background 0.15s;
|
||||
pointer-events: none;
|
||||
z-index: 90;
|
||||
box-shadow: 0 2px 8px rgba(0,0,0,0.08);
|
||||
}
|
||||
.story-totop.is-visible { opacity: 1; transform: translateY(0); pointer-events: auto; }
|
||||
.story-totop:hover { background: var(--color-paper); }
|
||||
|
||||
/* ── ChapterBreak ─────────────────────────────────────────── */
|
||||
.chapter-break {
|
||||
position: relative;
|
||||
|
||||
Reference in New Issue
Block a user