1 /*------------------------------------------------------------------------------ |
1 /*------------------------------------------------------------------------------ |
2 22.0 - About Pages |
2 22.0 - About Pages |
3 |
3 |
4 1.0 Global: About, Credits, Freedoms |
4 1.0 Global: About, Credits, Freedoms, Privacy |
5 1.1 Typography |
5 1.1 Layout |
6 1.2 Structure |
6 1.2 Typography & Elements |
7 1.3 Point Releases |
7 1.3 Header |
8 2.0 About Page |
8 2.0 Credits Page |
9 2.1 Typography |
9 3.0 Freedoms Page |
10 2.2 Structure |
10 x.2.0 Legacy About Styles: Global |
11 3.0 Credits & Freedoms Pages |
11 x.2.1 Typography |
|
12 x.2.2 Structure |
|
13 x.2.3 Point Releases |
|
14 x.3.0 Legacy About Styles: About Page |
|
15 x.3.1 Typography |
|
16 x.3.2 Structure |
|
17 x.4.0 Legacy About Styles: Credits & Freedoms Pages |
|
18 x.5.0 Legacy About Styles: Media Queries |
12 ------------------------------------------------------------------------------*/ |
19 ------------------------------------------------------------------------------*/ |
13 |
20 |
|
21 .about__container { |
|
22 /* Section backgrounds */ |
|
23 --background: #fff; |
|
24 --subtle-background: #f2edd4; |
|
25 /* Main text color */ |
|
26 --text: #322d2b; |
|
27 --text-light: #f2edd4; |
|
28 /* Accent colors: used in header, on special classes. */ |
|
29 --accent-1: #ebcd3d; /* Accent background */ |
|
30 --accent-2: #bd7331; |
|
31 --accent-3: #b04329; |
|
32 /* Navigation colors. */ |
|
33 --nav-background: var(--subtle-background); |
|
34 --nav-border: var(--accent-1); |
|
35 --nav-color: var(--accent-3); |
|
36 --nav-current: var(--accent-3); |
|
37 } |
|
38 |
14 /*------------------------------------------------------------------------------ |
39 /*------------------------------------------------------------------------------ |
15 1.0 - Global: About, Credits, Freedoms |
40 1.0 - Global: About, Credits, Freedoms, Privacy |
|
41 ------------------------------------------------------------------------------*/ |
|
42 |
|
43 .about-php, |
|
44 .credits-php, |
|
45 .freedoms-php, |
|
46 .privacy-php { |
|
47 background: #fff; |
|
48 } |
|
49 |
|
50 .about-php #wpcontent, |
|
51 .credits-php #wpcontent, |
|
52 .freedoms-php #wpcontent, |
|
53 .privacy-php #wpcontent { |
|
54 background: white; |
|
55 padding: 0 24px; |
|
56 } |
|
57 |
|
58 @media screen and (max-width: 782px) { |
|
59 .about-php.auto-fold #wpcontent, |
|
60 .credits-php.auto-fold #wpcontent, |
|
61 .freedoms-php.auto-fold #wpcontent, |
|
62 .privacy-php.auto-fold #wpcontent { |
|
63 padding-left: 24px; |
|
64 } |
|
65 } |
|
66 |
|
67 .about__container { |
|
68 max-width: 1000px; |
|
69 margin: 24px auto; |
|
70 clear: both; |
|
71 } |
|
72 |
|
73 .about__container .alignleft { |
|
74 float: left; |
|
75 } |
|
76 |
|
77 .about__container .alignright { |
|
78 float: right; |
|
79 } |
|
80 |
|
81 .about__container .aligncenter { |
|
82 text-align: center; |
|
83 } |
|
84 |
|
85 .about__container .is-vertically-aligned-top { |
|
86 -ms-grid-row-align: start; |
|
87 align-self: start; |
|
88 } |
|
89 |
|
90 .about__container .is-vertically-aligned-center { |
|
91 -ms-grid-row-align: center; |
|
92 align-self: center; |
|
93 } |
|
94 |
|
95 .about__container .is-vertically-aligned-bottom { |
|
96 -ms-grid-row-align: end; |
|
97 align-self: end; |
|
98 } |
|
99 |
|
100 .about__section { |
|
101 background: #fff; |
|
102 background: var(--background); |
|
103 clear: both; |
|
104 } |
|
105 |
|
106 .about__container .has-accent-background-color { |
|
107 background-color: #ebcd3d; |
|
108 background-color: var(--accent-1); |
|
109 } |
|
110 |
|
111 .about__container .has-transparent-background-color { |
|
112 background-color: transparent; |
|
113 } |
|
114 |
|
115 .about__container .has-accent-color { |
|
116 color: #b04329; |
|
117 color: var(--accent-3); |
|
118 } |
|
119 |
|
120 .about__container .has-subtle-background-color { |
|
121 background-color: #f2edd4; |
|
122 background-color: var(--subtle-background); |
|
123 color: #322d2b; |
|
124 color: var(--text); |
|
125 } |
|
126 |
|
127 /* 1.1 - Layout */ |
|
128 |
|
129 .about__section { |
|
130 margin: 0; |
|
131 } |
|
132 |
|
133 .about__section .column { |
|
134 padding: 32px; |
|
135 } |
|
136 |
|
137 .about__section + .about__section .column { |
|
138 padding-top: 0; |
|
139 } |
|
140 |
|
141 .about__section .column.is-edge-to-edge { |
|
142 padding: 0; |
|
143 } |
|
144 |
|
145 .about__section .column p:first-of-type { |
|
146 margin-top: 0; |
|
147 } |
|
148 |
|
149 .about__section .column p:last-of-type { |
|
150 margin-bottom: 0; |
|
151 } |
|
152 |
|
153 .about__section .has-text-columns { |
|
154 columns: 2; |
|
155 column-gap: 64px; |
|
156 } |
|
157 |
|
158 .about__section .is-section-header { |
|
159 margin-bottom: 0; |
|
160 padding: 32px 32px 0; |
|
161 } |
|
162 |
|
163 .about__section .is-section-header p:last-child { |
|
164 margin-bottom: 0; |
|
165 } |
|
166 |
|
167 /* Section header is alone in a container. */ |
|
168 .about__section .is-section-header:first-child:last-child { |
|
169 padding: 0; |
|
170 } |
|
171 |
|
172 .about__section.is-feature { |
|
173 padding: 32px; |
|
174 } |
|
175 |
|
176 .about__section.is-feature p { |
|
177 margin: 0; |
|
178 } |
|
179 |
|
180 .about__section.is-feature p + p { |
|
181 margin-top: 1rem; |
|
182 } |
|
183 |
|
184 .about__section.has-1-column { |
|
185 margin-left: auto; |
|
186 margin-right: auto; |
|
187 max-width: 36em; |
|
188 } |
|
189 |
|
190 .about__section.has-2-columns, |
|
191 .about__section.has-3-columns, |
|
192 .about__section.has-4-columns { |
|
193 display: -ms-grid; |
|
194 display: grid; |
|
195 } |
|
196 |
|
197 .about__section.has-2-columns { |
|
198 -ms-grid-columns: 1fr 1fr; |
|
199 grid-template-columns: 1fr 1fr; |
|
200 } |
|
201 |
|
202 .about__section.has-2-columns.is-wider-right { |
|
203 -ms-grid-columns: 1fr 2fr; |
|
204 grid-template-columns: 1fr 2fr; |
|
205 } |
|
206 |
|
207 .about__section.has-2-columns.is-wider-left { |
|
208 -ms-grid-columns: 2fr 1fr; |
|
209 grid-template-columns: 2fr 1fr; |
|
210 } |
|
211 |
|
212 .about__section.has-2-columns .is-section-header { |
|
213 -ms-grid-column: 1; |
|
214 grid-column-start: 1; |
|
215 -ms-grid-column-span: 2; |
|
216 grid-column-end: span 2; |
|
217 } |
|
218 |
|
219 .about__section.has-2-columns .column:nth-of-type(2n+1) { |
|
220 -ms-grid-column: 1; |
|
221 grid-column-start: 1; |
|
222 } |
|
223 |
|
224 .about__section.has-2-columns .column:nth-of-type(2n) { |
|
225 -ms-grid-column: 2; |
|
226 grid-column-start: 2; |
|
227 } |
|
228 |
|
229 .about__section.has-3-columns { |
|
230 -ms-grid-columns: (1fr)[3]; |
|
231 grid-template-columns: repeat(3, 1fr); |
|
232 } |
|
233 |
|
234 .about__section.has-3-columns .is-section-header { |
|
235 -ms-grid-column: 1; |
|
236 grid-column-start: 1; |
|
237 -ms-grid-column-span: 3; |
|
238 grid-column-end: span 3; |
|
239 } |
|
240 |
|
241 .about__section.has-3-columns .column:nth-of-type(3n+1) { |
|
242 -ms-grid-column: 1; |
|
243 grid-column-start: 1; |
|
244 } |
|
245 |
|
246 .about__section.has-3-columns .column:nth-of-type(3n+2) { |
|
247 -ms-grid-column: 2; |
|
248 grid-column-start: 2; |
|
249 } |
|
250 |
|
251 .about__section.has-3-columns .column:nth-of-type(3n) { |
|
252 -ms-grid-column: 3; |
|
253 grid-column-start: 3; |
|
254 } |
|
255 |
|
256 .about__section.has-4-columns { |
|
257 -ms-grid-columns: (1fr)[4]; |
|
258 grid-template-columns: repeat(4, 1fr); |
|
259 } |
|
260 |
|
261 .about__section.has-4-columns .is-section-header { |
|
262 -ms-grid-column: 1; |
|
263 grid-column-start: 1; |
|
264 -ms-grid-column-span: 4; |
|
265 grid-column-end: span 4; |
|
266 } |
|
267 |
|
268 .about__section.has-4-columns .column:nth-of-type(4n+1) { |
|
269 -ms-grid-column: 1; |
|
270 grid-column-start: 1; |
|
271 } |
|
272 |
|
273 .about__section.has-4-columns .column:nth-of-type(4n+2) { |
|
274 -ms-grid-column: 2; |
|
275 grid-column-start: 2; |
|
276 } |
|
277 |
|
278 .about__section.has-4-columns .column:nth-of-type(4n+3) { |
|
279 -ms-grid-column: 3; |
|
280 grid-column-start: 3; |
|
281 } |
|
282 |
|
283 .about__section.has-4-columns .column:nth-of-type(4n) { |
|
284 -ms-grid-column: 4; |
|
285 grid-column-start: 4; |
|
286 } |
|
287 |
|
288 /* Any columns following a section header need to be expicitly put into the second row, for IE support. */ |
|
289 .about__section.has-2-columns .is-section-header ~ .column, |
|
290 .about__section.has-3-columns .is-section-header ~ .column, |
|
291 .about__section.has-4-columns .is-section-header ~ .column { |
|
292 -ms-grid-row: 2; |
|
293 grid-row-start: 2; |
|
294 } |
|
295 |
|
296 @media screen and (max-width: 782px) { |
|
297 .about__section.has-2-columns.is-wider-right, |
|
298 .about__section.has-2-columns.is-wider-left, |
|
299 .about__section.has-3-columns, |
|
300 .about__section.has-4-columns { |
|
301 display: block; |
|
302 padding-bottom: 16px; |
|
303 } |
|
304 |
|
305 .about__section.has-3-columns .column:nth-of-type(n), |
|
306 .about__section.has-4-columns .column:nth-of-type(n) { |
|
307 padding-top: 16px; |
|
308 padding-bottom: 16px; |
|
309 } |
|
310 } |
|
311 |
|
312 @media screen and (max-width: 600px) { |
|
313 .about__section.has-2-columns { |
|
314 display: flex; /* This is flex, not block, so we can use order below. */ |
|
315 flex-wrap: wrap; |
|
316 align-content: stretch; |
|
317 padding-bottom: 16px; |
|
318 } |
|
319 |
|
320 .about__section.has-2-columns .column:nth-of-type(n) { |
|
321 padding-top: 16px; |
|
322 padding-bottom: 16px; |
|
323 } |
|
324 |
|
325 .about__section.has-2-columns .is-edge-to-edge { |
|
326 order: -1; |
|
327 } |
|
328 } |
|
329 |
|
330 /* 1.2 - Typography & Elements */ |
|
331 |
|
332 .about__container { |
|
333 line-height: 1.4; |
|
334 } |
|
335 |
|
336 .about__container h1 { |
|
337 margin: 0 0 1em; |
|
338 padding: 0; |
|
339 font-weight: 600; |
|
340 color: inherit; |
|
341 } |
|
342 |
|
343 .about__container h1, |
|
344 .about__container h2 { |
|
345 margin-top: 0; |
|
346 font-size: 1.4em; |
|
347 line-height: 1.4; |
|
348 } |
|
349 |
|
350 .about__container h3, |
|
351 .about__container h2.is-smaller-heading { |
|
352 margin-top: 0; |
|
353 font-size: 1em; |
|
354 } |
|
355 |
|
356 .about__container p { |
|
357 font-size: inherit; |
|
358 line-height: inherit; |
|
359 } |
|
360 |
|
361 .about__section a { |
|
362 color: #b04329; |
|
363 color: var(--accent-3); |
|
364 text-decoration: underline; |
|
365 } |
|
366 |
|
367 .about__section a:hover, |
|
368 .about__section a:active, |
|
369 .about__section a:focus { |
|
370 color: #bd7331; |
|
371 color: var(--accent-2); |
|
372 text-decoration: none; |
|
373 } |
|
374 |
|
375 .wp-credits-list a { |
|
376 text-decoration: none; |
|
377 } |
|
378 |
|
379 .wp-credits-list a:hover, |
|
380 .wp-credits-list a:active, |
|
381 .wp-credits-list a:focus { |
|
382 text-decoration: underline; |
|
383 } |
|
384 |
|
385 .about__container ul { |
|
386 list-style: disc; |
|
387 margin-left: 16px; |
|
388 } |
|
389 |
|
390 .about__container img { |
|
391 margin: 0; |
|
392 max-width: 100%; |
|
393 vertical-align: middle; |
|
394 } |
|
395 |
|
396 .about__container .about__image { |
|
397 margin: 0; |
|
398 } |
|
399 |
|
400 .about__container .about__image img { |
|
401 max-width: 100%; |
|
402 width: 100%; |
|
403 height: auto; |
|
404 } |
|
405 |
|
406 .about__container .about__image .wp-video { |
|
407 margin-left: auto; |
|
408 margin-right: auto; |
|
409 } |
|
410 |
|
411 .about__container .about__image + h3 { |
|
412 margin-top: 1.5em; |
|
413 } |
|
414 |
|
415 .about__container hr { |
|
416 margin: 0; |
|
417 height: 32px; |
|
418 border: none; |
|
419 } |
|
420 |
|
421 .about__container hr.is-small { |
|
422 height: 8px; |
|
423 } |
|
424 |
|
425 .about__container div.updated, |
|
426 .about__container div.error, |
|
427 .about__container .notice { |
|
428 display: none !important; |
|
429 } |
|
430 |
|
431 .about__section { |
|
432 font-size: 1.2em; |
|
433 } |
|
434 |
|
435 .about__section.is-feature { |
|
436 font-size: 1.6em; |
|
437 font-weight: 600; |
|
438 text-align: center; |
|
439 } |
|
440 |
|
441 @media screen and (max-width: 480px) { |
|
442 .about__section.is-feature { |
|
443 font-size: 1.4em; |
|
444 font-weight: 500; |
|
445 } |
|
446 } |
|
447 |
|
448 /* 1.3 - Header */ |
|
449 |
|
450 .about__header { |
|
451 padding-top: 8em; |
|
452 margin-bottom: 32px; |
|
453 background-color: #ebcd3d; |
|
454 background-color: var(--accent-1); |
|
455 color: #322d2b; |
|
456 color: var(--text); |
|
457 } |
|
458 |
|
459 .about__header-title { |
|
460 display: flex; |
|
461 align-items: center; |
|
462 justify-content: center; |
|
463 height: 20vh; |
|
464 max-height: 16em; |
|
465 padding: 32px; |
|
466 margin-bottom: 4em; |
|
467 text-align: center; |
|
468 } |
|
469 |
|
470 .about__header-title p { |
|
471 margin: 0; |
|
472 padding: 0; |
|
473 font-size: 4em; |
|
474 line-height: 1; |
|
475 font-weight: 500; |
|
476 } |
|
477 |
|
478 .about__header-title p span { |
|
479 display: block; |
|
480 font-size: 2em; |
|
481 } |
|
482 |
|
483 .about__header-text { |
|
484 display: inline-block; |
|
485 margin-left: -16px; |
|
486 padding: 16px 48px; |
|
487 font-size: 1.5em; |
|
488 line-height: 1.4; |
|
489 background: #b04329; |
|
490 background: var(--accent-3); |
|
491 color: #f2edd4; |
|
492 color: var(--text-light); |
|
493 } |
|
494 |
|
495 .about__header-text p { |
|
496 margin: 0; |
|
497 } |
|
498 |
|
499 .about__header-navigation { |
|
500 clear: both; |
|
501 padding-top: 0; |
|
502 background: #f2edd4; |
|
503 background: var(--nav-background); |
|
504 color: #b04329; |
|
505 color: var(--nav-color); |
|
506 border-bottom: 3px solid #ebcd3d; |
|
507 border-bottom: 3px solid var(--nav-border); |
|
508 } |
|
509 |
|
510 .about__header-navigation .nav-tab { |
|
511 margin-left: 0; |
|
512 padding: 24px 32px; |
|
513 font-size: 1.4em; |
|
514 line-height: 1; |
|
515 border-width: 0 0 3px; |
|
516 border-style: solid; |
|
517 border-color: transparent; |
|
518 background: transparent; |
|
519 color: inherit; |
|
520 } |
|
521 |
|
522 .about__header-navigation .nav-tab:hover, |
|
523 .about__header-navigation .nav-tab:active { |
|
524 background-color: #322d2b; |
|
525 background-color: var(--text); |
|
526 color: #f2edd4; |
|
527 color: var(--text-light); |
|
528 } |
|
529 |
|
530 .about__header-navigation .nav-tab-active { |
|
531 margin-bottom: -3px; |
|
532 border-width: 0 0 6px; |
|
533 border-color: #b04329; |
|
534 border-color: var(--nav-current); |
|
535 } |
|
536 |
|
537 .about__header-navigation .nav-tab-active:hover, |
|
538 .about__header-navigation .nav-tab-active:active { |
|
539 background-color: #322d2b; |
|
540 background-color: var(--text); |
|
541 color: #f2edd4; |
|
542 color: var(--text-light); |
|
543 border-color: #b04329; |
|
544 border-color: var(--nav-current); |
|
545 } |
|
546 |
|
547 @media screen and (max-width: 782px) { |
|
548 .about__container .about__header-text { |
|
549 font-size: 1.4em; |
|
550 } |
|
551 |
|
552 .about__header-title { |
|
553 min-height: 0; |
|
554 max-height: none; |
|
555 height: auto; |
|
556 } |
|
557 |
|
558 .about__header-navigation .nav-tab { |
|
559 margin-top: 0; |
|
560 margin-right: 0; |
|
561 padding: 24px 16px; |
|
562 } |
|
563 } |
|
564 |
|
565 @media screen and (max-width: 480px) { |
|
566 .about__header-title p { |
|
567 font-size: 3.2em; |
|
568 } |
|
569 |
|
570 .about__header-navigation .nav-tab { |
|
571 float: none; |
|
572 display: block; |
|
573 margin-bottom: 0; |
|
574 padding: 16px 16px; |
|
575 border-left-width: 6px; |
|
576 border-bottom: none; |
|
577 } |
|
578 |
|
579 .about__header-navigation .nav-tab-active { |
|
580 border-bottom: none; |
|
581 border-left-width: 6px; |
|
582 } |
|
583 } |
|
584 |
|
585 |
|
586 /*------------------------------------------------------------------------------ |
|
587 2.0 - Credits Page |
|
588 ------------------------------------------------------------------------------*/ |
|
589 |
|
590 .about__section .wp-people-group { |
|
591 margin: 0; |
|
592 } |
|
593 |
|
594 .about__section .wp-person { |
|
595 display: inline-block; |
|
596 vertical-align: top; |
|
597 box-sizing: border-box; |
|
598 padding: 0 1em 1em 0; |
|
599 height: 6em; |
|
600 width: calc( 33% - 4px ); |
|
601 min-width: 280px; |
|
602 } |
|
603 |
|
604 .about__section .compact .wp-person { |
|
605 height: auto; |
|
606 width: calc( 25% - 4px ); |
|
607 min-width: 220px; |
|
608 padding-bottom: 0.5em; |
|
609 } |
|
610 |
|
611 .about__section .wp-person .gravatar { |
|
612 float: left; |
|
613 margin: -4px 0.85em 0.85em 0; |
|
614 padding: 1px; |
|
615 width: 80px; |
|
616 height: 80px; |
|
617 border-radius: 100%; |
|
618 } |
|
619 |
|
620 .about__section .compact .wp-person .gravatar { |
|
621 width: 40px; |
|
622 height: 40px; |
|
623 } |
|
624 |
|
625 .about__section .wp-person .web { |
|
626 font-size: 1.4em; |
|
627 font-weight: 600; |
|
628 text-decoration: none; |
|
629 color: #322d2b; |
|
630 color: var(--text); |
|
631 } |
|
632 |
|
633 .about__section .wp-person .web:hover { |
|
634 text-decoration: underline; |
|
635 } |
|
636 |
|
637 .about__section .compact .wp-person .web { |
|
638 font-size: 1.2em; |
|
639 } |
|
640 |
|
641 .about__section .wp-person .title { |
|
642 display: block; |
|
643 margin-top: 0.5em; |
|
644 } |
|
645 |
|
646 @media screen and (max-width: 480px) { |
|
647 .about__section .wp-person { |
|
648 min-width: 100%; |
|
649 } |
|
650 |
|
651 .about__section .wp-person .gravatar { |
|
652 width: 60px; |
|
653 height: 60px; |
|
654 } |
|
655 |
|
656 .about__section .wp-person .web { |
|
657 font-size: 1em; |
|
658 } |
|
659 |
|
660 .about__section .compact .wp-person .web { |
|
661 font-size: 1em; |
|
662 } |
|
663 } |
|
664 |
|
665 |
|
666 /*------------------------------------------------------------------------------ |
|
667 3.0 - Freedoms Page |
|
668 ------------------------------------------------------------------------------*/ |
|
669 |
|
670 .about__section .column .freedoms-image { |
|
671 margin-bottom: 1em; |
|
672 } |
|
673 |
|
674 |
|
675 /*------------------------------------------------------------------------------ |
|
676 x.2.0 - Legacy About Styles: Global |
16 ------------------------------------------------------------------------------*/ |
677 ------------------------------------------------------------------------------*/ |
17 |
678 |
18 .about-wrap { |
679 .about-wrap { |
19 position: relative; |
680 position: relative; |
20 margin: 25px 40px 0 20px; |
681 margin: 25px 40px 0 20px; |