reduce motion

Signed-off-by: Adrien Kara <adrien@iglou.eu>
master
Adrien Kara 5 months ago
parent 64fd25874e
commit 09a1457b34
Signed by: adrien
GPG Key ID: 605B69551C56DB62
  1. 6
      pub/css/Monolith.css
  2. 2
      pub/media/footer.svg

@ -473,6 +473,12 @@ progress {
--button-background: var(--c-white);
}
@media (prefers-reduced-motion:reduce) {
:root {
--t-duration: 0s;
}
}
/* # Animations */
/* # Global */

@ -1 +1 @@
<svg id="visual" viewBox="0 0 1700 80" width="1700" height="80" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1"><style type="text/css">@keyframes wave{0%, 5% {transform:translateY(0px)} 95%, 100% {transform:translateY(5px)}}path{animation:5s alternate-reverse infinite 0s wave ease-in-out;will-change:transform}#svg_wave_2{animation-delay:-1s}#svg_wave_3{animation-delay:-2s}</style><rect x="0" y="0" width="1700" height="80" fill="#ffffff"></rect><path id="svg_wave_1" d="M0 58L47.2 54.8C94.3 51.7 188.7 45.3 283.2 44.3C377.7 43.3 472.3 47.7 566.8 44.3C661.3 41 755.7 30 850 24.7C944.3 19.3 1038.7 19.7 1133.2 25.8C1227.7 32 1322.3 44 1416.8 49C1511.3 54 1605.7 52 1652.8 51L1700 50L1700 81L1652.8 81C1605.7 81 1511.3 81 1416.8 81C1322.3 81 1227.7 81 1133.2 81C1038.7 81 944.3 81 850 81C755.7 81 661.3 81 566.8 81C472.3 81 377.7 81 283.2 81C188.7 81 94.3 81 47.2 81L0 81Z" fill="#c3caf7"></path><path id="svg_wave_2" d="M0 59L47.2 62C94.3 65 188.7 71 283.2 66.7C377.7 62.3 472.3 47.7 566.8 46.5C661.3 45.3 755.7 57.7 850 58.7C944.3 59.7 1038.7 49.3 1133.2 47.8C1227.7 46.3 1322.3 53.7 1416.8 53.8C1511.3 54 1605.7 47 1652.8 43.5L1700 40L1700 81L1652.8 81C1605.7 81 1511.3 81 1416.8 81C1322.3 81 1227.7 81 1133.2 81C1038.7 81 944.3 81 850 81C755.7 81 661.3 81 566.8 81C472.3 81 377.7 81 283.2 81C188.7 81 94.3 81 47.2 81L0 81Z" fill="#839cf2"></path><path id="svg_wave_3" d="M0 63L47.2 64.8C94.3 66.7 188.7 70.3 283.2 71.8C377.7 73.3 472.3 72.7 566.8 70.3C661.3 68 755.7 64 850 61.8C944.3 59.7 1038.7 59.3 1133.2 62.3C1227.7 65.3 1322.3 71.7 1416.8 71.5C1511.3 71.3 1605.7 64.7 1652.8 61.3L1700 58L1700 81L1652.8 81C1605.7 81 1511.3 81 1416.8 81C1322.3 81 1227.7 81 1133.2 81C1038.7 81 944.3 81 850 81C755.7 81 661.3 81 566.8 81C472.3 81 377.7 81 283.2 81C188.7 81 94.3 81 47.2 81L0 81Z" fill="#0071eb"></path></svg>
<svg id="visual" viewBox="0 0 1700 80" width="1700" height="80" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1"><style type="text/css">@keyframes wave{0%, 5% {transform:translateY(0px)} 95%, 100% {transform:translateY(5px)}}path{animation:5s alternate-reverse infinite 0s wave ease-in-out;will-change:transform}@media (prefers-reduced-motion:reduce) {path{animation:unset}}#svg_wave_2{animation-delay:-1s}#svg_wave_3{animation-delay:-2s}</style><rect x="0" y="0" width="1700" height="80" fill="#ffffff"></rect><path id="svg_wave_1" d="M0 58L47.2 54.8C94.3 51.7 188.7 45.3 283.2 44.3C377.7 43.3 472.3 47.7 566.8 44.3C661.3 41 755.7 30 850 24.7C944.3 19.3 1038.7 19.7 1133.2 25.8C1227.7 32 1322.3 44 1416.8 49C1511.3 54 1605.7 52 1652.8 51L1700 50L1700 81L1652.8 81C1605.7 81 1511.3 81 1416.8 81C1322.3 81 1227.7 81 1133.2 81C1038.7 81 944.3 81 850 81C755.7 81 661.3 81 566.8 81C472.3 81 377.7 81 283.2 81C188.7 81 94.3 81 47.2 81L0 81Z" fill="#c3caf7"></path><path id="svg_wave_2" d="M0 59L47.2 62C94.3 65 188.7 71 283.2 66.7C377.7 62.3 472.3 47.7 566.8 46.5C661.3 45.3 755.7 57.7 850 58.7C944.3 59.7 1038.7 49.3 1133.2 47.8C1227.7 46.3 1322.3 53.7 1416.8 53.8C1511.3 54 1605.7 47 1652.8 43.5L1700 40L1700 81L1652.8 81C1605.7 81 1511.3 81 1416.8 81C1322.3 81 1227.7 81 1133.2 81C1038.7 81 944.3 81 850 81C755.7 81 661.3 81 566.8 81C472.3 81 377.7 81 283.2 81C188.7 81 94.3 81 47.2 81L0 81Z" fill="#839cf2"></path><path id="svg_wave_3" d="M0 63L47.2 64.8C94.3 66.7 188.7 70.3 283.2 71.8C377.7 73.3 472.3 72.7 566.8 70.3C661.3 68 755.7 64 850 61.8C944.3 59.7 1038.7 59.3 1133.2 62.3C1227.7 65.3 1322.3 71.7 1416.8 71.5C1511.3 71.3 1605.7 64.7 1652.8 61.3L1700 58L1700 81L1652.8 81C1605.7 81 1511.3 81 1416.8 81C1322.3 81 1227.7 81 1133.2 81C1038.7 81 944.3 81 850 81C755.7 81 661.3 81 566.8 81C472.3 81 377.7 81 283.2 81C188.7 81 94.3 81 47.2 81L0 81Z" fill="#0071eb"></path></svg>

Before

Width:  |  Height:  |  Size: 1.8 KiB

After

Width:  |  Height:  |  Size: 1.9 KiB

Loading…
Cancel
Save