v4.1-Spacing adjustments

- relaxed vertical spacing and increased horizontal gap between text and graphic

- cleanup

timer.css

@@ -28,7 +28,7 @@ main {
 
 h1 {
   margin: 0;
-  font-size: 3.4em;
+  font-size: 3.6em;
   color: #404145;
   font-weight: normal;
 }
@@ -49,8 +49,7 @@ h3 {
 
 p {
   margin: 0;
-  font-size: 1.4em;
+  font-size: 1.3em;
-  line-height: 95%;
 }
 
 .contentContainer {
@@ -98,15 +97,18 @@ p {
   height: auto;
   width: 100%;
   font-size: 4cqh;
-  transform: translate(12%, -68%);
 }
 
 #InfoBox1 {
-  
+  transform: translate(-2%, 0%);
+  margin-top: -50%;
 }
 
 #InfoBox2 {
-  transform: translate(-1%, -88%);
+  /* -- !!DO NOT REMOVE!! -- 
+    Removing this transform kills the goal label and I do not know why
+    */
+  transform: translate(0%, 0%);
 }
 
 #InfoBox3 {
@@ -117,20 +119,15 @@ p {
   border: .4cqh solid;
   border-color: #00A0F3;
   background-color: white;
-}
+  padding: .4ch 0 .4ch 0;
-
-.rightFadeWrap {
-  mask-image: linear-gradient(to right, black 85%, transparent 100%);
-}
-
-#RightFadeWrapInfoBox3 {
-
 }
 
 #Timer {
+  /*
   margin-top: 10%;
   margin-bottom: 2%;
-  transform: translate(-7.5%, 3%) scale(.95, 1.2);
+  */
+  transform: translate(0%, 0%) scale(.95, 1.2);
 }
 
 #TimerInfo {
@@ -139,7 +136,6 @@ p {
 }
 
 #GoalLabel {
-  transform: translate(5%, 0%) scale(1);
   color: #404145;
 }
 
@@ -168,11 +164,10 @@ p {
   width: fit-content;
   padding-left: .8cqh;
   padding-right: .8cqh;
-  transform: translate(7%, 0%) scale(1, 1);
   border-radius: 3cqh;
   border: .4cqh solid;
   border-color: #404145;
-  margin: 0 auto .8cqh auto;
+  margin: .4ch auto 0 auto;
 }
 
 #GoalProgress {
@@ -198,7 +193,6 @@ p {
   text-wrap: nowrap;
   overflow: hidden;
   text-align: center;
-  transform: translate(0%, 0%) scale(1, 1);
 }
 
 .giftUserName {
@@ -228,12 +222,10 @@ p {
 
 #GiftUserName2 {
   /* --- animation-duration = JS VAR --- */
-  animation-delay: 3s;
 }
 
 #GiftUserName3 {
   /* --- animation-duration = JS VAR --- */
-  animation-delay: 6s;
 }
 
 #GiftUserNameDupe1 {
@@ -242,24 +234,30 @@ p {
 
 #GiftUserNameDupe2 {
   /* --- animation-duration = JS VAR --- */
-  animation-delay: 3s;
 }
 
 #GiftUserNameDupe3 {
   /* --- animation-duration = JS VAR --- */
-  animation-delay: 6s;
 }
 
 .scrollWrap {
   width: 100%;
 }
 
+.rightFadeWrap {
+  mask-image: linear-gradient(to right, black 75%, transparent 90%);
+}
+
+#RightFadeWrapInfoBox3 {
+
+}
+
 .fadeLeft {
   mask-image: linear-gradient(to right, transparent 0%, black 1ch);
 }
 
 #ScrollWrapGoal {
-  transform: translate(8%, -10%) scale(1);
+  transform: translate(1ch, 0%) scale(1);
 }
 
 .scrollWrapName {

timer.js

@@ -133,7 +133,7 @@ class TimerRenderer {
       if (this.scrollboxes[i].id == 'ScrollWrapGoal') {
 
         // Check if element text overflows
-        if (this.goal_name.getBoundingClientRect().width > (this.scrollboxes[i].getBoundingClientRect().width * .95) ) {
+        if (this.goal_name.getBoundingClientRect().width > (this.scrollboxes[i].getBoundingClientRect().width * .85) ) {
           // Toggle animation
           this.goal_name.classList.add("scrollAnim");
           this.goal_namedupe.classList.add("scrollAnim");
@@ -152,7 +152,7 @@ class TimerRenderer {
       } else {
 
         // Check if element text overflows
-        if (this.userboxes[i].getBoundingClientRect().width > (this.scrollboxes[i].getBoundingClientRect().width * .8) ) {
+        if (this.userboxes[i].getBoundingClientRect().width > (this.scrollboxes[i].getBoundingClientRect().width * .75) ) {
           // Toggle animation
           this.userboxes[i].classList.add("scrollAnim");
           this.userdupeboxes[i].classList.add("scrollAnim");
@@ -178,20 +178,20 @@ class TimerRenderer {
   reset() {
     this.timer.textContent = "00:00";
     this.goal_label.textContent = "Next Goal:";
-    this.goal_name.textContent = "The answer was..";
+    this.goal_name.textContent = "The answer is...";
-    this.goal_namedupe.textContent = "The answer was..";
+    this.goal_namedupe.textContent = "The answer is...";
     this.goal_progress.textContent = "0000/0000";
 
     this.topusers_label.textContent = "Leaderboard:";
     this.topusers_user1_num.textContent = "1";
-    this.topusers_user1_name.textContent = "Username_Very_Super_Long12";
+    this.topusers_user1_name.textContent = "Username4";
-    this.topusers_userdupe1_name.textContent = "Username_Very_Super_Long12";
+    this.topusers_userdupe1_name.textContent = "Username4";
     this.topusers_user2_num.textContent = "2";
     this.topusers_user2_name.textContent = "User";
     this.topusers_userdupe2_name.textContent = "User";
     this.topusers_user3_num.textContent = "3";
-    this.topusers_user3_name.textContent = "Username48";
+    this.topusers_user3_name.textContent = "Username_Very_Super_Long12";
-    this.topusers_userdupe3_name.textContent = "Username48";
+    this.topusers_userdupe3_name.textContent = "Username_Very_Super_Long12";
 
   }