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> </h3>
<div id='GoalProgressWrap'> <div id='GoalProgressWrap'>
<p id='GoalProgress'> <p id='GoalProgress'>
0000/0000 Points 1234/5678
</p> </p>
</div> </div>
</div> </div>
<div class='infoBox' id='InfoBox3'> <div class='infoBox' id='InfoBox3'>
<h2 id='TopUsers'> <h2 id='TopUsers'>
Top 3: Leaderboard
</h2> </h2>
<div class='giftUserRow' id='GiftUserRow1'> <div class='giftUserWrap'>
<p class='giftUserNum' id='GiftUserNum1'> <div class='giftUserRow' id='GiftUserRow1'>
1. <p class='giftUserNum' id='GiftUserNum1'>
</p> 1
<p class='giftUserName'id='GiftUserName1'> </p>
Usernamethatisverylong <p class='giftUserName'id='GiftUserName1'>
</p> Usernamethatisverylong
</div> </p>
<div class='giftUserRow' id='GiftUserRow2'> </div>
<p class='giftUserNum' id='GiftUserNum2'> <div class='giftUserRow' id='GiftUserRow2'>
2. <p class='giftUserNum' id='GiftUserNum2'>
</p> 2
<p class='giftUserName'id='GiftUserName2'> </p>
Usernamethatisverylong <p class='giftUserName'id='GiftUserName2'>
</p> Usernamethatisverylong
</div> </p>
<div class='giftUserRow' id='GiftUserRow3'> </div>
<p class='giftUserNum' id='GiftUserNum3'> <div class='giftUserRow' id='GiftUserRow3'>
3. <p class='giftUserNum' id='GiftUserNum3'>
</p> 3
<p class='giftUserName'id='GiftUserName3'> </p>
Usernamethatisverylong <p class='giftUserName'id='GiftUserName3'>
</p> Usernamethatisverylong
</p>
</div>
</div> </div>
</div> </div>
</div> </div>

57
timer.css
View File

@@ -125,6 +125,7 @@ p {
#InfoBox3 { #InfoBox3 {
grid-template-columns: 1fr; grid-template-columns: 1fr;
grid-template-rows: 1fr 23% 23% 23%; grid-template-rows: 1fr 23% 23% 23%;
transform: translate(0%, -16%) scale(1, 1);
/* /*
justify-self: left; justify-self: left;
align-self: stretch; align-self: stretch;
@@ -147,68 +148,72 @@ p {
} }
#GoalName { #GoalName {
width: 95%; width: 100%;
transform: translate(8%, -10%) scale(1, 1.4); 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 85%, transparent 100%);
} }
#GoalProgressWrap { #GoalProgressWrap {
width: fit-content; width: fit-content;
padding-left: .5cqh; padding-left: .8cqh;
padding-right: .5cqh; padding-right: .8cqh;
transform: translate(6%, 0%) scale(1, 1.2); transform: translate(7%, 0%) scale(1, 1);
border-radius: 3cqh; border-radius: 3cqh;
border: .4cqh solid; border: .4cqh solid;
border-color: #404145; border-color: #404145;
font-size: .9em;
text-align: center;
margin: 0 auto 0 auto; margin: 0 auto 0 auto;
} }
#GoalProgress { #GoalProgress {
/* transform: translate(0%, -8%) scale(1, 1.4);
width: fit-content; font-size: 1.3em;
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; 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 { .giftUserRow {
width: 100%; width: 100%;
display: grid; display: grid;
grid-template-columns: 10% 1fr; grid-template-columns: 8% 1fr;
grid-template-rows: 1fr; grid-template-rows: 1fr;
text-wrap: nowrap; text-wrap: nowrap;
overflow: hidden; overflow: hidden;
text-align: left; text-align: left;
justify-self: 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 { .giftUserName {
margin-left: 0%; margin-left: 0%;
color: #32B993; color: #32B993;
text-align: left;
} }
#GiftUserName1 { #GiftUserName1 {
width: 54%; width: 24cqw;
mask-image: linear-gradient(to right, black 70%, transparent 100%); mask-image: linear-gradient(to right, black 85%, transparent 100%);
} }
#GiftUserName2 { #GiftUserName2 {
width: 46%; width: 20cqw;
mask-image: linear-gradient(to right, black 70%, transparent 100%); mask-image: linear-gradient(to right, black 75%, transparent 100%);
} }
#GiftUserName3 { #GiftUserName3 {
width: 38%; width: 14cqw;
mask-image: linear-gradient(to right, black 70%, transparent 100%); mask-image: linear-gradient(to right, black 60%, transparent 100%);
} }