cswimr/revite
1
0
Fork 0
mirror of https://github.com/revoltchat/revite.git synced 2024-11-09 16:53:36 -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
@use 'sass:math';
$count: 36;
$screenOffset: 0px;
$fallDuration: 12;
@ -45,47 +47,46 @@ $fontSize: 40px;
@while ($count > 0) {
$left: random(100);
$deltaLeft: random(2 * $windNoise * 10) / 10 - $windNoise + $windSpeed;
/*$deltaLeft: math.div(random(2 * $windNoise * 10), 10) -
$windNoise +
$windSpeed;*/
$scale: 1 + (random(2 * $sizeNoise * 10) / 10 - $sizeNoise) / 100;
/*$scale: 1 +
(math.div(random(2 * $sizeNoise * 10), 10) - $sizeNoise) /
100;*/
$deltaLeft: math.div(
random(2 * $windNoise * 10),
10 - $windNoise + $windSpeed
);
$scale: 1 +
math.div(
math.div(random(2 * $sizeNoise * 10), 10 - $sizeNoise),
100
);
.snowflake:nth-child(#{$count}) {
animation: animation-snowflake-#{$count} linear infinite;
animation-duration: $fallDuration +
random($fallDuration * 10) /
10 +
math.div(random($fallDuration * 10), 10) +
s;
animation-delay: random(2 * $fallDuration * 10) /
10 -
animation-delay: math.div(random(2 * $fallDuration * 10), 10) -
(2 * $fallDuration) +
s;
}
@keyframes animation-snowflake-#{$count} {
0% {
left: percentage($left / 100);
left: percentage(math.div($left, 100));
top: calc(0% - #{$screenOffset});
transform: scale($scale)
rotate3d(
random(100) / 100,
random(100) / 100,
random(100) / 100,
math.div(random(100), 100),
math.div(random(100), 100),
math.div(random(100), 100),
0deg
);
}
100% {
left: percentage(($left + $deltaLeft) / 100);
left: percentage(math.div(($left + $deltaLeft), 100));
top: calc(100% + #{$screenOffset});
transform: scale($scale)
rotate3d(
random(100) / 100,
random(100) / 100,
random(100) / 100,
math.div(random(100), 100),
math.div(random(100), 100),
math.div(random(100), 100),
(random($rotation) + $rotation) *
((random(2) - 1) * 2 - 1) + deg
);