ekzyis/stacker.news
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

snow refinements

Browse Source
This commit is contained in:
keyan 2023-12-24 18:07:37 -06:00
parent 05bdd988fa
commit ea2ea41f2d
2 changed files with 10 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
styles/globals.scss
View File

@ -148,7 +148,7 @@ $accordion-button-active-icon-dark: $accordion-button-icon;
--theme-linkHover: #004a72; --theme-linkHover: #004a72;
--theme-linkVisited: #53758; --theme-linkVisited: #53758;
// snow // snow
--theme-snow: #6c757d; --theme-snowDropShadow: drop-shadow(0 0 4px black) ;
} }
[data-bs-theme=dark] { [data-bs-theme=dark] {
@ -174,7 +174,7 @@ $accordion-button-active-icon-dark: $accordion-button-icon;
--theme-linkHover: #007cbe; --theme-linkHover: #007cbe;
--theme-linkVisited: #56798E; --theme-linkVisited: #56798E;
// snow // snow
--theme-snow: white; --theme-snowDropShadow: drop-shadow(0 0 10px white);
} }
@import '../node_modules/bootstrap/scss/bootstrap.scss'; @import '../node_modules/bootstrap/scss/bootstrap.scss';

22
styles/snow.scss
View File

@ -8,9 +8,7 @@
.snow { .snow {
z-index: 999; z-index: 999;
position: absolute; position: fixed;
// position before and after animation (out of view)
top: -10vh;
// compile random styles for 1024 snowflakes // compile random styles for 1024 snowflakes
@for $i from 1 through 1024 { @for $i from 1 through 1024 {
@ -27,21 +25,21 @@
// +-50px to fix x-overflow if flake is blown out of right screen // +-50px to fix x-overflow if flake is blown out of right screen
left: clamp(0% + $wind-max-swing + $size + 50px, #{random(100) + "%"}, 100% - $size - $wind-max-swing - 50px); left: clamp(0% + $wind-max-swing + $size + 50px, #{random(100) + "%"}, 100% - $size - $wind-max-swing - 50px);
animation: fall-#{$i} $fall-duration linear 0s 1; animation: fall-#{$i} $fall-duration linear 0s 1;
opacity: 0;
} }
&:nth-child(#{$i})::after { &:nth-child(#{$i})::after {
content: ''; content: '';
display: block; display: block;
background: var(--theme-snow); background: white;
filter: drop-shadow(0 0 10px var(--theme-snow)); filter: var(--theme-snowDropShadow);
border-radius: 50%; border-radius: 50%;
width: $size; width: $size;
height: $size; height: $size;
opacity: random(); animation: wind-#{$i} $wind-swing-duration ease-in-out $wind-delay infinite alternate;
animation: wind $wind-swing-duration ease-in-out $wind-delay infinite alternate;
} }
@keyframes wind { @keyframes wind-#{$i} {
0% { 0% {
transform: translateX($wind-max-swing); transform: translateX($wind-max-swing);
} }
@ -54,16 +52,12 @@
@keyframes fall-#{$i} { @keyframes fall-#{$i} {
0% { 0% {
opacity: inherit; opacity: inherit;
top: -2vh; transform: translateY(-#{random_range(1, 10)}vh);
}
90% {
opacity: 0;
} }
100% { 100% {
opacity: 0; opacity: 0;
top: 100vh; transform: translateY(100vh);
} }
} }
} }