Help/About: Update the 5.3 About page for RC3.

Previously [46556], [46572].
Props ryelle, SergeyBiryukov, afercia, desrosj, davidbaumwald, azaozz.
See #47708.
Built from https://develop.svn.wordpress.org/trunk@46616


git-svn-id: http://core.svn.wordpress.org/trunk@46413 1a063a9b-81f0-0310-95a4-ce76da25c4cd
This commit is contained in:
desrosj 2019-10-29 20:10:04 +00:00
parent b5cc5b37f7
commit 0b94025ba9
9 changed files with 1330 additions and 169 deletions

View File

@ -16,7 +16,7 @@ list( $display_version ) = explode( '-', get_bloginfo( 'version' ) );
include( ABSPATH . 'wp-admin/admin-header.php' );
?>
<div class="wrap about-wrap full-width-layout">
<div class="wrap about__container">
<div class="about__header">
<div class="about__header-title">
@ -26,14 +26,8 @@ include( ABSPATH . 'wp-admin/admin-header.php' );
</h1>
</div>
<div class="about__header-badge wp-badge">
<?php
printf(
/* translators: %s: The current WordPress version number. */
__( 'Version %s' ),
$display_version
);
?>
<div class="about__header-badge">
<img src="https://wordpress.org/images/core/5.4/code-is-poetry-rc.svg" alt="<?php _e( 'Code is Poetry' ); ?>" />
</div>
<div class="about__header-text">
@ -67,11 +61,11 @@ include( ABSPATH . 'wp-admin/admin-header.php' );
<div class="about__section has-2-columns">
<div class="column is-edge-to-edge has-accent-background-color">
<div class="about__image aligncenter">
<img src="data:image/svg+xml;utf8,%3Csvg width='660' height='818' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='99' y='178' width='132' height='132' fill='%23F4EFE1'/%3E%3Crect x='231' y='310' width='99' height='99' fill='%2344141E'/%3E%3Crect x='330' y='409' width='132' height='132' fill='%23F4EFE1'/%3E%3Crect x='462' y='541' width='99' height='99' fill='%2344141E'/%3E%3C/svg%3E" alt="" />
<img src="data:image/svg+xml;charset=utf8,%3Csvg width='660' height='818' viewbox='0 0 660 818' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='99' y='178' width='132' height='132' fill='%23F4EFE1'/%3E%3Crect x='231' y='310' width='99' height='99' fill='%2344141E'/%3E%3Crect x='330' y='409' width='132' height='132' fill='%23F4EFE1'/%3E%3Crect x='462' y='541' width='99' height='99' fill='%2344141E'/%3E%3C/svg%3E" alt="" />
</div>
</div>
<div class="column is-vertically-aligned-center">
<h3><?php _e( 'Block Editor Improvements' ); ?></h3>
<h2><?php _e( 'Block Editor Improvements' ); ?></h2>
<p>
<?php _e( 'This enhancement-focused update introduces over 150 new features and usability improvements, including improved large image support for uploading non-optimized, high-resolution pictures taken from your smartphone or other high-quality cameras. Combined with larger default image sizes, pictures always look their best.' ); ?>
</p>
@ -84,7 +78,7 @@ include( ABSPATH . 'wp-admin/admin-header.php' );
<div class="about__section has-2-columns">
<div class="column is-vertically-aligned-center">
<h3><?php _e( 'Expanded Design Flexibility' ); ?></h3>
<h2><?php _e( 'Expanded Design Flexibility' ); ?></h2>
<p>
<?php
printf(
@ -104,14 +98,14 @@ include( ABSPATH . 'wp-admin/admin-header.php' );
</div>
<div class="column is-edge-to-edge has-accent-background-color">
<div class="about__image aligncenter">
<img src="data:image/svg+xml;utf8,%3Csvg width='500' height='500' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='75' y='200' width='150' height='75' fill='%2344141E'/%3E%3Crect x='175' y='75' width='50' height='100' fill='%2385273B'/%3E%3Crect x='75' y='75' width='75' height='100' fill='%23F4EFE1'/%3E%3Crect x='250' y='200' width='175' height='75' fill='%2344141E'/%3E%3Crect x='350' y='75' width='75' height='100' fill='%2385273B'/%3E%3Crect x='250' y='75' width='75' height='100' fill='%23F4EFE1'/%3E%3Crect x='75' y='375' width='150' height='50' fill='%2344141E'/%3E%3Crect x='175' y='300' width='50' height='50' fill='%2385273B'/%3E%3Crect x='75' y='300' width='75' height='50' fill='%23F4EFE1'/%3E%3Crect x='250' y='372.5' width='175' height='52.5' fill='%2344141E'/%3E%3Crect x='350' y='300' width='75' height='50' fill='%2385273B'/%3E%3Crect x='250' y='300' width='75' height='50' fill='%23F4EFE1'/%3E%3C/svg%3E%0A" alt="">
<img src="data:image/svg+xml;charset=utf8,%3Csvg width='500' height='500' viewbox='0 0 500 500' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='75' y='200' width='150' height='75' fill='%2344141E'/%3E%3Crect x='175' y='75' width='50' height='100' fill='%2385273B'/%3E%3Crect x='75' y='75' width='75' height='100' fill='%23F4EFE1'/%3E%3Crect x='250' y='200' width='175' height='75' fill='%2344141E'/%3E%3Crect x='350' y='75' width='75' height='100' fill='%2385273B'/%3E%3Crect x='250' y='75' width='75' height='100' fill='%23F4EFE1'/%3E%3Crect x='75' y='375' width='150' height='50' fill='%2344141E'/%3E%3Crect x='175' y='300' width='50' height='50' fill='%2385273B'/%3E%3Crect x='75' y='300' width='75' height='50' fill='%23F4EFE1'/%3E%3Crect x='250' y='372.5' width='175' height='52.5' fill='%2344141E'/%3E%3Crect x='350' y='300' width='75' height='50' fill='%2385273B'/%3E%3Crect x='250' y='300' width='75' height='50' fill='%23F4EFE1'/%3E%3C/svg%3E%0A" alt="">
</div>
</div>
</div>
<div class="about__section has-2-columns has-subtle-background-color">
<div class="column is-vertically-aligned-center">
<h3><?php _e( 'Introducing Twenty Twenty' ); ?></h3>
<h2><?php _e( 'Introducing Twenty Twenty' ); ?></h2>
<p><?php _e( 'As the block editor celebrates its first birthday, we are proud that Twenty Twenty is designed with flexibility at its core. Show off your services or products with a combination of columns, groups, and media blocks. Set your content to wide or full alignment for dynamic and engaging layouts. Or let your thoughts be the star with a centered content column!' ); ?></p>
<p>
@ -126,7 +120,7 @@ include( ABSPATH . 'wp-admin/admin-header.php' );
</div>
<div class="column is-edge-to-edge">
<div class="about__image aligncenter">
<img src="https://cldup.com/rsaSI50LvZ.png" alt="" />
<img src="https://make.wordpress.org/core/files/2019/10/twentytwenty-mobile.png" alt="" />
</div>
</div>
</div>
@ -134,7 +128,7 @@ include( ABSPATH . 'wp-admin/admin-header.php' );
<div class="about__section has-subtle-background-color">
<div class="column is-edge-to-edge">
<div class="about__image aligncenter">
<img src="https://cldup.com/8AuwuFLW0J.png" alt="" />
<img src="https://make.wordpress.org/core/files/2019/10/twentytwenty-desktop.png" alt="" />
</div>
</div>
</div>
@ -142,26 +136,26 @@ include( ABSPATH . 'wp-admin/admin-header.php' );
<hr />
<div class="about__section has-3-columns">
<h3 class="is-section-header"><?php _e( 'Improvements for Everyone' ); ?></h3>
<h2 class="is-section-header"><?php _e( 'Improvements for Everyone' ); ?></h2>
<div class="column">
<h4><?php _e( 'Automatic Image Rotation' ); ?></h4>
<h3><?php _e( 'Automatic Image Rotation' ); ?></h3>
<p><?php _e( 'Your images will be correctly rotated upon upload according to the embedded orientation data. This feature was first proposed nine years ago and made possible through the perserverance of many dedicated contributors.' ); ?></p>
</div>
<div class="column">
<h4><?php _e( 'Site Health Checks' ); ?></h4>
<h3><?php _e( 'Site Health Checks' ); ?></h3>
<p><?php _e( 'The improvements introduced in 5.3 make it even easier to identify issues. Expanded recommendations highlight areas that may need troubleshooting on your site from the Health Check screen.' ); ?></p>
</div>
<div class="column">
<h4><?php _e( 'Admin Email Verification' ); ?></h4>
<p><?php _e( 'Youll now be periodically asked to confirm that your admin email address is up to date when you log in as an administrator. This reduces the chance of getting locked out out of your site if you change your email address.' ); ?></p>
<h3><?php _e( 'Admin Email Verification' ); ?></h3>
<p><?php _e( 'Youll now be periodically asked to confirm that your admin email address is up to date when you log in as an administrator. This reduces the chance of getting locked out of your site if you change your email address.' ); ?></p>
</div>
</div>
<div class="about__section">
<div class="column is-edge-to-edge">
<div class="about__image aligncenter">
<img src="data:image/svg+xml;utf8,%3Csvg width='1000' height='498' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='865.463' y='36.8596' width='133.8' height='132.326' fill='%23942F44'/%3E%3Crect x='865.463' y='180.98' width='133.8' height='132.326' fill='%23942F44'/%3E%3Crect x='866.2' y='328.05' width='133.8' height='132.694' fill='%23942F44'/%3E%3Crect y='331.736' width='405.455' height='134.169' fill='%234E1521'/%3E%3Crect y='36.8596' width='405.455' height='129.008' fill='%234E1521'/%3E%3Crect y='184.298' width='387.025' height='133.8' fill='%234E1521'/%3E%3Crect x='719.13' y='34.6479' width='133.8' height='428.677' fill='%23BD3854'/%3E%3Crect x='571.323' y='18.4297' width='133.8' height='423.885' fill='%23BD3854'/%3E%3Crect x='423.516' y='35.0164' width='133.8' height='425.728' fill='%23BD3854'/%3E%3C/svg%3E" alt="" />
<img src="data:image/svg+xml;charset=utf8,%3Csvg width='1000' height='498' viewbox='0 0 1000 498' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='865.463' y='36.8596' width='133.8' height='132.326' fill='%23942F44'/%3E%3Crect x='865.463' y='180.98' width='133.8' height='132.326' fill='%23942F44'/%3E%3Crect x='866.2' y='328.05' width='133.8' height='132.694' fill='%23942F44'/%3E%3Crect y='331.736' width='405.455' height='134.169' fill='%234E1521'/%3E%3Crect y='36.8596' width='405.455' height='129.008' fill='%234E1521'/%3E%3Crect y='184.298' width='387.025' height='133.8' fill='%234E1521'/%3E%3Crect x='719.13' y='34.6479' width='133.8' height='428.677' fill='%23BD3854'/%3E%3Crect x='571.323' y='18.4297' width='133.8' height='423.885' fill='%23BD3854'/%3E%3Crect x='423.516' y='35.0164' width='133.8' height='425.728' fill='%23BD3854'/%3E%3C/svg%3E" alt="" />
</div>
</div>
</div>
@ -169,10 +163,10 @@ include( ABSPATH . 'wp-admin/admin-header.php' );
<hr />
<div class="about__section has-2-columns has-subtle-background-color">
<h3 class="is-section-header"><?php _e( 'For Developers' ); ?></h3>
<h2 class="is-section-header"><?php _e( 'For Developers' ); ?></h2>
<div class="column">
<h4><?php _e( 'Date/Time Component Fixes' ); ?></h4>
<h3><?php _e( 'Date/Time Component Fixes' ); ?></h3>
<p>
<?php
printf(
@ -184,7 +178,7 @@ include( ABSPATH . 'wp-admin/admin-header.php' );
</p>
</div>
<div class="column">
<h4><?php _e( 'PHP 7.4 Compatibility' ); ?></h4>
<h3><?php _e( 'PHP 7.4 Compatibility' ); ?></h3>
<p>
<?php
printf(

View File

@ -15,8 +15,10 @@ $title = __( 'Credits' );
list( $display_version ) = explode( '-', get_bloginfo( 'version' ) );
include( ABSPATH . 'wp-admin/admin-header.php' );
$credits = wp_credits();
?>
<div class="wrap about-wrap full-width-layout">
<div class="wrap about__container">
<div class="about__header">
<div class="about__header-title">
@ -26,14 +28,8 @@ include( ABSPATH . 'wp-admin/admin-header.php' );
</h1>
</div>
<div class="about__header-badge wp-badge">
<?php
printf(
/* translators: %s: The current WordPress version number. */
__( 'Version %s' ),
$display_version
);
?>
<div class="about__header-badge">
<img src="https://wordpress.org/images/core/5.4/code-is-poetry-rc.svg" alt="<?php _e( 'Code is Poetry' ); ?>" />
</div>
<div class="about__header-text">
@ -56,35 +52,55 @@ include( ABSPATH . 'wp-admin/admin-header.php' );
</nav>
</div>
<div class="about-wrap-content">
<div class="about__section">
<div class="column">
<h2><?php _e( 'WordPress is created by a worldwide team of passionate individuals.' ); ?></h2>
<p>
<?php
if ( ! $credits ) {
printf(
/* translators: 1: https://wordpress.org/about/, 2: https://make.wordpress.org/ */
__( 'WordPress is created by a <a href="%1$s">worldwide team</a> of passionate individuals. <a href="%2$s">Get involved in WordPress</a>.' ),
__( 'https://wordpress.org/about/' ),
__( 'https://make.wordpress.org/' )
);
} else {
printf(
/* translators: %s: https://make.wordpress.org/ */
__( 'Want to see your name in lights on this page? <a href="%s">Get involved in WordPress</a>.' ),
__( 'https://make.wordpress.org/' )
);
}
?>
</p>
</div>
<div class="about__image aligncenter">
<img src="data:image/svg+xml;charset=utf8,%3Csvg width='1320' height='350' viewbox='0 0 1320 350' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='72' height='220' transform='matrix(1 0 0 -1 61 220)' fill='%23321017'/%3E%3Crect width='72' height='250' transform='matrix(1 0 0 -1 166 300)' fill='%23BD3854'/%3E%3Crect width='72' height='220' transform='matrix(1 0 0 -1 272 220)' fill='%23321017'/%3E%3Crect width='71' height='220' transform='matrix(1 0 0 -1 378 220)' fill='%235F1B29'/%3E%3Crect width='71' height='220' transform='matrix(1 0 0 -1 483 220)' fill='%23321017'/%3E%3Crect width='71' height='220' transform='matrix(1 0 0 -1 587 220)' fill='%235F1B29'/%3E%3Crect width='71.28' height='250' transform='matrix(1 0 0 -1 689 300)' fill='%23BD3854'/%3E%3Crect width='72' height='220' transform='matrix(1 0 0 -1 884 220)' fill='%235F1B29'/%3E%3Crect width='72' height='220' transform='matrix(1 0 0 -1 789 220)' fill='%23321017'/%3E%3Crect width='71' height='220' transform='matrix(1 0 0 -1 985 220)' fill='%23321017'/%3E%3Crect width='72' height='220' transform='matrix(1 0 0 -1 1084 220)' fill='%235F1B29'/%3E%3Crect width='72' height='220' transform='matrix(1 0 0 -1 1179 220)' fill='%233D0F19'/%3E%3C/svg%3E%0A" alt="" />
</div>
</div>
<?php
$credits = wp_credits();
if ( ! $credits ) {
echo '<p class="about-description">';
printf(
/* translators: 1: https://wordpress.org/about/, 2: https://make.wordpress.org/ */
__( 'WordPress is created by a <a href="%1$s">worldwide team</a> of passionate individuals. <a href="%2$s">Get involved in WordPress</a>.' ),
__( 'https://wordpress.org/about/' ),
__( 'https://make.wordpress.org/' )
);
echo '</p>';
echo '</div>';
echo '</div>';
include( ABSPATH . 'wp-admin/admin-footer.php' );
exit;
}
echo '<p class="about-description">' . __( 'WordPress is created by a worldwide team of passionate individuals.' ) . "</p>\n";
$previous_type = '';
echo '<p>' . sprintf(
/* translators: %s: https://make.wordpress.org/ */
__( 'Want to see your name in lights on this page? <a href="%s">Get involved in WordPress</a>.' ),
__( 'https://make.wordpress.org/' )
) . '</p>';
foreach ( $credits['groups'] as $group_slug => $group_data ) :
?>
<?php
if ( $previous_type !== $group_data['type'] ) {
echo '<hr />';
}
?>
<div class="about__section">
<div class="column <?php echo 'titles' === $group_data['type'] ? 'has-subtle-background-color' : ''; ?>">
foreach ( $credits['groups'] as $group_slug => $group_data ) {
<?php
if ( $group_data['name'] ) {
if ( 'Translators' == $group_data['name'] ) {
// Considered a special slug in the API response. (Also, will never be returned for en_US.)
@ -97,7 +113,7 @@ foreach ( $credits['groups'] as $group_slug => $group_data ) {
$title = translate( $group_data['name'] );
}
echo '<h2 class="wp-people-group">' . esc_html( $title ) . "</h2>\n";
echo '<h2 class="wp-people-group-title">' . esc_html( $title ) . "</h2>\n";
}
if ( ! empty( $group_data['shuffle'] ) ) {
@ -120,7 +136,7 @@ foreach ( $credits['groups'] as $group_slug => $group_data ) {
foreach ( $group_data['data'] as $person_data ) {
echo '<li class="wp-person" id="wp-person-' . esc_attr( $person_data[2] ) . '">' . "\n\t";
echo '<a href="' . esc_url( sprintf( $credits['data']['profiles'], $person_data[2] ) ) . '" class="web">';
$size = 'compact' == $group_data['type'] ? 30 : 60;
$size = 'compact' == $group_data['type'] ? 40 : 80;
$data = get_avatar_data( $person_data[1] . '@md5.gravatar.com', array( 'size' => $size ) );
$size *= 2;
$data2x = get_avatar_data( $person_data[1] . '@md5.gravatar.com', array( 'size' => $size ) );
@ -135,10 +151,12 @@ foreach ( $credits['groups'] as $group_slug => $group_data ) {
echo "</ul>\n";
break;
}
}
$previous_type = $group_data['type'];
?>
?>
</div>
</div>
<?php endforeach; ?>
</div>
<?php

View File

@ -2,18 +2,592 @@
/*------------------------------------------------------------------------------
22.0 - About Pages
1.0 Global: About, Credits, Freedoms
1.1 Typography
1.2 Structure
1.3 Point Releases
2.0 About Page
2.1 Typography
2.2 Structure
3.0 Credits & Freedoms Pages
1.0 Global: About, Credits, Freedoms, Privacy
1.1 Layout
1.2 Typography & Elements
1.3 Header
2.0 Credits Page
3.0 Freedoms Page
x.2.0 Legacy About Styles: Global
x.2.1 Typography
x.2.2 Structure
x.2.3 Point Releases
x.3.0 Legacy About Styles: About Page
x.3.1 Typography
x.3.2 Structure
x.4.0 Legacy About Styles: Credits & Freedoms Pages
x.5.0 Legacy About Styles: Media Queries
------------------------------------------------------------------------------*/
:root {
/* Beiges, used as text backgrounds. */
--base-1: #FEFCF7;
--base-2: #F4EFE1;
--base-3: #D7D2C5;
--base-4: #7B776C;
--text: #413E38;
/* Reds, used as accents, backgrounds, etc */
--accent-1: #BD3854;
--accent-2: #5F1B29;
--accent-3: #321017;
}
/*------------------------------------------------------------------------------
1.0 - Global: About, Credits, Freedoms
1.0 - Global: About, Credits, Freedoms, Privacy
------------------------------------------------------------------------------*/
.about-php #wpcontent,
.credits-php #wpcontent,
.freedoms-php #wpcontent,
.privacy-php #wpcontent {
background: white;
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-right: 24px;
}
}
.about__container {
max-width: 1000px;
margin: 24px auto;
}
.about__container .alignleft {
float: right;
}
.about__container .alignright {
float: left;
}
.about__container .aligncenter {
text-align: center;
}
.about__container .is-vertically-aligned-top {
-ms-grid-row-align: start;
align-self: start;
}
.about__container .is-vertically-aligned-center {
-ms-grid-row-align: center;
align-self: center;
}
.about__container .is-vertically-aligned-bottom {
-ms-grid-row-align: end;
align-self: end;
}
.about__section {
background: #F4EFE1;
background: var(--base-2);
}
.about__container .has-accent-background-color {
background-color: #BD3854;
background-color: var(--accent-1);
}
.about__container .has-subtle-background-color {
background-color: #D7D2C5;
background-color: var(--base-3);
}
/* 1.1 - Layout */
.about__section {
margin: 0;
}
.about__section .column {
padding: 32px;
}
.about__section .column.is-edge-to-edge {
padding: 0;
}
.about__section .column p:last-of-type {
margin-bottom: 0;
}
.about__section .is-section-header {
margin-bottom: 0;
padding: 32px 32px 0;
}
.about__section.is-feature {
padding: 32px;
}
.about__section.is-feature p {
margin: 0;
}
.about__section.has-2-columns,
.about__section.has-3-columns,
.about__section.has-4-columns {
display: -ms-grid;
display: grid;
}
.about__section.has-2-columns {
-ms-grid-columns: 1fr 1fr;
grid-template-columns: 1fr 1fr;
}
.about__section.has-2-columns.is-wider-right {
-ms-grid-columns: 1fr 2fr;
grid-template-columns: 1fr 2fr;
}
.about__section.has-2-columns.is-wider-left {
-ms-grid-columns: 2fr 1fr;
grid-template-columns: 2fr 1fr;
}
.about__section.has-2-columns .is-section-header {
-ms-grid-column: 1;
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) {
-ms-grid-column: 1;
grid-column-start: 1;
}
.about__section.has-2-columns .column:nth-of-type(2n) {
-ms-grid-column: 2;
grid-column-start: 2;
}
.about__section.has-3-columns {
-ms-grid-columns: (1fr)[3];
grid-template-columns: repeat(3, 1fr);
}
.about__section.has-3-columns .is-section-header {
-ms-grid-column: 1;
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) {
-ms-grid-column: 1;
grid-column-start: 1;
}
.about__section.has-3-columns .column:nth-of-type(3n+2) {
-ms-grid-column: 2;
grid-column-start: 2;
}
.about__section.has-3-columns .column:nth-of-type(3n) {
-ms-grid-column: 3;
grid-column-start: 3;
}
.about__section.has-4-columns {
-ms-grid-columns: (1fr)[4];
grid-template-columns: repeat(4, 1fr);
}
.about__section.has-4-columns .is-section-header {
-ms-grid-column: 1;
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) {
-ms-grid-column: 1;
grid-column-start: 1;
}
.about__section.has-4-columns .column:nth-of-type(4n+2) {
-ms-grid-column: 2;
grid-column-start: 2;
}
.about__section.has-4-columns .column:nth-of-type(4n+3) {
-ms-grid-column: 3;
grid-column-start: 3;
}
.about__section.has-4-columns .column:nth-of-type(4n) {
-ms-grid-column: 4;
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 {
-ms-grid-row: 2;
grid-row-start: 2;
}
@media screen and (max-width: 782px) {
.about__section.has-3-columns,
.about__section.has-4-columns {
display: block;
padding-bottom: 16px;
}
.about__section.has-3-columns .column:nth-of-type(n),
.about__section.has-4-columns .column:nth-of-type(n) {
padding-top: 16px;
padding-bottom: 16px;
}
}
@media screen and (max-width: 600px) {
.about__section.has-2-columns {
display: flex; /* This is flex, not block, so we can use order below. */
flex-wrap: wrap;
align-content: stretch;
padding-bottom: 16px;
}
.about__section.has-2-columns .column:nth-of-type(n) {
padding-top: 16px;
padding-bottom: 16px;
width: 100%;
}
.about__section.has-2-columns .is-edge-to-edge {
order: -1;
}
}
/* 1.2 - Typography & Elements */
.about__container {
line-height: 1.4;
}
.about__container h1 {
font-size: 5em;
line-height: 1;
}
.about__container h2 {
margin-top: 0;
font-size: 1.4em;
}
.about__container h3 {
margin-top: 0;
font-size: 1em;
}
.about__container p {
font-size: inherit;
line-height: inherit;
}
.about__container ul {
list-style: disc;
margin-right: 16px;
}
.about__container img {
margin: 0;
vertical-align: middle;
}
.about__container .about__image {
display: -ms-grid;
display: grid;
align-items: center;
justify-content: center;
height: 100%;
}
.about__container .about__image img {
max-width: 100%;
width: 100%;
height: auto;
}
.about__container hr {
margin: 0;
height: 32px;
border: none;
}
.about__section {
font-size: 1.2em;
}
.about__section.is-feature {
font-size: 1.6em;
font-weight: bold;
}
@media screen and (max-width: 782px) {
.about__container h1 {
font-size: 4em;
}
}
@media screen and (max-width: 480px) {
.about__container h1 {
font-size: 3.2em;
}
.about__section.is-feature {
font-size: 1.4em;
font-weight: 500;
}
}
/* 1.3 - Header */
.about__header {
display: -ms-grid;
display: grid;
-ms-grid-columns: 1fr 1fr;
grid-template-columns: 1fr 1fr;
-ms-grid-rows: 1fr 1fr;
grid-template-rows: 1fr 1fr;
min-height: 28em;
max-height: 36em;
height: 90vh;
margin-bottom: 32px;
}
.about__header > div {
display: flex;
}
.about__header > div > * {
align-self: flex-end;
}
.about__header-title {
-ms-grid-column: 1;
grid-column: 1;
-ms-grid-row: 1;
-ms-grid-row-span: 2;
grid-row: 1/span 2;
padding: 32px;
background-color: #BD3854;
background-color: var(--accent-1);
color: white;
padding: 32px;
}
.about__header-title h1 {
padding: 0;
color: inherit;
}
.about__header-title h1 span {
display: block;
font-weight: bold;
font-size: 1.2em;
line-height: 1;
}
.about__header-badge {
-ms-grid-column: 2;
grid-column: 2;
-ms-grid-row: 1;
grid-row: 1;
background-color: #5F1B29;
background-color: var(--accent-2);
margin: 0;
padding: 32px;
justify-content: flex-end;
}
.about__header-badge img {
align-self: flex-start;
max-width: 100%;
}
.about__header-text {
-ms-grid-column: 2;
grid-column: 2;
-ms-grid-row: 2;
grid-row: 2;
padding: 32px;
background-color: #321017;
background-color: var(--accent-3);
color: white;
font-size: 1.6em;
line-height: 1.4;
}
.about__header-text p {
margin: 0;
}
.about__header-navigation {
-ms-grid-column: 1;
-ms-grid-column-span: 2;
grid-column: 1/span 2;
-ms-grid-row: 3;
grid-row: 3;
padding-top: 0;
background: #FEFCF7;
background: var(--base-1);
color: #7B776C;
color: var(--base-4);
border-bottom: 3px solid currentColor;
}
.about__header-navigation .nav-tab {
margin-right: 0;
margin-bottom: -3px;
padding: 24px 32px;
font-size: 1.4em;
line-height: 1;
border-width: 0 0 3px;
border-style: solid;
border-color: transparent;
background: transparent;
color: inherit;
}
.about__header-navigation .nav-tab-active {
color: #BD3854;
color: var(--accent-1);
border-color: currentColor;
}
@media screen and (max-width: 782px) {
.about__container .about__header-text {
font-size: 1.4em;
}
}
@media screen and (max-width: 600px) {
.about__header {
display: block;
min-height: unset;
max-height: unset;
height: auto;
}
.about__header-badge {
justify-content: flex-start;
}
.about__header-navigation .nav-tab {
margin-top: 0;
margin-left: 0;
padding: 24px 16px;
}
}
@media screen and (max-width: 480px) {
.about__header-navigation .nav-tab {
float: none;
display: block;
margin-bottom: 0;
padding: 16px 16px;
border-right-width: 3px;
border-bottom: none;
}
.about__header-navigation .nav-tab-active {
border-bottom: none;
border-right-width: 3px;
background: #F4EFE1;
background: var(--base-2);
}
}
/*------------------------------------------------------------------------------
2.0 - Credits Page
------------------------------------------------------------------------------*/
.about__section .wp-people-group-title {
margin-bottom: 2em;
font-size: 1.4em;
}
.about__section .wp-people-group {
margin: 0;
}
.about__section .wp-person {
display: inline-block;
vertical-align: top;
box-sizing: border-box;
padding: 0 0 1em 1em;
height: 6em;
width: calc( 33% - 4px );
min-width: 280px;
}
.about__section .compact .wp-person {
height: auto;
width: calc( 25% - 4px );
min-width: 220px;
padding-bottom: 0.5em;
}
.about__section .wp-person .gravatar {
float: right;
margin: -4px 0 0.85em 0.85em;
padding: 1px;
width: 80px;
height: 80px;
border-radius: 100%;
}
.about__section .compact .wp-person .gravatar {
width: 40px;
height: 40px;
}
.about__section .wp-person .web {
font-size: 1.4em;
font-weight: 700;
text-decoration: none;
color: #413E38;
color: var(--text);
}
.about__section .wp-person .web:hover {
text-decoration: underline;
}
.about__section .compact .wp-person .web {
font-size: 1.2em;
}
.about__section .wp-person .title {
display: block;
margin-top: 0.5em;
}
/*------------------------------------------------------------------------------
3.0 - Freedoms Page
------------------------------------------------------------------------------*/
.about__section .column .freedoms-image {
margin-bottom: 1em;
}
/*------------------------------------------------------------------------------
x.2.0 - Legacy About Styles: Global
------------------------------------------------------------------------------*/
.about-wrap {
@ -99,7 +673,7 @@
line-height: 1.33333333;
}
/* 1.1 - Typography */
/* x.2.1 - Typography */
.about-wrap h1 {
margin: 0.2em 0 0 200px;
@ -160,7 +734,7 @@
color: #555d66;
}
/* 1.2 - Structure */
/* x.2.2 - Structure */
.about-wrap .has-1-columns,
.about-wrap .has-2-columns,
@ -282,18 +856,21 @@
}
.about-wrap .is-vertically-aligned-top {
-ms-grid-row-align: start;
align-self: start;
}
.about-wrap .is-vertically-aligned-center {
-ms-grid-row-align: center;
align-self: center;
}
.about-wrap .is-vertically-aligned-bottom {
-ms-grid-row-align: end;
align-self: end;
}
/* 1.3 - Point Releases */
/* x.2.3 - Point Releases */
.about-wrap .point-releases {
margin-top: 5px;
@ -317,10 +894,10 @@
}
/*------------------------------------------------------------------------------
2.0 - About Page
x.3.0 - Legacy About Styles: About Page
------------------------------------------------------------------------------*/
/* 2.1 - Typography */
/* x.3.1 - Typography */
.about-wrap .lead-description {
font-size: 1.5em;
@ -331,7 +908,7 @@
margin-top: 0.6em;
}
/* 2.2 - Structure */
/* x.3.2 - Structure */
.about-wrap .headline-feature {
margin: 0 auto 40px;
@ -361,7 +938,7 @@
}
/*------------------------------------------------------------------------------
3.0 - Credits & Freedoms Pages
x.4.0 - Legacy About Styles: Credits & Freedoms Pages
------------------------------------------------------------------------------*/
/* Credits */
@ -472,7 +1049,7 @@
}
/*------------------------------------------------------------------------------
4.0 - Media Queries
x.5.0 - Legacy About Styles: Media Queries
------------------------------------------------------------------------------*/
@media screen and (max-width: 782px) {

File diff suppressed because one or more lines are too long

View File

@ -1,18 +1,592 @@
/*------------------------------------------------------------------------------
22.0 - About Pages
1.0 Global: About, Credits, Freedoms
1.1 Typography
1.2 Structure
1.3 Point Releases
2.0 About Page
2.1 Typography
2.2 Structure
3.0 Credits & Freedoms Pages
1.0 Global: About, Credits, Freedoms, Privacy
1.1 Layout
1.2 Typography & Elements
1.3 Header
2.0 Credits Page
3.0 Freedoms Page
x.2.0 Legacy About Styles: Global
x.2.1 Typography
x.2.2 Structure
x.2.3 Point Releases
x.3.0 Legacy About Styles: About Page
x.3.1 Typography
x.3.2 Structure
x.4.0 Legacy About Styles: Credits & Freedoms Pages
x.5.0 Legacy About Styles: Media Queries
------------------------------------------------------------------------------*/
:root {
/* Beiges, used as text backgrounds. */
--base-1: #FEFCF7;
--base-2: #F4EFE1;
--base-3: #D7D2C5;
--base-4: #7B776C;
--text: #413E38;
/* Reds, used as accents, backgrounds, etc */
--accent-1: #BD3854;
--accent-2: #5F1B29;
--accent-3: #321017;
}
/*------------------------------------------------------------------------------
1.0 - Global: About, Credits, Freedoms
1.0 - Global: About, Credits, Freedoms, Privacy
------------------------------------------------------------------------------*/
.about-php #wpcontent,
.credits-php #wpcontent,
.freedoms-php #wpcontent,
.privacy-php #wpcontent {
background: white;
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;
}
.about__container .alignleft {
float: left;
}
.about__container .alignright {
float: right;
}
.about__container .aligncenter {
text-align: center;
}
.about__container .is-vertically-aligned-top {
-ms-grid-row-align: start;
align-self: start;
}
.about__container .is-vertically-aligned-center {
-ms-grid-row-align: center;
align-self: center;
}
.about__container .is-vertically-aligned-bottom {
-ms-grid-row-align: end;
align-self: end;
}
.about__section {
background: #F4EFE1;
background: var(--base-2);
}
.about__container .has-accent-background-color {
background-color: #BD3854;
background-color: var(--accent-1);
}
.about__container .has-subtle-background-color {
background-color: #D7D2C5;
background-color: var(--base-3);
}
/* 1.1 - Layout */
.about__section {
margin: 0;
}
.about__section .column {
padding: 32px;
}
.about__section .column.is-edge-to-edge {
padding: 0;
}
.about__section .column p:last-of-type {
margin-bottom: 0;
}
.about__section .is-section-header {
margin-bottom: 0;
padding: 32px 32px 0;
}
.about__section.is-feature {
padding: 32px;
}
.about__section.is-feature p {
margin: 0;
}
.about__section.has-2-columns,
.about__section.has-3-columns,
.about__section.has-4-columns {
display: -ms-grid;
display: grid;
}
.about__section.has-2-columns {
-ms-grid-columns: 1fr 1fr;
grid-template-columns: 1fr 1fr;
}
.about__section.has-2-columns.is-wider-right {
-ms-grid-columns: 1fr 2fr;
grid-template-columns: 1fr 2fr;
}
.about__section.has-2-columns.is-wider-left {
-ms-grid-columns: 2fr 1fr;
grid-template-columns: 2fr 1fr;
}
.about__section.has-2-columns .is-section-header {
-ms-grid-column: 1;
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) {
-ms-grid-column: 1;
grid-column-start: 1;
}
.about__section.has-2-columns .column:nth-of-type(2n) {
-ms-grid-column: 2;
grid-column-start: 2;
}
.about__section.has-3-columns {
-ms-grid-columns: (1fr)[3];
grid-template-columns: repeat(3, 1fr);
}
.about__section.has-3-columns .is-section-header {
-ms-grid-column: 1;
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) {
-ms-grid-column: 1;
grid-column-start: 1;
}
.about__section.has-3-columns .column:nth-of-type(3n+2) {
-ms-grid-column: 2;
grid-column-start: 2;
}
.about__section.has-3-columns .column:nth-of-type(3n) {
-ms-grid-column: 3;
grid-column-start: 3;
}
.about__section.has-4-columns {
-ms-grid-columns: (1fr)[4];
grid-template-columns: repeat(4, 1fr);
}
.about__section.has-4-columns .is-section-header {
-ms-grid-column: 1;
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) {
-ms-grid-column: 1;
grid-column-start: 1;
}
.about__section.has-4-columns .column:nth-of-type(4n+2) {
-ms-grid-column: 2;
grid-column-start: 2;
}
.about__section.has-4-columns .column:nth-of-type(4n+3) {
-ms-grid-column: 3;
grid-column-start: 3;
}
.about__section.has-4-columns .column:nth-of-type(4n) {
-ms-grid-column: 4;
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 {
-ms-grid-row: 2;
grid-row-start: 2;
}
@media screen and (max-width: 782px) {
.about__section.has-3-columns,
.about__section.has-4-columns {
display: block;
padding-bottom: 16px;
}
.about__section.has-3-columns .column:nth-of-type(n),
.about__section.has-4-columns .column:nth-of-type(n) {
padding-top: 16px;
padding-bottom: 16px;
}
}
@media screen and (max-width: 600px) {
.about__section.has-2-columns {
display: flex; /* This is flex, not block, so we can use order below. */
flex-wrap: wrap;
align-content: stretch;
padding-bottom: 16px;
}
.about__section.has-2-columns .column:nth-of-type(n) {
padding-top: 16px;
padding-bottom: 16px;
width: 100%;
}
.about__section.has-2-columns .is-edge-to-edge {
order: -1;
}
}
/* 1.2 - Typography & Elements */
.about__container {
line-height: 1.4;
}
.about__container h1 {
font-size: 5em;
line-height: 1;
}
.about__container h2 {
margin-top: 0;
font-size: 1.4em;
}
.about__container h3 {
margin-top: 0;
font-size: 1em;
}
.about__container p {
font-size: inherit;
line-height: inherit;
}
.about__container ul {
list-style: disc;
margin-left: 16px;
}
.about__container img {
margin: 0;
vertical-align: middle;
}
.about__container .about__image {
display: -ms-grid;
display: grid;
align-items: center;
justify-content: center;
height: 100%;
}
.about__container .about__image img {
max-width: 100%;
width: 100%;
height: auto;
}
.about__container hr {
margin: 0;
height: 32px;
border: none;
}
.about__section {
font-size: 1.2em;
}
.about__section.is-feature {
font-size: 1.6em;
font-weight: bold;
}
@media screen and (max-width: 782px) {
.about__container h1 {
font-size: 4em;
}
}
@media screen and (max-width: 480px) {
.about__container h1 {
font-size: 3.2em;
}
.about__section.is-feature {
font-size: 1.4em;
font-weight: 500;
}
}
/* 1.3 - Header */
.about__header {
display: -ms-grid;
display: grid;
-ms-grid-columns: 1fr 1fr;
grid-template-columns: 1fr 1fr;
-ms-grid-rows: 1fr 1fr;
grid-template-rows: 1fr 1fr;
min-height: 28em;
max-height: 36em;
height: 90vh;
margin-bottom: 32px;
}
.about__header > div {
display: flex;
}
.about__header > div > * {
align-self: flex-end;
}
.about__header-title {
-ms-grid-column: 1;
grid-column: 1;
-ms-grid-row: 1;
-ms-grid-row-span: 2;
grid-row: 1/span 2;
padding: 32px;
background-color: #BD3854;
background-color: var(--accent-1);
color: white;
padding: 32px;
}
.about__header-title h1 {
padding: 0;
color: inherit;
}
.about__header-title h1 span {
display: block;
font-weight: bold;
font-size: 1.2em;
line-height: 1;
}
.about__header-badge {
-ms-grid-column: 2;
grid-column: 2;
-ms-grid-row: 1;
grid-row: 1;
background-color: #5F1B29;
background-color: var(--accent-2);
margin: 0;
padding: 32px;
justify-content: flex-end;
}
.about__header-badge img {
align-self: flex-start;
max-width: 100%;
}
.about__header-text {
-ms-grid-column: 2;
grid-column: 2;
-ms-grid-row: 2;
grid-row: 2;
padding: 32px;
background-color: #321017;
background-color: var(--accent-3);
color: white;
font-size: 1.6em;
line-height: 1.4;
}
.about__header-text p {
margin: 0;
}
.about__header-navigation {
-ms-grid-column: 1;
-ms-grid-column-span: 2;
grid-column: 1/span 2;
-ms-grid-row: 3;
grid-row: 3;
padding-top: 0;
background: #FEFCF7;
background: var(--base-1);
color: #7B776C;
color: var(--base-4);
border-bottom: 3px solid currentColor;
}
.about__header-navigation .nav-tab {
margin-left: 0;
margin-bottom: -3px;
padding: 24px 32px;
font-size: 1.4em;
line-height: 1;
border-width: 0 0 3px;
border-style: solid;
border-color: transparent;
background: transparent;
color: inherit;
}
.about__header-navigation .nav-tab-active {
color: #BD3854;
color: var(--accent-1);
border-color: currentColor;
}
@media screen and (max-width: 782px) {
.about__container .about__header-text {
font-size: 1.4em;
}
}
@media screen and (max-width: 600px) {
.about__header {
display: block;
min-height: unset;
max-height: unset;
height: auto;
}
.about__header-badge {
justify-content: flex-start;
}
.about__header-navigation .nav-tab {
margin-top: 0;
margin-right: 0;
padding: 24px 16px;
}
}
@media screen and (max-width: 480px) {
.about__header-navigation .nav-tab {
float: none;
display: block;
margin-bottom: 0;
padding: 16px 16px;
border-left-width: 3px;
border-bottom: none;
}
.about__header-navigation .nav-tab-active {
border-bottom: none;
border-left-width: 3px;
background: #F4EFE1;
background: var(--base-2);
}
}
/*------------------------------------------------------------------------------
2.0 - Credits Page
------------------------------------------------------------------------------*/
.about__section .wp-people-group-title {
margin-bottom: 2em;
font-size: 1.4em;
}
.about__section .wp-people-group {
margin: 0;
}
.about__section .wp-person {
display: inline-block;
vertical-align: top;
box-sizing: border-box;
padding: 0 1em 1em 0;
height: 6em;
width: calc( 33% - 4px );
min-width: 280px;
}
.about__section .compact .wp-person {
height: auto;
width: calc( 25% - 4px );
min-width: 220px;
padding-bottom: 0.5em;
}
.about__section .wp-person .gravatar {
float: left;
margin: -4px 0.85em 0.85em 0;
padding: 1px;
width: 80px;
height: 80px;
border-radius: 100%;
}
.about__section .compact .wp-person .gravatar {
width: 40px;
height: 40px;
}
.about__section .wp-person .web {
font-size: 1.4em;
font-weight: 700;
text-decoration: none;
color: #413E38;
color: var(--text);
}
.about__section .wp-person .web:hover {
text-decoration: underline;
}
.about__section .compact .wp-person .web {
font-size: 1.2em;
}
.about__section .wp-person .title {
display: block;
margin-top: 0.5em;
}
/*------------------------------------------------------------------------------
3.0 - Freedoms Page
------------------------------------------------------------------------------*/
.about__section .column .freedoms-image {
margin-bottom: 1em;
}
/*------------------------------------------------------------------------------
x.2.0 - Legacy About Styles: Global
------------------------------------------------------------------------------*/
.about-wrap {
@ -98,7 +672,7 @@
line-height: 1.33333333;
}
/* 1.1 - Typography */
/* x.2.1 - Typography */
.about-wrap h1 {
margin: 0.2em 200px 0 0;
@ -159,7 +733,7 @@
color: #555d66;
}
/* 1.2 - Structure */
/* x.2.2 - Structure */
.about-wrap .has-1-columns,
.about-wrap .has-2-columns,
@ -281,18 +855,21 @@
}
.about-wrap .is-vertically-aligned-top {
-ms-grid-row-align: start;
align-self: start;
}
.about-wrap .is-vertically-aligned-center {
-ms-grid-row-align: center;
align-self: center;
}
.about-wrap .is-vertically-aligned-bottom {
-ms-grid-row-align: end;
align-self: end;
}
/* 1.3 - Point Releases */
/* x.2.3 - Point Releases */
.about-wrap .point-releases {
margin-top: 5px;
@ -316,10 +893,10 @@
}
/*------------------------------------------------------------------------------
2.0 - About Page
x.3.0 - Legacy About Styles: About Page
------------------------------------------------------------------------------*/
/* 2.1 - Typography */
/* x.3.1 - Typography */
.about-wrap .lead-description {
font-size: 1.5em;
@ -330,7 +907,7 @@
margin-top: 0.6em;
}
/* 2.2 - Structure */
/* x.3.2 - Structure */
.about-wrap .headline-feature {
margin: 0 auto 40px;
@ -360,7 +937,7 @@
}
/*------------------------------------------------------------------------------
3.0 - Credits & Freedoms Pages
x.4.0 - Legacy About Styles: Credits & Freedoms Pages
------------------------------------------------------------------------------*/
/* Credits */
@ -471,7 +1048,7 @@
}
/*------------------------------------------------------------------------------
4.0 - Media Queries
x.5.0 - Legacy About Styles: Media Queries
------------------------------------------------------------------------------*/
@media screen and (max-width: 782px) {

File diff suppressed because one or more lines are too long

View File

@ -21,7 +21,7 @@ list( $display_version ) = explode( '-', get_bloginfo( 'version' ) );
include( ABSPATH . 'wp-admin/admin-header.php' );
?>
<div class="wrap about-wrap full-width-layout">
<div class="wrap about__container">
<div class="about__header">
<div class="about__header-title">
@ -31,14 +31,8 @@ include( ABSPATH . 'wp-admin/admin-header.php' );
</h1>
</div>
<div class="about__header-badge wp-badge">
<?php
printf(
/* translators: %s: The current WordPress version number. */
__( 'Version %s' ),
$display_version
);
?>
<div class="about__header-badge">
<img src="https://wordpress.org/images/core/5.4/code-is-poetry-rc.svg" alt="<?php _e( 'Code is Poetry' ); ?>" />
</div>
<div class="about__header-text">
@ -61,44 +55,47 @@ include( ABSPATH . 'wp-admin/admin-header.php' );
</nav>
</div>
<div class="about-wrap-content">
<div class="feature-section has-1-columns">
<h2><?php _e( 'Freedoms' ); ?></h2>
<p class="about-description">
<?php
printf(
/* translators: %s: https://wordpress.org/about/license/ */
__( 'WordPress is Free and open source software, built by a distributed community of mostly volunteer developers from around the world. WordPress comes with some awesome, worldview-changing rights courtesy of its <a href="%s">license</a>, the GPL.' ),
__( 'https://wordpress.org/about/license/' )
);
?>
</p>
</div>
<div class="about__section has-subtle-background-color is-feature">
<h2><?php _e( 'Freedoms' ); ?></h2>
<div class="feature-section has-4-columns is-fullwidth">
<div class="column">
<div class="freedoms-image"></div>
<h3><?php _e( 'The 1st Freedom' ); ?></h3>
<p><?php _e( 'To run the program for any purpose.' ); ?></p>
</div>
<div class="column">
<div class="freedoms-image"></div>
<h3><?php _e( 'The 2nd Freedom' ); ?></h3>
<p><?php _e( 'To study how the program works and change it to make it do what you wish.' ); ?></p>
</div>
<div class="column">
<div class="freedoms-image"></div>
<h3><?php _e( 'The 3rd Freedom' ); ?></h3>
<p><?php _e( 'To redistribute.' ); ?></p>
</div>
<div class="column">
<div class="freedoms-image"></div>
<h3><?php _e( 'The 4th Freedom' ); ?></h3>
<p><?php _e( 'To distribute copies of your modified versions to others.' ); ?></p>
</div>
</div>
<p class="about-description">
<?php
printf(
/* translators: %s: https://wordpress.org/about/license/ */
__( 'WordPress is Free and open source software, built by a distributed community of mostly volunteer developers from around the world. WordPress comes with some awesome, worldview-changing rights courtesy of its <a href="%s">license</a>, the GPL.' ),
__( 'https://wordpress.org/about/license/' )
);
?>
</p>
</div>
<div class="feature-section has-1-columns">
<hr />
<div class="about__section has-4-columns">
<div class="column">
<div class="freedoms-image"></div>
<h3><?php _e( 'The 1st Freedom' ); ?></h3>
<p><?php _e( 'To run the program for any purpose.' ); ?></p>
</div>
<div class="column">
<div class="freedoms-image"></div>
<h3><?php _e( 'The 2nd Freedom' ); ?></h3>
<p><?php _e( 'To study how the program works and change it to make it do what you wish.' ); ?></p>
</div>
<div class="column">
<div class="freedoms-image"></div>
<h3><?php _e( 'The 3rd Freedom' ); ?></h3>
<p><?php _e( 'To redistribute.' ); ?></p>
</div>
<div class="column">
<div class="freedoms-image"></div>
<h3><?php _e( 'The 4th Freedom' ); ?></h3>
<p><?php _e( 'To distribute copies of your modified versions to others.' ); ?></p>
</div>
</div>
<div class="about__section">
<div class="column">
<p>
<?php
printf(

View File

@ -15,7 +15,7 @@ list( $display_version ) = explode( '-', get_bloginfo( 'version' ) );
include( ABSPATH . 'wp-admin/admin-header.php' );
?>
<div class="wrap about-wrap full-width-layout">
<div class="wrap about__container">
<div class="about__header">
<div class="about__header-title">
@ -25,14 +25,8 @@ include( ABSPATH . 'wp-admin/admin-header.php' );
</h1>
</div>
<div class="about__header-badge wp-badge">
<?php
printf(
/* translators: %s: The current WordPress version number. */
__( 'Version %s' ),
$display_version
);
?>
<div class="about__header-badge">
<img src="https://wordpress.org/images/core/5.4/code-is-poetry-rc.svg" alt="<?php _e( 'Code is Poetry' ); ?>" />
</div>
<div class="about__header-text">
@ -55,28 +49,32 @@ include( ABSPATH . 'wp-admin/admin-header.php' );
</nav>
</div>
<div class="about-wrap-content">
<p class="about-description"><?php _e( 'From time to time, your WordPress site may send data to WordPress.org &#8212; including, but not limited to &#8212; the version of WordPress you are using, and a list of installed plugins and themes.' ); ?></p>
<div class="about__section">
<div class="column">
<h2><?php _e( 'Privacy' ); ?></h2>
<p>
<?php
printf(
/* translators: %s: https://wordpress.org/about/stats/ */
__( 'This data is used to provide general enhancements to WordPress, which includes helping to protect your site by finding and automatically installing new updates. It is also used to calculate statistics, such as those shown on the <a href="%s">WordPress.org stats page</a>.' ),
__( 'https://wordpress.org/about/stats/' )
);
?>
</p>
<p><?php _e( 'From time to time, your WordPress site may send data to WordPress.org &#8212; including, but not limited to &#8212; the version of WordPress you are using, and a list of installed plugins and themes.' ); ?></p>
<p>
<?php
printf(
/* translators: %s: https://wordpress.org/about/privacy/ */
__( 'We take privacy and transparency very seriously. To learn more about what data we collect, and how we use it, please visit <a href="%s">WordPress.org/about/privacy</a>.' ),
__( 'https://wordpress.org/about/privacy/' )
);
?>
</p>
<p>
<?php
printf(
/* translators: %s: https://wordpress.org/about/stats/ */
__( 'This data is used to provide general enhancements to WordPress, which includes helping to protect your site by finding and automatically installing new updates. It is also used to calculate statistics, such as those shown on the <a href="%s">WordPress.org stats page</a>.' ),
__( 'https://wordpress.org/about/stats/' )
);
?>
</p>
<p>
<?php
printf(
/* translators: %s: https://wordpress.org/about/privacy/ */
__( 'We take privacy and transparency very seriously. To learn more about what data we collect, and how we use it, please visit <a href="%s">WordPress.org/about/privacy</a>.' ),
__( 'https://wordpress.org/about/privacy/' )
);
?>
</p>
</div>
</div>
</div>

View File

@ -13,7 +13,7 @@
*
* @global string $wp_version
*/
$wp_version = '5.4-alpha-46613';
$wp_version = '5.4-alpha-46616';
/**
* Holds the WordPress DB revision, increments when changes are made to the WordPress DB schema.