Quick-push checkpoint

- messy, under renovations

- IDs for important content (timer, goal progress, username elements) should be final

index.html

@@ -18,7 +18,7 @@
           <div class='infoGroup'>
             <div class='infoBox' id='InfoBox1'>
               <h1 id='Timer'>
-                24:16
+                00:00
               </h1>
               <p id='TimerInfo'>
                 !subathon for details
@@ -26,18 +26,20 @@
             </div>
             <div class='infoBox' id='InfoBox2'>
               <h2 id='GoalLabel'>
-                Current Goal:
+                Next Goal:
               </h2>
               <h3 id='GoalName'>
                 Discord Watch Party + Puzzles
               </h3>
-              <p id='GoalProgress'>
-                1/25 Points
-              </p>
+              <div id='GoalProgressWrap'>
+                <p id='GoalProgress'>
+                  0000/0000 Points
+                </p>
+              </div>
             </div>
             <div class='infoBox' id='InfoBox3'>
               <h2 id='TopUsers'>
-                Top 3 Gifters:
+                Top 3:
               </h2>
               <div class='giftUserRow' id='GiftUserRow1'>
                 <p class='giftUserNum' id='GiftUserNum1'>

timer.css

@@ -27,14 +27,14 @@ main {
 
 h1 {
   margin: 0;
-  font-size: 3.6em;
+  font-size: 3.4em;
   color: #404145;
   font-weight: normal;
 }
 
 h2 {
   margin: 0;
-  font-size: 1em;
+  font-size: 1.4em;
   color: #404145;
 }
 
@@ -99,10 +99,10 @@ p {
   place-items: center;
   */
   font-size: 4cqh;
-  overflow: hidden;
 }
 
 #InfoBox1 {
+  margin-top: 4cqh;
   /*
   justify-self: left;
   align-self: stretch;
@@ -118,12 +118,11 @@ p {
   width: 100%;
   justify-self: left;
   align-self: stretch;
-  transform: translate(6%, -24%);
   */
+  transform: translate(0%, -12%);
 }
 
 #InfoBox3 {
-  width: 100%;
   grid-template-columns: 1fr;
   grid-template-rows: 1fr 23% 23% 23%;
   /*
@@ -134,9 +133,7 @@ p {
 }
 
 #Timer {
-  /*
-  transform: translate(3%, 0%);
-  */
+  transform: translate(-9%, 3%) scale(.95, 1.2);
 }
 
 #TimerInfo {
@@ -146,23 +143,23 @@ p {
 }
 
 #GoalLabel {
-  transform: translate(0%, 0%);
+  transform: translate(5%, 0%) scale(1.05, 1.2);
 }
 
 #GoalName {
-  width: 85%;
-  transform: translate(0%, 0%);
+  width: 95%;
+  transform: translate(8%, -10%) scale(1, 1.4);
   color: #32B993;
   text-wrap: nowrap;
   overflow: hidden;
   mask-image: linear-gradient(to right, black 70%, transparent 100%);
 }
 
-#GoalProgress {
+#GoalProgressWrap {
   width: fit-content;
   padding-left: .5cqh;
   padding-right: .5cqh;
-  transform: translate(0%, 0%);
+  transform: translate(6%, 0%) scale(1, 1.2);
   border-radius: 3cqh;
   border: .4cqh solid;
   border-color: #404145;
@@ -171,6 +168,21 @@ p {
   margin: 0 auto 0 auto;
 }
 
+#GoalProgress {
+  /*
+  width: fit-content;
+  padding-left: .5cqh;
+  padding-right: .5cqh;
+  transform: translate(6%, 0%) scale(1, 1.2);
+  border-radius: 3cqh;
+  border: .4cqh solid;
+  border-color: #404145;
+  font-size: .9em;
+  text-align: center;
+  margin: 0 auto 0 auto;
+  */
+}
+
 .giftUserRow {
   width: 100%;
   display: grid;