wehub-resource-sync
070959e133
landing-page-staging / Deploy landing page to staging (push) Has been skipped
landing-page-ci / Validate landing page (push) Failing after 4s
visual-baseline / Capture visual baselines (push) Has been cancelled
bake-plugin-previews / Bake plugin previews (push) Has been cancelled
899 B
899 B
F2 · Sticky-scroll stack
Sticky left pane, scrolling right pane that cycles through related screenshots. Use when: feature has multiple sub-states worth showing in sequence. Don't confuse with: F4 Step sequence (which is linearly numbered, not synced).
<section class="sticky-stack">
<div class="pane-sticky"><h3>…</h3><p>…</p></div>
<div class="pane-scroll">
<figure>1</figure><figure>2</figure><figure>3</figure>
</div>
</section>
.sticky-stack { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2xl); }
/* `calc(--banner-height + --space-xl)` so the sticky pane docks below the
nav with breathing room. Falls back to --space-xl alone when no sticky
nav is on the page (slop-test gate 68). */
.pane-sticky { position: sticky; top: calc(var(--banner-height, 0px) + var(--space-xl)); align-self: start; z-index: var(--z-sticky); }