diff --git a/index.html b/index.html index bea8c03..d9b539f 100644 --- a/index.html +++ b/index.html @@ -2,16 +2,69 @@ - + + + + Lilac Timer -
-
- 00:00 +
+
+ +
+
+

+ 24:16 +

+

+ !subathon for details +

+
+
+

+ Current Goal: +

+

+ Discord Watch Party + Puzzles +

+

+ 1524/3000 Points +

+
+
+

+ Top 3 Gifters: +

+
+

+ 1. +

+

+ Usernamethatisverylong +

+
+
+

+ 2. +

+

+ Usernamethatisverylong +

+
+
+

+ 3. +

+

+ Usernamethatisverylong +

+
+
-
+
+ - + \ No newline at end of file diff --git a/src/youve_got_mail_screenheart.png b/src/youve_got_mail_screenheart.png new file mode 100644 index 0000000..435c845 Binary files /dev/null and b/src/youve_got_mail_screenheart.png differ diff --git a/src/youve_got_mail_whiteheart.png b/src/youve_got_mail_whiteheart.png new file mode 100644 index 0000000..b6a7c50 Binary files /dev/null and b/src/youve_got_mail_whiteheart.png differ diff --git a/timer.css b/timer.css index 859fe63..3e89d3d 100644 --- a/timer.css +++ b/timer.css @@ -4,33 +4,177 @@ --background-color: transparent; } +* { + box-sizing: border-box; +} + html, body { height: 100%; margin: 0; padding: 0; - font-family: 'VT323', sans-serif; + font-family: 'Inter', sans-serif; background-color: var(--background-color); overflow: hidden; } - -.timer-box { - height: 175px; - width: 397px; - padding: 5px; -} - -.timer-time { - font-size: clamp(6rem, 22vw, 16rem); +main { + font-family: "VT323", monospace; font-weight: 400; - color: var(--time-color); - line-height: 1; + font-style: normal; + font-size: 1em; + color: #EA4045; + height: 100%; } -.timer-details { - display: fill; - font-weight: 600; - color: var(--details-color); - font-size: 16px; - overflow-wrap: break-word; +h1 { + margin: 0; + font-size: 68cqh; + color: #404145; } + +h2 { + margin: 0; + font-size: 40cqh; + color: #404145; +} + +h3 { + font-family: "Silkscreen", sans-serif; + font-weight: 400; + font-style: normal; + margin: 0; + font-size: 16cqh; + color: #404145; +} + +p { + margin: 0; + font-family: "Silkscreen", sans-serif; + font-weight: 400; + font-style: normal; + font-size: 20cqh; +} + + .contentContainer { + height: fit-content; + width: fit-content; + position: relative; + text-align: center; + } + + #MainHeart { + max-height: 100vh; + max-width: 100vw; + } + +.infoGroup { + 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; + place-items: center; +} + +.infoBox { + container-type: size; + display: grid; + grid-template-columns: repeat(1, 1fr); + grid-auto-rows: auto; + place-items: center; +} + +#InfoBox1 { + width: 100%; + grid-column-start: 2; + grid-column-end: 2; + grid-row-start: 2; + grid-row-end: 2; + 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%); +} + +#TimerInfo { + transform: translate(0%, -175%); + font-size: 9cqh; +} + +#GoalLabel { + transform: translate(0%, -20%); +} + +#GoalName { + width: 85%; + transform: translate(10%, -110%); + color: #32B993; + text-wrap: nowrap; + overflow: hidden; + mask-image: linear-gradient(to right, black 70%, transparent 100%); +} + +#GoalProgress { + transform: translate(0%, -75%); + border-radius: 8cqh; + border: 2cqh solid; + border-color: #404145; +} + +.giftUserRow { + width: 100%; + display: grid; + grid-template-columns: 10% 1fr; + grid-template-rows: 1fr; + text-wrap: nowrap; + overflow: hidden; + text-align: left; + justify-self: left; + transform: translate(18%, 0%); +} + +.giftUserName { + margin-left: 0%; + color: #32B993; +} + +#GiftUserName1 { + width: 54%; + mask-image: linear-gradient(to right, black 70%, transparent 100%); +} +#GiftUserName2 { + width: 46%; + mask-image: linear-gradient(to right, black 70%, transparent 100%); +} +#GiftUserName3 { + width: 38%; + mask-image: linear-gradient(to right, black 70%, transparent 100%); +} \ No newline at end of file