Skip to content

Commit 26e543b

Browse files
dudewheresmycodedudewheresmycode
committed
feat: major overhaul
1 parent f37f5ad commit 26e543b

33 files changed

Lines changed: 1848 additions & 196 deletions

‎examples/cornhole/cornhole.css‎

Lines changed: 155 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,155 @@
1+
:root {
2+
--blue-color: #0a78c2;
3+
--red-color: #db4534;
4+
--bg-color: rgba(17, 28, 28, 0.9);
5+
}
6+
7+
#scoreboard {
8+
display: flex;
9+
flex-direction: column;
10+
gap: 1vh;
11+
width: 10vw;
12+
border-radius: 0.5vw;
13+
position: absolute;
14+
top: 20px;
15+
right: 20px;
16+
}
17+
.team-row {
18+
text-align: center;
19+
}
20+
.team-name {
21+
padding: 0.5vh;
22+
}
23+
.team-score {
24+
font-size: 3vh;
25+
font-weight: 800;
26+
padding: 1vh;
27+
}
28+
#round {
29+
text-align: center;
30+
background-color: var(--bg-color);
31+
padding: 1vh;
32+
border-radius: 1vh;
33+
font-size: 2vh;
34+
text-transform: uppercase;
35+
font-weight: 800;
36+
}
37+
.team-row {
38+
/* border: 4px solid transparent; */
39+
border-radius: 1vh;
40+
}
41+
.team-row.active {
42+
/* border-color: var(--bg-color); */
43+
}
44+
#team-red {
45+
background-color: var(--red-color);
46+
}
47+
#team-blue {
48+
background-color: var(--blue-color);
49+
}
50+
.input-group {
51+
text-align: center;
52+
padding: 10px;
53+
font-size: 12px;
54+
background-color: var(--bg-color);
55+
display: flex;
56+
flex-direction: column;
57+
gap: 5px;
58+
}
59+
#top-center {
60+
position: absolute;
61+
top: 10px;
62+
width: 10vw;
63+
left: 50%;
64+
margin-left: -5vw;
65+
background-color: var(--bg-color);
66+
border-radius: 1vh;
67+
overflow: hidden;
68+
text-align: center;
69+
display: flex;
70+
flex-direction: column;
71+
/* align-items: center;
72+
justify-content: center; */
73+
/* gap: 10px; */
74+
/* padding: 10px; */
75+
}
76+
77+
.distance-item {
78+
padding: 1vh;
79+
/* background-color: lime; */
80+
flex-grow: 0;
81+
flex-shrink: 0;
82+
display: flex;
83+
flex-direction: row;
84+
align-items: center;
85+
justify-content: center;
86+
gap: 5px;
87+
}
88+
89+
.unit {
90+
/* text-transform: uppercase; */
91+
color: rgb(33, 212, 141);
92+
font-size: 10px;
93+
font-weight: 800;
94+
}
95+
.digit {
96+
color: #fff;
97+
font-weight: 800;
98+
font-size: 12px;
99+
}
100+
.item-label {
101+
color: #aaa;
102+
font-size: 10px;
103+
letter-spacing: 2px;
104+
font-weight: 500;
105+
padding: 0 10px;
106+
}
107+
#current-team {
108+
background-color: var(--blue-color);
109+
flex: 1;
110+
display: flex;
111+
flex-direction: column;
112+
justify-content: center;
113+
font-weight: 800;
114+
padding: 1vh;
115+
gap: 0.5rem;
116+
}
117+
#current-team.blue {
118+
background-color: var(--blue-color);
119+
}
120+
#current-team.red {
121+
background-color: var(--red-color);
122+
}
123+
#current-team-up {
124+
text-transform: uppercase;
125+
}
126+
#current-team-bags {
127+
gap: 10px;
128+
text-align: center;
129+
display: flex;
130+
flex-direction: row;
131+
justify-content: flex-start;
132+
}
133+
.team-bag {
134+
width: 1.5vw;
135+
height: 1.5vw;
136+
line-height: 0;
137+
background-color: #fff;
138+
border-radius: 50%;
139+
flex-grow: 0;
140+
flex-shrink: 0;
141+
}
142+
143+
.team-name {
144+
text-transform: uppercase;
145+
font-weight: 800;
146+
}
147+
148+
@media (min-height: 500px) {
149+
.unit {
150+
font-size: 1.5vh;
151+
}
152+
.digit {
153+
font-size: 3vh;
154+
}
155+
}

0 commit comments

Comments
 (0)