feat: redesign upload experience and visual branding

* feat: add animated flower step indicator

* feat: add custom pixel cursor

* feat: update branding, cursor, and artwork cards

* feat: add paper texture background

* style: update description card background

* feat: redesign upload moodboard collage layout

* style: update upload colors and add sliding mode toggle

* fix: add static favicon and apple touch icons
This commit is contained in:
Chaewon Lee
2026-06-13 01:20:54 +09:00
committed by GitHub
parent e7c690ac13
commit dda6ca972d
18 changed files with 549 additions and 109 deletions

View File

@@ -3,7 +3,13 @@
// the chosen image (cover) when filled. Layout (size / grid placement) is
// supplied by the parent via `class` and `style` so the same tile works in
// both the moodboard and the SNS feed.
let { label = null, class: klass = '', style = '', file = $bindable(null) } = $props();
let {
label = null,
showLabel = true,
class: klass = '',
style = '',
file = $bindable(null)
} = $props();
let preview = $state(null);
@@ -44,14 +50,14 @@
{#if preview}
<img src={preview} alt={label ?? ''} class="h-full w-full object-cover" />
<div class="absolute inset-0 bg-gradient-to-t from-black/45 to-transparent"></div>
{#if label}
<div class="absolute inset-0 bg-linear-to-t from-ink/45 to-transparent"></div>
{#if label && showLabel}
<span class="absolute bottom-3 left-4 text-sm tracking-[0.15em] text-surface uppercase"
>{label}</span
>
{/if}
<span
class="absolute top-3 right-3 rounded-full bg-black/40 px-2.5 py-1 text-xs text-surface opacity-0 backdrop-blur-sm transition-opacity group-hover:opacity-100"
class="absolute top-3 right-3 rounded-full bg-ink/40 px-2.5 py-1 text-xs text-surface opacity-0 backdrop-blur-sm transition-opacity group-hover:opacity-100"
>
Change
</span>
@@ -63,7 +69,7 @@
class="flex size-10 items-center justify-center rounded-full border border-current text-xl leading-none"
aria-hidden="true">+</span
>
{#if label}
{#if label && showLabel}
<span class="text-sm tracking-[0.15em] uppercase">{label}</span>
{/if}
</div>