Help/About: Update copy & style for About page and subpages.
Minor copy updates. Update heading style, text size, spacing in smaller columns. Remove columns placement code to simplify CSS. This was necessary for IE11, but modern browsers can use auto-placement. Move navigation out of the banner to keep size & background placement consistent across About section.
Props marybaum, sereedmedia, annezazu, jpantani, laurlittle, richtabor, markoserb, fcoveram, joen, kebbet.
See #57477.
Built from https://develop.svn.wordpress.org/trunk@55499
git-svn-id: http://core.svn.wordpress.org/trunk@55031 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2023-03-09 11:30:19 -05:00
|
|
|
.about__container{--background:#1d35b4;--subtle-background:#eff2ff;--text:#000;--text-light:#fff;--accent-1:#1d35b4;--accent-2:#33f078;--nav-background:#fff;--nav-border:transparent;--nav-color:var(--text);--nav-current:var(--accent-1);--gap:2rem}.about-php,.credits-php,.freedoms-php,.privacy-php{background:#fff}.about-php #wpcontent,.credits-php #wpcontent,.freedoms-php #wpcontent,.privacy-php #wpcontent{background:#fff;padding:0 24px}@media screen and (max-width:782px){.about-php.auto-fold #wpcontent,.credits-php.auto-fold #wpcontent,.freedoms-php.auto-fold #wpcontent,.privacy-php.auto-fold #wpcontent{padding-left:24px}}.about__container{max-width:1000px;margin:24px auto;clear:both}.about__container .alignleft{float:left}.about__container .alignright{float:right}.about__container .aligncenter{text-align:center}.about__container .is-vertically-aligned-top{align-self:start}.about__container .is-vertically-aligned-center{align-self:center}.about__container .is-vertically-aligned-bottom{align-self:end}.about__section{background:0 0;clear:both}.about__container .has-accent-background-color{background-color:var(--accent-2)}.about__container .has-transparent-background-color{background-color:transparent}.about__container .has-accent-color{color:var(--accent-2)}.about__container .has-border{border:3px solid currentColor}.about__container .has-subtle-background-color{background-color:var(--subtle-background)}.about__container .has-background-image{background-size:contain;background-repeat:no-repeat;background-position:center}.about__section{margin:0}.about__section .column:not(.is-edge-to-edge){padding:var(--gap)}.about__section+.about__section .is-section-header{padding-bottom:var(--gap)}.about__section .column.has-border:not(.is-edge-to-edge),.about__section .column[class*=background-color]:not(.is-edge-to-edge),.about__section:where([class*=background-color]) .column:not(.is-edge-to-edge){padding-top:var(--gap);padding-bottom:var(--gap)}.about__section .column p:first-of-type{margin-top:0}.about__section .column p:last-of-type{margin-bottom:0}.about__section .has-text-columns{columns:2;column-gap:calc(var(--gap) * 2)}.about__section .is-section-header{margin-bottom:0;padding:var(--gap) var(--gap) 0}.about__section .is-section-header p:last-child{margin-bottom:0}.about__section .is-section-header:first-child:last-child{padding:0}.about__section.is-feature{padding:var(--gap)}.about__section.is-feature p{margin:0}.about__section.is-feature p+p{margin-top:calc(var(--gap)/ 2)}.about__section.has-1-column{margin-left:auto;margin-right:auto;max-width:36em}.about__section.has-2-columns,.about__section.has-3-columns,.about__section.has-4-columns,.about__section.has-overlap-style{display:grid}.about__section.has-gutters{gap:var(--gap);margin-bottom:var(--gap)}.about__section.has-2-columns{grid-template-columns:1fr 1fr}.about__section.has-2-columns.is-wider-right{grid-template-columns:2fr 3fr}.about__section.has-2-columns.is-wider-left{grid-template-columns:3fr 2fr}.about__section .is-section-header{grid-column-start:1;grid-column-end:-1}.about__section.has-3-columns{grid-template-columns:repeat(3,1fr)}.about__section.has-4-columns{grid-template-columns:repeat(4,1fr)}.about__section.has-overlap-style{grid-template-columns:repeat(7,1fr)}.about__section.has-overlap-style .column{grid-row-start:1}.about__section.has-overlap-style .column:nth-of-type(2n+1){grid-column-start:2;grid-column-end:span 3}.about__section.has-overlap-style .column:nth-of-type(2n){grid-column-start:4;grid-column-end:span 3}.about__section.has-overlap-style .column.is-top-layer{z-index:1}@media screen and (max-width:782px){.about__section.has-2-columns.is-wider-left,.about__section.has-2-columns.is-wider-right,.about__section.has-3-columns{display:block;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-left,.about__section.has-2-columns.has-gutters.is-wider-right,.about__section.has-3-columns.has-gutters{margin-bottom:calc(var(--gap) * 2
|
