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
This commit is contained in:
ryelle 2023-03-09 16:30:19 +00:00
parent 338b45ddba
commit b16599e760
10 changed files with 104 additions and 250 deletions

File diff suppressed because one or more lines are too long

View File

@ -37,15 +37,15 @@ $credits = wp_credits();
);
?>
</div>
<nav class="about__header-navigation nav-tab-wrapper wp-clearfix" aria-label="<?php esc_attr_e( 'Secondary menu' ); ?>">
<a href="about.php" class="nav-tab"><?php _e( 'What&#8217;s New' ); ?></a>
<a href="credits.php" class="nav-tab nav-tab-active" aria-current="page"><?php _e( 'Credits' ); ?></a>
<a href="freedoms.php" class="nav-tab"><?php _e( 'Freedoms' ); ?></a>
<a href="privacy.php" class="nav-tab"><?php _e( 'Privacy' ); ?></a>
</nav>
</div>
<nav class="about__header-navigation nav-tab-wrapper wp-clearfix" aria-label="<?php esc_attr_e( 'Secondary menu' ); ?>">
<a href="about.php" class="nav-tab"><?php _e( 'What&#8217;s New' ); ?></a>
<a href="credits.php" class="nav-tab nav-tab-active" aria-current="page"><?php _e( 'Credits' ); ?></a>
<a href="freedoms.php" class="nav-tab"><?php _e( 'Freedoms' ); ?></a>
<a href="privacy.php" class="nav-tab"><?php _e( 'Privacy' ); ?></a>
</nav>
<div class="about__section has-1-column has-gutters">
<div class="column aligncenter">
<?php if ( ! $credits ) : ?>

View File

