Help/About: Update the About page for 6.5.
Introducing the new content & design for the 6.5 About page & related pages. This style is simplified, with no header images, and brings back the illustrations from previous versions for Contribute, Freedoms, and Privacy.
This also includes a fix for heading hierarchy on the Get Involved page.
Props laurlittle, dansoschin, benjamin_zekavica, richtabor, joen, annezazu, swissspidy, marybaum, ryelle, huzaifaalmesbah.
See #60303.
Built from https://develop.svn.wordpress.org/trunk@57715
git-svn-id: http://core.svn.wordpress.org/trunk@57216 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2024-02-27 00:51:12 +01:00
|
|
|
.about__container{--background:#ededed;--subtle-background:#eef0fd;--text:#1e1e1e;--text-light:#fff;--accent-1:#3858e9;--accent-2:#3858e9;--accent-3:#ededed;--nav-background:#fff;--nav-border:transparent;--nav-color:var(--text);--nav-current:var(--accent-1);--border-radius:16px;--gap:2rem}.about-php,.contribute-php,.credits-php,.freedoms-php,.privacy-php{background:#fff}.about-php #wpcontent,.contribute-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,.contribute-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{color:var(--text-light);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(odd){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.
|
