Compare commits
1 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
|
|
0f1ded2269 |
@@ -136,12 +136,40 @@
|
||||
|
||||
<!-- ── Hero carousel ──────────────────────────────────────────────────────────── -->
|
||||
{#if heroBook}
|
||||
{@const stackBook1 = heroBooks[(heroIndex + 1) % heroBooks.length]}
|
||||
{@const stackBook2 = heroBooks[(heroIndex + 2) % heroBooks.length]}
|
||||
<section class="mb-6">
|
||||
<div class="relative">
|
||||
<!-- Card — swipe to navigate -->
|
||||
<!-- Stack layer 2 (furthest back) — only shown on sm+ when there are 3+ books -->
|
||||
{#if heroBooks.length >= 3}
|
||||
<div class="hidden sm:block absolute inset-0 rounded-xl overflow-hidden pointer-events-none origin-bottom
|
||||
translate-y-[-6px] translate-x-[10px] scale-[0.94] opacity-40 z-0">
|
||||
{#if stackBook2.book.cover}
|
||||
<img src={stackBook2.book.cover} alt="" aria-hidden="true"
|
||||
class="w-full h-full object-cover" loading="lazy" />
|
||||
{:else}
|
||||
<div class="w-full h-full bg-(--color-surface-2)"></div>
|
||||
{/if}
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<!-- Stack layer 1 (one behind front) — only shown on sm+ when there are 2+ books -->
|
||||
{#if heroBooks.length >= 2}
|
||||
<div class="hidden sm:block absolute inset-0 rounded-xl overflow-hidden pointer-events-none origin-bottom
|
||||
translate-y-[-3px] translate-x-[5px] scale-[0.97] opacity-60 z-[1]">
|
||||
{#if stackBook1.book.cover}
|
||||
<img src={stackBook1.book.cover} alt="" aria-hidden="true"
|
||||
class="w-full h-full object-cover" loading="lazy" />
|
||||
{:else}
|
||||
<div class="w-full h-full bg-(--color-surface-2)"></div>
|
||||
{/if}
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<!-- Front card — swipe to navigate -->
|
||||
<!-- svelte-ignore a11y_no_static_element_interactions -->
|
||||
<div
|
||||
class="group relative flex gap-0 rounded-xl overflow-hidden bg-(--color-surface-2) border border-(--color-border) hover:border-(--color-brand)/50 transition-all"
|
||||
class="group relative flex gap-0 rounded-xl overflow-hidden bg-(--color-surface-2) border border-(--color-border) hover:border-(--color-brand)/50 transition-all z-[2]"
|
||||
ontouchstart={onSwipeStart}
|
||||
ontouchend={onSwipeEnd}
|
||||
>
|
||||
|
||||
Reference in New Issue
Block a user