Completed v3

- layout change, reorganized elements and duplicated graphic to avoid using z-index which did not function in OBS browser sources - DO NOT REMOVE DUPLICATE HEART GRAPHIC - - animation!!! + more wrappers to split up static vs dynamic effects - temp legacy versions for easier comparisons (no-bold and uniform-font html+css) - js content tweaks to maintain parity with layout template
Merge branch 'v2-Prototyping' of https://git.thewisewolf.dev/CarmiCoven/subathon-timer into v2-Prototyping
2025-10-31 18:50:34 -04:00 · 2025-10-31 11:06:37 -04:00 · 2025-10-31 10:43:14 -04:00
7 changed files with 764 additions and 116 deletions
--- a/index.html
+++ b/index.html
@@ -13,9 +13,53 @@
  <body>
    <main>
      <div class='contentContainer'>
-        <img id='MainHeart' src='src/youve_got_mail_whiteheart.png'>
+        <img class='mainHeart' src='src/youve_got_mail_whiteheart.png'>
        <div class='infoWrap'>
          <div class='infoGroup'>
+            <div class='infoBox' id='InfoBox3'>
+              <p id='TopUsers'>
+                Leaderboard:
+              </p>
+              <div class='giftUserWrap'>
+                <div class='giftUserRow' id='GiftUserRow1'>
+                  <p class='giftUserNum' id='GiftUserNum1'>
+                    1
+                  </p>
+                  <div class='scrollWrap' id='ScrollWrapName1'>
+                    <div class='scrollWrapW' id='ScrollWrapNameW1'>
+                      <p class='giftUserName'id='GiftUserName1'>
+                        Usernamethatisverylong
+                      </p>
+                    </div>
+                  </div>
+                </div>
+                <div class='giftUserRow' id='GiftUserRow2'>
+                  <p class='giftUserNum' id='GiftUserNum2'>
+                    2
+                  </p>
+                  <div class='scrollWrap' id='ScrollWrapName2'>
+                    <div class='scrollWrapW' id='ScrollWrapNameW2'>
+                      <p class='giftUserName'id='GiftUserName2'>
+                        Usernamethatisverylong
+                      </p>
+                    </div>
+                  </div>
+                </div>
+                <div class='giftUserRow' id='GiftUserRow3'>
+                  <p class='giftUserNum' id='GiftUserNum3'>
+                    3
+                  </p>
+                  <div class='scrollWrap' id='ScrollWrapName3'>
+                    <div class='scrollWrapW' id='ScrollWrapNameW3'>
+                      <p class='giftUserName'id='GiftUserName3'>
+                        Usernamethatisverylong
+                      </p>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+            <img class='mainHeart' id='SecondHeart' src='src/youve_got_mail_whiteheart.png'>
            <div class='infoBox' id='InfoBox1'>
              <h1 id='Timer'>
                00:00
@@ -25,44 +69,19 @@
              </p>
            </div>
            <div class='infoBox' id='InfoBox2'>
-              <h2 id='GoalLabel'>
+              <p id='GoalLabel'>
                Next Goal:
-              </h2>
-              <h3 id='GoalName'>
+              </p>
+              <div class='scrollWrap' id='ScrollWrapGoal'>
+                <div class='scrollWrapW' id='ScrollWrapGoalW'>
+                  <p id='GoalName'>
                    Discord Watch Party + Puzzles
-              </h3>
+                  </p>
+                </div>
+              </div>
              <div id='GoalProgressWrap'>
                <p id='GoalProgress'>
-                  0000/0000 Points
-                </p>
-              </div>
-            </div>
-            <div class='infoBox' id='InfoBox3'>
-              <h2 id='TopUsers'>
-                Top 3:
-              </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'>
-                <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
+                  1234/5678
                </p>
              </div>
            </div>
