Scaling method and structure refactor

- Unify scaling method based on image height instead of individual elements for better iteration control.

- Restructure layout method to reduce reliance on manual grid definitions, remove unnecessary grid blocks, and improve dynamic layout for simpler iteration

- Breaks layout, needs new polish pass

index.html

@@ -14,53 +14,55 @@
     <main>
       <div class='contentContainer'>
         <img id='MainHeart' src='src/youve_got_mail_whiteheart.png'>
-        <div class='infoGroup'>
+        <div class='infoWrap'>
-          <div class='infoBox' id='InfoBox1'>
+          <div class='infoGroup'>
-            <h1 id='Timer'>
+            <div class='infoBox' id='InfoBox1'>
-              24:16
+              <h1 id='Timer'>
-            </h1>
+                24:16
-            <p id='TimerInfo'>
+              </h1>
-              !subathon for details
+              <p id='TimerInfo'>
-            </p>
+                !subathon for details
-          </div>
-          <div class='infoBox' id='InfoBox2'>
-            <h2 id='GoalLabel'>
-              Current Goal:
-            </h2>
-            <h3 id='GoalName'>
-              Discord Watch Party + Puzzles
-            </h3>
-            <p id='GoalProgress'>
-              1524/3000 Points
-            </p>
-          </div>
-          <div class='infoBox' id='InfoBox3'>
-            <h2 id='TopUsers'>
-              Top 3 Gifters:
-            </h2>
-            <div class='giftUserRow' id='GiftUserRow1'>
-              <p class='giftUserNum' id='GiftUserNum1'>
-                1.
-              </p>
-              <p class='giftUserName'id='GiftUserName1'>
-                Usernamethatisverylong
               </p>
             </div>
-            <div class='giftUserRow' id='GiftUserRow2'>
+            <div class='infoBox' id='InfoBox2'>
-              <p class='giftUserNum' id='GiftUserNum2'>
+              <h2 id='GoalLabel'>
-                2.
+                Current Goal:
-              </p>
+              </h2>
-              <p class='giftUserName'id='GiftUserName2'>
+              <h3 id='GoalName'>
-                Usernamethatisverylong
+                Discord Watch Party + Puzzles
+              </h3>
+              <p id='GoalProgress'>
+                1/25 Points
               </p>
             </div>
-            <div class='giftUserRow' id='GiftUserRow3'>
+            <div class='infoBox' id='InfoBox3'>
-              <p class='giftUserNum' id='GiftUserNum3'>
+              <h2 id='TopUsers'>
-                3.
+                Top 3 Gifters:
-              </p>
+              </h2>
-              <p class='giftUserName'id='GiftUserName3'>
+              <div class='giftUserRow' id='GiftUserRow1'>
-                Usernamethatisverylong
+                <p class='giftUserNum' id='GiftUserNum1'>
-              </p>
+                  1.
+                </p>
+                <p class='giftUserName'id='GiftUserName1'>
+                  Usernamethatisverylong
+                </p>
+              </div>
+              <div class='giftUserRow' id='GiftUserRow2'>
+                <p class='giftUserNum' id='GiftUserNum2'>
+                  2.
+                </p>
+                <p class='giftUserName'id='GiftUserName2'>
+                  Usernamethatisverylong
+                </p>
+              </div>
+              <div class='giftUserRow' id='GiftUserRow3'>
+                <p class='giftUserNum' id='GiftUserNum3'>
+                  3.
+                </p>
+                <p class='giftUserName'id='GiftUserName3'>
+                  Usernamethatisverylong
+                </p>
+              </div>
             </div>
           </div>
         </div>

timer.css

