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:
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user