diff options
| -rw-r--r-- | src/app.css | 1 | ||||
| -rw-r--r-- | src/routes/+layout.svelte | 8 | ||||
| -rw-r--r-- | src/styles/colours.css | 8 | ||||
| -rw-r--r-- | src/styles/motion.css | 6 |
4 files changed, 15 insertions, 8 deletions
diff --git a/src/app.css b/src/app.css index 46f6b621..6b1e5809 100644 --- a/src/app.css +++ b/src/app.css @@ -3,6 +3,7 @@ @import "./styles/input.css"; @import "./styles/normalise.css"; @import "./styles/badge.css"; +@import "./styles/motion.css"; @import "./styles/colours.css"; @import "./styles/features.css"; @import "./styles/scroll.css"; 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) { diff --git a/src/styles/colours.css b/src/styles/colours.css index 12e64dab..eadd0c91 100644 --- a/src/styles/colours.css +++ b/src/styles/colours.css @@ -44,8 +44,8 @@ * { transition: - color 0.15s ease-in-out, - background-color 0.15s ease-in-out, - border-color 0.15s ease-in-out, - box-shadow 0.15s ease-in-out; + color var(--duration-fast) var(--ease-in-out-quart), + background-color var(--duration-fast) var(--ease-in-out-quart), + border-color var(--duration-fast) var(--ease-in-out-quart), + box-shadow var(--duration-fast) var(--ease-in-out-quart); } diff --git a/src/styles/motion.css b/src/styles/motion.css new file mode 100644 index 00000000..9e0f4257 --- /dev/null +++ b/src/styles/motion.css @@ -0,0 +1,6 @@ +:root { + --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-slow: 0.4s; +} |