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

Completed v2

Browse Source 
- aligned elements to graphic

- minimized wasted space (lots of small manual adjustments)

- extra wrappers for better formatting

- tested various text lengths to ensure static elements sizing
This commit is contained in:
RolimirKal
2025-10-31 10:43:14 -04:00
parent 9544579ebe
commit 31bc26c72f
2 changed files with 58 additions and 51 deletions
Download Patch File Download Diff File Expand all files Collapse all files

52
index.html
View File

@@ -33,37 +33,39 @@
</h3>
<div id='GoalProgressWrap'>
<p id='GoalProgress'>
0000/0000 Points
1234/5678
</p>
</div>
</div>
<div class='infoBox' id='InfoBox3'>
<h2 id='TopUsers'>
Top 3:
Leaderboard
</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
</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>

57
timer.css
View File

@@ -125,6 +125,7 @@ p {
#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;
@@ -147,68 +148,72 @@ p {
}
#GoalName {
width: 95%;
width: 100%;
transform: translate(8%, -10%) scale(1, 1.4);
color: #32B993;
text-wrap: nowrap;
overflow: hidden;
mask-image: linear-gradient(to right, black 70%, transparent 100%);
mask-image: linear-gradient(to right, black 85%, transparent 100%);
}
#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;
}
#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, 1.4);
font-size: 1.3em;
text-align: center;
margin: 0 auto 0 auto;
*/
font-weight: bold;
}
#TopUsers {
transform: translate(6%, 0%) scale(1.2, 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: 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.2);
font-size: 1.4em;
line-height: 90%;
}
.giftUserName {
margin-left: 0%;
color: #32B993;
text-align: left;
}
#GiftUserName1 {
width: 54%;
mask-image: linear-gradient(to right, black 70%, transparent 100%);
width: 24cqw;
mask-image: linear-gradient(to right, black 85%, transparent 100%);
}
#GiftUserName2 {
width: 46%;
mask-image: linear-gradient(to right, black 70%, transparent 100%);
width: 20cqw;
mask-image: linear-gradient(to right, black 75%, transparent 100%);
}
#GiftUserName3 {
width: 38%;
mask-image: linear-gradient(to right, black 70%, transparent 100%);
width: 14cqw;
mask-image: linear-gradient(to right, black 60%, transparent 100%);
}