ea3577a45e
- Bulk-load recent price points per item and render a sparkline in the items list (new LoadRecentPriceHistory query avoids N+1). - Add retro.css visual layer and refreshed login/items/layout styling. - Swap the logo from webp to avif. - Pin htmx/Chart.js/Tailwind/templ versions in the Makefile with vendor / tools / update-deps targets; README documents the dependency-bump flow and the hardened systemd deploy. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
119 lines
4.2 KiB
CSS
119 lines
4.2 KiB
CSS
/* retro.css — optional "retro-arcade identity" layer.
|
|
*
|
|
* Entirely additive. To revert, delete this file and remove its <link> tag
|
|
* from templates/layout.templ. Nothing else depends on it.
|
|
*
|
|
* What this adds:
|
|
* 1. Two independently-animated aurora blobs that drift across the
|
|
* viewport on different paths — the real "shifting light" feel,
|
|
* not a synchronized slide.
|
|
* 2. Dot-grid overlay over the whole viewport.
|
|
* 3. Heavier display headings with a soft accent glow.
|
|
*
|
|
* Both blobs live on html pseudo-elements at z-index -2 / -1, sitting
|
|
* behind everything else so card glassiness still reads on top.
|
|
*/
|
|
|
|
body {
|
|
/* Let the html-level aurora show through. app.css set a solid blue here;
|
|
dropping it here unlocks the gradient. Removing retro.css restores the
|
|
original solid background automatically. */
|
|
background: transparent;
|
|
}
|
|
|
|
html {
|
|
background-color: var(--bg);
|
|
/* Static dot-grid baked into the root background so the two pseudo-element
|
|
slots stay free for the animated blobs. */
|
|
background-image: radial-gradient(
|
|
circle,
|
|
rgba(255, 255, 255, 0.045) 1px,
|
|
transparent 1px
|
|
);
|
|
background-size: 26px 26px;
|
|
background-attachment: fixed;
|
|
}
|
|
|
|
/* Two aurora blobs animated with seven waypoints each (no `alternate`, so
|
|
the second half doesn't mirror the first) on incommensurate periods —
|
|
the two cycles drift in and out of phase, so the eye never locks onto a
|
|
repeating pattern even though each blob is technically on a loop.
|
|
Opacity also wobbles so the lights "breathe" instead of just sliding. */
|
|
|
|
html::before {
|
|
content: "";
|
|
position: fixed;
|
|
inset: 0;
|
|
z-index: -2;
|
|
pointer-events: none;
|
|
background: radial-gradient(
|
|
closest-side,
|
|
rgba(0, 164, 228, 0.60),
|
|
rgba(0, 164, 228, 0.0) 70%
|
|
);
|
|
width: 70vmax;
|
|
height: 70vmax;
|
|
border-radius: 50%;
|
|
filter: blur(60px);
|
|
/* Centered base; keyframes drive all motion from here. */
|
|
top: 50%; left: 50%;
|
|
margin-top: -35vmax; margin-left: -35vmax;
|
|
animation: v-retro-drift-a 41s cubic-bezier(.6,.1,.4,.9) infinite;
|
|
will-change: transform, opacity;
|
|
}
|
|
|
|
html::after {
|
|
content: "";
|
|
position: fixed;
|
|
inset: 0;
|
|
z-index: -2;
|
|
pointer-events: none;
|
|
background: radial-gradient(
|
|
closest-side,
|
|
rgba(245, 196, 0, 0.50),
|
|
rgba(245, 196, 0, 0.0) 70%
|
|
);
|
|
width: 55vmax;
|
|
height: 55vmax;
|
|
border-radius: 50%;
|
|
filter: blur(70px);
|
|
top: 50%; left: 50%;
|
|
margin-top: -27.5vmax; margin-left: -27.5vmax;
|
|
animation: v-retro-drift-b 29s cubic-bezier(.5,.2,.3,.8) infinite;
|
|
will-change: transform, opacity;
|
|
}
|
|
|
|
@keyframes v-retro-drift-a {
|
|
0% { transform: translate3d(-30vw, -20vh, 0) scale(1.00); opacity: 0.85; }
|
|
14% { transform: translate3d( 5vw, -28vh, 0) scale(1.18); opacity: 1.00; }
|
|
29% { transform: translate3d( 32vw, -10vh, 0) scale(0.92); opacity: 0.75; }
|
|
43% { transform: translate3d( 18vw, 22vh, 0) scale(1.10); opacity: 0.95; }
|
|
58% { transform: translate3d(-15vw, 30vh, 0) scale(1.05); opacity: 0.80; }
|
|
72% { transform: translate3d(-38vw, 8vh, 0) scale(0.95); opacity: 1.00; }
|
|
86% { transform: translate3d(-20vw, -12vh, 0) scale(1.12); opacity: 0.90; }
|
|
100% { transform: translate3d(-30vw, -20vh, 0) scale(1.00); opacity: 0.85; }
|
|
}
|
|
|
|
@keyframes v-retro-drift-b {
|
|
0% { transform: translate3d( 28vw, -25vh, 0) scale(1.00); opacity: 0.70; }
|
|
17% { transform: translate3d( 0vw, -10vh, 0) scale(1.20); opacity: 0.95; }
|
|
33% { transform: translate3d(-30vw, 8vh, 0) scale(0.90); opacity: 0.80; }
|
|
48% { transform: translate3d(-12vw, 28vh, 0) scale(1.10); opacity: 1.00; }
|
|
64% { transform: translate3d( 22vw, 18vh, 0) scale(0.95); opacity: 0.75; }
|
|
80% { transform: translate3d( 36vw, -2vh, 0) scale(1.15); opacity: 0.90; }
|
|
100% { transform: translate3d( 28vw, -25vh, 0) scale(1.00); opacity: 0.70; }
|
|
}
|
|
|
|
/* Display headings: heavier, slightly tighter, with an accent glow that ties
|
|
into the card border gradient. Class-free selectors so existing Tailwind
|
|
utilities (text-3xl etc.) stack on top untouched. */
|
|
h1, h2 {
|
|
font-weight: 800;
|
|
letter-spacing: -0.02em;
|
|
text-shadow: 0 2px 14px rgba(0, 164, 228, 0.30);
|
|
}
|
|
|
|
@media (prefers-reduced-motion: reduce) {
|
|
html::before, html::after { animation: none; }
|
|
}
|