Use rx to update the view

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%;
+}