diff -r 7b1b88e27a20 -r 48c4eec2b7e6 wp/wp-admin/css/about.css --- a/wp/wp-admin/css/about.css Thu Sep 29 08:06:27 2022 +0200 +++ b/wp/wp-admin/css/about.css Fri Sep 05 18:40:08 2025 +0200 @@ -1,12 +1,13 @@ /*------------------------------------------------------------------------------ 22.0 - About Pages - 1.0 Global: About, Credits, Freedoms, Privacy + 1.0 Global: About, Credits, Freedoms, Privacy, Get Involved 1.1 Layout 1.2 Typography & Elements 1.3 Header 2.0 Credits Page 3.0 Freedoms Page + 4.0 Privacy Page x.2.0 Legacy About Styles: Global x.2.1 Typography x.2.2 Structure @@ -20,16 +21,17 @@ .about__container { /* Section backgrounds */ - --background: transparent; - --subtle-background: #f0f0f0; + --background: #ededed; + --subtle-background: #eef0fd; /* Main text color */ - --text: #000; + --text: #1e1e1e; --text-light: #fff; /* Accent colors: used in header, on special classes. */ - --accent-1: #3858e9; /* Accent background, link color */ - --accent-2: #3858e9; /* Header background */ + --accent-1: #3858e9; /* Link color */ + --accent-2: #3858e9; /* Accent background */ + --accent-3: #ededed; /* hr background */ /* Navigation colors. */ --nav-background: #fff; @@ -37,24 +39,28 @@ --nav-color: var(--text); --nav-current: var(--accent-1); + --border-radius: 16px; + --gap: 2rem; } /*------------------------------------------------------------------------------ - 1.0 - Global: About, Credits, Freedoms, Privacy + 1.0 - Global: About, Credits, Freedoms, Privacy, Get Involved ------------------------------------------------------------------------------*/ .about-php, .credits-php, .freedoms-php, -.privacy-php { +.privacy-php, +.contribute-php { background: #fff; } .about-php #wpcontent, .credits-php #wpcontent, .freedoms-php #wpcontent, -.privacy-php #wpcontent { +.privacy-php #wpcontent, +.contribute-php #wpcontent { background: #fff; padding: 0 24px; } @@ -63,7 +69,8 @@ .about-php.auto-fold #wpcontent, .credits-php.auto-fold #wpcontent, .freedoms-php.auto-fold #wpcontent, - .privacy-php.auto-fold #wpcontent { + .privacy-php.auto-fold #wpcontent, + .contribute-php.auto-fold #wpcontent { padding-left: 24px; } } @@ -99,17 +106,13 @@ } .about__section { - background: var(--background); + background: transparent; clear: both; } .about__container .has-accent-background-color { - background-color: var(--accent-1); color: var(--text-light); -} - -.about__container .has-accent-background-color a { - color: var(--text-light); + background-color: var(--accent-2); } .about__container .has-transparent-background-color { @@ -117,7 +120,7 @@ } .about__container .has-accent-color { - color: var(--accent-1); + color: var(--accent-2); } .about__container .has-border { @@ -137,7 +140,7 @@ /* 1.1 - Layout */ .about__section { - margin: 0 0 var(--gap); + margin: 0; } .about__section .column:not(.is-edge-to-edge) { @@ -148,9 +151,9 @@ padding-bottom: var(--gap); } -.about__section .column[class*="background-color"], -.about__section:where([class*="background-color"]) .column, -.about__section .column.has-border { +.about__section .column[class*="background-color"]:not(.is-edge-to-edge), +.about__section:where([class*="background-color"]) .column:not(.is-edge-to-edge), +.about__section .column.has-border:not(.is-edge-to-edge) { padding-top: var(--gap); padding-bottom: var(--gap); } @@ -209,7 +212,7 @@ .about__section.has-gutters { gap: var(--gap); - margin-bottom: calc(var(--gap) * 2); + margin-bottom: var(--gap); } .about__section.has-2-columns { @@ -224,76 +227,19 @@ grid-template-columns: 3fr 2fr; } -.about__section.has-2-columns .is-section-header { +.about__section .is-section-header { grid-column-start: 1; - -ms-grid-column-span: 2; - grid-column-end: span 2; -} - -.about__section.has-2-columns .column:nth-of-type(2n+1) { - grid-column-start: 1; -} - -.about__section.has-2-columns .column:nth-of-type(2n) { - grid-column-start: 2; + grid-column-end: -1; } .about__section.has-3-columns { grid-template-columns: repeat(3, 1fr); } -.about__section.has-3-columns .is-section-header { - grid-column-start: 1; - -ms-grid-column-span: 3; - grid-column-end: span 3; -} - -.about__section.has-3-columns .column:nth-of-type(3n+1) { - grid-column-start: 1; -} - -.about__section.has-3-columns .column:nth-of-type(3n+2) { - grid-column-start: 2; -} - -.about__section.has-3-columns .column:nth-of-type(3n) { - grid-column-start: 3; -} - .about__section.has-4-columns { grid-template-columns: repeat(4, 1fr); } -.about__section.has-4-columns .is-section-header { - grid-column-start: 1; - -ms-grid-column-span: 4; - grid-column-end: span 4; -} - -.about__section.has-4-columns .column:nth-of-type(4n+1) { - grid-column-start: 1; -} - -.about__section.has-4-columns .column:nth-of-type(4n+2) { - grid-column-start: 2; -} - -.about__section.has-4-columns .column:nth-of-type(4n+3) { - grid-column-start: 3; -} - -.about__section.has-4-columns .column:nth-of-type(4n) { - grid-column-start: 4; -} - -/* Any columns following a section header need to be expicitly put into the second row, for IE support. */ -.about__section.has-2-columns .is-section-header ~ .column, -.about__section.has-3-columns .is-section-header ~ .column, -.about__section.has-4-columns .is-section-header ~ .column, -.about__section.has-overlap-style .is-section-header ~ .column { - grid-row-start: 2; -} - .about__section.has-overlap-style { grid-template-columns: repeat(7, 1fr); } @@ -304,13 +250,11 @@ .about__section.has-overlap-style .column:nth-of-type(2n+1) { grid-column-start: 2; - -ms-grid-column-span: 3; grid-column-end: span 3; } .about__section.has-overlap-style .column:nth-of-type(2n) { grid-column-start: 4; - -ms-grid-column-span: 3; grid-column-end: span 3; } @@ -358,29 +302,6 @@ grid-template-columns: repeat(2, 1fr); } - .about__section.has-4-columns .column:nth-of-type(2n+1) { - grid-column-start: 1; - } - - .about__section.has-4-columns .column:nth-of-type(2n) { - grid-column-start: 2; - } - - .about__section.has-4-columns .column:nth-of-type(4n+3), - .about__section.has-4-columns .column:nth-of-type(4n) { - grid-row-start: 2; - } - - .about__section.has-4-columns .is-section-header { - -ms-grid-column-span: 2; - grid-column-end: span 2; - } - - .about__section.has-4-columns .is-section-header ~ .column:nth-of-type(4n+3), - .about__section.has-4-columns .is-section-header ~ .column:nth-of-type(4n) { - grid-row-start: 3; - } - .about__section.has-overlap-style { grid-template-columns: 1fr; } @@ -388,10 +309,8 @@ /* At this size, the two columns fully overlap */ .about__section.has-overlap-style .column.column { grid-column-start: 1; - -ms-grid-column-span: 1; grid-column-end: 2; grid-row-start: 1; - -ms-grid-row-span: 1; grid-row-end: 2; } } @@ -421,7 +340,8 @@ } @media screen and (max-width: 480px) { - .about__section.is-feature .column { + .about__section.is-feature .column, + .about__section .is-section-header { padding: 0; } @@ -453,14 +373,13 @@ .about__container h1 { padding: 0; - color: inherit; } .about__container h1, .about__container h2, .about__container h3.is-larger-heading { margin-top: 0; - margin-bottom: 0.5em; + margin-bottom: calc(0.5 * var(--gap)); font-size: 2rem; font-weight: 700; line-height: 1.16; @@ -470,11 +389,36 @@ .about__container h1.is-smaller-heading, .about__container h2.is-smaller-heading { margin-top: 0; + margin-bottom: calc(0.5 * var(--gap)); font-size: 1.625rem; font-weight: 700; line-height: 1.4; } +.about__container h4, +.about__container h3.is-smaller-heading { + margin-top: 0; + font-size: 1.125rem; + font-weight: 600; + line-height: 1.6; +} + +.about__container h1, +.about__container h2, +.about__container h3, +.about__container h4 { + text-wrap: pretty; + color: inherit; +} + +.about__container :is(h1, h2, h3, h4):lang(en) { + text-wrap: balance; +} + +.about__container p { + text-wrap: pretty; +} + .about__container p { font-size: inherit; line-height: inherit; @@ -509,13 +453,17 @@ text-decoration: underline; } +.about__section a.button.button-hero { + font-size: 1.5rem; +} + .about__container ul { list-style: disc; margin-left: calc(var(--gap) / 2); } .about__container li { - margin-bottom: 0.75rem; + margin-bottom: 0.5rem; } .about__container img { @@ -532,6 +480,7 @@ max-width: 100%; width: 100%; height: auto; + border-radius: var(--border-radius); } .about__container .about__image figcaption { @@ -544,27 +493,32 @@ margin-right: auto; } -.about__container .about__image + h3 { - margin-top: 1.5em; +.about__container .about__image svg { + vertical-align: middle; } -.about__container .column .about__image { - margin-bottom: calc(var(--gap) / 2); +.about__container .about__image + h3 { + margin-top: calc(0.75 * var(--gap)); } .about__container hr { - margin: 0; - height: var(--gap); + margin: calc(var(--gap) / 2) var(--gap); + height: 0; border: none; + border-top: 4px solid var(--accent-3); } .about__container hr.is-small { - height: calc(var(--gap) / 4); + margin-top: 0; + margin-bottom: 0; } .about__container hr.is-large { - height: calc(var(--gap) * 2); - margin: calc(var(--gap) / 2) auto; + margin: var(--gap) auto; +} + +.about__container hr.is-invisible { + border: none; } .about__container div.updated, @@ -573,6 +527,10 @@ display: none !important; } +.about__container code { + font-size: inherit; +} + .about__section { font-size: 1.125rem; line-height: 1.55; @@ -582,6 +540,11 @@ font-size: 1.6em; } +.about__section.has-3-columns, +.about__section.has-4-columns { + font-size: 1rem; +} + @media screen and (max-width: 480px) { .about__section.is-feature { font-size: 1.4em; @@ -597,45 +560,18 @@ /* 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: 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: right var(--about-header-bg-offset-inline) center; -} - -.credits-php .about__header { - --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: right var(--about-header-bg-offset-inline) top var(--gap); -} - -.freedoms-php .about__header { - --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: right var(--about-header-bg-offset-inline) top calc(var(--gap) * 4); -} - -.privacy-php .about__header { - --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: right var(--about-header-bg-offset-inline) top var(--gap); + display: flex; + flex-direction: column; + align-items: flex-start; + justify-content: flex-end; + box-sizing: border-box; + padding: calc(var(--gap) * 1.5); + min-height: clamp(10rem, 25vw, 18.75rem); + border-radius: var(--border-radius); + background-repeat: no-repeat; + background-position: right 7% center, top left; + background-color: var(--background); } .about__header-image { @@ -644,57 +580,54 @@ .about__header-title { box-sizing: border-box; - margin: 0 0 0 var(--gap); - padding: 8rem 0 0; - padding-right: 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; + margin: 0; + padding: 0; } .about__header-title h1 { - margin: 0 0 1rem; + margin: 0; padding: 0; - font-size: clamp(3rem, 18.46vw - 8.08rem, 6rem); + /* Fluid font size scales on browser size 960px - 1200px. */ + font-size: clamp(2rem, 20vw - 9rem, 4rem); line-height: 1; - font-weight: 400; + font-weight: 600; +} + +.about-php .about__header-title h1, +.credits-php .about__header-title h1, +.freedoms-php .about__header-title h1, +.privacy-php .about__header-title h1, +.contribute-php .about__header-title h1 { + /* Fluid font size scales on browser size 960px - 1200px. */ + font-size: clamp(2rem, 20vw - 9rem, 4rem); } .about__header-text { box-sizing: border-box; - margin: 0 0 9rem; - padding: 0 0 0 2rem; - padding-right: calc(var(--about-header-bg-width) + var(--about-header-bg-offset-inline) + var(--gap)); + max-width: 26em; + margin: 1rem 0 0; + padding: 0; 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; + flex-wrap: wrap; + justify-content: space-between; padding-top: 0; + margin-bottom: var(--gap); background: var(--nav-background); color: var(--nav-color); border-bottom: 3px solid var(--nav-border); } +.about__header-navigation::after { + display: none; +} + .about__header-navigation .nav-tab { margin-left: 0; padding: calc(var(--gap) * 0.75) var(--gap); @@ -729,14 +662,18 @@ } @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-php .about__header-title h1, + .credits-php .about__header-title h1, + .freedoms-php .about__header-title h1, + .privacy-php .about__header-title h1, + .contribute-php .about__header-title h1 { + /* Fluid font size scales on browser size 600px - 960px. */ + font-size: clamp(2rem, 20vw - 9rem, 4rem); } - .about__header-title h1 { - font-size: clamp(3rem, 18.46vw - 5.08rem, 6rem); + .about__header-navigation .nav-tab { + padding: calc(var(--gap) * 0.75) calc(var(--gap) * 0.5); } } @@ -749,55 +686,32 @@ display: block; } - .about__header-title, - .about__header-image { - margin-left: calc(var(--gap) / 2); - margin-right: calc(var(--gap) / 2); + .about__header { + padding: var(--gap); } .about__header-text { - margin-top: 0; - margin-right: 0; - padding-left: calc(var(--gap) / 2); + margin-top: 0.5rem; } .about__header-navigation .nav-tab { margin-top: 0; margin-right: 0; - padding-left: calc(var(--gap) / 2); - padding-right: calc(var(--gap) / 2); + font-size: 1.2em; } } @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-right: calc(var(--gap) / 2) !important; + .about__header { + min-height: auto; } - .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: 2rem; + .about__header, + .credits-php .about__header, + .freedoms-php .about__header, + .privacy-php .about__header, + .contribute-php .about__header { + background-image: none; } .about__header-navigation { @@ -824,7 +738,7 @@ ------------------------------------------------------------------------------*/ .about__section .wp-people-group-title { - margin-bottom: calc(var(--gap) * 2); + margin-bottom: calc(var(--gap) * 2 - 10px); text-align: center; } @@ -839,7 +753,7 @@ display: inline-block; vertical-align: top; box-sizing: border-box; - margin-bottom: var(--gap); + margin-bottom: calc(var(--gap) - 10px); width: 25%; text-align: center; } @@ -856,14 +770,12 @@ height: 140px; border-radius: 100%; overflow: hidden; - background: var(--accent-1); } .about__section .wp-person .gravatar { width: 140px; height: 140px; filter: grayscale(100%); - mix-blend-mode: screen; } .about__section .compact .wp-person-avatar, @@ -873,8 +785,10 @@ } .about__section .wp-person .web { + display: block; font-size: 1.4em; font-weight: 600; + padding: 10px 10px 0; text-decoration: none; } @@ -942,7 +856,19 @@ .about__section .column .freedom-image { margin-bottom: var(--gap); - max-height: 140px; + max-height: 180px; +} + + +/*------------------------------------------------------------------------------ + 4.0 - Privacy Page +------------------------------------------------------------------------------*/ + +.about__section .column .privacy-image { + display: block; + margin-left: auto; + margin-right: auto; + max-width: 25rem; } @@ -1201,7 +1127,7 @@ } .about-wrap .is-vertically-aligned-top { - align-self: start; + align-self: flex-start; } .about-wrap .is-vertically-aligned-center { @@ -1368,24 +1294,6 @@ margin: 0.6em 0; } -.freedoms-php .column .freedoms-image { - background-image: url('../images/freedoms.png'); - background-size: 100%; - padding-top: 100%; -} - -.freedoms-php .column:nth-of-type(2) .freedoms-image { - background-position: 0 34%; -} - -.freedoms-php .column:nth-of-type(3) .freedoms-image { - background-position: 0 66%; -} - -.freedoms-php .column:nth-of-type(4) .freedoms-image { - background-position: 0 100%; -} - /*------------------------------------------------------------------------------ x.5.0 - Legacy About Styles: Media Queries ------------------------------------------------------------------------------*/