]>
Commit | Line | Data |
---|---|---|
15d5b931 | 1 | <<<<<<< HEAD |
9a7b0b13 | 2 | /* reset css for browser compat */ |
3 | * { | |
4 | margin: 0; | |
5 | padding: 0; | |
6 | box-sizing: border-box; | |
7 | } | |
8 | ||
c3650738 | 9 | body { |
9a7b0b13 | 10 | font-family: Verdana, Helvetica, sans-serif; |
11 | font-size: 16px; | |
12 | color: #222222; | |
15d5b931 | 13 | ======= |
f11ed28e SB |
14 | /* vars */ |
15 | :root { | |
16 | --navbar-bg: white; | |
17 | --nlink-col: black; | |
18 | --jumbotron-bg: rgba(75,235,74,.4); | |
19 | --footer-bg: #eee; | |
20 | --link-color: #428bca; | |
21 | --text-color: #333; | |
22 | --border-color: 0,0,0; | |
23 | --box-hover-color: #eee; | |
25446d4e | 24 | --box-round: 10px; |
f11ed28e SB |
25 | } |
26 | ||
27 | /* global */ | |
c3650738 | 28 | body { |
f11ed28e SB |
29 | font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; |
30 | color: var(--text-color); | |
31 | } | |
32 | a { | |
33 | color: var(--link-color); | |
34 | text-decoration: none; | |
15d5b931 | 35 | >>>>>>> a76ce2ec5a7fbf382a09e6e87b16841374fe28a0 |
c3650738 | 36 | } |
7dff2d08 SB |
37 | |
38 | /* navbar */ | |
c3650738 SB |
39 | .navbar { |
40 | width: 100%; | |
41 | height: 50px; | |
f11ed28e | 42 | background-color: var(--navbar-bg); |
c3650738 SB |
43 | position: fixed; |
44 | left: 0; | |
45 | right: 0; | |
46 | top: 0; | |
47 | display: flex; | |
48 | flex-wrap: nowrap; | |
c3650738 | 49 | align-items: center; |
f11ed28e | 50 | border-bottom: 1px solid rgba(var(--border-color),.3); |
c3650738 SB |
51 | z-index: 100; |
52 | } | |
53 | .nlogo { | |
54 | height: 40px; | |
55 | } | |
9a7b0b13 | 56 | /* navigation links */ |
57 | .navlinks { | |
58 | position: relative; | |
59 | display: table; | |
60 | height: 50px; | |
61 | margin: 0 20px; | |
62 | list-style-type: none; | |
63 | } | |
64 | ||
65 | .navlinks > li { | |
c3650738 | 66 | text-decoration: none; |
15d5b931 | 67 | <<<<<<< HEAD |
9a7b0b13 | 68 | font-size: 20px; |
c3650738 | 69 | color: black; |
9a7b0b13 | 70 | float: left; |
71 | display: table-cell; | |
72 | margin: 0 15px; | |
73 | padding-top: 25px; | |
74 | transform: translate(0, -25%); /* I have no idea how or why this works but it just does. */ | |
75 | cursor: pointer; /* for pseudo-links to still feel like links */ | |
15d5b931 | 76 | ======= |
f11ed28e | 77 | color: var(--nlink-col); |
15d5b931 | 78 | >>>>>>> a76ce2ec5a7fbf382a09e6e87b16841374fe28a0 |
c3650738 | 79 | } |
7dff2d08 SB |
80 | |
81 | /* main */ | |
c3650738 | 82 | .container { |
9a7b0b13 | 83 | margin: 51px 0 0; /* merged margins into one */ |
7dff2d08 | 84 | padding: 0; |
c3650738 | 85 | width: 100%; |
15d5b931 | 86 | <<<<<<< HEAD |
7dff2d08 | 87 | position: relative; |
9a7b0b13 | 88 | height: auto; |
89 | min-height: 100%; /* height is needed for some properties */ | |
15d5b931 | 90 | ======= |
c3650738 SB |
91 | margin-left: 0; |
92 | margin-right: 0; | |
f11ed28e | 93 | position: static; |
15d5b931 | 94 | >>>>>>> a76ce2ec5a7fbf382a09e6e87b16841374fe28a0 |
c3650738 | 95 | } |
7dff2d08 SB |
96 | |
97 | /* jumbotron */ | |
c3650738 | 98 | .jumbotron { |
15d5b931 | 99 | <<<<<<< HEAD |
9a7b0b13 | 100 | color: white; |
101 | height: 50%; | |
c3650738 | 102 | width: 100%; |
9a7b0b13 | 103 | top: 50%; |
104 | margin: 5% 0; | |
105 | position: relative; | |
106 | display: flex; | |
107 | padding: 25px; | |
108 | wrap-flex: wrap; | |
109 | justify-content: center; | |
110 | align-items: center; | |
15d5b931 | 111 | ======= |
f11ed28e | 112 | background: var(--jumbotron-bg); |
c3650738 | 113 | width: 100%; |
25446d4e SB |
114 | -webkit-border-bottom-right-radius: var(--box-round); |
115 | -webkit-border-bottom-left-radius: var(--box-round); | |
116 | -moz-border-radius-bottomright: var(--box-round); | |
117 | -moz-border-radius-bottomleft: var(--box-round); | |
118 | border-bottom-right-radius: var(--box-round); | |
119 | border-bottom-left-radius: var(--box-round); | |
15d5b931 | 120 | >>>>>>> a76ce2ec5a7fbf382a09e6e87b16841374fe28a0 |
c3650738 SB |
121 | } |
122 | .child { | |
123 | text-align: center; | |
124 | } | |
c3650738 SB |
125 | .box { |
126 | text-align: center; | |
127 | text-decoration: none; | |
15d5b931 | 128 | <<<<<<< HEAD |
c3650738 | 129 | color: black; |
9a7b0b13 | 130 | margin: 0 1%; |
c3650738 SB |
131 | margin-bottom: 5px; |
132 | border: 1px solid #000; | |
9a7b0b13 | 133 | height: 250px; |
c3650738 | 134 | background-color: #fff; |
9a7b0b13 | 135 | border-radius: 10px; |
136 | width: 350px; | |
137 | display: inline-block; | |
15d5b931 | 138 | ======= |
f11ed28e | 139 | color: var(--text-color); |
c3650738 | 140 | margin-bottom: 5px; |
f11ed28e | 141 | border: 1px solid rgb(var(--border-color)); |
c3650738 | 142 | flex-basis: 30%; |
f11ed28e | 143 | height: 105px; |
c3650738 | 144 | background-color: #fff; |
25446d4e SB |
145 | border-radius: var(--box-round); |
146 | -webkit-border-radius: var(--box-round); | |
147 | -moz-border-radius: var(--box-round); | |
15d5b931 | 148 | >>>>>>> a76ce2ec5a7fbf382a09e6e87b16841374fe28a0 |
c3650738 SB |
149 | } |
150 | .box:hover, .box:active { | |
f11ed28e | 151 | background-color: var(--box-hover-color); |
c3650738 SB |
152 | } |
153 | .title { | |
154 | text-align: center; | |
155 | } | |
c3650738 | 156 | |
9a7b0b13 | 157 | /* a big welcome for newcomers ;) */ |
158 | .welcome-big { | |
159 | position: relative; | |
160 | margin-top: 51px; | |
161 | border-bottom: 1px solid #888; | |
162 | width: 100%; | |
163 | ||
164 | background: rgb(65,225,64); /* fallback */ | |
165 | background: rgba(15, 75, 14, .6); | |
166 | ||
167 | padding: 10%; | |
168 | ||
169 | text-align: center; | |
170 | color: white; | |
171 | text-shadow: 0 3px 6px rgba(0,0,0, 0.16), 0 3px 6px rgba(0,0,0, 0.21); | |
172 | ||
173 | box-shadow: 0 3px 5px rgba(0,0,0, 0.36); | |
174 | ||
175 | height: 50%; | |
176 | ||
177 | overflow: hidden; | |
178 | vertical-align: bottom; | |
179 | } | |
180 | ||
181 | .welcome-big h1 { /* make this stand out */ | |
182 | font-size: 50px; | |
183 | line-height: 80px; | |
184 | } | |
185 | ||
186 | .welcome-big h3 { | |
187 | font-size: 22px; | |
188 | width: 70%; | |
189 | margin: 0 auto; | |
190 | vertical-align: middle; | |
191 | } | |
192 | ||
193 | .welcome-learnmore { | |
194 | border: 1px solid #666; | |
195 | background-color: white; | |
196 | font-size: 18px; | |
197 | line-height: 24px; | |
198 | font-weight: 400; | |
199 | ||
200 | padding: 5px 8px; | |
201 | ||
202 | border-radius: 8px; | |
203 | ||
204 | box-shadow: 0 3px 6px rgba(0,0,0, 0.16), 0 3px 6px rgba(0,0,0, 0.21); | |
205 | ||
206 | display: block; | |
207 | position: relative; | |
208 | margin: 0 auto; | |
209 | vertical-align: middle; | |
210 | bottom: -50%; | |
211 | transform: translate(0, 50%); | |
212 | ||
213 | } | |
7dff2d08 | 214 | /* articles feed */ |
f11ed28e SB |
215 | h1 { |
216 | margin: 0; | |
217 | } | |
7dff2d08 | 218 | div.art { |
636c336d | 219 | border-bottom: 1px solid rgba(var(--border-color),.3); |
c3650738 | 220 | } |
7dff2d08 | 221 | div.art:last-child { |
c3650738 SB |
222 | border-bottom: none; |
223 | } | |
7dff2d08 | 224 | h3.art { |
636c336d | 225 | margin-bottom: 0; |
c3650738 SB |
226 | } |
227 | p.art { | |
7dff2d08 SB |
228 | margin: 0; |
229 | } | |
230 | p.art-ingress { | |
231 | font-style: italic; | |
232 | margin: 0; | |
233 | } | |
234 | p.art-date { | |
235 | color: #ccc; | |
636c336d | 236 | margin: 0; |
7dff2d08 SB |
237 | } |
238 | p.art-link { | |
239 | margin-top: 0; | |
c3650738 | 240 | } |
c3650738 | 241 | |
25446d4e SB |
242 | /* help */ |
243 | .hmain { | |
244 | display: flex; | |
245 | flex-wrap: wrap; | |
246 | justify-content: space-around; | |
247 | } | |
248 | a.hchild { | |
249 | color: var(--text-color); | |
250 | height: 40px; | |
251 | width: 95%; | |
252 | text-align: center; | |
253 | border-top: 1px solid rgba(var(--border-color),.6); | |
254 | border-left: 1px solid rgba(var(--border-color),.6); | |
255 | border-right: 1px solid rgba(var(--border-color),.6); | |
256 | } | |
257 | a.hchild:hover, a.hchild:active { | |
258 | background-color: var(--box-hover-color); | |
259 | } | |
260 | .hchild:first-child { | |
261 | margin-top: 10px; | |
262 | -webkit-border-top-left-radius: var(--box-round); | |
263 | -webkit-border-top-right-radius: var(--box-round); | |
264 | -moz-border-radius-topleft: var(--box-round); | |
265 | -moz-border-radius-topright: var(--box-round); | |
266 | border-top-left-radius: var(--box-round); | |
267 | border-top-right-radius: var(--box-round); | |
268 | } | |
269 | .hchild:last-child { | |
270 | margin-bottom: 10px; | |
271 | border-bottom: 1px solid rgba(var(--border-color),.6); | |
272 | -webkit-border-bottom-right-radius: var(--box-round); | |
273 | -webkit-border-bottom-left-radius: var(--box-round); | |
274 | -moz-border-radius-bottomright: var(--box-round); | |
275 | -moz-border-radius-bottomleft: var(--box-round); | |
276 | border-bottom-right-radius: var(--box-round); | |
277 | border-bottom-left-radius: var(--box-round); | |
278 | } | |
279 | ||
7dff2d08 SB |
280 | /* footer */ |
281 | .footer { | |
15d5b931 | 282 | <<<<<<< HEAD |
9a7b0b13 | 283 | background: #666; /* >:^) */ |
7dff2d08 | 284 | width: 100%; |
9a7b0b13 | 285 | /* margin and padding are reset at line 1-5 */ |
7dff2d08 SB |
286 | display: flex; |
287 | flex-wrap: wrap; | |
9a7b0b13 | 288 | color: #eee; |
289 | font-size: 18px; | |
290 | line-height: 22px; | |
291 | ||
292 | min-height: 22px; | |
293 | height: auto; | |
294 | ||
295 | position: fixed; | |
296 | bottom: 0; | |
297 | } /* plz no justify ;_; */ | |
298 | ||
299 | .footer a { | |
300 | text-decoration: none; | |
301 | color: #7bf; | |
302 | } | |
303 | ||
304 | .footer-links { | |
305 | position: absolute; | |
306 | right: 0; | |
307 | margin-right: 8px; | |
308 | } | |
15d5b931 | 309 | ======= |
f11ed28e SB |
310 | background: var(--footer-bg); |
311 | width: device-width; | |
7dff2d08 SB |
312 | margin: 0; |
313 | padding: 0; | |
314 | display: flex; | |
315 | flex-wrap: wrap; | |
316 | justify-content: space-between; | |
f11ed28e | 317 | align-items: flex-start; |
25446d4e SB |
318 | /* -webkit-border-top-left-radius: var(--box-round); |
319 | -webkit-border-top-right-radius: var(--box-round); | |
320 | -moz-border-radius-topleft: var(--box-round); | |
321 | -moz-border-radius-topright: var(--box-round); | |
322 | border-top-left-radius: var(--box-round); | |
323 | border-top-right-radius: var(--box-round);*/ | |
f11ed28e SB |
324 | } |
325 | .footer .footerchild p { | |
326 | margin: 0; | |
7dff2d08 SB |
327 | } |
328 | .footerline { | |
329 | border-right: 1px solid #000; | |
330 | height: 100%; | |
15d5b931 | 331 | } |
332 | >>>>>>> a76ce2ec5a7fbf382a09e6e87b16841374fe28a0 |