cswimr/revite
1
0
Fork 0
mirror of https://github.com/revoltchat/revite.git synced 2024-11-25 08:30:58 -05:00
Code Issues Projects Releases Packages Wiki Activity

chore: get rid of scss warnings for snow

Browse source
This commit is contained in:
Paul Makles 2022-01-15 13:49:43 +00:00
parent b5189a769f
commit 4526a696c6
1 changed files with 21 additions and 20 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

41
src/pages/home/snow.scss
View file

@ -3,6 +3,8 @@
// //
// Source: https://github.com/Artimon/pure-css-snowfall // Source: https://github.com/Artimon/pure-css-snowfall
@use 'sass:math';
$count: 36; $count: 36;
$screenOffset: 0px; $screenOffset: 0px;
$fallDuration: 12; $fallDuration: 12;
@ -45,47 +47,46 @@ $fontSize: 40px;
@while ($count > 0) { @while ($count > 0) {
$left: random(100); $left: random(100);
$deltaLeft: random(2 * $windNoise * 10) / 10 - $windNoise + $windSpeed; $deltaLeft: math.div(
/*$deltaLeft: math.div(random(2 * $windNoise * 10), 10) - random(2 * $windNoise * 10),
$windNoise + 10 - $windNoise + $windSpeed
$windSpeed;*/ );
$scale: 1 + (random(2 * $sizeNoise * 10) / 10 - $sizeNoise) / 100; $scale: 1 +
/*$scale: 1 + math.div(
(math.div(random(2 * $sizeNoise * 10), 10) - $sizeNoise) / math.div(random(2 * $sizeNoise * 10), 10 - $sizeNoise),
100;*/ 100
);
.snowflake:nth-child(#{$count}) { .snowflake:nth-child(#{$count}) {
animation: animation-snowflake-#{$count} linear infinite; animation: animation-snowflake-#{$count} linear infinite;
animation-duration: $fallDuration + animation-duration: $fallDuration +
random($fallDuration * 10) / math.div(random($fallDuration * 10), 10) +
10 +
s; s;
animation-delay: random(2 * $fallDuration * 10) / animation-delay: math.div(random(2 * $fallDuration * 10), 10) -
10 -
(2 * $fallDuration) + (2 * $fallDuration) +
s; s;
} }
@keyframes animation-snowflake-#{$count} { @keyframes animation-snowflake-#{$count} {
0% { 0% {
left: percentage($left / 100); left: percentage(math.div($left, 100));
top: calc(0% - #{$screenOffset}); top: calc(0% - #{$screenOffset});
transform: scale($scale) transform: scale($scale)
rotate3d( rotate3d(
random(100) / 100, math.div(random(100), 100),
random(100) / 100, math.div(random(100), 100),
random(100) / 100, math.div(random(100), 100),
0deg 0deg
); );
} }
100% { 100% {
left: percentage(($left + $deltaLeft) / 100); left: percentage(math.div(($left + $deltaLeft), 100));
top: calc(100% + #{$screenOffset}); top: calc(100% + #{$screenOffset});
transform: scale($scale) transform: scale($scale)
rotate3d( rotate3d(
random(100) / 100, math.div(random(100), 100),
random(100) / 100, math.div(random(100), 100),
random(100) / 100, math.div(random(100), 100),
(random($rotation) + $rotation) * (random($rotation) + $rotation) *
((random(2) - 1) * 2 - 1) + deg ((random(2) - 1) * 2 - 1) + deg
); );