Drop turtle, honor ?template= URL param, add warp easter egg

- Removed the cosmos turtle (CSS rules + auto-load probe + JS hook).
  Reduced-motion turtle branch removed too.
- ?template=editorial|swiss|cosmos URL param now wins over the value
  in data/links.json (and the cached localStorage fallback). Wired in
  both the pre-paint boot script and main() so deep links work
  without flashing the wrong template.
- New hidden easter egg: type the letters w-a-r-p anywhere on the
  page (no input focused) and the page reloads on the next template
  in the cycle editorial -> swiss -> cosmos -> editorial. The URL is
  updated with the new ?template= param so the override survives
  refresh and is shareable. A small "↯ <name>" toast pops up after
  the reload via sessionStorage handoff, fades after ~2.5s, respects
  prefers-reduced-motion.
- README documents both the URL param and the warp keyword.
This commit is contained in:
Joel Brock
2026-05-16 09:35:45 -07:00
parent c16ee37096
commit ff0abee349
5 changed files with 102 additions and 63 deletions

View File

@@ -696,3 +696,33 @@ body::before {
}
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
/* warp toast — surfaces the active template after the easter egg fires */
.warp-toast {
position: fixed;
bottom: clamp(1.25rem, 3vw, 2.25rem);
left: 50%;
z-index: 1000;
display: inline-flex;
align-items: center;
gap: 0.6rem;
padding: 0.6rem 1.1rem;
background: var(--ink);
color: var(--paper);
font: 600 var(--fs-sm)/1 var(--mono);
text-transform: uppercase;
letter-spacing: 0.18em;
border-radius: 999px;
box-shadow: 0 12px 30px -16px rgba(0, 0, 0, 0.5);
opacity: 0;
transform: translate(-50%, 18px);
animation: warp-in 360ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
pointer-events: none;
}
.warp-toast__arrow { color: var(--accent); font-size: 1.1em; }
.warp-toast--out { animation: warp-out 600ms ease forwards; }
@keyframes warp-in { to { opacity: 1; transform: translate(-50%, 0); } }
@keyframes warp-out { to { opacity: 0; transform: translate(-50%, 18px); } }
@media (prefers-reduced-motion: reduce) {
.warp-toast { animation: none; opacity: 1; transform: translate(-50%, 0); }
}