-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathstyle.css
194 lines (179 loc) · 6.03 KB
/
style.css
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
/* CSS for the March Madness Bracket Visualizer */
body {
font-family: 'Arial Narrow', sans-serif;
margin: 0;
padding: 0;
}
.bracket_wrapper {
display: flex;
justify-content: center;
align-items: center;
width: 100vw;
height: 100vh;
min-width: 1600px;
min-height: 800px;
}
.bracket_container {
display: grid;
grid-template-columns: repeat(12, 1fr);
grid-template-rows: repeat(32, 1fr);
box-sizing: border-box;
width: 100%;
height: 100%;
max-height: 100%;
max-width: 100%;
position: relative;
}
.game_wrapper {
display: flex;
flex-direction: column;
grid-row: span 2;
justify-content: center;
align-items: center;
height: 100%;
flex-grow: 1;
flex-shrink: 0;
flex-basis: 100%;
box-sizing: border-box;
}
.game_container {
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
border: 1px solid #ccc;
border-radius: 2px;
background-color: #fefefe;
width: 95%;
height: 90%;
box-sizing: border-box;
position: relative;
}
.game_container::before {
content: "";
position: absolute;
top: 50%;
left: 0;
right: 0;
height: 1px;
background-color: #ccc;
transform: translateY(-50%);
}
.team_container {
flex-basis: 50%;
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
box-sizing: border-box;
overflow: hidden;
flex-direction: row;
}
.team_container.right-side {
flex-direction: row-reverse;
}
.team_container.right-side .team {
text-align: right;
}
.logo {
flex-shrink: 0;
height: 80%;
width: auto;
aspect-ratio: 1/1;
margin-left: 1.5%;
margin-right: 1.5%;
}
.seed {
font-weight: bold;
flex-shrink: 0;
width: 10%;
text-align: center;
font-size: .75em;
line-height: 1;
color: #ccc;
}
.team {
flex-grow: 1;
text-align: left;
padding-left: 1%;
padding-right: 1%;
overflow: hidden;
white-space: nowrap;
font-size: 1em;
}
.score {
font-size: 1em;
display: flex;
align-items: center;
justify-content: center;
line-height: 1;
padding-left: 1.5%;
padding-right: 1.5%;
}
#game_wrapper_01 { grid-column: 1; grid-row: 1 / span 2; }
#game_wrapper_02 { grid-column: 1; grid-row: 3 / span 2; }
#game_wrapper_03 { grid-column: 1; grid-row: 5 / span 2; }
#game_wrapper_04 { grid-column: 1; grid-row: 7 / span 2; }
#game_wrapper_05 { grid-column: 1; grid-row: 9 / span 2; }
#game_wrapper_06 { grid-column: 1; grid-row: 11 / span 2; }
#game_wrapper_07 { grid-column: 1; grid-row: 13 / span 2; }
#game_wrapper_08 { grid-column: 1; grid-row: 15 / span 2; }
#game_wrapper_33 { grid-column: 2; grid-row: 2 / span 2; }
#game_wrapper_34 { grid-column: 2; grid-row: 6 / span 2; }
#game_wrapper_35 { grid-column: 2; grid-row: 10 / span 2; }
#game_wrapper_36 { grid-column: 2; grid-row: 14 / span 2; }
#game_wrapper_49 { grid-column: 3; grid-row: 4 / span 2; }
#game_wrapper_50 { grid-column: 3; grid-row: 12 / span 2; }
#game_wrapper_57 { grid-column: 4; grid-row: 8 / span 2; }
#game_wrapper_09 { grid-column: 1; grid-row: 17 / span 2; }
#game_wrapper_10 { grid-column: 1; grid-row: 19 / span 2; }
#game_wrapper_11 { grid-column: 1; grid-row: 21 / span 2; }
#game_wrapper_12 { grid-column: 1; grid-row: 23 / span 2; }
#game_wrapper_13 { grid-column: 1; grid-row: 25 / span 2; }
#game_wrapper_14 { grid-column: 1; grid-row: 27 / span 2; }
#game_wrapper_15 { grid-column: 1; grid-row: 29 / span 2; }
#game_wrapper_16 { grid-column: 1; grid-row: 31 / span 2; }
#game_wrapper_37 { grid-column: 2; grid-row: 18 / span 2; }
#game_wrapper_38 { grid-column: 2; grid-row: 22 / span 2; }
#game_wrapper_39 { grid-column: 2; grid-row: 26 / span 2; }
#game_wrapper_40 { grid-column: 2; grid-row: 30 / span 2; }
#game_wrapper_51 { grid-column: 3; grid-row: 20 / span 2; }
#game_wrapper_52 { grid-column: 3; grid-row: 28 / span 2; }
#game_wrapper_58 { grid-column: 4; grid-row: 24 / span 2; }
#game_wrapper_17 { grid-column: 12; grid-row: 1 / span 2; }
#game_wrapper_18 { grid-column: 12; grid-row: 3 / span 2; }
#game_wrapper_19 { grid-column: 12; grid-row: 5 / span 2; }
#game_wrapper_20 { grid-column: 12; grid-row: 7 / span 2; }
#game_wrapper_21 { grid-column: 12; grid-row: 9 / span 2; }
#game_wrapper_22 { grid-column: 12; grid-row: 11 / span 2; }
#game_wrapper_23 { grid-column: 12; grid-row: 13 / span 2; }
#game_wrapper_24 { grid-column: 12; grid-row: 15 / span 2; }
#game_wrapper_41 { grid-column: 11; grid-row: 2 / span 2; }
#game_wrapper_42 { grid-column: 11; grid-row: 6 / span 2; }
#game_wrapper_43 { grid-column: 11; grid-row: 10 / span 2; }
#game_wrapper_44 { grid-column: 11; grid-row: 14 / span 2; }
#game_wrapper_53 { grid-column: 10; grid-row: 4 / span 2; }
#game_wrapper_54 { grid-column: 10; grid-row: 12 / span 2; }
#game_wrapper_59 { grid-column: 9; grid-row: 8 / span 2; }
#game_wrapper_25 { grid-column: 12; grid-row: 17 / span 2; }
#game_wrapper_26 { grid-column: 12; grid-row: 19 / span 2; }
#game_wrapper_27 { grid-column: 12; grid-row: 21 / span 2; }
#game_wrapper_28 { grid-column: 12; grid-row: 23 / span 2; }
#game_wrapper_29 { grid-column: 12; grid-row: 25 / span 2; }
#game_wrapper_30 { grid-column: 12; grid-row: 27 / span 2; }
#game_wrapper_31 { grid-column: 12; grid-row: 29 / span 2; }
#game_wrapper_32 { grid-column: 12; grid-row: 31 / span 2; }
#game_wrapper_45 { grid-column: 11; grid-row: 18 / span 2; }
#game_wrapper_46 { grid-column: 11; grid-row: 22 / span 2; }
#game_wrapper_47 { grid-column: 11; grid-row: 26 / span 2; }
#game_wrapper_48 { grid-column: 11; grid-row: 30 / span 2; }
#game_wrapper_55 { grid-column: 10; grid-row: 20 / span 2; }
#game_wrapper_56 { grid-column: 10; grid-row: 28 / span 2; }
#game_wrapper_60 { grid-column: 9; grid-row: 24 / span 2; }
#game_wrapper_61 { grid-column: 5; grid-row: 16 / span 2; }
#game_wrapper_62 { grid-column: 8; grid-row: 16 / span 2; }
#game_wrapper_63 { grid-column: 6 / span 2; grid-row: 16 / span 2; justify-self: center; width: 50%;}
#game_wrapper_64 { grid-column: 5; grid-row: 31 / span 2; }
#game_wrapper_65 { grid-column: 6; grid-row: 31 / span 2; }
#game_wrapper_66 { grid-column: 7; grid-row: 31 / span 2; }
#game_wrapper_67 { grid-column: 8; grid-row: 31 / span 2; }