@ -221,76 +221,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);
}
@ -301,13 +244,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;
}
@ -355,29 +296,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;
}
@ -385,10 +303,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;
}
}
@ -476,7 +392,7 @@
.about__container h3.is-smaller-heading {
margin-top: 0;
font-size: 1.125rem;
font-weight: 700;
font-weight: 600;
line-height: 1.6;
}
@ -549,6 +465,10 @@
margin-left: auto;
}
.about__container .about__image svg {
vertical-align: middle;
}
.about__container .about__image + h3 {
margin-top: 1.5em;
}
@ -558,7 +478,7 @@
}
.about__container hr {
margin: 0;
margin: 0 var(--gap);
height: var(--gap);
border: none;
border-top: 4px solid var(--accent-2);
@ -588,6 +508,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;
@ -604,12 +529,17 @@
.about__header {
position: relative;
margin-bottom: var(--gap);
padding-top: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
box-sizing: border-box;
padding: calc(var(--gap) * 2) 0;
min-height: 420px;
color: var(--text-light);
background: var(--background) url('../images/about-header-about.svg?ver=6.2') no-repeat;
background-size: cover;
background-position: center calc(50% - 36px);
background-position: center;
}
.credits-php .about__header {
@ -631,7 +561,7 @@
.about__header-title {
box-sizing: border-box;
margin: 0 var(--gap);
padding: 9rem 0 0;
padding: 0;
text-align: center;
}
@ -658,23 +588,20 @@
.about__header-text {
box-sizing: border-box;
max-width: 22em;
margin: 0 auto 10rem;
margin: 0 auto;
padding: 0;
font-size: 1.6rem;
line-height: 1.15;
text-align: center;
}
.credits-php .about__header-text {
margin-bottom: 9rem;
}
.about__header-navigation {
position: relative;
z-index: 1;
display: flex;
justify-content: center;
padding-top: 0;
margin-bottom: var(--gap);
background: var(--nav-background);
color: var(--nav-color);
border-bottom: 3px solid var(--nav-border);
@ -754,6 +681,12 @@
}
}
@media screen and (max-width: 600px) {
.about__header {
min-height: auto;
}
}
@media screen and (max-width: 480px) {
.about__header,
.credits-php .about__header,
@ -766,15 +699,9 @@
font-size: 2.4em;
}
.about__header-title {
padding-top: 2rem;
}
.about__header-text,
.credits-php .about__header-text {
.about__header-text {
margin-right: calc(var(--gap) / 2);
margin-left: calc(var(--gap) / 2);
margin-bottom: 2rem;
}
.about__header-navigation {

File diff suppressed because one or more lines are too long

View File

@ -220,76 +220,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);
}
@ -300,13 +243,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;
}
@ -354,29 +295,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;
}
@ -384,10 +302,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;
}
}
@ -475,7 +391,7 @@
.about__container h3.is-smaller-heading {
margin-top: 0;
font-size: 1.125rem;
font-weight: 700;
font-weight: 600;
line-height: 1.6;
}
@ -548,6 +464,10 @@
margin-right: auto;
}
.about__container .about__image svg {
vertical-align: middle;
}
.about__container .about__image + h3 {
margin-top: 1.5em;
}
@ -557,7 +477,7 @@
}
.about__container hr {
margin: 0;
margin: 0 var(--gap);
height: var(--gap);
border: none;
border-top: 4px solid var(--accent-2);
@ -587,6 +507,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;
@ -603,12 +528,17 @@
.about__header {
position: relative;
margin-bottom: var(--gap);
padding-top: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
box-sizing: border-box;
padding: calc(var(--gap) * 2) 0;
min-height: 420px;
color: var(--text-light);
background: var(--background) url('../images/about-header-about.svg?ver=6.2') no-repeat;
background-size: cover;
background-position: center calc(50% - 36px);
background-position: center;
}
.credits-php .about__header {
@ -630,7 +560,7 @@
.about__header-title {
box-sizing: border-box;
margin: 0 var(--gap);
padding: 9rem 0 0;
padding: 0;
text-align: center;
}
@ -657,23 +587,20 @@
.about__header-text {
box-sizing: border-box;
max-width: 22em;
margin: 0 auto 10rem;
margin: 0 auto;
padding: 0;
font-size: 1.6rem;
line-height: 1.15;
text-align: center;
}
.credits-php .about__header-text {
margin-bottom: 9rem;
}
.about__header-navigation {
position: relative;
z-index: 1;
display: flex;
justify-content: center;
padding-top: 0;
margin-bottom: var(--gap);
background: var(--nav-background);
color: var(--nav-color);
border-bottom: 3px solid var(--nav-border);
@ -753,6 +680,12 @@
}
}
@media screen and (max-width: 600px) {
.about__header {
min-height: auto;
}
}
@media screen and (max-width: 480px) {
.about__header,
.credits-php .about__header,
@ -765,15 +698,9 @@
font-size: 2.4em;
}
.about__header-title {
padding-top: 2rem;
}
.about__header-text,
.credits-php .about__header-text {
.about__header-text {
margin-left: calc(var(--gap) / 2);
margin-right: calc(var(--gap) / 2);
margin-bottom: 2rem;
}
.about__header-navigation {

File diff suppressed because one or more lines are too long

View File

@ -34,15 +34,15 @@ require_once ABSPATH . 'wp-admin/admin-header.php';
<div class="about__header-text">
<?php _e( 'WordPress is free and open source software' ); ?>
</div>
<nav class="about__header-navigation nav-tab-wrapper wp-clearfix" aria-label="<?php esc_attr_e( 'Secondary menu' ); ?>">
<a href="about.php" class="nav-tab"><?php _e( 'What&#8217;s New' ); ?></a>
<a href="credits.php" class="nav-tab"><?php _e( 'Credits' ); ?></a>
<a href="freedoms.php" class="nav-tab nav-tab-active" aria-current="page"><?php _e( 'Freedoms' ); ?></a>
<a href="privacy.php" class="nav-tab"><?php _e( 'Privacy' ); ?></a>
</nav>
</div>
<nav class="about__header-navigation nav-tab-wrapper wp-clearfix" aria-label="<?php esc_attr_e( 'Secondary menu' ); ?>">
<a href="about.php" class="nav-tab"><?php _e( 'What&#8217;s New' ); ?></a>
<a href="credits.php" class="nav-tab"><?php _e( 'Credits' ); ?></a>
<a href="freedoms.php" class="nav-tab nav-tab-active" aria-current="page"><?php _e( 'Freedoms' ); ?></a>
<a href="privacy.php" class="nav-tab"><?php _e( 'Privacy' ); ?></a>
</nav>
<div class="about__section is-feature">
<p class="about-description">
<?php

View File

@ -4,5 +4,5 @@
<path d="M131-26c0 165.69 134.31 300 300 300h1000" stroke="#213FD4" stroke-width="60" stroke-miterlimit="10"/>
<path d="M231-26c0 110.46 89.54 200 200 200h1000" stroke="#213FD4" stroke-width="60" stroke-miterlimit="10"/>
<path d="M336-26c0 55.23 44.567 100 99.545 100H1431" stroke="#213FD4" stroke-width="60" stroke-miterlimit="10"/>
<path d="M132 27c16.569 0 30-13.431 30-30 0-16.569-13.431-30-30-30-16.569 0-30 13.431-30 30 0 16.569 13.431 30 30 30ZM474 104c16.569 0 30-13.431 30-30 0-16.569-13.431-30-30-30-16.569 0-30 13.431-30 30 0 16.569 13.431 30 30 30ZM949 204c16.569 0 30-13.431 30-30 0-16.569-13.431-30-30-30-16.569 0-30 13.431-30 30 0 16.569 13.431 30 30 30ZM775 404c16.569 0 30-13.431 30-30 0-16.569-13.431-30-30-30-16.569 0-30 13.431-30 30 0 16.569 13.431 30 30 30Z" fill="#33F078"/>
<path d="M132 27c16.569 0 30-13.431 30-30 0-16.569-13.431-30-30-30-16.569 0-30 13.431-30 30 0 16.569 13.431 30 30 30ZM474 104c16.569 0 30-13.431 30-30 0-16.569-13.431-30-30-30-16.569 0-30 13.431-30 30 0 16.569 13.431 30 30 30ZM936 204c16.569 0 30-13.431 30-30 0-16.569-13.431-30-30-30-16.569 0-30 13.431-30 30 0 16.569 13.431 30 30 30ZM755 404c16.569 0 30-13.431 30-30 0-16.569-13.431-30-30-30-16.569 0-30 13.431-30 30 0 16.569 13.431 30 30 30Z" fill="#33F078"/>
</svg>

Before

Width:  |  Height:  |  Size: 1.0 KiB

After

Width:  |  Height:  |  Size: 1.0 KiB

View File

@ -28,15 +28,15 @@ require_once ABSPATH . 'wp-admin/admin-header.php';
<div class="about__header-text">
<?php _e( 'We take privacy and transparency very seriously' ); ?>
</div>
<nav class="about__header-navigation nav-tab-wrapper wp-clearfix" aria-label="<?php esc_attr_e( 'Secondary menu' ); ?>">
<a href="about.php" class="nav-tab"><?php _e( 'What&#8217;s New' ); ?></a>
<a href="credits.php" class="nav-tab"><?php _e( 'Credits' ); ?></a>
<a href="freedoms.php" class="nav-tab"><?php _e( 'Freedoms' ); ?></a>
<a href="privacy.php" class="nav-tab nav-tab-active" aria-current="page"><?php _e( 'Privacy' ); ?></a>
</nav>
</div>
<nav class="about__header-navigation nav-tab-wrapper wp-clearfix" aria-label="<?php esc_attr_e( 'Secondary menu' ); ?>">
<a href="about.php" class="nav-tab"><?php _e( 'What&#8217;s New' ); ?></a>
<a href="credits.php" class="nav-tab"><?php _e( 'Credits' ); ?></a>
<a href="freedoms.php" class="nav-tab"><?php _e( 'Freedoms' ); ?></a>
<a href="privacy.php" class="nav-tab nav-tab-active" aria-current="page"><?php _e( 'Privacy' ); ?></a>
</nav>
<div class="about__section has-2-columns is-wider-right">
<div class="column about__image">
<img class="privacy-image" src="<?php echo esc_url( admin_url( 'images/privacy.svg?ver=6.1' ) ); ?>" alt="" />

View File

@ -16,7 +16,7 @@
*
* @global string $wp_version
*/
$wp_version = '6.2-beta5-55496';
$wp_version = '6.2-beta5-55499';
/**
* Holds the WordPress DB revision, increments when changes are made to the WordPress DB schema.