hdata.css (3472B) download
1body {
2 background-color: #BCCFB0;
3 color: #333333;
4 font-family: Roboto, sans-serif;
5 margin: 0;
6 padding: 0;
7}
8
9/*NAVBAR*/
10nav {
11 background-color: #333333;
12 width: 100%;
13 height: 15vw;
14 display: flex;
15 align-items: center;
16}
17
18nav ul {
19 margin: 0;
20 padding: 0;
21 width: 100%;
22 height: 15vw;
23 display: flex;
24 list-style-type: none;
25 align-items: center;
26}
27
28nav li {
29 font-weight: bold;
30 font-size: 4vw;
31 margin-right: 3vw;
32}
33
34nav ul li a {
35 color: #fff;
36 text-decoration: none;
37 padding: 0;
38}
39
40nav ul li a.active {
41 pointer-events: none;
42 color: gray;
43}
44
45nav ul li:first-child {
46 margin-right: auto;
47}
48
49.img-big-logo {
50 display: none;
51}
52
53.img-small-logo,
54.img-big-logo {
55 height: 15vw;
56 width: auto;
57 vertical-align: middle;
58}
59
60.download-button {
61 display: flex;
62 padding: 10px 20px;
63 background-color: #BC9999;
64 color: white;
65 text-decoration: none;
66 cursor: pointer;
67}
68
69/* HEADER */
70h1 {
71 text-align: center;
72 font-size: 8vw;
73 margin: 5vw;
74}
75
76/* DATA BLOCKS */
77.block1,
78.block2 {
79 display: flex;
80 width: 90vw;
81 height: auto;
82 margin: 5vw auto 5vw;
83 justify-content: space-between;
84 background-color: #BCCFB0;
85 color: white;
86
87 border-radius: 4px;
88 font-size: 4vw;
89}
90
91
92.block2 {
93 margin: 10vw auto 110vw;
94}
95
96.content {
97 height: auto;
98 align-items: center;
99 justify-content: center;
100 width: 100%;
101}
102
103.content-title {
104 display: inline-block;
105 background-color: #BCCFB0;
106 padding: 2px;
107 box-shadow: 0 0 10px #333333;
108}
109
110.content h2 {
111 font-size: 5vw;
112 font-weight: bold;
113 color: #333333;
114 margin: 5px;
115}
116
117.topFiveTable {
118 margin: 2vw 5% 3vw 5%;
119 width: 90%;
120}
121
122.topFiveTable thead {
123 font-weight: bold;
124}
125
126table {
127 width: 100%;
128 border-collapse: collapse;
129 box-shadow: 0 0 10px #333333;
130 color: white;
131}
132
133th, td {
134 background-color: #333333;
135 padding: 8px;
136 text-align: left;
137 border-bottom: 1px solid #ddd;
138}
139
140th {
141 background-color: gray;
142 font-weight: bold;
143}
144
145tr:hover {
146 background-color: #444444;
147}
148
149#tabledate{
150 background-color: black;
151 color: #BCCFB0;
152}
153
154#chilling{
155 background-color: #BC9999;
156 color: #BCCFB0;
157}
158
159.space{
160 background-color: transparent;
161 box-shadow: none;
162 padding-bottom: 100px
163}
164
165#myChart {
166 display: inline !important;
167 width: 90% !important;
168 height: auto !important;
169 margin: 2vw 5% 3vw 5%;
170}
171
172@media (min-width: 400px) {
173 /*NAVBAR*/
174 nav {
175 height: 60px;
176 }
177
178 nav ul {
179 height: 60px;
180 }
181
182 nav li {
183 font-size: 16px;
184 margin-right: 12px;
185 }
186
187 .img-small-logo,
188 .img-big-logo {
189 height: 60px;
190 }
191
192 /* HEADER */
193 h1 {
194 font-size: 32px;
195 margin: 20px;
196 }
197
198 /* DATA BLOCKS */
199 .block1 {
200 font-size: 16px;
201 margin: 20px auto 20px;
202 }
203
204 .block2 {
205 font-size: 16px;
206 margin: 40px auto 40px;
207 }
208
209 .content h2 {
210 font-size: 20px;
211 }
212
213 .fancy-list {
214 font-size: 16px;
215 }
216}
217
218@media (min-width: 700px) {
219 .img-big-logo {
220 display: block;
221 }
222
223 .img-small-logo {
224 display: none;
225 }
226
227 nav ul li:first-child {
228 margin-right: 0;
229 }
230
231 nav ul li:nth-child(2) {
232 margin-right: auto;
233 }
234}
235
236@media (min-width: 1200px) {
237 /* DATA BLOCKS */
238 .block1,
239 .block2 {
240 width: 1080px;
241 }
242}