aa
/
website
2
1
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity Pipelines

perfers reduced motion support

Browse Source
environments/production/deployments/3
AAGaming 2 years ago
parent 89e51128ef
commit 03e0c7bf6b
No known key found for this signature in database
GPG Key ID: AEAF306141983D5A
8 changed files with 107 additions and 14 deletions
Show Stats Download Patch File Download Diff File

3
package.json
Unescape View File

@ -15,7 +15,8 @@
"encoding": "^0.1.13",
"polka": "next",
"serverless-http": "^2.7.0",
"sirv": "^1.0.0"
"sirv": "^1.0.0",
"svelte-media": "^0.0.3"
},
"devDependencies": {
"@babel/core": "^7.0.0",

3
src/components/Nav.svelte
Unescape View File

@ -4,9 +4,10 @@
import NavItem from './NavItem.svelte';
import { backOut } from 'svelte/easing';
import { crossfade } from 'svelte/transition';
import { media } from '../stores';
const anim = crossfade({
duration: d => Math.sqrt(d * 2000),
duration: d => $media.noanimations ? 0 : Math.sqrt(d * 2000),
easing: backOut
});
</script>

14
src/components/PageTransitions.svelte
Unescape View File

@ -1,10 +1,13 @@
<!-- https://dev.to/giorgosk/smooth-page-transitions-in-layout-svelte-with-sveltekit-or-sapper-4mm1 -->
<script>
import { fly } from 'svelte/transition';
export let segment;
import { media } from '../stores';
export let segment = 'none';
export let inOpts;
export let outOpts;
let matches = $media.noanimations;
function handleStart() {
document.getElementById('sapper').style.overflow = 'hidden';
}
@ -14,13 +17,14 @@
}
</script>
{#key segment}
<div
in:fly={inOpts}
out:fly={outOpts}
in:fly={(!matches) ? inOpts : {duration: 0, delay: 0}}
out:fly={(!matches) ? outOpts : {duration: 0, delay: 0}}
on:outrostart={handleStart}
on:introend={handleEnd}
on:outrostart={!matches ? handleStart : () => {}}
on:introend={!matches ? handleEnd : () => {}}
>
<slot/>
</div>

5
src/routes/_layout.svelte
Unescape View File

@ -2,7 +2,6 @@
import Nav from '../components/Nav.svelte';
import PageTransitions from '../components/PageTransitions.svelte';
import SocialButtons from '../components/SocialButtons.svelte';
export let segment;
</script>
@ -24,8 +23,8 @@
<Nav {segment}/>
<main>
<PageTransitions inOpts={{ x: 50, duration: 250, delay: 250 }} outOpts={{ x: -50, duration: 250 }} {segment}>
<slot/>
<PageTransitions inOpts={{ x: 50, duration: 250, delay: 250 }} outOpts={{ x: -50, duration: 250 }} segment={segment}>
<slot {segment}/>
</PageTransitions>
</main>

3
src/routes/blog/[permalink].svelte
Unescape View File

@ -15,7 +15,6 @@
<script>
import PageTransitions from '../../components/PageTransitions.svelte';
export let segment;
export let post;
</script>
@ -62,7 +61,7 @@
<meta property="og:type" content="website" />
</svelte:head>
<PageTransitions inOpts={{ y: 50, duration: 250, delay: 250 }} outOpts={{ y: -50, duration: 250 }} {segment}>
<PageTransitions inOpts={{ y: 50, duration: 250, delay: 250 }} outOpts={{ y: -50, duration: 250 }}>
<h1>{post.title}</h1>
<div class="content">

3
src/routes/blog/index.svelte
Unescape View File

@ -9,7 +9,6 @@
<script>
import PageTransitions from '../../components/PageTransitions.svelte';
export let posts;
export let segment;
</script>
<style>
@ -23,7 +22,7 @@
<title>Blog</title>
</svelte:head>
<PageTransitions inOpts={{ x: 50, duration: 250, delay: 250 }} outOpts={{ duration: 250 }} {segment}>
<PageTransitions inOpts={{ x: 0, duration: 250, delay: 250 }} outOpts={{ duration: 250 }}>
<h1>Recent posts</h1>
<ul>

7
src/stores/index.js
Unescape View File

@ -0,0 +1,7 @@
import watchMedia from "svelte-media";
const mediaqueries = {
dark: "(prefers-color-scheme: dark)",
noanimations: "(prefers-reduced-motion: reduce)"
};
export const media = watchMedia(mediaqueries);

83
yarn.lock
Unescape View File

@ -843,6 +843,18 @@
lodash "^4.17.19"
to-fast-properties "^2.0.0"
"@formatjs/intl-unified-numberformat@^3.2.0":
version "3.3.7"
resolved "https://registry.yarnpkg.com/@formatjs/intl-unified-numberformat/-/intl-unified-numberformat-3.3.7.tgz#9995a24568908188e716d81a1de5b702b2ee00e2"
integrity sha512-KnWgLRHzCAgT9eyt3OS34RHoyD7dPDYhRcuKn+/6Kv2knDF8Im43J6vlSW6Hm1w63fNq3ZIT1cFk7RuVO3Psag==
dependencies:
"@formatjs/intl-utils" "^2.3.0"
"@formatjs/intl-utils@^2.3.0":
version "2.3.0"
resolved "https://registry.yarnpkg.com/@formatjs/intl-utils/-/intl-utils-2.3.0.tgz#2dc8c57044de0340eb53a7ba602e59abf80dc799"
integrity sha512-KWk80UPIzPmUg+P0rKh6TqspRw0G6eux1PuJr+zz47ftMaZ9QDwbGzHZbtzWkl5hgayM/qrKRutllRC7D/vVXQ==
"@jackfranklin/rollup-plugin-markdown@^0.3.0":
version "0.3.0"
resolved "https://registry.yarnpkg.com/@jackfranklin/rollup-plugin-markdown/-/rollup-plugin-markdown-0.3.0.tgz#3b09ce9ff257c0badb2cf68f889aec477741fac0"
@ -1119,6 +1131,11 @@ commander@^2.19.0, commander@^2.20.0:
resolved "https://registry.yarnpkg.com/commander/-/commander-2.20.3.tgz#fd485e84c03eb4881c20722ba48035e8531aeb33"
integrity sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==
commander@^4.0.1:
version "4.1.1"
resolved "https://registry.yarnpkg.com/commander/-/commander-4.1.1.tgz#9fd602bd936294e9e9ef46a3f4d6964044b18068"
integrity sha512-NOKm8xhkzAjzFx8B2v5OAHT+u5pRQc2UCa2Vq9jYL/31o2wi9mxBA7LIFs3sV5VSC49z6pEhfbMULvShKj26WA==
commondir@^1.0.1:
version "1.0.1"
resolved "https://registry.yarnpkg.com/commondir/-/commondir-1.0.1.tgz#ddd800da0c66127393cca5950ea968a3aaf1253b"
@ -1205,6 +1222,11 @@ define-properties@^1.1.3:
dependencies:
object-keys "^1.0.12"
dlv@^1.1.3:
version "1.1.3"
resolved "https://registry.yarnpkg.com/dlv/-/dlv-1.1.3.tgz#5c198a8a11453596e751494d49874bc7732f2e79"
integrity sha512-+HlytyjlPKnIG8XuRG8WvmBP8xs8P71y+SKKS6ZXWoEgLuePxtDoUEiH7WkdePWrQ5JBpE6aoVqfZfJUQkjXwA==
electron-to-chromium@^1.3.649:
version "1.3.711"
resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.3.711.tgz#92c3caf7ffed5e18bf63f66b4b57b4db2409c450"
@ -1242,6 +1264,11 @@ estree-walker@^0.6.1:
resolved "https://registry.yarnpkg.com/estree-walker/-/estree-walker-0.6.1.tgz#53049143f40c6eb918b23671d1fe3219f3a1b362"
integrity sha512-SqmZANLWS0mnatqbSfRP5g8OXZC12Fgg1IwNtLsyHDzJizORW4khDfjPqJZsemPWBB2uqykUah5YpQ6epsqC/w==
estree-walker@^0.9.0:
version "0.9.0"
resolved "https://registry.yarnpkg.com/estree-walker/-/estree-walker-0.9.0.tgz#9116372f09c02fd88fcafb0c04343631012a0aa6"
integrity sha512-12U47o7XHUX329+x3FzNVjCx3SHEzMF0nkDv7r/HnBzX/xNTKxajBk6gyygaxrAFtLj39219oMfbtxv4KpaOiA==
estree-walker@^1.0.1:
version "1.0.1"
resolved "https://registry.yarnpkg.com/estree-walker/-/estree-walker-1.0.1.tgz#31bc5d612c96b704106b477e6dd5d8aa138cb700"
@ -1259,6 +1286,11 @@ extend-shallow@^2.0.1:
dependencies:
is-extendable "^0.1.0"
fast-memoize@^2.5.1:
version "2.5.2"
resolved "https://registry.yarnpkg.com/fast-memoize/-/fast-memoize-2.5.2.tgz#79e3bb6a4ec867ea40ba0e7146816f6cdce9b57e"
integrity sha512-Ue0LwpDYErFbmNnZSF0UH6eImUwDmogUO1jyE+JbN2gsQz/jICm1Ve7t9QT0rNSsfJt+Hs4/S3GnsDVjL4HVrw==
find-up@^3.0.0:
version "3.0.0"
resolved "https://registry.yarnpkg.com/find-up/-/find-up-3.0.0.tgz#49169f1d7993430646da61ecc5ae355c21c97b73"
@ -1317,6 +1349,16 @@ globals@^11.1.0:
resolved "https://registry.yarnpkg.com/globals/-/globals-11.12.0.tgz#ab8795338868a0babd8525758018c2a7eb95c42e"
integrity sha512-WOBp/EEGUiIsJSp7wcv/y6MO+lV9UoncWqxuFfm8eBwzWNgyfBd6Gz+IeKQ9jCmyhoH99g15M3T+QaVHFjizVA==
globalyzer@0.1.0:
version "0.1.0"
resolved "https://registry.yarnpkg.com/globalyzer/-/globalyzer-0.1.0.tgz#cb76da79555669a1519d5a8edf093afaa0bf1465"
integrity sha512-40oNTM9UfG6aBmuKxk/giHn5nQ8RVz/SS4Ir6zgzOv9/qC3kKZ9v4etGTcJbEl/NyVQH7FGU7d+X1egr57Md2Q==
globrex@^0.1.2:
version "0.1.2"
resolved "https://registry.yarnpkg.com/globrex/-/globrex-0.1.2.tgz#dd5d9ec826232730cd6793a5e33a9302985e6098"
integrity sha512-uHJgbwAMwNFf5mLst7IWLNg14x1CkeqglJb/K3doi4dw6q2IvAAmM/Y81kevy83wP+Sst+nutFTYOGg3d1lsxg==
gray-matter@^4.0.2:
version "4.0.2"
resolved "https://registry.yarnpkg.com/gray-matter/-/gray-matter-4.0.2.tgz#9aa379e3acaf421193fce7d2a28cebd4518ac454"
@ -1392,6 +1434,26 @@ inherits@2:
resolved "https://registry.yarnpkg.com/inherits/-/inherits-2.0.4.tgz#0fa2c64f932917c3433a0ded55363aae37416b7c"
integrity sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==
intl-format-cache@^4.2.21:
version "4.3.1"
resolved "https://registry.yarnpkg.com/intl-format-cache/-/intl-format-cache-4.3.1.tgz#484d31a9872161e6c02139349b259a6229ade377"
integrity sha512-OEUYNA7D06agqPOYhbTkl0T8HA3QKSuwWh1HiClEnpd9vw7N+3XsQt5iZ0GUEchp5CW1fQk/tary+NsbF3yQ1Q==
intl-messageformat-parser@^3.6.4:
version "3.6.4"
resolved "https://registry.yarnpkg.com/intl-messageformat-parser/-/intl-messageformat-parser-3.6.4.tgz#5199d106d816c3dda26ee0694362a9cf823978fb"
integrity sha512-RgPGwue0mJtoX2Ax8EmMzJzttxjnva7gx0Q7mKJ4oALrTZvtmCeAw5Msz2PcjW4dtCh/h7vN/8GJCxZO1uv+OA==
dependencies:
"@formatjs/intl-unified-numberformat" "^3.2.0"
intl-messageformat@^7.5.2:
version "7.8.4"
resolved "https://registry.yarnpkg.com/intl-messageformat/-/intl-messageformat-7.8.4.tgz#c29146a06b9cd26662978a4d95fff2b133e3642f"
integrity sha512-yS0cLESCKCYjseCOGXuV4pxJm/buTfyCJ1nzQjryHmSehlptbZbn9fnlk1I9peLopZGGbjj46yHHiTAEZ1qOTA==
dependencies:
intl-format-cache "^4.2.21"
intl-messageformat-parser "^3.6.4"
is-buffer@~1.1.6:
version "1.1.6"
resolved "https://registry.yarnpkg.com/is-buffer/-/is-buffer-1.1.6.tgz#efaa2ea9daa0d7ab2ea13a97b2b8ad51fefbe8be"
@ -1945,6 +2007,19 @@ supports-color@^7.0.0:
dependencies:
has-flag "^4.0.0"
svelte-media@^0.0.3:
version "0.0.3"
resolved "https://registry.yarnpkg.com/svelte-media/-/svelte-media-0.0.3.tgz#a16217c9da18a5e37c231624658c169c5e5c1e9f"
integrity sha512-EAEmeloOWOxgtgLZTfLdKe/xrhI5wrj39kyr0DP3RFwVglBytl+7fLDltwPeyi2H0D40RM59ssyN4vCkT2fwqQ==
dependencies:
commander "^4.0.1"
deepmerge "^4.2.2"
dlv "^1.1.3"
estree-walker "^0.9.0"
fast-memoize "^2.5.1"
intl-messageformat "^7.5.2"
tiny-glob "^0.2.6"
svelte@^3.17.3:
version "3.37.0"
resolved "https://registry.yarnpkg.com/svelte/-/svelte-3.37.0.tgz#dc7cd24bcc275cdb3f8c684ada89e50489144ccd"
@ -1959,6 +2034,14 @@ terser@^5.0.0:
source-map "~0.7.2"
source-map-support "~0.5.19"
tiny-glob@^0.2.6:
version "0.2.8"
resolved "https://registry.yarnpkg.com/tiny-glob/-/tiny-glob-0.2.8.tgz#b2792c396cc62db891ffa161fe8b33e76123e531"
integrity sha512-vkQP7qOslq63XRX9kMswlby99kyO5OvKptw7AMwBVMjXEI7Tb61eoI5DydyEMOseyGS5anDN1VPoVxEvH01q8w==
dependencies:
globalyzer "0.1.0"
globrex "^0.1.2"
to-fast-properties@^2.0.0:
version "2.0.0"
resolved "https://registry.yarnpkg.com/to-fast-properties/-/to-fast-properties-2.0.0.tgz#dc5e698cbd079265bc73e0377681a4e4e83f616e"

Write Preview
Loading…
Cancel
Save