--- a/no-bold.css
+++ b/no-bold.css
@@ -0,0 +1,222 @@
+:root {
+  --time-color: #453960;
+  --details-color: #403060;
+  --background-color: transparent;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+html, body {
+  height: 100%;
+  margin: 0;
+  padding: 0;
+  font-family: 'Inter', sans-serif;
+  background-color: var(--background-color);
+  overflow: hidden;
+}
+
+main {
+  font-family: "Silkscreen", sans-serif;
+  font-weight: 400;
+  font-style: normal;
+  color: #EA4045;
+  height: 100%;
+}
+
+h1 {
+  margin: 0;
+  font-size: 3.4em;
+  color: #404145;
+  font-weight: normal;
+}
+
+h2 {
+  margin: 0;
+  font-size: 1.4em;
+  color: #404145;
+  font-weight: normal;
+}
+
+h3 {
+  margin: 0;
+  font-size: 1em;
+  color: #404145;
+  font-weight: normal;
+}
+
+p {
+  margin: 0;
+  font-size: 1em;
+}
+
+ .contentContainer {
+  height: fit-content;
+  width: fit-content;
+  position: relative;
+  text-align: center;
+ }
+
+ #MainHeart {
+  max-height: 100vh;
+  max-width: 100vw;
+ }
+
+.infoWrap {
+  container-type: size;
+  height: 100%;
+  width: 100%;
+  position: absolute;
+  left: 0px;
+  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;
+}
+
+.infoGroup {
+  display: block;
+  height: 100%;
+  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;
+}
+
+#InfoBox1 {
+  margin-top: 4cqh;
+  /*
+  justify-self: left;
+  align-self: stretch;
+  */
+  /*
+  transform: translate(-8%, 5%);
+  */
+}
+
+#InfoBox2 {
+  /*
+  display: grid;
+  width: 100%;
+  justify-self: left;
+  align-self: stretch;
+  */
+  transform: translate(0%, -12%);
+}
+
+#InfoBox3 {
+  grid-template-columns: 1fr;
+  grid-template-rows: 1fr 23% 23% 23%;
+  transform: translate(0%, -16%) scale(1, 1);
+  /*
+  justify-self: left;
+  align-self: stretch;
+  transform: translate(0%, -32%);
+  */
+}
+
+#Timer {
+  transform: translate(-9%, 3%) scale(.95, 1.2);
+}
+
+#TimerInfo {
+  transform: translate(0%, -60%);
+  font-size: 1em;
+  display: none;
+}
+
+#GoalLabel {
+  transform: translate(5%, 0%) scale(1.05, 1.2);
+}
+
+#GoalName {
+  width: 100%;
+  transform: translate(8%, -10%) scale(1, 1.4);
+  color: #32B993;
+  text-wrap: nowrap;
+  overflow: hidden;
+  mask-image: linear-gradient(to right, black 85%, transparent 100%);
+}
+
+#GoalProgressWrap {
+  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 0 auto;
+}
+
+#GoalProgress {
+  transform: translate(0%, -8%) scale(1, 1.4);
+  font-size: 1.3em;
+  text-align: center;
+  /*
+  font-weight: bold;
+  */
+}
+
+#TopUsers {
+  transform: translate(6%, 0%) scale(1.15, 1.2);
+  font-weight: normal;
+  font-size: 1.1em;
+}
+
+.giftUserWrap {
+  transform: translate(18%, -8%) scale(1, 1);
+}
+
+.giftUserRow {
+  width: 100%;
+  display: grid;
+  grid-template-columns: 8% 1fr;
+  grid-template-rows: 1fr;
+  text-wrap: nowrap;
+  overflow: hidden;
+  text-align: left;
+  justify-self: left;
+  text-align: center;
+  transform: translate(0%, 0%) scale(1, 1.2);
+  font-size: 1.4em;
+  line-height: 90%;
+}
+
+.giftUserName {
+  margin-left: 0%;
+  color: #32B993;
+  text-align: left;
+}
+
+#GiftUserName1 {
+  width: 24cqw;
+  mask-image: linear-gradient(to right, black 85%, transparent 100%);
+}
+#GiftUserName2 {
+  width: 20cqw;
+  mask-image: linear-gradient(to right, black 75%, transparent 100%);
+}
+#GiftUserName3 {
+  width: 14cqw;
+  mask-image: linear-gradient(to right, black 60%, transparent 100%);
+}
--- a/no-bold.html
+++ b/no-bold.html
@@ -0,0 +1,76 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Silkscreen:wght@400;700&family=VT323&display=swap" rel="stylesheet">
+    <link href='https://fonts.googleapis.com/css?family=Inter' rel='stylesheet'>
+    <link rel="stylesheet" href="no-bold.css" />
+    <script src="timer.js"></script>
+    <title>v2 onefont</title>
+  </head>
+  <body>
+    <main>
+      <div class='contentContainer'>
+        <img id='MainHeart' src='src/youve_got_mail_whiteheart.png'>
+        <div class='infoWrap'>
+          <div class='infoGroup'>
+            <div class='infoBox' id='InfoBox1'>
+              <h1 id='Timer'>
+                00:00
+              </h1>
+              <p id='TimerInfo'>
+                !subathon for details
+              </p>
+            </div>
+            <div class='infoBox' id='InfoBox2'>
+              <h2 id='GoalLabel'>
+                Next Goal:
+              </h2>
+              <h3 id='GoalName'>
+                Discord Watch Party + Puzzles
+              </h3>
+              <div id='GoalProgressWrap'>
+                <p id='GoalProgress'>
+                  1234/5678
+                </p>
+              </div>
+            </div>
+            <div class='infoBox' id='InfoBox3'>
+              <h2 id='TopUsers'>
+                Leaderboard:
+              </h2>
+              <div class='giftUserWrap'>
+                <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'>
+                  <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>
+        </div>
+      </div>
+    </main>
+  </body>
+</html>
--- a/timer.css
+++ b/timer.css
@@ -14,6 +14,7 @@ html, body {
  padding: 0;
  font-family: 'Inter', sans-serif;
  background-color: var(--background-color);
+  background-color: transparent;
  overflow: hidden;
 }

