18 x.5.0 Legacy About Styles: Media Queries |
19 x.5.0 Legacy About Styles: Media Queries |
19 ------------------------------------------------------------------------------*/ |
20 ------------------------------------------------------------------------------*/ |
20 |
21 |
21 .about__container { |
22 .about__container { |
22 /* Section backgrounds */ |
23 /* Section backgrounds */ |
23 --background: transparent; |
24 --background: #ededed; |
24 --subtle-background: #f0f0f0; |
25 --subtle-background: #eef0fd; |
25 |
26 |
26 /* Main text color */ |
27 /* Main text color */ |
27 --text: #000; |
28 --text: #1e1e1e; |
28 --text-light: #fff; |
29 --text-light: #fff; |
29 |
30 |
30 /* Accent colors: used in header, on special classes. */ |
31 /* Accent colors: used in header, on special classes. */ |
31 --accent-1: #3858e9; /* Accent background, link color */ |
32 --accent-1: #3858e9; /* Link color */ |
32 --accent-2: #3858e9; /* Header background */ |
33 --accent-2: #3858e9; /* Accent background */ |
|
34 --accent-3: #ededed; /* hr background */ |
33 |
35 |
34 /* Navigation colors. */ |
36 /* Navigation colors. */ |
35 --nav-background: #fff; |
37 --nav-background: #fff; |
36 --nav-border: transparent; |
38 --nav-border: transparent; |
37 --nav-color: var(--text); |
39 --nav-color: var(--text); |
38 --nav-current: var(--accent-1); |
40 --nav-current: var(--accent-1); |
39 |
41 |
|
42 --border-radius: 16px; |
|
43 |
40 --gap: 2rem; |
44 --gap: 2rem; |
41 } |
45 } |
42 |
46 |
43 /*------------------------------------------------------------------------------ |
47 /*------------------------------------------------------------------------------ |
44 1.0 - Global: About, Credits, Freedoms, Privacy |
48 1.0 - Global: About, Credits, Freedoms, Privacy, Get Involved |
45 ------------------------------------------------------------------------------*/ |
49 ------------------------------------------------------------------------------*/ |
46 |
50 |
47 .about-php, |
51 .about-php, |
48 .credits-php, |
52 .credits-php, |
49 .freedoms-php, |
53 .freedoms-php, |
50 .privacy-php { |
54 .privacy-php, |
|
55 .contribute-php { |
51 background: #fff; |
56 background: #fff; |
52 } |
57 } |
53 |
58 |
54 .about-php #wpcontent, |
59 .about-php #wpcontent, |
55 .credits-php #wpcontent, |
60 .credits-php #wpcontent, |
56 .freedoms-php #wpcontent, |
61 .freedoms-php #wpcontent, |
57 .privacy-php #wpcontent { |
62 .privacy-php #wpcontent, |
|
63 .contribute-php #wpcontent { |
58 background: #fff; |
64 background: #fff; |
59 padding: 0 24px; |
65 padding: 0 24px; |
60 } |
66 } |
61 |
67 |
62 @media screen and (max-width: 782px) { |
68 @media screen and (max-width: 782px) { |
63 .about-php.auto-fold #wpcontent, |
69 .about-php.auto-fold #wpcontent, |
64 .credits-php.auto-fold #wpcontent, |
70 .credits-php.auto-fold #wpcontent, |
65 .freedoms-php.auto-fold #wpcontent, |
71 .freedoms-php.auto-fold #wpcontent, |
66 .privacy-php.auto-fold #wpcontent { |
72 .privacy-php.auto-fold #wpcontent, |
|
73 .contribute-php.auto-fold #wpcontent { |
67 padding-left: 24px; |
74 padding-left: 24px; |
68 } |
75 } |
69 } |
76 } |
70 |
77 |
71 .about__container { |
78 .about__container { |
97 .about__container .is-vertically-aligned-bottom { |
104 .about__container .is-vertically-aligned-bottom { |
98 align-self: end; |
105 align-self: end; |
99 } |
106 } |
100 |
107 |
101 .about__section { |
108 .about__section { |
102 background: var(--background); |
109 background: transparent; |
103 clear: both; |
110 clear: both; |
104 } |
111 } |
105 |
112 |
106 .about__container .has-accent-background-color { |
113 .about__container .has-accent-background-color { |
107 background-color: var(--accent-1); |
|
108 color: var(--text-light); |
114 color: var(--text-light); |
109 } |
115 background-color: var(--accent-2); |
110 |
|
111 .about__container .has-accent-background-color a { |
|
112 color: var(--text-light); |
|
113 } |
116 } |
114 |
117 |
115 .about__container .has-transparent-background-color { |
118 .about__container .has-transparent-background-color { |
116 background-color: transparent; |
119 background-color: transparent; |
117 } |
120 } |
118 |
121 |
119 .about__container .has-accent-color { |
122 .about__container .has-accent-color { |
120 color: var(--accent-1); |
123 color: var(--accent-2); |
121 } |
124 } |
122 |
125 |
123 .about__container .has-border { |
126 .about__container .has-border { |
124 border: 3px solid currentColor; |
127 border: 3px solid currentColor; |
125 } |
128 } |
135 } |
138 } |
136 |
139 |
137 /* 1.1 - Layout */ |
140 /* 1.1 - Layout */ |
138 |
141 |
139 .about__section { |
142 .about__section { |
140 margin: 0 0 var(--gap); |
143 margin: 0; |
141 } |
144 } |
142 |
145 |
143 .about__section .column:not(.is-edge-to-edge) { |
146 .about__section .column:not(.is-edge-to-edge) { |
144 padding: var(--gap); |
147 padding: var(--gap); |
145 } |
148 } |
146 |
149 |
147 .about__section + .about__section .is-section-header { |
150 .about__section + .about__section .is-section-header { |
148 padding-bottom: var(--gap); |
151 padding-bottom: var(--gap); |
149 } |
152 } |
150 |
153 |
151 .about__section .column[class*="background-color"], |
154 .about__section .column[class*="background-color"]:not(.is-edge-to-edge), |
152 .about__section:where([class*="background-color"]) .column, |
155 .about__section:where([class*="background-color"]) .column:not(.is-edge-to-edge), |
153 .about__section .column.has-border { |
156 .about__section .column.has-border:not(.is-edge-to-edge) { |
154 padding-top: var(--gap); |
157 padding-top: var(--gap); |
155 padding-bottom: var(--gap); |
158 padding-bottom: var(--gap); |
156 } |
159 } |
157 |
160 |
158 .about__section .column p:first-of-type { |
161 .about__section .column p:first-of-type { |
222 |
225 |
223 .about__section.has-2-columns.is-wider-left { |
226 .about__section.has-2-columns.is-wider-left { |
224 grid-template-columns: 3fr 2fr; |
227 grid-template-columns: 3fr 2fr; |
225 } |
228 } |
226 |
229 |
227 .about__section.has-2-columns .is-section-header { |
230 .about__section .is-section-header { |
228 grid-column-start: 1; |
231 grid-column-start: 1; |
229 -ms-grid-column-span: 2; |
232 grid-column-end: -1; |
230 grid-column-end: span 2; |
|
231 } |
|
232 |
|
233 .about__section.has-2-columns .column:nth-of-type(2n+1) { |
|
234 grid-column-start: 1; |
|
235 } |
|
236 |
|
237 .about__section.has-2-columns .column:nth-of-type(2n) { |
|
238 grid-column-start: 2; |
|
239 } |
233 } |
240 |
234 |
241 .about__section.has-3-columns { |
235 .about__section.has-3-columns { |
242 grid-template-columns: repeat(3, 1fr); |
236 grid-template-columns: repeat(3, 1fr); |
243 } |
237 } |
244 |
238 |
245 .about__section.has-3-columns .is-section-header { |
|
246 grid-column-start: 1; |
|
247 -ms-grid-column-span: 3; |
|
248 grid-column-end: span 3; |
|
249 } |
|
250 |
|
251 .about__section.has-3-columns .column:nth-of-type(3n+1) { |
|
252 grid-column-start: 1; |
|
253 } |
|
254 |
|
255 .about__section.has-3-columns .column:nth-of-type(3n+2) { |
|
256 grid-column-start: 2; |
|
257 } |
|
258 |
|
259 .about__section.has-3-columns .column:nth-of-type(3n) { |
|
260 grid-column-start: 3; |
|
261 } |
|
262 |
|
263 .about__section.has-4-columns { |
239 .about__section.has-4-columns { |
264 grid-template-columns: repeat(4, 1fr); |
240 grid-template-columns: repeat(4, 1fr); |
265 } |
241 } |
266 |
242 |
267 .about__section.has-4-columns .is-section-header { |
|
268 grid-column-start: 1; |
|
269 -ms-grid-column-span: 4; |
|
270 grid-column-end: span 4; |
|
271 } |
|
272 |
|
273 .about__section.has-4-columns .column:nth-of-type(4n+1) { |
|
274 grid-column-start: 1; |
|
275 } |
|
276 |
|
277 .about__section.has-4-columns .column:nth-of-type(4n+2) { |
|
278 grid-column-start: 2; |
|
279 } |
|
280 |
|
281 .about__section.has-4-columns .column:nth-of-type(4n+3) { |
|
282 grid-column-start: 3; |
|
283 } |
|
284 |
|
285 .about__section.has-4-columns .column:nth-of-type(4n) { |
|
286 grid-column-start: 4; |
|
287 } |
|
288 |
|
289 /* Any columns following a section header need to be expicitly put into the second row, for IE support. */ |
|
290 .about__section.has-2-columns .is-section-header ~ .column, |
|
291 .about__section.has-3-columns .is-section-header ~ .column, |
|
292 .about__section.has-4-columns .is-section-header ~ .column, |
|
293 .about__section.has-overlap-style .is-section-header ~ .column { |
|
294 grid-row-start: 2; |
|
295 } |
|
296 |
|
297 .about__section.has-overlap-style { |
243 .about__section.has-overlap-style { |
298 grid-template-columns: repeat(7, 1fr); |
244 grid-template-columns: repeat(7, 1fr); |
299 } |
245 } |
300 |
246 |
301 .about__section.has-overlap-style .column { |
247 .about__section.has-overlap-style .column { |
302 grid-row-start: 1; |
248 grid-row-start: 1; |
303 } |
249 } |
304 |
250 |
305 .about__section.has-overlap-style .column:nth-of-type(2n+1) { |
251 .about__section.has-overlap-style .column:nth-of-type(2n+1) { |
306 grid-column-start: 2; |
252 grid-column-start: 2; |
307 -ms-grid-column-span: 3; |
|
308 grid-column-end: span 3; |
253 grid-column-end: span 3; |
309 } |
254 } |
310 |
255 |
311 .about__section.has-overlap-style .column:nth-of-type(2n) { |
256 .about__section.has-overlap-style .column:nth-of-type(2n) { |
312 grid-column-start: 4; |
257 grid-column-start: 4; |
313 -ms-grid-column-span: 3; |
|
314 grid-column-end: span 3; |
258 grid-column-end: span 3; |
315 } |
259 } |
316 |
260 |
317 .about__section.has-overlap-style .column.is-top-layer { |
261 .about__section.has-overlap-style .column.is-top-layer { |
318 z-index: 1; |
262 z-index: 1; |
356 |
300 |
357 .about__section.has-4-columns { |
301 .about__section.has-4-columns { |
358 grid-template-columns: repeat(2, 1fr); |
302 grid-template-columns: repeat(2, 1fr); |
359 } |
303 } |
360 |
304 |
361 .about__section.has-4-columns .column:nth-of-type(2n+1) { |
|
362 grid-column-start: 1; |
|
363 } |
|
364 |
|
365 .about__section.has-4-columns .column:nth-of-type(2n) { |
|
366 grid-column-start: 2; |
|
367 } |
|
368 |
|
369 .about__section.has-4-columns .column:nth-of-type(4n+3), |
|
370 .about__section.has-4-columns .column:nth-of-type(4n) { |
|
371 grid-row-start: 2; |
|
372 } |
|
373 |
|
374 .about__section.has-4-columns .is-section-header { |
|
375 -ms-grid-column-span: 2; |
|
376 grid-column-end: span 2; |
|
377 } |
|
378 |
|
379 .about__section.has-4-columns .is-section-header ~ .column:nth-of-type(4n+3), |
|
380 .about__section.has-4-columns .is-section-header ~ .column:nth-of-type(4n) { |
|
381 grid-row-start: 3; |
|
382 } |
|
383 |
|
384 .about__section.has-overlap-style { |
305 .about__section.has-overlap-style { |
385 grid-template-columns: 1fr; |
306 grid-template-columns: 1fr; |
386 } |
307 } |
387 |
308 |
388 /* At this size, the two columns fully overlap */ |
309 /* At this size, the two columns fully overlap */ |
389 .about__section.has-overlap-style .column.column { |
310 .about__section.has-overlap-style .column.column { |
390 grid-column-start: 1; |
311 grid-column-start: 1; |
391 -ms-grid-column-span: 1; |
|
392 grid-column-end: 2; |
312 grid-column-end: 2; |
393 grid-row-start: 1; |
313 grid-row-start: 1; |
394 -ms-grid-row-span: 1; |
|
395 grid-row-end: 2; |
314 grid-row-end: 2; |
396 } |
315 } |
397 } |
316 } |
398 |
317 |
399 @media screen and (max-width: 600px) { |
318 @media screen and (max-width: 600px) { |
451 color: var(--text); |
371 color: var(--text); |
452 } |
372 } |
453 |
373 |
454 .about__container h1 { |
374 .about__container h1 { |
455 padding: 0; |
375 padding: 0; |
456 color: inherit; |
|
457 } |
376 } |
458 |
377 |
459 .about__container h1, |
378 .about__container h1, |
460 .about__container h2, |
379 .about__container h2, |
461 .about__container h3.is-larger-heading { |
380 .about__container h3.is-larger-heading { |
462 margin-top: 0; |
381 margin-top: 0; |
463 margin-bottom: 0.5em; |
382 margin-bottom: calc(0.5 * var(--gap)); |
464 font-size: 2rem; |
383 font-size: 2rem; |
465 font-weight: 700; |
384 font-weight: 700; |
466 line-height: 1.16; |
385 line-height: 1.16; |
467 } |
386 } |
468 |
387 |
469 .about__container h3, |
388 .about__container h3, |
470 .about__container h1.is-smaller-heading, |
389 .about__container h1.is-smaller-heading, |
471 .about__container h2.is-smaller-heading { |
390 .about__container h2.is-smaller-heading { |
472 margin-top: 0; |
391 margin-top: 0; |
|
392 margin-bottom: calc(0.5 * var(--gap)); |
473 font-size: 1.625rem; |
393 font-size: 1.625rem; |
474 font-weight: 700; |
394 font-weight: 700; |
475 line-height: 1.4; |
395 line-height: 1.4; |
|
396 } |
|
397 |
|
398 .about__container h4, |
|
399 .about__container h3.is-smaller-heading { |
|
400 margin-top: 0; |
|
401 font-size: 1.125rem; |
|
402 font-weight: 600; |
|
403 line-height: 1.6; |
|
404 } |
|
405 |
|
406 .about__container h1, |
|
407 .about__container h2, |
|
408 .about__container h3, |
|
409 .about__container h4 { |
|
410 text-wrap: pretty; |
|
411 color: inherit; |
|
412 } |
|
413 |
|
414 .about__container :is(h1, h2, h3, h4):lang(en) { |
|
415 text-wrap: balance; |
|
416 } |
|
417 |
|
418 .about__container p { |
|
419 text-wrap: pretty; |
476 } |
420 } |
477 |
421 |
478 .about__container p { |
422 .about__container p { |
479 font-size: inherit; |
423 font-size: inherit; |
480 line-height: inherit; |
424 line-height: inherit; |
542 .about__container .about__image .wp-video { |
491 .about__container .about__image .wp-video { |
543 margin-left: auto; |
492 margin-left: auto; |
544 margin-right: auto; |
493 margin-right: auto; |
545 } |
494 } |
546 |
495 |
|
496 .about__container .about__image svg { |
|
497 vertical-align: middle; |
|
498 } |
|
499 |
547 .about__container .about__image + h3 { |
500 .about__container .about__image + h3 { |
548 margin-top: 1.5em; |
501 margin-top: calc(0.75 * var(--gap)); |
549 } |
|
550 |
|
551 .about__container .column .about__image { |
|
552 margin-bottom: calc(var(--gap) / 2); |
|
553 } |
502 } |
554 |
503 |
555 .about__container hr { |
504 .about__container hr { |
556 margin: 0; |
505 margin: calc(var(--gap) / 2) var(--gap); |
557 height: var(--gap); |
506 height: 0; |
558 border: none; |
507 border: none; |
|
508 border-top: 4px solid var(--accent-3); |
559 } |
509 } |
560 |
510 |
561 .about__container hr.is-small { |
511 .about__container hr.is-small { |
562 height: calc(var(--gap) / 4); |
512 margin-top: 0; |
|
513 margin-bottom: 0; |
563 } |
514 } |
564 |
515 |
565 .about__container hr.is-large { |
516 .about__container hr.is-large { |
566 height: calc(var(--gap) * 2); |
517 margin: var(--gap) auto; |
567 margin: calc(var(--gap) / 2) auto; |
518 } |
|
519 |
|
520 .about__container hr.is-invisible { |
|
521 border: none; |
568 } |
522 } |
569 |
523 |
570 .about__container div.updated, |
524 .about__container div.updated, |
571 .about__container div.error, |
525 .about__container div.error, |
572 .about__container .notice { |
526 .about__container .notice { |
573 display: none !important; |
527 display: none !important; |
574 } |
528 } |
575 |
529 |
|
530 .about__container code { |
|
531 font-size: inherit; |
|
532 } |
|
533 |
576 .about__section { |
534 .about__section { |
577 font-size: 1.125rem; |
535 font-size: 1.125rem; |
578 line-height: 1.55; |
536 line-height: 1.55; |
579 } |
537 } |
580 |
538 |
581 .about__section.is-feature { |
539 .about__section.is-feature { |
582 font-size: 1.6em; |
540 font-size: 1.6em; |
|
541 } |
|
542 |
|
543 .about__section.has-3-columns, |
|
544 .about__section.has-4-columns { |
|
545 font-size: 1rem; |
583 } |
546 } |
584 |
547 |
585 @media screen and (max-width: 480px) { |
548 @media screen and (max-width: 480px) { |
586 .about__section.is-feature { |
549 .about__section.is-feature { |
587 font-size: 1.4em; |
550 font-size: 1.4em; |
595 } |
558 } |
596 |
559 |
597 /* 1.3 - Header */ |
560 /* 1.3 - Header */ |
598 |
561 |
599 .about__header { |
562 .about__header { |
600 --about-header-image-width: 521px; |
|
601 --about-header-image-height: 504px; |
|
602 --about-header-bg-width: var(--about-header-image-width); |
|
603 --about-header-bg-height: var(--about-header-image-height); |
|
604 --about-header-bg-offset-inline: calc(var(--gap) * -2); |
|
605 |
|
606 position: relative; |
563 position: relative; |
607 margin-bottom: var(--gap); |
564 display: flex; |
608 padding-top: 0; |
565 flex-direction: column; |
609 background: var(--subtle-background) url('../images/about-header-about.svg?ver=6.0') no-repeat; |
566 align-items: flex-start; |
610 background-size: var(--about-header-bg-width) var(--about-header-bg-height); |
567 justify-content: flex-end; |
611 background-position: right var(--about-header-bg-offset-inline) center; |
568 box-sizing: border-box; |
612 } |
569 padding: calc(var(--gap) * 1.5); |
613 |
570 min-height: clamp(10rem, 25vw, 18.75rem); |
614 .credits-php .about__header { |
571 border-radius: var(--border-radius); |
615 --about-header-image-width: 477px; |
572 background-repeat: no-repeat; |
616 --about-header-image-height: 470px; |
573 background-position: right 7% center, top left; |
617 --about-header-bg-offset-inline: calc(var(--gap) * -4); |
574 background-color: var(--background); |
618 |
|
619 background-image: url('../images/about-header-credits.svg?ver=6.0'); |
|
620 background-position: right var(--about-header-bg-offset-inline) top var(--gap); |
|
621 } |
|
622 |
|
623 .freedoms-php .about__header { |
|
624 --about-header-image-width: 411px; |
|
625 --about-header-image-height: 498px; |
|
626 --about-header-bg-offset-inline: var(--gap); |
|
627 |
|
628 background-image: url('../images/about-header-freedoms.svg?ver=6.0'); |
|
629 background-position: right var(--about-header-bg-offset-inline) top calc(var(--gap) * 4); |
|
630 } |
|
631 |
|
632 .privacy-php .about__header { |
|
633 --about-header-image-width: 277px; |
|
634 --about-header-image-height: 361px; |
|
635 --about-header-bg-offset-inline: var(--gap); |
|
636 |
|
637 background-image: url('../images/about-header-privacy.svg?ver=6.0'); |
|
638 background-position: right var(--about-header-bg-offset-inline) top var(--gap); |
|
639 } |
575 } |
640 |
576 |
641 .about__header-image { |
577 .about__header-image { |
642 margin: 0 var(--gap) 3em; |
578 margin: 0 var(--gap) 3em; |
643 } |
579 } |
644 |
580 |
645 .about__header-title { |
581 .about__header-title { |
646 box-sizing: border-box; |
582 box-sizing: border-box; |
647 margin: 0 0 0 var(--gap); |
583 margin: 0; |
648 padding: 8rem 0 0; |
584 padding: 0; |
649 padding-right: calc(var(--about-header-bg-width) + var(--about-header-bg-offset-inline) + var(--gap)); |
|
650 } |
|
651 |
|
652 .credits-php .about__header-title, |
|
653 .privacy-php .about__header-title { |
|
654 padding-top: 6rem; |
|
655 } |
|
656 |
|
657 .freedoms-php .about__header-title { |
|
658 padding-top: 3rem; |
|
659 } |
585 } |
660 |
586 |
661 .about__header-title h1 { |
587 .about__header-title h1 { |
662 margin: 0 0 1rem; |
588 margin: 0; |
663 padding: 0; |
589 padding: 0; |
664 font-size: clamp(3rem, 18.46vw - 8.08rem, 6rem); |
590 /* Fluid font size scales on browser size 960px - 1200px. */ |
|
591 font-size: clamp(2rem, 20vw - 9rem, 4rem); |
665 line-height: 1; |
592 line-height: 1; |
666 font-weight: 400; |
593 font-weight: 600; |
|
594 } |
|
595 |
|
596 .about-php .about__header-title h1, |
|
597 .credits-php .about__header-title h1, |
|
598 .freedoms-php .about__header-title h1, |
|
599 .privacy-php .about__header-title h1, |
|
600 .contribute-php .about__header-title h1 { |
|
601 /* Fluid font size scales on browser size 960px - 1200px. */ |
|
602 font-size: clamp(2rem, 20vw - 9rem, 4rem); |
667 } |
603 } |
668 |
604 |
669 .about__header-text { |
605 .about__header-text { |
670 box-sizing: border-box; |
606 box-sizing: border-box; |
671 margin: 0 0 9rem; |
607 max-width: 26em; |
672 padding: 0 0 0 2rem; |
608 margin: 1rem 0 0; |
673 padding-right: calc(var(--about-header-bg-width) + var(--about-header-bg-offset-inline) + var(--gap)); |
609 padding: 0; |
674 font-size: 1.6rem; |
610 font-size: 1.6rem; |
675 line-height: 1.15; |
611 line-height: 1.15; |
676 } |
|
677 |
|
678 .credits-php .about__header-text, |
|
679 .privacy-php .about__header-text { |
|
680 margin-bottom: 7rem; |
|
681 } |
|
682 |
|
683 .freedoms-php .about__header-text { |
|
684 margin-bottom: 6rem; |
|
685 } |
612 } |
686 |
613 |
687 .about__header-navigation { |
614 .about__header-navigation { |
688 position: relative; |
615 position: relative; |
689 z-index: 1; |
616 z-index: 1; |
690 display: flex; |
617 display: flex; |
691 justify-content: center; |
618 flex-wrap: wrap; |
|
619 justify-content: space-between; |
692 padding-top: 0; |
620 padding-top: 0; |
|
621 margin-bottom: var(--gap); |
693 background: var(--nav-background); |
622 background: var(--nav-background); |
694 color: var(--nav-color); |
623 color: var(--nav-color); |
695 border-bottom: 3px solid var(--nav-border); |
624 border-bottom: 3px solid var(--nav-border); |
|
625 } |
|
626 |
|
627 .about__header-navigation::after { |
|
628 display: none; |
696 } |
629 } |
697 |
630 |
698 .about__header-navigation .nav-tab { |
631 .about__header-navigation .nav-tab { |
699 margin-left: 0; |
632 margin-left: 0; |
700 padding: calc(var(--gap) * 0.75) var(--gap); |
633 padding: calc(var(--gap) * 0.75) var(--gap); |
727 color: var(--text-light); |
660 color: var(--text-light); |
728 border-color: var(--nav-current); |
661 border-color: var(--nav-current); |
729 } |
662 } |
730 |
663 |
731 @media screen and (max-width: 960px) { |
664 @media screen and (max-width: 960px) { |
732 .about__header { |
665 |
733 --about-header-bg-width: calc(var(--about-header-image-width) * 0.7); |
666 .about-php .about__header-title h1, |
734 --about-header-bg-height: calc(var(--about-header-image-height) * 0.7); |
667 .credits-php .about__header-title h1, |
735 --about-header-bg-offset-inline: calc(var(--gap) * -1); |
668 .freedoms-php .about__header-title h1, |
736 } |
669 .privacy-php .about__header-title h1, |
737 |
670 .contribute-php .about__header-title h1 { |
738 .about__header-title h1 { |
671 /* Fluid font size scales on browser size 600px - 960px. */ |
739 font-size: clamp(3rem, 18.46vw - 5.08rem, 6rem); |
672 font-size: clamp(2rem, 20vw - 9rem, 4rem); |
|
673 } |
|
674 |
|
675 .about__header-navigation .nav-tab { |
|
676 padding: calc(var(--gap) * 0.75) calc(var(--gap) * 0.5); |
740 } |
677 } |
741 } |
678 } |
742 |
679 |
743 @media screen and (max-width: 782px) { |
680 @media screen and (max-width: 782px) { |
744 .about__container .about__header-text { |
681 .about__container .about__header-text { |
747 |
684 |
748 .about__header-container { |
685 .about__header-container { |
749 display: block; |
686 display: block; |
750 } |
687 } |
751 |
688 |
752 .about__header-title, |
689 .about__header { |
753 .about__header-image { |
690 padding: var(--gap); |
754 margin-left: calc(var(--gap) / 2); |
|
755 margin-right: calc(var(--gap) / 2); |
|
756 } |
691 } |
757 |
692 |
758 .about__header-text { |
693 .about__header-text { |
759 margin-top: 0; |
694 margin-top: 0.5rem; |
760 margin-right: 0; |
|
761 padding-left: calc(var(--gap) / 2); |
|
762 } |
695 } |
763 |
696 |
764 .about__header-navigation .nav-tab { |
697 .about__header-navigation .nav-tab { |
765 margin-top: 0; |
698 margin-top: 0; |
766 margin-right: 0; |
699 margin-right: 0; |
767 padding-left: calc(var(--gap) / 2); |
700 font-size: 1.2em; |
768 padding-right: calc(var(--gap) / 2); |
|
769 } |
701 } |
770 } |
702 } |
771 |
703 |
772 @media screen and (max-width: 600px) { |
704 @media screen and (max-width: 600px) { |
|
705 .about__header { |
|
706 min-height: auto; |
|
707 } |
|
708 |
773 .about__header, |
709 .about__header, |
774 .credits-php .about__header, |
710 .credits-php .about__header, |
|
711 .freedoms-php .about__header, |
775 .privacy-php .about__header, |
712 .privacy-php .about__header, |
776 .freedoms-php .about__header { |
713 .contribute-php .about__header { |
777 background-image: none; |
714 background-image: none; |
778 } |
|
779 |
|
780 .about__header-title, |
|
781 .about__header-text { |
|
782 padding-right: calc(var(--gap) / 2) !important; |
|
783 } |
|
784 |
|
785 .about__header-title h1 { |
|
786 font-size: clamp(2rem, 11.43vw - 0.29rem, 4rem); |
|
787 } |
|
788 } |
|
789 |
|
790 @media screen and (max-width: 480px) { |
|
791 .about__header-title p { |
|
792 font-size: 2.4em; |
|
793 } |
|
794 |
|
795 .about__header-title { |
|
796 padding-top: 2rem; |
|
797 } |
|
798 |
|
799 .about__header-text { |
|
800 margin-bottom: 2rem; |
|
801 } |
715 } |
802 |
716 |
803 .about__header-navigation { |
717 .about__header-navigation { |
804 display: block; |
718 display: block; |
805 } |
719 } |
854 margin: 0 auto calc(var(--gap) / 2); |
768 margin: 0 auto calc(var(--gap) / 2); |
855 width: 140px; |
769 width: 140px; |
856 height: 140px; |
770 height: 140px; |
857 border-radius: 100%; |
771 border-radius: 100%; |
858 overflow: hidden; |
772 overflow: hidden; |
859 background: var(--accent-1); |
|
860 } |
773 } |
861 |
774 |
862 .about__section .wp-person .gravatar { |
775 .about__section .wp-person .gravatar { |
863 width: 140px; |
776 width: 140px; |
864 height: 140px; |
777 height: 140px; |
865 filter: grayscale(100%); |
778 filter: grayscale(100%); |
866 mix-blend-mode: screen; |
|
867 } |
779 } |
868 |
780 |
869 .about__section .compact .wp-person-avatar, |
781 .about__section .compact .wp-person-avatar, |
870 .about__section .compact .wp-person .gravatar { |
782 .about__section .compact .wp-person .gravatar { |
871 width: 80px; |
783 width: 80px; |
872 height: 80px; |
784 height: 80px; |
873 } |
785 } |
874 |
786 |
875 .about__section .wp-person .web { |
787 .about__section .wp-person .web { |
|
788 display: block; |
876 font-size: 1.4em; |
789 font-size: 1.4em; |
877 font-weight: 600; |
790 font-weight: 600; |
|
791 padding: 10px 10px 0; |
878 text-decoration: none; |
792 text-decoration: none; |
879 } |
793 } |
880 |
794 |
881 .about__section .wp-person .web:hover { |
795 .about__section .wp-person .web:hover { |
882 text-decoration: underline; |
796 text-decoration: underline; |
1366 .freedoms-php .about-wrap ol p { |
1292 .freedoms-php .about-wrap ol p { |
1367 font-weight: 400; |
1293 font-weight: 400; |
1368 margin: 0.6em 0; |
1294 margin: 0.6em 0; |
1369 } |
1295 } |
1370 |
1296 |
1371 .freedoms-php .column .freedoms-image { |
|
1372 background-image: url('../images/freedoms.png'); |
|
1373 background-size: 100%; |
|
1374 padding-top: 100%; |
|
1375 } |
|
1376 |
|
1377 .freedoms-php .column:nth-of-type(2) .freedoms-image { |
|
1378 background-position: 0 34%; |
|
1379 } |
|
1380 |
|
1381 .freedoms-php .column:nth-of-type(3) .freedoms-image { |
|
1382 background-position: 0 66%; |
|
1383 } |
|
1384 |
|
1385 .freedoms-php .column:nth-of-type(4) .freedoms-image { |
|
1386 background-position: 0 100%; |
|
1387 } |
|
1388 |
|
1389 /*------------------------------------------------------------------------------ |
1297 /*------------------------------------------------------------------------------ |
1390 x.5.0 - Legacy About Styles: Media Queries |
1298 x.5.0 - Legacy About Styles: Media Queries |
1391 ------------------------------------------------------------------------------*/ |
1299 ------------------------------------------------------------------------------*/ |
1392 |
1300 |
1393 @media screen and (max-width: 782px) { |
1301 @media screen and (max-width: 782px) { |