From 4ba484b9cf8df2e903286ef538124f0cf00a81f7 Mon Sep 17 00:00:00 2001 From: Fuwn Date: Tue, 19 May 2026 01:17:32 +0000 Subject: style(motion): introduce --duration-base for panel-class transitions Adds 0.24s between --duration-fast (0.15s) and --duration-slow (0.4s) for animations that live in the touch-UI floor: panels, sheets, drawers, modals. 150ms reads as crisp on desktop but undershoots the 200-300ms range touch UI conventions prescribe (finger occludes the target during the tap, deliberation pace is slower, and high-DPI displays compress small translateY into less perceptible motion). Applies the new token to the mobile hamburger panel open/close transition and to the bar-morph that fires on the same tap, so the bars and the panel finish arriving together. --- src/routes/+layout.svelte | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) (limited to 'src/routes/+layout.svelte') diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte index 75b755c0..6ebc8b4e 100644 --- a/src/routes/+layout.svelte +++ b/src/routes/+layout.svelte @@ -509,8 +509,8 @@ $: { background: var(--base06); border-radius: 2px; transition: - transform var(--duration-fast) var(--ease-in-out-quart), - opacity var(--duration-fast) var(--ease-in-out-quart); + transform var(--duration-base) var(--ease-in-out-quart), + opacity var(--duration-base) var(--ease-in-out-quart); } .menu-toggle[aria-expanded='true'] .menu-bar:nth-child(1) { @@ -547,9 +547,9 @@ $: { transform: translateY(-8px) scale(0.96); pointer-events: none; transition: - opacity var(--duration-fast) var(--ease-out-quart), - transform var(--duration-fast) var(--ease-out-quart), - visibility 0s linear var(--duration-fast); + opacity var(--duration-base) var(--ease-out-quart), + transform var(--duration-base) var(--ease-out-quart), + visibility 0s linear var(--duration-base); } .header.menu-open .nav-items { @@ -558,8 +558,8 @@ $: { transform: translateY(0) scale(1); pointer-events: auto; transition: - opacity var(--duration-fast) var(--ease-out-quart), - transform var(--duration-fast) var(--ease-out-quart), + opacity var(--duration-base) var(--ease-out-quart), + transform var(--duration-base) var(--ease-out-quart), visibility 0s linear 0s; } -- cgit v1.2.3