diff options
| author | Fuwn <[email protected]> | 2026-05-08 08:06:27 +0000 |
|---|---|---|
| committer | Fuwn <[email protected]> | 2026-05-08 08:06:27 +0000 |
| commit | 69355fa5b080a97d7914ae039ae3d36c0d374034 (patch) | |
| tree | 65eb8bc2a3d4afe58f76222f745082756c599dbc /src/routes | |
| parent | style(header): soften hide/show curve with ease-out-quart (diff) | |
| download | due.moe-69355fa5b080a97d7914ae039ae3d36c0d374034.tar.xz due.moe-69355fa5b080a97d7914ae039ae3d36c0d374034.zip | |
Add --ease-out-quart, --ease-in-out-quart, --duration-fast, --duration-slow in motion.css and migrate the global anchor, header, and theme-switch transitions to use them. Establishes a shared motion vocabulary for future polish.
Diffstat (limited to 'src/routes')
| -rw-r--r-- | src/routes/+layout.svelte | 8 |
1 files changed, 4 insertions, 4 deletions
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte index a6407ff5..e1677b44 100644 --- a/src/routes/+layout.svelte +++ b/src/routes/+layout.svelte @@ -352,7 +352,7 @@ $: { z-index: 4; position: sticky; top: 1.25rem; - transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1); + transition: transform var(--duration-slow) var(--ease-out-quart); } .header-hidden { @@ -376,9 +376,9 @@ $: { :global(a) { text-decoration: none; transition: - color 0.15s ease-in-out, - opacity 0.15s ease-in-out, - text-decoration-color 0.15s ease-in-out; + color var(--duration-fast) var(--ease-in-out-quart), + opacity var(--duration-fast) var(--ease-in-out-quart), + text-decoration-color var(--duration-fast) var(--ease-in-out-quart); } :global(a:hover) { |