20 x.5.0 Legacy About Styles: Media Queries |
20 x.5.0 Legacy About Styles: Media Queries |
21 ------------------------------------------------------------------------------*/ |
21 ------------------------------------------------------------------------------*/ |
22 |
22 |
23 .about__container { |
23 .about__container { |
24 /* Section backgrounds */ |
24 /* Section backgrounds */ |
25 --background: #ededed; |
25 --background: #f6f5f2; |
26 --subtle-background: #eef0fd; |
26 --subtle-background: #eef0fd; |
27 |
27 |
28 /* Main text color */ |
28 /* Main text color */ |
29 --text: #1e1e1e; |
29 --text: #1e1e1e; |
30 --text-light: #fff; |
30 --text-light: #fff; |
38 --nav-background: #fff; |
38 --nav-background: #fff; |
39 --nav-border: transparent; |
39 --nav-border: transparent; |
40 --nav-color: var(--text); |
40 --nav-color: var(--text); |
41 --nav-current: var(--accent-1); |
41 --nav-current: var(--accent-1); |
42 |
42 |
43 --border-radius: 16px; |
43 --border-radius: 0; |
44 |
44 |
45 --gap: 2rem; |
45 --gap: 2rem; |
46 } |
46 } |
47 |
47 |
48 /*------------------------------------------------------------------------------ |
48 /*------------------------------------------------------------------------------ |
453 .wp-credits-list a:focus { |
454 .wp-credits-list a:focus { |
454 text-decoration: underline; |
455 text-decoration: underline; |
455 } |
456 } |
456 |
457 |
457 .about__section a.button.button-hero { |
458 .about__section a.button.button-hero { |
|
459 padding-top: 1.1875rem; |
|
460 padding-bottom: 1.1875rem; |
458 font-size: 1.5rem; |
461 font-size: 1.5rem; |
|
462 line-height: 1.4; |
|
463 white-space: normal; |
|
464 text-wrap: pretty; |
459 } |
465 } |
460 |
466 |
461 .about__container ul { |
467 .about__container ul { |
462 list-style: disc; |
468 list-style: disc; |
463 margin-right: calc(var(--gap) / 2); |
469 margin-right: calc(var(--gap) / 2); |
566 flex-direction: column; |
572 flex-direction: column; |
567 align-items: flex-start; |
573 align-items: flex-start; |
568 justify-content: flex-end; |
574 justify-content: flex-end; |
569 box-sizing: border-box; |
575 box-sizing: border-box; |
570 padding: calc(var(--gap) * 1.5); |
576 padding: calc(var(--gap) * 1.5); |
|
577 padding-left: 26rem; /* Space for the background image. */ |
571 min-height: clamp(10rem, 25vw, 18.75rem); |
578 min-height: clamp(10rem, 25vw, 18.75rem); |
572 border-radius: var(--border-radius); |
579 border-radius: var(--border-radius); |
|
580 background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='412' height='198' fill='none'%3E%3Cpath stroke='%239D1825' stroke-width='12' d='M6 0v198'/%3E%3Cpath stroke='%23D90120' stroke-width='12' d='m30.171 1.82 51.246 191.253'/%3E%3Cpath stroke='%23408538' stroke-width='12' d='m62.427 7.626 87.895 177.422'/%3E%3Cpath stroke='%23FFEE58' stroke-width='12' d='M98.769 20.973 230.2 169.061'/%3E%3Cpath stroke='%23F17826' stroke-width='12' d='m152.67 36.891 161.59 114.424'/%3E%3Cpath stroke='%23fff' stroke-width='12' d='m246.433 66.098 190.42 54.264'/%3E%3C/svg%3E%0A"); |
573 background-repeat: no-repeat; |
581 background-repeat: no-repeat; |
574 background-position: left 7% center, top right; |
582 background-position: left center; |
|
583 background-size: auto 65%; |
575 background-color: var(--background); |
584 background-color: var(--background); |
|
585 } |
|
586 |
|
587 [dir="rtl"] .about__header { |
|
588 background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='412' height='198' fill='none'%3E%3Cg transform='scale(-1,1)' transform-origin='50%25 50%25'%3E%3Cpath stroke='%239D1825' stroke-width='12' d='M6 0v198'/%3E%3Cpath stroke='%23D90120' stroke-width='12' d='m30.171 1.82 51.246 191.253'/%3E%3Cpath stroke='%23408538' stroke-width='12' d='m62.427 7.626 87.895 177.422'/%3E%3Cpath stroke='%23FFEE58' stroke-width='12' d='M98.769 20.973 230.2 169.061'/%3E%3Cpath stroke='%23F17826' stroke-width='12' d='m152.67 36.891 161.59 114.424'/%3E%3Cpath stroke='%23fff' stroke-width='12' d='m246.433 66.098 190.42 54.264'/%3E%3C/g%3E%3C/svg%3E%0A"); |
576 } |
589 } |
577 |
590 |
578 .about__header-image { |
591 .about__header-image { |
579 margin: 0 var(--gap) 3em; |
592 margin: 0 var(--gap) 3em; |
580 } |
593 } |
661 color: var(--text-light); |
674 color: var(--text-light); |
662 border-color: var(--nav-current); |
675 border-color: var(--nav-current); |
663 } |
676 } |
664 |
677 |
665 @media screen and (max-width: 960px) { |
678 @media screen and (max-width: 960px) { |
|
679 .about__header { |
|
680 padding-left: 21rem; |
|
681 } |
666 |
682 |
667 .about-php .about__header-title h1, |
683 .about-php .about__header-title h1, |
668 .credits-php .about__header-title h1, |
684 .credits-php .about__header-title h1, |
669 .freedoms-php .about__header-title h1, |
685 .freedoms-php .about__header-title h1, |
670 .privacy-php .about__header-title h1, |
686 .privacy-php .about__header-title h1, |