replace hp with clapper

Signed-off-by: Naman Sood <mail@nsood.in>
This commit is contained in:
Naman Sood 2022-05-11 00:42:17 -04:00
parent e3bad0686f
commit ea81f7aeef
5 changed files with 87 additions and 14 deletions

View file

@ -17,6 +17,9 @@ body.dark-mode {
body.dark-mode .image-container img {
filter: invert(100%);
}
body.dark-mode .clapper {
filter: invert(100%);
}
body.dark-mode .bg {
opacity: 0 !important;
}
@ -451,6 +454,39 @@ footer {
will-change: opacity;
}
.clapper {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
height: 10rem;
line-height: 10rem;
text-align: center;
z-index: 100000;
font-size: 5rem;
pointer-events: none;
transition: none;
opacity: 0;
}
.clapper.clapping {
animation: clap 1s ease-in-out;
}
@keyframes clap {
0% {
opacity: 1;
}
49% {
opacity: 0;
}
51% {
opacity: 1;
}
100% {
opacity: 0;
}
}
@media (min-width: 1800px) {
html {
font-size: 20px;

View file

@ -18,6 +18,10 @@ body.dark-mode {
filter: invert(100%);
}
.clapper {
filter: invert(100%);
}
.bg {
opacity: 0 !important;
}
@ -522,6 +526,32 @@ footer {
}
}
.clapper {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
height: 10rem;
line-height: 10rem;
text-align: center;
z-index: 100000;
font-size: 5rem;
pointer-events: none;
transition: none;
opacity: 0;
}
.clapper.clapping {
animation: clap 1s ease-in-out;
}
@keyframes clap {
0% { opacity: 1; }
49% { opacity: 0; }
51% { opacity: 1; }
100% { opacity: 0; }
}
@media(min-width: 1800px) {
html {
font-size: 20px;