Compare commits

...

1 Commits

Author SHA1 Message Date
root
0f1ded2269 feat: stacked card effect on home hero carousel (desktop sm+)
All checks were successful
Release / Test backend (push) Successful in 47s
Release / Check ui (push) Successful in 1m54s
Release / Docker (push) Successful in 7m15s
Release / Gitea Release (push) Successful in 27s
2026-04-13 19:56:51 +05:00

View File

@@ -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}
>