selfhosted
/
zer0bin
mirror of https://github.com/zer0bin-dev/zer0bin
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

fix: 🔥 Remove fire animation until parcel is fixed

This commit is contained in:
ThatOneCalculator 2022-04-03 20:03:15 -07:00
parent 1bd6d3721a
commit fa78dd4246
2 changed files with 51 additions and 51 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
frontend/index.pug
View File

@ -28,11 +28,11 @@ html(lang='en')
.buttons.noselect
button#save-button.btn(aria-label='Save')
button#single-view-button.btn(aria-label='Single View')
.fireBody(style='display: none')
- var parts = 20;
- while (parts--) {
.particle
- }
//- .fireBody(style='display: none')
//- - var parts = 20;
//- - while (parts--) {
//- .particle
//- - }
button#new-button.btn(aria-label='New paste')
button#copy-button.btn(aria-label='Copy')
a(href='https://github.com/zer0bin-dev/zer0bin' aria-label='GitHub repo')

92
frontend/style/style.scss
View File

@ -224,52 +224,52 @@ a {
.fire {
color: $love;
}
$dur: 1s;
$blur: 0.02em;
$fireRad: 3em;
$parts: 20;
$partSize: 5em;
.fireBody {
font-size: 3px;
filter: blur($blur);
-webkit-filter: blur($blur);
margin: 2em auto 0 auto;
position: absolute;
width: 6em;
height: 5em;
z-index: 0;
opacity: 0.5;
}
.particle {
animation: rise $dur ease-in infinite;
background-image: radial-gradient($love 100%, $love 100%);
border-radius: 50%;
mix-blend-mode: screen;
opacity: 0;
position: absolute;
bottom: 0;
width: $partSize;
height: $partSize;
@for $p from 1 through $parts {
&:nth-of-type(#{$p}) {
animation-delay: $dur * random();
left: calc((100% - #{$partSize}) * calc(($p - 1) / $parts));
}
}
}
@keyframes rise {
from {
opacity: 0;
transform: translateY(0) scale(1);
}
25% {
opacity: 1;
}
to {
opacity: 0;
transform: translateY(-10em) scale(0);
}
}
// $dur: 1s;
// $blur: 0.02em;
// $fireRad: 3em;
// $parts: 20;
// $partSize: 5em;
// .fireBody {
// font-size: 3px;
// filter: blur($blur);
// -webkit-filter: blur($blur);
// margin: 2em auto 0 auto;
// position: absolute;
// width: 6em;
// height: 5em;
// z-index: 0;
// opacity: 0.5;
// }
// .particle {
// animation: rise $dur ease-in infinite;
// background-image: radial-gradient($love 100%, $love 100%);
// border-radius: 50%;
// mix-blend-mode: screen;
// opacity: 0;
// position: absolute;
// bottom: 0;
// width: $partSize;
// height: $partSize;
// @for $p from 1 through $parts {
// &:nth-of-type(#{$p}) {
// animation-delay: $dur * random();
// left: calc((100% - #{$partSize}) * calc(($p - 1) / $parts));
// }
// }
// }
// @keyframes rise {
// from {
// opacity: 0;
// transform: translateY(0) scale(1);
// }
// 25% {
// opacity: 1;
// }
// to {
// opacity: 0;
// transform: translateY(-10em) scale(0);
// }
// }
#messages {
position: absolute;
top: 0;