diff --git a/index.html b/index.html index d016881..e98a38a 100644 --- a/index.html +++ b/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); }