v3: the dump button keeps hovering once you point at it — a flat 1px jump was the whole of the header button's hover, so it now lifts and then rocks, tilting a couple of degrees either way over a shallow float. The three motions ride on three different properties — translate for the lift, rotate for the tilt, transform for the float — since that's what lets them compose rather than the last one declared winning outright; the tilt and the float run on periods that don't divide each other (2.6s against 3.4s) so the pair never lines up the same way twice and never settles into a metronome, and the pivot sits on the bottom edge so it reads as a head on a neck rather than as a button spinning about its middle. Arriving and leaving is what the machinery is for: the amplitude is a registered custom property the keyframes multiply through, so pointing at the button eases the rocking up from nothing while the lift is still settling, and leaving eases it back down under an animation that is merely paused — no switch from still to full throw, and no snap square when the cursor goes. Geocities and brutalist re-declare the whole transition shorthand on every button and neither list mentions translate, which outweighed the header's own rule and dropped the lift onto the frame it started on, so that rule takes a :not(:disabled) to win the weight back. nyt stays flat ink and brutalist goes on pressing into the page, both opting out by name; reduced motion keeps the lift and drops the rocking.
All checks were successful
Build and Publish Docker Image / build-and-push (push) Successful in 40s

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
This commit is contained in:
khannurien
2026-09-20 08:47:22 +00:00
parent e780a3c96f
commit 7b12dcbe40
4 changed files with 109 additions and 0 deletions

View File

@@ -364,6 +364,13 @@
transform: translate(2px, 2px);
}
/* The header's dump button floats in the base theme; here it presses into the
page instead, so neither the lift nor the idle drift applies. */
[data-style="brutalist"] .app-header-nav .btn-primary:hover:not(:disabled) {
translate: none;
animation: none;
}
/* ── btn-border ──────────────────────────────────────────────────── */
[data-style="brutalist"] .btn-border {
box-shadow: 2px 2px 0 var(--color-border);