forked from pub-solar/pub.solar
Better
This commit is contained in:
parent
a15e505440
commit
31a8747b7e
27
index.html
27
index.html
|
@ -116,13 +116,14 @@
|
|||
text-align: center;
|
||||
font-weight: 900;
|
||||
font-size: 8rem;
|
||||
padding: 0 200vw;
|
||||
text-shadow: 5px 0px 0px white;
|
||||
transition: text-shadow 0.1s ease;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.ps-page--link:hover {
|
||||
text-shadow: 5px 0px 0px #00ffab;
|
||||
text-shadow: 10px 0px 0px var(--accent);
|
||||
}
|
||||
|
||||
.ps-background {
|
||||
|
@ -170,19 +171,23 @@
|
|||
}
|
||||
|
||||
.ps-logo--base {
|
||||
animation-duration: 30s;
|
||||
animation-name: appear;
|
||||
animation-name: rotate;
|
||||
animation-duration: 0.3s;
|
||||
animation-timing-function: linear;
|
||||
animation-play-state: paused;
|
||||
animation-iteration-count: infinite;
|
||||
}
|
||||
|
||||
.ps-logo:nth-child(2n) .ps-logo--base { animation-delay: -2.5s; }
|
||||
.ps-logo:nth-child(3n) .ps-logo--base { animation-delay: -5s; }
|
||||
.ps-logo:nth-child(5n) .ps-logo--base { animation-delay: -7.5s; }
|
||||
.ps-logo:nth-child(7n) .ps-logo--base { animation-delay: -10s; }
|
||||
.ps-logo:nth-child(11n) .ps-logo--base { animation-delay: -12.5s; }
|
||||
.ps-logo:nth-child(13n) .ps-logo--base { animation-delay: -15s; }
|
||||
.ps-logo:nth-child(3n) .ps-logo--base { animation-delay: -17.5s; }
|
||||
.ps-logo--base:hover {
|
||||
animation-play-state: running;
|
||||
}
|
||||
|
||||
.ps-logo:nth-child(2n) .ps-logo--base { animation-delay: -0.1s; }
|
||||
.ps-logo:nth-child(3n) .ps-logo--base { animation-delay: -0.3s; }
|
||||
.ps-logo:nth-child(5n) .ps-logo--base { animation-delay: -0.5s; }
|
||||
.ps-logo:nth-child(7n) .ps-logo--base { animation-delay: -7s; }
|
||||
.ps-logo:nth-child(11n) .ps-logo--base { animation-delay: -0.9s; }
|
||||
.ps-logo:nth-child(13n) .ps-logo--base { animation-delay: -1s; }
|
||||
|
||||
.ps-logo--base::before {
|
||||
position: absolute;
|
||||
|
@ -193,7 +198,7 @@
|
|||
border-radius: 50%;
|
||||
}
|
||||
|
||||
@keyframes appear {
|
||||
@keyframes rotate {
|
||||
0% {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
|
|
Loading…
Reference in a new issue