feat: desert dusk theme with animated mule and pixel-art scenery

Replaces the cool-grey neutral theme with a warm desert dusk palette
pulled from a new pixel-art TopBar: a tiled, right-to-left scrolling
desert under a sky gradient, a 6-frame walking mule sprite where the
logo used to sit, and an ASCII block-character title on a black plate.
The active heap card now uses a cactus/dune scene as its stack
backdrop, and the "Built with hubris" mark moves into the TopBar's
bottom-right corner (AppFooter component removed).

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
2026-04-09 18:49:13 +02:00
parent 938c5dce68
commit 2e7158a5bb
9 changed files with 133 additions and 83 deletions

View File

@@ -4,6 +4,7 @@ import { ShoppingBasket } from 'lucide-react'
import { useActiveHeapMembers } from '../../hooks/useActiveHeapMembersQuery'
import { useFilterStore } from '../../store/filterStore'
import { photos as photosApi, heaps as heapsApi } from '../../services/api'
import cardBg from '../../assets/card.png'
/** How many thumbnails fan out across the stack at once. The newest is
* drawn last (top), older ones fan back-left and back-right. */
@@ -75,10 +76,19 @@ export function ActiveHeapCard() {
{/* Stack row. Re-keyed on activeHeap.id so switching heaps tears
* the animation context down cleanly instead of trying to
* crossfade unrelated photos. */}
* crossfade unrelated photos. The desert scene sits behind the
* fanned thumbnails — `cover` + `bottom` keeps the dunes anchored
* so the cacti frame the photos rather than the (transparent) sky. */}
<div
key={activeHeap.id}
className="relative h-24 overflow-hidden px-3 pb-3"
className="relative h-24 overflow-hidden rounded-b-lg px-3 pb-3"
style={{
backgroundImage: `url(${cardBg})`,
backgroundSize: 'cover',
backgroundPosition: 'center bottom',
backgroundRepeat: 'no-repeat',
imageRendering: 'pixelated',
}}
>
{visible.length === 0 ? (
<div className="flex h-full items-center justify-center px-2 text-center text-[11px] text-text-faint">