diff options
| -rw-r--r-- | src/routes/+layout.svelte | 14 | ||||
| -rw-r--r-- | src/styles/motion.css | 1 |
2 files changed, 8 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; } diff --git a/src/styles/motion.css b/src/styles/motion.css index 9e0f4257..28de2180 100644 --- a/src/styles/motion.css +++ b/src/styles/motion.css @@ -2,5 +2,6 @@ --ease-out-quart: cubic-bezier(0.22, 1, 0.36, 1); --ease-in-out-quart: cubic-bezier(0.76, 0, 0.24, 1); --duration-fast: 0.15s; + --duration-base: 0.24s; --duration-slow: 0.4s; } |