@@ -36,6 +37,7 @@ h2 {
  margin: 0;
  font-size: 1.4em;
  color: #404145;
+  font-weight: normal;
 }

 h3 {
@@ -47,7 +49,8 @@ h3 {

 p {
  margin: 0;
-  font-size: 1em;
+  font-size: 1.4em;
+  line-height: 95%;
 }

 .contentContainer {
@@ -57,9 +60,15 @@ p {
  text-align: center;
 }

- #MainHeart {
+.mainHeart {
  max-height: 100vh;
-  max-width: 100vw;
+  max-width: 75vw;
+ }
+
+ #SecondHeart {
+  position: absolute;
+  top: 0px;
+  left: 0px;
 }

 .infoWrap {
@@ -71,16 +80,12 @@ 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;
 }

 .infoGroup {
-  display: block;
  height: 100%;
  width: 100%;
  grid-column-start: 2;
@@ -92,123 +97,132 @@ p {
 .infoBox {
  height: auto;
  width: 100%;
-  /*
-  display: grid;
-  grid-template-columns: repeat(1, 1fr);
-  grid-auto-rows: auto;
-  place-items: center;
-  */
  font-size: 4cqh;
+  transform: translate(12%, -68%);
 }

 #InfoBox1 {
-  margin-top: 4cqh;
-  /*
-  justify-self: left;
-  align-self: stretch;
-  */
-  /*
-  transform: translate(-8%, 5%);
-  */
 }

 #InfoBox2 {
-  /*
-  display: grid;
-  width: 100%;
-  justify-self: left;
-  align-self: stretch;
-  */
-  transform: translate(0%, -12%);
+  transform: translate(-1%, -88%);
 }

 #InfoBox3 {
-  grid-template-columns: 1fr;
-  grid-template-rows: 1fr 23% 23% 23%;
-  /*
-  justify-self: left;
-  align-self: stretch;
-  transform: translate(0%, -32%);
-  */
+  width: 110%;
+  position: relative;
+  transform: translate(88%, 25%) scale(1, 1);
+  border-radius: 3cqh;
+  border: .4cqh solid;
+  border-color: #00A0F3;
+  background-color: white;
+
 }

 #Timer {
-  transform: translate(-9%, 3%) scale(.95, 1.2);
+  margin-top: 10%;
+  margin-bottom: 2%;
+  transform: translate(-7.5%, 3%) scale(.95, 1.2);
 }

 #TimerInfo {
  transform: translate(0%, -60%);
