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:
@@ -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); }
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user