diff -r be944660c56a -r 3d72ae0968f4 wp/wp-admin/css/about-rtl.css --- a/wp/wp-admin/css/about-rtl.css Wed Sep 21 18:19:35 2022 +0200 +++ b/wp/wp-admin/css/about-rtl.css Tue Sep 27 16:37:53 2022 +0200 @@ -22,7 +22,7 @@ .about__container { /* Section backgrounds */ --background: transparent; - --subtle-background: #def; + --subtle-background: #f0f0f0; /* Main text color */ --text: #000; @@ -30,7 +30,7 @@ /* Accent colors: used in header, on special classes. */ --accent-1: #3858e9; /* Accent background, link color */ - --accent-2: #2d46ba; /* Header background */ + --accent-2: #3858e9; /* Header background */ /* Navigation colors. */ --nav-background: #fff; @@ -49,14 +49,14 @@ .credits-php, .freedoms-php, .privacy-php { - background: #f0f7ff; + background: #fff; } .about-php #wpcontent, .credits-php #wpcontent, .freedoms-php #wpcontent, .privacy-php #wpcontent { - background: linear-gradient(-180deg, #fff 50%, #f0f7ff 100%); + background: #fff; padding: 0 24px; } @@ -141,25 +141,19 @@ margin: 0 0 var(--gap); } -.about__section .column { +.about__section .column:not(.is-edge-to-edge) { padding: var(--gap); } -.about__section + .about__section .column { - padding-top: 0; -} - .about__section + .about__section .is-section-header { padding-bottom: var(--gap); } .about__section .column[class*="background-color"], +.about__section:where([class*="background-color"]) .column, .about__section .column.has-border { padding-top: var(--gap); -} - -.about__section .column.is-edge-to-edge { - padding: 0; + padding-bottom: var(--gap); } .about__section .column p:first-of-type { @@ -215,7 +209,8 @@ } .about__section.has-gutters { - gap: calc(var(--gap) / 2); + gap: var(--gap); + margin-bottom: calc(var(--gap) * 2); } .about__section.has-2-columns { @@ -223,11 +218,11 @@ } .about__section.has-2-columns.is-wider-right { - grid-template-columns: 1fr 2fr; + grid-template-columns: 2fr 3fr; } .about__section.has-2-columns.is-wider-left { - grid-template-columns: 2fr 1fr; + grid-template-columns: 3fr 2fr; } .about__section.has-2-columns .is-section-header { @@ -329,13 +324,24 @@ .about__section.has-2-columns.is-wider-left, .about__section.has-3-columns { display: block; - padding-bottom: calc(var(--gap) / 2); + margin-bottom: calc(var(--gap) / 2); + } + + .about__section .column:not(.is-edge-to-edge) { + padding-top: var(--gap); + padding-bottom: var(--gap); + } + + .about__section.has-2-columns.has-gutters.is-wider-right, + .about__section.has-2-columns.has-gutters.is-wider-left, + .about__section.has-3-columns.has-gutters { + margin-bottom: calc(var(--gap) * 2); } .about__section.has-2-columns.has-gutters .column, .about__section.has-2-columns.has-gutters .column, .about__section.has-3-columns.has-gutters .column { - margin-bottom: calc(var(--gap) / 2); + margin-bottom: var(--gap); } .about__section.has-2-columns.has-gutters .column:last-child, @@ -394,21 +400,25 @@ @media screen and (max-width: 600px) { .about__section.has-2-columns { display: block; + margin-bottom: var(--gap); + } + + .about__section.has-2-columns:not(.has-gutters) .column:nth-of-type(n) { + padding-top: calc(var(--gap) / 2); padding-bottom: calc(var(--gap) / 2); } + .about__section.has-2-columns.has-gutters { + margin-bottom: calc(var(--gap) * 2); + } + .about__section.has-2-columns.has-gutters .column { - margin-bottom: calc(var(--gap) / 2); + margin-bottom: var(--gap); } .about__section.has-2-columns.has-gutters .column:last-child { margin-bottom: 0; } - - .about__section.has-2-columns .column:nth-of-type(n) { - padding-top: calc(var(--gap) / 2); - padding-bottom: calc(var(--gap) / 2); - } } @media screen and (max-width: 480px) { @@ -452,18 +462,18 @@ .about__container h3.is-larger-heading { margin-top: 0; margin-bottom: 0.5em; - font-size: 2em; - line-height: 1.2; + font-size: 2rem; font-weight: 700; + line-height: 1.16; } .about__container h3, .about__container h1.is-smaller-heading, .about__container h2.is-smaller-heading { margin-top: 0; - font-size: 1.6em; - line-height: 1.3; - font-weight: 400; + font-size: 1.625rem; + font-weight: 700; + line-height: 1.4; } .about__container p { @@ -471,6 +481,13 @@ line-height: inherit; } +.about__container p.is-subheading { + margin-top: 0; + font-size: 1.5rem; + font-weight: 300; + line-height: 160%; +} + .about__section a { color: var(--accent-1); text-decoration: underline; @@ -498,6 +515,10 @@ margin-right: calc(var(--gap) / 2); } +.about__container li { + margin-bottom: 0.75rem; +} + .about__container img { margin: 0; max-width: 100%; @@ -524,48 +545,12 @@ margin-left: auto; } -.about__container .about__image-comparison { - position: relative; - display: inline-block; - max-width: 100%; -} - -.about__container .about__image-comparison img { - -webkit-user-select: none; - user-select: none; - width: auto; - max-width: none; - max-height: 100%; -} - -.about__container .about__image-comparison > img { - max-width: 100%; +.about__container .about__image + h3 { + margin-top: 1.5em; } -.about__container .about__image-comparison-resize { - position: absolute !important; /* Needed to override inline style on ResizableBox */ - top: 0; - bottom: 0; - right: 0; - width: 50%; - max-width: 100%; -} - -.about__container .about__image-comparison.no-js .about__image-comparison-resize { - overflow: hidden; - border-left: 2px solid var(--wp-admin-theme-color); -} - -.about__container .about__image-comparison-resize .components-resizable-box__side-handle::before { - width: 4px; - left: calc(50% - 2px); - transition: none; - animation: none; - opacity: 1; -} - -.about__container .about__image + h3 { - margin-top: 1.5em; +.about__container .column .about__image { + margin-bottom: calc(var(--gap) / 2); } .about__container hr { @@ -590,7 +575,8 @@ } .about__section { - font-size: 1.2em; + font-size: 1.125rem; + line-height: 1.55; } .about__section.is-feature { @@ -612,26 +598,45 @@ /* 1.3 - Header */ .about__header { + --about-header-image-width: 521px; + --about-header-image-height: 504px; + --about-header-bg-width: var(--about-header-image-width); + --about-header-bg-height: var(--about-header-image-height); + --about-header-bg-offset-inline: calc(var(--gap) * -2); + + position: relative; margin-bottom: var(--gap); padding-top: 0; - background-position: center; - background-repeat: no-repeat; - background-size: cover; - background-image: url('../images/about-header-about.svg'); - background-color: var(--accent-2); - color: var(--text-light); + background: var(--subtle-background) url('../images/about-header-about.svg?ver=6.0') no-repeat; + background-size: var(--about-header-bg-width) var(--about-header-bg-height); + background-position: left var(--about-header-bg-offset-inline) center; } .credits-php .about__header { - background-image: url('../images/about-header-credits.svg'); + --about-header-image-width: 477px; + --about-header-image-height: 470px; + --about-header-bg-offset-inline: calc(var(--gap) * -4); + + background-image: url('../images/about-header-credits.svg?ver=6.0'); + background-position: left var(--about-header-bg-offset-inline) top var(--gap); } .freedoms-php .about__header { - background-image: url('../images/about-header-freedoms.svg'); + --about-header-image-width: 411px; + --about-header-image-height: 498px; + --about-header-bg-offset-inline: var(--gap); + + background-image: url('../images/about-header-freedoms.svg?ver=6.0'); + background-position: left var(--about-header-bg-offset-inline) top calc(var(--gap) * 4); } .privacy-php .about__header { - background-image: url('../images/about-header-privacy.svg'); + --about-header-image-width: 277px; + --about-header-image-height: 361px; + --about-header-bg-offset-inline: var(--gap); + + background-image: url('../images/about-header-privacy.svg?ver=6.0'); + background-position: left var(--about-header-bg-offset-inline) top var(--gap); } .about__header-image { @@ -639,27 +644,50 @@ } .about__header-title { - padding: 2rem 0 0; - margin: 0 2rem; + box-sizing: border-box; + margin: 0 var(--gap) 0 0; + padding: 8rem 0 0; + padding-left: calc(var(--about-header-bg-width) + var(--about-header-bg-offset-inline) + var(--gap)); +} + +.credits-php .about__header-title, +.privacy-php .about__header-title { + padding-top: 6rem; +} + +.freedoms-php .about__header-title { + padding-top: 3rem; } .about__header-title h1 { - margin: 0 0 0.5rem; + margin: 0 0 1rem; padding: 0; - font-size: 4.5rem; + font-size: clamp(3rem, 18.46vw - 8.08rem, 6rem); line-height: 1; font-weight: 400; } .about__header-text { - max-width: 42rem; - margin: 0 0 5em; - padding: 0 2rem; - font-size: 2rem; + box-sizing: border-box; + margin: 0 0 9rem; + padding: 0 2rem 0 0; + padding-left: calc(var(--about-header-bg-width) + var(--about-header-bg-offset-inline) + var(--gap)); + font-size: 1.6rem; line-height: 1.15; } +.credits-php .about__header-text, +.privacy-php .about__header-text { + margin-bottom: 7rem; +} + +.freedoms-php .about__header-text { + margin-bottom: 6rem; +} + .about__header-navigation { + position: relative; + z-index: 1; display: flex; justify-content: center; padding-top: 0; @@ -701,9 +729,15 @@ border-color: var(--nav-current); } -@media screen and (max-width: 960px){ +@media screen and (max-width: 960px) { + .about__header { + --about-header-bg-width: calc(var(--about-header-image-width) * 0.7); + --about-header-bg-height: calc(var(--about-header-image-height) * 0.7); + --about-header-bg-offset-inline: calc(var(--gap) * -1); + } + .about__header-title h1 { - font-size: 4.8em; + font-size: clamp(3rem, 18.46vw - 5.08rem, 6rem); } } @@ -722,7 +756,12 @@ margin-left: calc(var(--gap) / 2); } - .about__header-text, + .about__header-text { + margin-top: 0; + margin-left: 0; + padding-right: calc(var(--gap) / 2); + } + .about__header-navigation .nav-tab { margin-top: 0; margin-left: 0; @@ -731,13 +770,35 @@ } } +@media screen and (max-width: 600px) { + .about__header, + .credits-php .about__header, + .privacy-php .about__header, + .freedoms-php .about__header { + background-image: none; + } + + .about__header-title, + .about__header-text { + padding-left: calc(var(--gap) / 2) !important; + } + + .about__header-title h1 { + font-size: clamp(2rem, 11.43vw - 0.29rem, 4rem); + } +} + @media screen and (max-width: 480px) { .about__header-title p { font-size: 2.4em; } + .about__header-title { + padding-top: 2rem; + } + .about__header-text { - margin-bottom: 1em; + margin-bottom: 2rem; } .about__header-navigation {