diff options
| author | Fuwn <[email protected]> | 2026-05-19 01:17:32 +0000 |
|---|---|---|
| committer | Fuwn <[email protected]> | 2026-05-19 01:17:32 +0000 |
| commit | 4ba484b9cf8df2e903286ef538124f0cf00a81f7 (patch) | |
| tree | 6adda409fc92454501927f047d55b652de159183 /src/routes | |
| parent | feat(nav): restore scroll-hide and animate mobile hamburger (diff) | |
| download | due.moe-4ba484b9cf8df2e903286ef538124f0cf00a81f7.tar.xz due.moe-4ba484b9cf8df2e903286ef538124f0cf00a81f7.zip | |
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.
Diffstat (limited to 'src/routes')
| -rw-r--r-- | src/routes/+layout.svelte | 14 |
1 files changed, 7 insertions, 7 deletions
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; } |