CarmiCoven/subathon-timer
2
0
Fork 0
forked from HoloTech/twitch-subathon-timer
Code Pull Requests Activity

Quick-push checkpoint

Browse Source 
- messy, under renovations

- IDs for important content (timer, goal progress, username elements) should be final
This commit is contained in:
RolimirKal
2025-10-31 07:34:08 -04:00
parent f8bce7a50c
commit 9544579ebe
2 changed files with 33 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
index.html
View File

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

38
timer.css
View File

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