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

Compare commits

base: CarmiCoven:70c0b3984c46c85902b6899e8d9420af844c95ab
Branches Tags
CarmiCoven:master CarmiCoven:v2-Prototyping HoloTech:master
...
compare: CarmiCoven:9544579ebed9f815c53911fbe0c3eb957849d96a
Branches Tags
CarmiCoven:v2-Prototyping CarmiCoven:master HoloTech:master

3 Commits
70c0b3984c ... 9544579ebe

Author SHA1 Message Date
RolimirKal
9544579ebe Quick-push checkpoint 
- messy, under renovations

- IDs for important content (timer, goal progress, username elements) should be final
 2025-10-31 07:34:08 -04:00
RolimirKal
f8bce7a50c 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
 2025-10-31 05:48:40 -04:00
RolimirKal
b1fb0299d2 v2-Init 
Create branch and rollback point for v2 prototyping
 2025-10-31 04:15:21 -04:00
2 changed files with 125 additions and 87 deletions
Expand all files Collapse all files

94
index.html
View File

@@ -8,59 +8,63 @@
<link href='https://fonts.googleapis.com/css?family=Inter' rel='stylesheet'> <link href='https://fonts.googleapis.com/css?family=Inter' rel='stylesheet'>
<link rel="stylesheet" href="timer.css" /> <link rel="stylesheet" href="timer.css" />
<script src="timer.js"></script> <script src="timer.js"></script>
<title>Lilac Timer</title> <title>v2 onefont</title>
</head> </head>
<body> <body>
<main> <main>
<div class='contentContainer'> <div class='contentContainer'>
<img id='MainHeart' src='src/youve_got_mail_whiteheart.png'> <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> 00:00
<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> </p>
</div> </div>
<div class='giftUserRow' id='GiftUserRow2'> <div class='infoBox' id='InfoBox2'>
<p class='giftUserNum' id='GiftUserNum2'> <h2 id='GoalLabel'>
2. Next Goal:
</p> </h2>
<p class='giftUserName'id='GiftUserName2'> <h3 id='GoalName'>
Usernamethatisverylong Discord Watch Party + Puzzles
</p> </h3>
<div id='GoalProgressWrap'>
<p id='GoalProgress'>
0000/0000 Points
</p>
</div>
</div> </div>
<div class='giftUserRow' id='GiftUserRow3'> <div class='infoBox' id='InfoBox3'>
<p class='giftUserNum' id='GiftUserNum3'> <h2 id='TopUsers'>
3. Top 3:
</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> </div>
</div> </div>

118
timer.css
View File

@@ -18,41 +18,36 @@ html, body {
} }
main { main {
font-family: "VT323", monospace; font-family: "Silkscreen", sans-serif;
font-weight: 400; font-weight: 400;
font-style: normal; font-style: normal;
font-size: 1em;
color: #EA4045; color: #EA4045;
height: 100%; height: 100%;
} }
h1 { h1 {
margin: 0; margin: 0;
font-size: 68cqh; font-size: 3.4em;
color: #404145; color: #404145;
font-weight: normal;
} }
h2 { h2 {
margin: 0; margin: 0;
font-size: 40cqh; font-size: 1.4em;
color: #404145; color: #404145;
} }
h3 { h3 {
font-family: "Silkscreen", sans-serif;
font-weight: 400;
font-style: normal;
margin: 0; margin: 0;
font-size: 16cqh; font-size: 1em;
color: #404145; color: #404145;
font-weight: normal;
} }
p { p {
margin: 0; margin: 0;
font-family: "Silkscreen", sans-serif; font-size: 1em;
font-weight: 400;
font-style: normal;
font-size: 20cqh;
} }
.contentContainer { .contentContainer {
@@ -67,7 +62,7 @@ p {
max-width: 100vw; max-width: 100vw;
} }
.infoGroup { .infoWrap {
container-type: size; container-type: size;
height: 100%; height: 100%;
width: 100%; width: 100%;
@@ -76,77 +71,116 @@ p {
top: 0px; top: 0px;
display: grid; display: grid;
grid-template-columns: 56% 34% 1fr; grid-template-columns: 56% 34% 1fr;
/*
grid-template-rows: 11% 28% 16% 16% 1fr; grid-template-rows: 11% 28% 16% 16% 1fr;
*/
grid-template-rows: 11% 1fr 29%;
place-items: center; 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;
}
#InfoBox1 {
width: 100%; width: 100%;
grid-column-start: 2; grid-column-start: 2;
grid-column-end: 2; grid-column-end: 2;
grid-row-start: 2; grid-row-start: 2;
grid-row-end: 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; justify-self: left;
align-self: stretch; align-self: stretch;
*/
/*
transform: translate(-8%, 5%); transform: translate(-8%, 5%);
*/
} }
#InfoBox2 { #InfoBox2 {
/*
display: grid; display: grid;
width: 100%; width: 100%;
grid-column-start: 2;
grid-column-end: 2;
grid-row-start: 3;
grid-row-end: 3;
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-column-start: 2;
grid-column-end: 2;
grid-row-start: 4;
grid-row-end: 4;
grid-template-columns: 1fr; grid-template-columns: 1fr;
grid-template-rows: 1fr 23% 23% 23%; grid-template-rows: 1fr 23% 23% 23%;
/*
justify-self: left; justify-self: left;
align-self: stretch; align-self: stretch;
transform: translate(0%, -32%); transform: translate(0%, -32%);
*/
}
#Timer {
transform: translate(-9%, 3%) scale(.95, 1.2);
} }
#TimerInfo { #TimerInfo {
transform: translate(0%, -175%); transform: translate(0%, -60%);
font-size: 9cqh; font-size: 1em;
display: none;
} }
#GoalLabel { #GoalLabel {
transform: translate(0%, -20%); transform: translate(5%, 0%) scale(1.05, 1.2);
} }
#GoalName { #GoalName {
width: 85%; width: 95%;
transform: translate(10%, -110%); 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 {
transform: translate(0%, -75%); width: fit-content;
border-radius: 8cqh; padding-left: .5cqh;
border: 2cqh solid; padding-right: .5cqh;
transform: translate(6%, 0%) scale(1, 1.2);
border-radius: 3cqh;
border: .4cqh solid;
border-color: #404145; border-color: #404145;
font-size: .9em;
text-align: center;
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 {
@@ -158,7 +192,7 @@ p {
overflow: hidden; overflow: hidden;
text-align: left; text-align: left;
justify-self: left; justify-self: left;
transform: translate(18%, 0%); transform: translate(0%, 0%);
} }
.giftUserName { .giftUserName {