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