-  font-size: 1em;
  display: none;
 }

 #GoalLabel {
-  transform: translate(5%, 0%) scale(1.05, 1.2);
+  transform: translate(5%, 0%) scale(1);
+  color: #404145;
 }

 #GoalName {
-  width: 95%;
-  transform: translate(8%, -10%) scale(1, 1.4);
+  width: fit-content;
+  position: relative;
  color: #32B993;
  text-wrap: nowrap;
-  overflow: hidden;
-  mask-image: linear-gradient(to right, black 70%, transparent 100%);
+  animation: myScroll 12s linear infinite;
 }

 #GoalProgressWrap {
  width: fit-content;
-  padding-left: .5cqh;
-  padding-right: .5cqh;
-  transform: translate(6%, 0%) scale(1, 1.2);
+  padding-left: .8cqh;
+  padding-right: .8cqh;
+  transform: translate(7%, 0%) scale(1, 1);
  border-radius: 3cqh;
  border: .4cqh solid;
  border-color: #404145;
-  font-size: .9em;
-  text-align: center;
-  margin: 0 auto 0 auto;
+  margin: 0 auto .8cqh 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;
+  transform: translate(0%, -8%) scale(1);
  text-align: center;
-  margin: 0 auto 0 auto;
-  */
+}
+
+#TopUsers {
+  margin-bottom: 2%;
+  transform: translate(0%, 0%) scale(1);
+  font-weight: normal;
+  color: #404145;
+}
+
+.giftUserWrap {
+  transform: translate(11%, -8%) scale(1, 1);
 }

 .giftUserRow {
  width: 100%;
  display: grid;
-  grid-template-columns: 10% 1fr;
+  grid-template-columns: 8% 1fr;
  grid-template-rows: 1fr;
  text-wrap: nowrap;
  overflow: hidden;
-  text-align: left;
-  justify-self: left;
-  transform: translate(0%, 0%);
+  text-align: center;
+  transform: translate(0%, 0%) scale(1, 1);
 }

 .giftUserName {
+  width: fit-content;
  margin-left: 0%;
+  position: relative;
  color: #32B993;
+  text-align: left;
 }

 #GiftUserName1 {
-  width: 54%;
-  mask-image: linear-gradient(to right, black 70%, transparent 100%);
+  animation: myScroll 9s linear infinite;
 }
 #GiftUserName2 {
-  width: 46%;
-  mask-image: linear-gradient(to right, black 70%, transparent 100%);
+  animation: myScroll 9s 3s linear infinite;
 }
 #GiftUserName3 {
-  width: 38%;
-  mask-image: linear-gradient(to right, black 70%, transparent 100%);
+  animation: myScroll 9s 6s linear infinite;
+}
+
+.scrollWrap {
+  width: 100%;
+  mask-image: linear-gradient(to right, transparent 0%, black 5%, black 85%, transparent 100%);
+}
+
+#ScrollWrapGoal {
+  transform: translate(8%, -10%) scale(1);
+}
+
+.scrollWrapName {
+}
+
+.scrollWrapW {
+  width: fit-content;
+}
+
+#ScrollWrapGoalW {
+}
+
+@keyframes myScroll {
+  0% {left: 0%; top: 0%;}
+  10% {left: 0%; top: 0%;}
+  85% {left: -100%; top: 0%;}
+  89.99% {left: -100%; top: 0%;}
+  90% {left: 0%; top: 100%;}
+  100% {left: 0%; top: 0%;}
 }
