aboutsummaryrefslogtreecommitdiff
path: root/public
diff options
context:
space:
mode:
Diffstat (limited to 'public')
-rw-r--r--public/main.css33
1 files changed, 20 insertions, 13 deletions
diff --git a/public/main.css b/public/main.css
index fca717d..0214f03 100644
--- a/public/main.css
+++ b/public/main.css
@@ -58,7 +58,7 @@ html {
/* Fix full width on small screens on chrome */
body, .g-Form, .g-Play {
- min-width: fit-content;
+ min-width: fit-content;
}
/* Fonts */
@@ -129,16 +129,17 @@ header {
/* Play */
.g-Play {
- display: flex;
- align-items: center;
height: calc(100vh - var(--header-height));
- position: relative;
font-family: chords;
font-size: 15vw;
- overflow-x: visible;
}
-.g-Play--Shift {
+.g-Chords {
+ display: flex;
+ align-items: center;
+ height: 100%;
+ position: relative;
+ overflow-x: visible;
animation: Shift var(--shift-delay) ease-in-out;
}
@@ -152,18 +153,20 @@ header {
position: absolute;
margin-top: -10px; /* Move a bit higher for a better rendering */
transform: translateX(-50%);
- transition: opacity var(--shift-delay) ease-in-out;
}
-.g-Chord:nth-child(1) { left:-25%; }
-.g-Chord:nth-child(2) { left:25%; }
-.g-Chord:nth-child(3) { left:75%; }
-
.g-Chord:nth-child(1) {
- opacity: 0;
+ left:-25%;
+ animation: Disappear var(--shift-delay) ease-in-out;
+}
+
+@keyframes Disappear {
+ 0% {opacity: 1;}
+ 100% {opacity: 0;}
}
-.g-Chord--Beat {
+.g-Chord:nth-child(2) {
+ left:25%;
animation: Beat 0.2s linear var(--shift-delay);
}
@@ -172,3 +175,7 @@ header {
30% {transform: translateX(-50%) scale(120%);}
100% {transform: translateX(-50%) scale(100%);}
}
+
+.g-Chord:nth-child(3) {
+ left:75%;
+}