19 x.5.0 Legacy About Styles: Media Queries |
19 x.5.0 Legacy About Styles: Media Queries |
20 ------------------------------------------------------------------------------*/ |
20 ------------------------------------------------------------------------------*/ |
21 |
21 |
22 .about__container { |
22 .about__container { |
23 /* Section backgrounds */ |
23 /* Section backgrounds */ |
24 --background: #ededed; |
24 --background: #f6f5f2; |
25 --subtle-background: #eef0fd; |
25 --subtle-background: #eef0fd; |
26 |
26 |
27 /* Main text color */ |
27 /* Main text color */ |
28 --text: #1e1e1e; |
28 --text: #1e1e1e; |
29 --text-light: #fff; |
29 --text-light: #fff; |
37 --nav-background: #fff; |
37 --nav-background: #fff; |
38 --nav-border: transparent; |
38 --nav-border: transparent; |
39 --nav-color: var(--text); |
39 --nav-color: var(--text); |
40 --nav-current: var(--accent-1); |
40 --nav-current: var(--accent-1); |
41 |
41 |
42 --border-radius: 16px; |
42 --border-radius: 0; |
43 |
43 |
44 --gap: 2rem; |
44 --gap: 2rem; |
45 } |
45 } |
46 |
46 |
47 /*------------------------------------------------------------------------------ |
47 /*------------------------------------------------------------------------------ |
452 .wp-credits-list a:focus { |
453 .wp-credits-list a:focus { |
453 text-decoration: underline; |
454 text-decoration: underline; |
454 } |
455 } |
455 |
456 |
456 .about__section a.button.button-hero { |
457 .about__section a.button.button-hero { |
|
458 padding-top: 1.1875rem; |
|
459 padding-bottom: 1.1875rem; |
457 font-size: 1.5rem; |
460 font-size: 1.5rem; |
|
461 line-height: 1.4; |
|
462 white-space: normal; |
|
463 text-wrap: pretty; |
458 } |
464 } |
459 |
465 |
460 .about__container ul { |
466 .about__container ul { |
461 list-style: disc; |
467 list-style: disc; |
462 margin-left: calc(var(--gap) / 2); |
468 margin-left: calc(var(--gap) / 2); |
565 flex-direction: column; |
571 flex-direction: column; |
566 align-items: flex-start; |
572 align-items: flex-start; |
567 justify-content: flex-end; |
573 justify-content: flex-end; |
568 box-sizing: border-box; |
574 box-sizing: border-box; |
569 padding: calc(var(--gap) * 1.5); |
575 padding: calc(var(--gap) * 1.5); |
|
576 padding-right: 26rem; /* Space for the background image. */ |
570 min-height: clamp(10rem, 25vw, 18.75rem); |
577 min-height: clamp(10rem, 25vw, 18.75rem); |
571 border-radius: var(--border-radius); |
578 border-radius: var(--border-radius); |
|
579 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"); |
572 background-repeat: no-repeat; |
580 background-repeat: no-repeat; |
573 background-position: right 7% center, top left; |
581 background-position: right center; |
|
582 background-size: auto 65%; |
574 background-color: var(--background); |
583 background-color: var(--background); |
|
584 } |
|
585 |
|
586 [dir="rtl"] .about__header { |
|
587 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"); |
575 } |
588 } |
576 |
589 |
577 .about__header-image { |
590 .about__header-image { |
578 margin: 0 var(--gap) 3em; |
591 margin: 0 var(--gap) 3em; |
579 } |
592 } |
660 color: var(--text-light); |
673 color: var(--text-light); |
661 border-color: var(--nav-current); |
674 border-color: var(--nav-current); |
662 } |
675 } |
663 |
676 |
664 @media screen and (max-width: 960px) { |
677 @media screen and (max-width: 960px) { |
|
678 .about__header { |
|
679 padding-right: 21rem; |
|
680 } |
665 |
681 |
666 .about-php .about__header-title h1, |
682 .about-php .about__header-title h1, |
667 .credits-php .about__header-title h1, |
683 .credits-php .about__header-title h1, |
668 .freedoms-php .about__header-title h1, |
684 .freedoms-php .about__header-title h1, |
669 .privacy-php .about__header-title h1, |
685 .privacy-php .about__header-title h1, |