--- a/timer.js
+++ b/timer.js
@@ -111,16 +111,16 @@ class TimerRenderer {
   */
  reset() {
    this.timer.textContent = "00:00";
-    this.goal_label.textContent = "Current Goal:";
+    this.goal_label.textContent = "Next Goal:";
    this.goal_name.textContent = "Be awesome";
-    this.goal_progress.textContent = "00/00 Points";
+    this.goal_progress.textContent = "00/00";

-    this.topusers_label.textContent = "Top 3 Gifters";
-    this.topusers_user1_num.textContent = "1.";
+    this.topusers_label.textContent = "Leaderboard:";
+    this.topusers_user1_num.textContent = "1";
    this.topusers_user1_name.textContent = "Anonymous";
-    this.topusers_user2_num.textContent = "2.";
+    this.topusers_user2_num.textContent = "2";
    this.topusers_user2_name.textContent = "Anonymous";
-    this.topusers_user3_num.textContent = "3.";
+    this.topusers_user3_num.textContent = "3";
    this.topusers_user3_name.textContent = "Anonymous";

  }
@@ -167,7 +167,7 @@ class TimerRenderer {
    this.goal_name.textContent = name;

    // Bitwise OR done to convert floats to integers if needed
-    this.goal_progress.textContent = String(current | 0) + '/' + String(required | 0) + ' Points'
+    this.goal_progress.textContent = String(current | 0) + '/' + String(required | 0)
  }

  /**
@@ -189,7 +189,7 @@ class TimerRenderer {
  render_users(users) {

    if (users.length >= 1) {
-      this.topusers_user1_num.textContent = "1.";
+      this.topusers_user1_num.textContent = "1";
      this.topusers_user1_name.textContent = users[0].user_name;
    } else {
      this.topusers_user1_num.textContent = "";
@@ -197,7 +197,7 @@ class TimerRenderer {
    }

    if (users.length >= 2) {
-      this.topusers_user2_num.textContent = "2.";
+      this.topusers_user2_num.textContent = "2";
      this.topusers_user2_name.textContent = users[1].user_name;
    } else {
      this.topusers_user2_num.textContent = "";
@@ -205,7 +205,7 @@ class TimerRenderer {
    }

    if (users.length >= 3) {
-      this.topusers_user3_num.textContent = "3.";
+      this.topusers_user3_num.textContent = "3";
      this.topusers_user3_name.textContent = users[2].user_name;
    } else {
      this.topusers_user3_num.textContent = "";
--- a/uniform-font.css
+++ b/uniform-font.css
@@ -0,0 +1,241 @@
+:root {
+  --time-color: #453960;
+  --details-color: #403060;
+  --background-color: transparent;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+html, body {
+  height: 100%;
+  margin: 0;
+  padding: 0;
+  font-family: 'Inter', sans-serif;
+  background-color: var(--background-color);
+  overflow: hidden;
+}
+
+main {
+  font-family: "Silkscreen", sans-serif;
+  font-weight: 400;
+  font-style: normal;
+  color: #EA4045;
+  height: 100%;
+}
+
+h1 {
+  margin: 0;
+  font-size: 3.4em;
+  color: #404145;
+  font-weight: normal;
+}
+
+h2 {
+  margin: 0;
+  font-size: 1.4em;
+  color: #404145;
+  font-weight: normal;
+}
+
+h3 {
+  margin: 0;
+  font-size: 1em;
+  color: #404145;
+  font-weight: normal;
+}
+
+p {
+  margin: 0;
+  font-size: 1.4em;
+  line-height: 95%;
+}
+
+ .contentContainer {
+  height: fit-content;
+  width: fit-content;
+  position: relative;
+  text-align: center;
+ }
+
+ #MainHeart {
+  max-height: 100vh;
+  max-width: 100vw;
+ }
+
+.infoWrap {
+  container-type: size;
+  height: 100%;
+  width: 100%;
+  position: absolute;
+  left: 0px;
+  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;
+}
+
+.infoGroup {
+  display: block;
+  height: 100%;
+  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;
+}
+
+#InfoBox1 {
+  /*
+  justify-self: left;
+  align-self: stretch;
+  */
+  /*
+  transform: translate(-8%, 5%);
+  */
+}
+
+#InfoBox2 {
+  /*
+  display: grid;
+  width: 100%;
+  justify-self: left;
+  align-self: stretch;
+  */
+  transform: translate(0%, -12%);
+}
+
+#InfoBox3 {
+  grid-template-columns: 1fr;
+  grid-template-rows: 1fr 23% 23% 23%;
+  transform: translate(0%, -16%) scale(1, 1);
+  /*
+  justify-self: left;
+  align-self: stretch;
+  transform: translate(0%, -32%);
+  */
+}
+
+#Timer {
+  margin-top: 10%;
+  transform: translate(-7.5%, 3%) scale(.95, 1.2);
+}
+
+#TimerInfo {
+  transform: translate(0%, -60%);
+  /* uni
+  font-size: 1em;
+  */
+  display: none;
+}
+
+#GoalLabel {
+  transform: translate(5%, 0%) scale(1);
+  color: #404145;
+}
+
+#GoalName {
+  width: 100%;
+  transform: translate(8%, -10%) scale(1);
+  color: #32B993;
+  text-wrap: nowrap;
+  overflow: hidden;
+  mask-image: linear-gradient(to right, black 85%, transparent 100%);
+}
+
+#GoalProgressWrap {
+  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;
+}
+
+#GoalProgress {
+  transform: translate(0%, -8%) scale(1);
+  /* uni
+  font-size: 1.3em;
+  */
+  text-align: center;
+  /*
+  font-weight: bold;
+  */
+}
+
+#TopUsers {
+  transform: translate(0%, 0%) scale(1);
+  font-weight: normal;
+  color: #404145;
+  /* uni
+  font-size: 1.1em;
+  */
+}
+
+.giftUserWrap {
+  transform: translate(18%, -8%) scale(1, 1);
+}
+
+.giftUserRow {
+  width: 100%;
+  display: grid;
+  grid-template-columns: 8% 1fr;
+  grid-template-rows: 1fr;
+  text-wrap: nowrap;
+  overflow: hidden;
+  text-align: left;
+  justify-self: left;
+  text-align: center;
+  transform: translate(0%, 0%) scale(1, 1);
+  /* uni
+  font-size: 1.4em;
+  */
+  /*
+  line-height: 95%;
+  */
+}
+
+.giftUserName {
+  margin-left: 0%;
+  color: #32B993;
+  text-align: left;
+  /*
+  background-color: blue;
+  */
+}
+
+#GiftUserName1 {
+  width: 23.5cqw;
+  mask-image: linear-gradient(to right, black 80%, transparent 100%);
+}
+#GiftUserName2 {
+  width: 21.5cqw;
+  mask-image: linear-gradient(to right, black 75%, transparent 100%);
+  /*
+  background-color: red;
+  */
+}
+#GiftUserName3 {
+  width: 18cqw;
+  mask-image: linear-gradient(to right, black 65%, transparent 100%);
+}
--- a/uniform-font.html
+++ b/uniform-font.html
@@ -0,0 +1,76 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Silkscreen:wght@400;700&family=VT323&display=swap" rel="stylesheet">
+    <link href='https://fonts.googleapis.com/css?family=Inter' rel='stylesheet'>
+    <link rel="stylesheet" href="uniform-font.css" />
+    <script src="timer.js"></script>
+    <title>v2 onefont</title>
+  </head>
+  <body>
+    <main>
+      <div class='contentContainer'>
+        <img id='MainHeart' src='src/youve_got_mail_whiteheart.png'>
+        <div class='infoWrap'>
+          <div class='infoGroup'>
+            <div class='infoBox' id='InfoBox1'>
+              <h1 id='Timer'>
+                00:00
+              </h1>
+              <p id='TimerInfo'>
+                !subathon for details
+              </p>
+            </div>
+            <div class='infoBox' id='InfoBox2'>
+              <p id='GoalLabel'>
+                Next Goal:
+              </p>
+              <p id='GoalName'>
+                Discord Watch Party + Puzzles
+              </p>
+              <div id='GoalProgressWrap'>
+                <p id='GoalProgress'>
+                  1234/5678
+                </p>
+              </div>
+            </div>
+            <div class='infoBox' id='InfoBox3'>
+              <p id='TopUsers'>
+                Leaderboard
+              </p>
+              <div class='giftUserWrap'>
+                <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'>
+                  <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>
+        </div>
+      </div>
+    </main>
+  </body>
+</html>