dtoro
2e7158a5bb
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>
64 lines
1.6 KiB
CSS
64 lines
1.6 KiB
CSS
@tailwind base;
|
|
@tailwind components;
|
|
@tailwind utilities;
|
|
|
|
@layer base {
|
|
:root {
|
|
--color-bg: #1a1424;
|
|
--color-surface: #221c2f;
|
|
--color-surface-2: #2a2339;
|
|
--color-surface-offset: #352c46;
|
|
--color-border: rgba(240, 193, 136, 0.10);
|
|
--color-text: #f0e6d2;
|
|
--color-text-muted: #a8997d;
|
|
--color-text-faint: #5e5448;
|
|
--color-primary: #e8965a;
|
|
--color-pick: #8aaa5a;
|
|
--color-reject: #d06464;
|
|
--color-star: #f0c188;
|
|
}
|
|
|
|
body {
|
|
@apply bg-bg text-text;
|
|
font-family: 'Geist', system-ui, sans-serif;
|
|
}
|
|
}
|
|
|
|
/* Custom scrollbar styles */
|
|
::-webkit-scrollbar {
|
|
width: 8px;
|
|
height: 8px;
|
|
}
|
|
|
|
::-webkit-scrollbar-track {
|
|
@apply bg-surface;
|
|
}
|
|
|
|
::-webkit-scrollbar-thumb {
|
|
@apply bg-surface-offset rounded;
|
|
}
|
|
|
|
::-webkit-scrollbar-thumb:hover {
|
|
@apply bg-text-faint;
|
|
}
|
|
|
|
/* Mule walk cycle — 3x2 sprite sheet (6 frames). Each keyframe holds
|
|
for one step thanks to `steps(1)` so the background snaps frame-to-frame
|
|
instead of interpolating. */
|
|
@keyframes mule-walk {
|
|
0% { background-position: 0% 0%; }
|
|
16.66% { background-position: 50% 0%; }
|
|
33.33% { background-position: 100% 0%; }
|
|
50% { background-position: 0% 100%; }
|
|
66.66% { background-position: 50% 100%; }
|
|
83.33% { background-position: 100% 100%; }
|
|
100% { background-position: 0% 0%; }
|
|
}
|
|
|
|
/* Parallax desert scroll — moves the desert layer right→left by exactly
|
|
one tile width so the loop is seamless. The tile width is fixed in
|
|
CSS (see TopBar.tsx) so the keyframe end value matches. */
|
|
@keyframes desert-scroll {
|
|
from { background-position-x: 0px, 0px; }
|
|
to { background-position-x: -200px, 0px; }
|
|
} |