quirks

2026-05-09 23:44:17 +01:00
parent fc3962ee44
commit 4519cfe804
10 changed files with 641 additions and 4 deletions
--- a/assets/styles/hidden-details.css
+++ b/assets/styles/hidden-details.css
@@ -0,0 +1,142 @@
+.hidden-detail-root {
+    position: relative;
+    z-index: 20;
+}
+
+.hidden-whisper {
+    display: inline-block;
+    color: var(--muted);
+    cursor: help;
+    text-decoration: underline dotted color-mix(in oklab, var(--muted) 55%, transparent);
+    text-underline-offset: 0.22em;
+}
+
+.hidden-whisper::selection,
+.hidden-greeting::selection,
+.hidden-footer-note::selection {
+    background: color-mix(in oklab, var(--accent) 32%, transparent);
+}
+
+.hidden-footer-note {
+    max-width: 58ch;
+    margin: 0.45rem auto 0;
+    color: var(--muted);
+    font-size: 0.88rem;
+    text-align: center;
+    opacity: 0.82;
+}
+
+.hidden-toast {
+    position: fixed;
+    right: 1rem;
+    bottom: 1rem;
+    max-width: min(23rem, calc(100vw - 2rem));
+    padding: 0.8rem 0.95rem;
+    border: 1px solid var(--border);
+    border-radius: 8px;
+    background: color-mix(in oklab, var(--surface) 92%, var(--bg) 8%);
+    color: var(--fg);
+    box-shadow: 0 16px 40px color-mix(in oklab, #000 18%, transparent);
+    font-size: 0.92rem;
+    line-height: 1.45;
+    opacity: 0;
+    transform: translateY(0.7rem);
+    pointer-events: none;
+    transition: opacity 220ms ease, transform 220ms ease;
+}
+
+.hidden-toast.is-visible {
+    opacity: 1;
+    transform: translateY(0);
+}
+
+.hidden-corner-object {
+    position: fixed;
+    left: 0.65rem;
+    bottom: 0.65rem;
+    width: 2rem;
+    height: 2rem;
+    display: grid;
+    place-items: center;
+    border: 1px solid color-mix(in oklab, var(--border) 76%, transparent);
+    border-radius: 8px;
+    background: color-mix(in oklab, var(--surface) 84%, transparent);
+    color: var(--muted);
+    font: 1rem/1 monospace;
+    cursor: pointer;
+    opacity: 0.44;
+    transition: opacity 160ms ease, transform 160ms ease, color 160ms ease;
+    z-index: 21;
+}
+
+.hidden-corner-object:hover,
+.hidden-corner-object:focus-visible {
+    opacity: 1;
+    color: var(--fg);
+    transform: translateY(-2px);
+}
+
+.hidden-greeting {
+    margin: 0.35rem 0 0;
+    color: var(--muted);
+    font-size: 0.9rem;
+}
+
+.hidden-drift-note {
+    position: fixed;
+    top: 20%;
+    left: 50%;
+    max-width: min(28rem, calc(100vw - 2rem));
+    padding: 1rem 1.1rem;
+    border: 1px solid var(--border);
+    border-radius: 8px;
+    background: var(--surface);
+    color: var(--fg);
+    box-shadow: 0 18px 52px color-mix(in oklab, #000 18%, transparent);
+    transform: translate(-50%, -0.5rem);
+    z-index: 40;
+}
+
+.hidden-drift-note pre {
+    margin: 0.75rem 0 0;
+    white-space: pre;
+    overflow: auto;
+    color: var(--muted);
+}
+
+.hidden-drift-note button {
+    margin-top: 0.8rem;
+}
+
+.hidden-secret-link {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    overflow: hidden;
+}
+
+body.hidden-late-night {
+    --hidden-night-glow: color-mix(in oklab, var(--accent) 9%, transparent);
+}
+
+body.hidden-late-night::after {
+    content: "";
+    position: fixed;
+    inset: auto 0 0;
+    height: 18vh;
+    pointer-events: none;
+    background: linear-gradient(transparent, var(--hidden-night-glow));
+    opacity: 0.32;
+}
+
+@media (max-width: 760px) {
+    .hidden-toast {
+        right: 0.75rem;
+        bottom: 0.75rem;
+    }
+
+    .hidden-corner-object {
+        width: 1.75rem;
+        height: 1.75rem;
+    }
+}