@@ -27,27 +27,27 @@ main {
 
 h1 {
   margin: 0;
-  font-size: 68cqh;
+  font-size: 3.6em;
   color: #404145;
   font-weight: normal;
-  font-style: normal;
 }
 
 h2 {
   margin: 0;
-  font-size: 40cqh;
+  font-size: 1em;
   color: #404145;
 }
 
 h3 {
   margin: 0;
-  font-size: 16cqh;
+  font-size: 1em;
   color: #404145;
+  font-weight: normal;
 }
 
 p {
   margin: 0;
-  font-size: 20cqh;
+  font-size: 1em;
 }
 
  .contentContainer {
@@ -62,7 +62,7 @@ p {
   max-width: 100vw;
  }
 
-.infoGroup {
+.infoWrap {
   container-type: size;
   height: 100%;
   width: 100%;
@@ -71,67 +71,87 @@ p {
   top: 0px;
   display: grid;
   grid-template-columns: 56% 34% 1fr;
+  /*
   grid-template-rows: 11% 28% 16% 16% 1fr;
+  */
+  grid-template-rows: 11% 1fr 29%;
   place-items: center;
+  text-wrap: nowrap;
 }
 
-.infoBox {
+.infoGroup {
-  container-type: size;
+  display: block;
-  display: grid;
+  height: 100%;
-  grid-template-columns: repeat(1, 1fr);
-  grid-auto-rows: auto;
-  place-items: center;
-  font-size: 10cqh;
-}
-
-#InfoBox1 {
   width: 100%;
   grid-column-start: 2;
   grid-column-end: 2;
   grid-row-start: 2;
   grid-row-end: 2;
+}
+
+.infoBox {
+  height: auto;
+  width: 100%;
+  /*
+  display: grid;
+  grid-template-columns: repeat(1, 1fr);
+  grid-auto-rows: auto;
+  place-items: center;
+  */
+  font-size: 4cqh;
+  overflow: hidden;
+}
+
+#InfoBox1 {
+  /*
   justify-self: left;
   align-self: stretch;
+  */
+  /*
   transform: translate(-8%, 5%);
+  */
 }
 
 #InfoBox2 {
+  /*
   display: grid;
   width: 100%;
-  grid-column-start: 2;
-  grid-column-end: 2;
-  grid-row-start: 3;
-  grid-row-end: 3;
   justify-self: left;
   align-self: stretch;
   transform: translate(6%, -24%);
+  */
 }
 
 #InfoBox3 {
   width: 100%;
-  grid-column-start: 2;
-  grid-column-end: 2;
-  grid-row-start: 4;
-  grid-row-end: 4;
   grid-template-columns: 1fr;
   grid-template-rows: 1fr 23% 23% 23%;
+  /*
   justify-self: left;
   align-self: stretch;
   transform: translate(0%, -32%);
+  */
+}
+
+#Timer {
+  /*
+  transform: translate(3%, 0%);
+  */
 }
 
 #TimerInfo {
-  transform: translate(0%, -175%);
+  transform: translate(0%, -60%);
-  font-size: 9cqh;
+  font-size: 1em;
+  display: none;
 }
 
 #GoalLabel {
-  transform: translate(0%, -20%);
+  transform: translate(0%, 0%);
 }
 
 #GoalName {
   width: 85%;
-  transform: translate(10%, -110%);
+  transform: translate(0%, 0%);
   color: #32B993;
   text-wrap: nowrap;
   overflow: hidden;
@@ -139,10 +159,16 @@ p {
 }
 
 #GoalProgress {
-  transform: translate(0%, -75%);
+  width: fit-content;
-  border-radius: 8cqh;
+  padding-left: .5cqh;
-  border: 2cqh solid;
+  padding-right: .5cqh;
+  transform: translate(0%, 0%);
+  border-radius: 3cqh;
+  border: .4cqh solid;
   border-color: #404145;
+  font-size: .9em;
+  text-align: center;
+  margin: 0 auto 0 auto;
 }
 
 .giftUserRow {
@@ -154,7 +180,7 @@ p {
   overflow: hidden;
   text-align: left;
   justify-self: left;
-  transform: translate(18%, 0%);
+  transform: translate(0%, 0%);
 }
 
 .giftUserName {