Help/About: Polish the About page for 5.2.
- The About page now uses a CSS grid to layout its design, making the page’s structure more obvious and hopefully easier for contributors in the future. - Removes some code that is no longer used (such as videos, mejs elements, etc.). - Update images. - Unnecessary HTML is removed from a string on the page. This was a regression. - Only users with the correct capability should be instructed to check their site status. - Fixes the placement of commas. Reviewed by melchoyce, afercia, jeremyfelt, and desrosj. Props ryelle, melchoyce, cathibosco1, man4toman, SergeyBiryukov, afercia, ramiy, kjellr, tellyworth, earnjam, andreamiddleton, marybaum. See #46901. git-svn-id: https://develop.svn.wordpress.org/trunk@45278 602fd350-edb4-49c9-b593-d223f7449a82
This commit is contained in:
Jonathan Desrosiers
parent
ff53498be8
commit
994950ea8c
|
|
@ -40,46 +40,54 @@ include( ABSPATH . 'wp-admin/admin-header.php' );
|
||||||
<a href="freedoms.php?privacy-notice" class="nav-tab"><?php _e( 'Privacy' ); ?></a>
|
<a href="freedoms.php?privacy-notice" class="nav-tab"><?php _e( 'Privacy' ); ?></a>
|
||||||
</nav>
|
</nav>
|
||||||
|
|
||||||
<h2 class="feature-section-header"><?php _e( 'Keeping Your Site Safe' ); ?></h2>
|
<div class="headline-feature">
|
||||||
|
<h2><?php _e( 'Keeping Your Site Safe' ); ?></h2>
|
||||||
<div class="feature-section headline-feature one-col">
|
<p class="lead-description"><?php _e( 'WordPress 5.2 gives you even more robust tools for identifying and fixing configuration issues and fatal errors. Whether you are a developer helping clients or you manage your site solo, these tools can help get you the right information when you need it.' ); ?></p>
|
||||||
<div class="col">
|
<div class="inline-svg aligncenter">
|
||||||
<p><?php _e( 'WordPress 5.2 gives you even more robust tools for identifying and fixing configuration issues and fatal errors. Whether you are a developer helping clients or you manage your site solo, these tools can help get you the right information when you need it.' ); ?></p>
|
<img src="https://make.wordpress.org/core/files/2019/05/about_maintain-wordpress.png" alt="">
|
||||||
<div class="inline-svg">
|
|
||||||
<img src="https://make.wordpress.org/core/files/2019/04/site-safe.png" alt="">
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<hr />
|
<hr />
|
||||||
|
|
||||||
<div class="feature-section one-col is-wide wp-clearfix">
|
<div class="feature-section is-wide has-2-columns is-wider-left">
|
||||||
<div class="col">
|
<div class="column is-vertically-aligned-center">
|
||||||
<h3><?php _e( 'Site Health Check' ); ?></h3>
|
<h3><?php _e( 'Site Health Check' ); ?></h3>
|
||||||
<div class="inline-svg alignright">
|
|
||||||
<img src="https://make.wordpress.org/core/files/2019/04/health-check.png" alt="">
|
|
||||||
</div>
|
|
||||||
<p>
|
<p>
|
||||||
<?php
|
<?php
|
||||||
printf(
|
printf(
|
||||||
/* translators: 1: link to the WordPress 5.1 release post 2: link to /wp-admin/site-health.php 3: link to /wp-admin/site-health.php?tab=debug */
|
/* translators: 1: link to the WordPress 5.1 release post */
|
||||||
__( 'Building on <a href="%1$s">the Site Health features introduced in 5.1</a>, this release adds two new pages to help debug common configuration issues. It also adds space where developers can include debugging information for site maintainers. <a href="%2$s">Check your site status</a>, and <a href="%3$s">learn how to debug issues</a>.' ),
|
__( 'Building on <a href="%1$s">the Site Health features introduced in 5.1</a>, this release adds two new pages to help debug common configuration issues. It also adds space where developers can include debugging information for site maintainers.' ),
|
||||||
__( 'https://wordpress.org/news/2019/02/betty/' ),
|
__( 'https://wordpress.org/news/2019/02/betty/' )
|
||||||
|
);
|
||||||
|
|
||||||
|
if ( current_user_can( 'install_plugins' ) ) {
|
||||||
|
printf(
|
||||||
|
/* translators: 1: link to /wp-admin/site-health.php 2: link to /wp-admin/site-health.php?tab=debug */
|
||||||
|
__( ' <a href="%1$s">Check your site status</a>, and <a href="%2$s">learn how to debug issues</a>.' ),
|
||||||
admin_url( 'site-health.php' ),
|
admin_url( 'site-health.php' ),
|
||||||
admin_url( 'site-health.php?tab=debug' )
|
admin_url( 'site-health.php?tab=debug' )
|
||||||
);
|
);
|
||||||
|
}
|
||||||
?>
|
?>
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
|
<div class="column">
|
||||||
|
<div class="inline-svg aligncenter">
|
||||||
|
<img src="https://s.w.org/images/core/5.2/about_site-health.svg" alt="">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<hr />
|
<hr />
|
||||||
|
|
||||||
<div class="feature-section one-col is-wide wp-clearfix">
|
<div class="feature-section is-wide has-2-columns is-wider-right">
|
||||||
<div class="col">
|
<div class="column">
|
||||||
<div class="inline-svg alignleft">
|
<div class="inline-svg aligncenter">
|
||||||
<img src="https://make.wordpress.org/core/files/2019/04/error-protection.png" alt="">
|
<img src="https://s.w.org/images/core/5.2/about_error-protection.svg" alt="">
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="column is-vertically-aligned-center">
|
||||||
<h3><?php _e( 'PHP Error Protection' ); ?></h3>
|
<h3><?php _e( 'PHP Error Protection' ); ?></h3>
|
||||||
<p><?php _e( 'This administrator-focused update will let you safely fix or manage fatal errors without requiring developer time. It features better handling of the so-called “white screen of death,” and a way to enter recovery mode, which pauses error-causing plugins or themes.' ); ?></p>
|
<p><?php _e( 'This administrator-focused update will let you safely fix or manage fatal errors without requiring developer time. It features better handling of the so-called “white screen of death,” and a way to enter recovery mode, which pauses error-causing plugins or themes.' ); ?></p>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -87,14 +95,14 @@ include( ABSPATH . 'wp-admin/admin-header.php' );
|
||||||
|
|
||||||
<hr />
|
<hr />
|
||||||
|
|
||||||
<h3 class="under-the-hood-header"><?php _e( 'Improvements for Everyone' ); ?></h3>
|
<h3 class="aligncenter"><?php _e( 'Improvements for Everyone' ); ?></h3>
|
||||||
|
|
||||||
<div class="under-the-hood feature-section two-col">
|
<div class="has-2-columns">
|
||||||
<div class="col cta">
|
<div class="column aligncenter">
|
||||||
<h4><?php _e( 'Accessibility Updates' ); ?></h4>
|
<h4><?php _e( 'Accessibility Updates' ); ?></h4>
|
||||||
<p><?php _e( 'A number of changes work together to improve contextual awareness and keyboard navigation flow for those using screen readers and other assistive technologies.' ); ?></p>
|
<p><?php _e( 'A number of changes work together to improve contextual awareness and keyboard navigation flow for those using screen readers and other assistive technologies.' ); ?></p>
|
||||||
</div>
|
</div>
|
||||||
<div class="col cta">
|
<div class="column aligncenter">
|
||||||
<h4><?php _e( 'New Dashboard Icons' ); ?></h4>
|
<h4><?php _e( 'New Dashboard Icons' ); ?></h4>
|
||||||
<p><?php _e( 'Thirteen new icons include Instagram, a suite of icons for BuddyPress, and rotated Earth icons for global inclusion. Find them in the Dashboard and have some fun!' ); ?></p>
|
<p><?php _e( 'Thirteen new icons include Instagram, a suite of icons for BuddyPress, and rotated Earth icons for global inclusion. Find them in the Dashboard and have some fun!' ); ?></p>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -102,33 +110,33 @@ include( ABSPATH . 'wp-admin/admin-header.php' );
|
||||||
|
|
||||||
<hr />
|
<hr />
|
||||||
|
|
||||||
<h3 class="under-the-hood-header"><?php _e( 'Developer Happiness' ); ?></h3>
|
<h3 class="aligncenter"><?php _e( 'Developer Happiness' ); ?></h3>
|
||||||
|
|
||||||
<div class="under-the-hood feature-section two-col">
|
<div class="has-2-columns is-fullwidth">
|
||||||
<div class="col">
|
<div class="column">
|
||||||
<h4><a href="https://make.wordpress.org/core/2019/03/26/coding-standards-updates-for-php-5-6/"><?php _e( 'PHP Version Bump' ); ?></a></h4>
|
<h4><a href="https://make.wordpress.org/core/2019/03/26/coding-standards-updates-for-php-5-6/"><?php _e( 'PHP Version Bump' ); ?></a></h4>
|
||||||
<p><?php _e( 'The minimum supported PHP version is now 5.6.20. As of WordPress 5.2, themes and plugins can safely take advantage of namespaces, anonymous functions, and more!' ); ?></p>
|
<p><?php _e( 'The minimum supported PHP version is now 5.6.20. As of WordPress 5.2, themes and plugins can safely take advantage of namespaces, anonymous functions, and more!' ); ?></p>
|
||||||
</div>
|
</div>
|
||||||
<div class="col">
|
<div class="column">
|
||||||
<h4><a href="https://make.wordpress.org/core/2019/04/24/developer-focused-privacy-updates-in-5-2/"><?php _e( 'Privacy Updates' ); ?></a></h4>
|
<h4><a href="https://make.wordpress.org/core/2019/04/24/developer-focused-privacy-updates-in-5-2/"><?php _e( 'Privacy Updates' ); ?></a></h4>
|
||||||
<p><?php _e( 'A new theme page template, a conditional function, and two CSS classes make designing and customizing the Privacy Policy page easier.' ); ?></p>
|
<p><?php _e( 'A new theme page template, a conditional function, and two CSS classes make designing and customizing the Privacy Policy page easier.' ); ?></p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="under-the-hood feature-section two-col">
|
<div class="has-2-columns is-fullwidth">
|
||||||
<div class="col">
|
<div class="column">
|
||||||
<h4><a href="https://make.wordpress.org/core/2019/04/24/miscellaneous-developer-updates-in-5-2/"><?php _e( 'New Body Tag Hook' ); ?></a></h4>
|
<h4><a href="https://make.wordpress.org/core/2019/04/24/miscellaneous-developer-updates-in-5-2/"><?php _e( 'New Body Tag Hook' ); ?></a></h4>
|
||||||
<p>
|
<p>
|
||||||
<?php
|
<?php
|
||||||
printf(
|
printf(
|
||||||
/* translators: 1: wp_body_open 2: <body> */
|
/* translators: 1: wp_body_open 2: <body> */
|
||||||
__( '5.2 introduces a <code>%1$s</code> hook, which lets themes support injecting code right at the beginning of the <code>%2$s</code> element.' ),
|
__( '5.2 introduces a %1$s hook, which lets themes support injecting code right at the beginning of the %2$s element.' ),
|
||||||
'wp_body_open',
|
'<code>wp_body_open</code>',
|
||||||
'<body>'
|
'<code><body></code>'
|
||||||
);
|
);
|
||||||
?>
|
?>
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
<div class="col">
|
<div class="column">
|
||||||
<h4><a href="https://make.wordpress.org/core/2019/03/25/building-javascript/"><?php _e( 'Building JavaScript' ); ?></a></h4>
|
<h4><a href="https://make.wordpress.org/core/2019/03/25/building-javascript/"><?php _e( 'Building JavaScript' ); ?></a></h4>
|
||||||
<p><?php _e( 'With the addition of webpack and Babel configurations in the @wordpress/scripts package, developers won’t have to worry about setting up complex build tools to write modern JavaScript.' ); ?></p>
|
<p><?php _e( 'With the addition of webpack and Babel configurations in the @wordpress/scripts package, developers won’t have to worry about setting up complex build tools to write modern JavaScript.' ); ?></p>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
|
|
@ -8,7 +8,6 @@
|
||||||
2.0 About Page
|
2.0 About Page
|
||||||
2.1 Typography
|
2.1 Typography
|
||||||
2.2 Structure
|
2.2 Structure
|
||||||
2.3 Floating Header Layout
|
|
||||||
3.0 Credits & Freedoms Pages
|
3.0 Credits & Freedoms Pages
|
||||||
------------------------------------------------------------------------------*/
|
------------------------------------------------------------------------------*/
|
||||||
|
|
||||||
|
|
@ -51,29 +50,14 @@
|
||||||
vertical-align: middle;
|
vertical-align: middle;
|
||||||
}
|
}
|
||||||
|
|
||||||
.about-wrap figure {
|
.about-wrap .inline-svg img {
|
||||||
position: relative;
|
max-width: 100%;
|
||||||
margin: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.about-wrap .feature-section figure img {
|
|
||||||
margin-bottom: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.about-wrap figcaption {
|
|
||||||
position: absolute;
|
|
||||||
bottom: 0;
|
|
||||||
width: 100%;
|
width: 100%;
|
||||||
padding: 40px 10px 15px;
|
height: auto;
|
||||||
overflow: auto;
|
|
||||||
box-sizing: border-box;
|
|
||||||
background: linear-gradient(0deg, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.3) 60%, transparent);
|
|
||||||
font-weight: 600;
|
|
||||||
text-shadow: 0 0 5px rgba(0, 0, 0, 0.75);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.about-wrap .jetpack-video-wrapper {
|
.about-wrap video {
|
||||||
margin-bottom: 0;
|
margin: 1.5em auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* WordPress Version Badge */
|
/* WordPress Version Badge */
|
||||||
|
|
@ -116,17 +100,6 @@
|
||||||
|
|
||||||
/* 1.1 - Typography */
|
/* 1.1 - Typography */
|
||||||
|
|
||||||
.about-wrap p {
|
|
||||||
line-height: 1.5;
|
|
||||||
font-size: 14px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.about-wrap .feature-section p {
|
|
||||||
max-width: 55em;
|
|
||||||
margin-left: auto;
|
|
||||||
margin-right: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
.about-wrap h1 {
|
.about-wrap h1 {
|
||||||
margin: 0.2em 200px 0 0;
|
margin: 0.2em 200px 0 0;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
|
|
@ -150,13 +123,14 @@
|
||||||
line-height: 1.5;
|
line-height: 1.5;
|
||||||
}
|
}
|
||||||
|
|
||||||
.about-wrap .under-the-hood-header {
|
.about-wrap h4 {
|
||||||
margin: 40px 0 0;
|
font-size: 16px;
|
||||||
text-align: center;
|
color: #23282d;
|
||||||
}
|
}
|
||||||
|
|
||||||
.about-wrap h4 {
|
.about-wrap p {
|
||||||
color: #23282d;
|
line-height: 1.5;
|
||||||
|
font-size: 16px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.about-wrap code,
|
.about-wrap code,
|
||||||
|
|
@ -187,98 +161,135 @@
|
||||||
|
|
||||||
/* 1.2 - Structure */
|
/* 1.2 - Structure */
|
||||||
|
|
||||||
.about-wrap [class$="-col"] {
|
.about-wrap .has-1-columns,
|
||||||
display: flex;
|
.about-wrap .has-2-columns,
|
||||||
justify-content: space-between;
|
.about-wrap .has-3-columns,
|
||||||
flex-wrap: wrap;
|
.about-wrap .has-4-columns {
|
||||||
|
display: -ms-grid;
|
||||||
|
display: grid;
|
||||||
|
max-width: 800px;
|
||||||
|
margin-top: 40px;
|
||||||
|
margin-left: auto;
|
||||||
|
margin-right: auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
.about-wrap .one-col {
|
.about-wrap .column {
|
||||||
margin: 0 auto;
|
margin-right: 20px;
|
||||||
max-width: 680px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.about-wrap .one-col.is-wide {
|
|
||||||
max-width: 760px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.about-wrap .under-the-hood {
|
|
||||||
margin: auto;
|
|
||||||
max-width: 1020px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.about-wrap .inline-svg img {
|
|
||||||
max-width: 100%;
|
|
||||||
width: 100%;
|
|
||||||
height: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
.about-wrap .inline-svg.full-width {
|
|
||||||
margin-bottom: 120px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.about-wrap .under-the-hood .inline-svg {
|
|
||||||
margin-left: 100px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.about-wrap [class$="-col"] .col {
|
|
||||||
flex: 1;
|
|
||||||
align-self: flex-start;
|
|
||||||
}
|
|
||||||
|
|
||||||
.about-wrap [class$="-col"] .col + .col {
|
|
||||||
margin-left: 20px;
|
margin-left: 20px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.about-wrap [class$="-col"] .is-span-two {
|
.about-wrap .is-wide {
|
||||||
flex: 2;
|
max-width: 760px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.about-wrap .one-col img {
|
.about-wrap .is-fullwidth {
|
||||||
margin: 1em 0 2em;
|
max-width: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.about-wrap .one-col .alignright img,
|
.about-wrap .has-1-columns {
|
||||||
.about-wrap .one-col .alignleft img {
|
display: block;
|
||||||
|
max-width: 680px;
|
||||||
|
margin: 0 auto 40px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.about-wrap .has-2-columns {
|
||||||
|
-ms-grid-columns: 1fr 1fr;
|
||||||
|
grid-template-columns: 1fr 1fr;
|
||||||
|
}
|
||||||
|
|
||||||
|
.about-wrap .has-2-columns .column:nth-of-type(2n+1) {
|
||||||
|
-ms-grid-column: 1;
|
||||||
|
grid-column-start: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.about-wrap .has-2-columns .column:nth-of-type(2n) {
|
||||||
|
-ms-grid-column: 2;
|
||||||
|
grid-column-start: 2;
|
||||||
|
}
|
||||||
|
|
||||||
|
.about-wrap .has-2-columns.is-wider-right {
|
||||||
|
-ms-grid-columns: 1fr 2fr;
|
||||||
|
grid-template-columns: 1fr 2fr;
|
||||||
|
}
|
||||||
|
|
||||||
|
.about-wrap .has-2-columns.is-wider-left {
|
||||||
|
-ms-grid-columns: 2fr 1fr;
|
||||||
|
grid-template-columns: 2fr 1fr;
|
||||||
|
}
|
||||||
|
|
||||||
|
.about-wrap .has-3-columns {
|
||||||
|
-ms-grid-columns: (1fr)[3];
|
||||||
|
grid-template-columns: repeat(3, 1fr);
|
||||||
|
}
|
||||||
|
|
||||||
|
.about-wrap .has-3-columns .column:nth-of-type(3n+1) {
|
||||||
|
-ms-grid-column: 1;
|
||||||
|
grid-column-start: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.about-wrap .has-3-columns .column:nth-of-type(3n+2) {
|
||||||
|
-ms-grid-column: 2;
|
||||||
|
grid-column-start: 2;
|
||||||
|
}
|
||||||
|
|
||||||
|
.about-wrap .has-3-columns .column:nth-of-type(3n) {
|
||||||
|
-ms-grid-column: 3;
|
||||||
|
grid-column-start: 3;
|
||||||
|
}
|
||||||
|
|
||||||
|
.about-wrap .has-4-columns {
|
||||||
|
-ms-grid-columns: (1fr)[4];
|
||||||
|
grid-template-columns: repeat(4, 1fr);
|
||||||
|
}
|
||||||
|
|
||||||
|
.about-wrap .has-4-columns .column:nth-of-type(4n+1) {
|
||||||
|
-ms-grid-column: 1;
|
||||||
|
grid-column-start: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.about-wrap .has-4-columns .column:nth-of-type(4n+2) {
|
||||||
|
-ms-grid-column: 2;
|
||||||
|
grid-column-start: 2;
|
||||||
|
}
|
||||||
|
|
||||||
|
.about-wrap .has-4-columns .column:nth-of-type(4n+3) {
|
||||||
|
-ms-grid-column: 3;
|
||||||
|
grid-column-start: 3;
|
||||||
|
}
|
||||||
|
|
||||||
|
.about-wrap .has-4-columns .column:nth-of-type(4n) {
|
||||||
|
-ms-grid-column: 4;
|
||||||
|
grid-column-start: 4;
|
||||||
|
}
|
||||||
|
|
||||||
|
.about-wrap .column :first-child {
|
||||||
margin-top: 0;
|
margin-top: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.about-wrap .two-col img {
|
.about-wrap .aligncenter {
|
||||||
margin-bottom: 1.5em;
|
|
||||||
}
|
|
||||||
|
|
||||||
.about-wrap .feature-video .mejs-controls {
|
|
||||||
display: none !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.about-wrap .feature-video .mejs-overlay-loading span {
|
|
||||||
background: transparent; /* Hide loading.gif */
|
|
||||||
}
|
|
||||||
|
|
||||||
.about-wrap video {
|
|
||||||
margin: 1.5em auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
.about-wrap .inline-svg.alignright {
|
|
||||||
margin-left: 80px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.about-wrap .inline-svg.alignleft {
|
|
||||||
margin-right: 80px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.about-wrap .cta {
|
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
.about-wrap .cta .button {
|
.about-wrap .alignleft {
|
||||||
margin: 0 auto 5px;
|
float: left;
|
||||||
font-weight: 600;
|
margin-right: 40px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.about-wrap .feature-section .button {
|
.about-wrap .alignright {
|
||||||
margin-top: 1.5em;
|
float: right;
|
||||||
font-weight: 600;
|
margin-left: 40px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.about-wrap .is-vertically-aligned-top {
|
||||||
|
align-self: start;
|
||||||
|
}
|
||||||
|
|
||||||
|
.about-wrap .is-vertically-aligned-center {
|
||||||
|
align-self: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.about-wrap .is-vertically-aligned-bottom {
|
||||||
|
align-self: end;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* 1.3 - Point Releases */
|
/* 1.3 - Point Releases */
|
||||||
|
|
@ -288,6 +299,10 @@
|
||||||
border-bottom: 1px solid #ddd;
|
border-bottom: 1px solid #ddd;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.about-wrap .changelog {
|
||||||
|
margin-bottom: 40px;
|
||||||
|
}
|
||||||
|
|
||||||
.about-wrap .changelog.point-releases h3 {
|
.about-wrap .changelog.point-releases h3 {
|
||||||
padding-top: 35px;
|
padding-top: 35px;
|
||||||
}
|
}
|
||||||
|
|
@ -296,96 +311,38 @@
|
||||||
padding-top: 7px;
|
padding-top: 7px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.about-wrap .changelog.feature-section .col {
|
||||||
|
margin-top: 40px;
|
||||||
|
}
|
||||||
|
|
||||||
/*------------------------------------------------------------------------------
|
/*------------------------------------------------------------------------------
|
||||||
2.0 - About Page
|
2.0 - About Page
|
||||||
------------------------------------------------------------------------------*/
|
------------------------------------------------------------------------------*/
|
||||||
|
|
||||||
/* 2.1 - Typography */
|
/* 2.1 - Typography */
|
||||||
|
|
||||||
.about-wrap .feature-section-header {
|
.about-wrap .lead-description {
|
||||||
margin: 50px 0 0;
|
font-size: 1.5em;
|
||||||
}
|
text-align: center;
|
||||||
|
|
||||||
.about-wrap .feature-section.two-col h3 {
|
|
||||||
margin-top: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.about-wrap .feature-section h4 {
|
|
||||||
margin: 1.4em 0 0.6em 0;
|
|
||||||
font-size: 1em;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.about-wrap .feature-section p {
|
.about-wrap .feature-section p {
|
||||||
margin-top: 0.6em;
|
margin-top: 0.6em;
|
||||||
}
|
}
|
||||||
|
|
||||||
.about-wrap .lead-description {
|
|
||||||
font-size: 1.5em;
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.about-wrap .two-col-text {
|
|
||||||
column-count: 2;
|
|
||||||
column-gap: 40px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.about-wrap .two-col-text p:first-of-type {
|
|
||||||
margin-top: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.about-wrap .streamlined-updates p,
|
|
||||||
.about-wrap .native-fonts p {
|
|
||||||
margin-bottom: 3em;
|
|
||||||
}
|
|
||||||
|
|
||||||
.about-wrap .under-the-hood img + h3 {
|
|
||||||
margin-top: 1.25em;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* 2.2 - Structure */
|
/* 2.2 - Structure */
|
||||||
|
|
||||||
.about-wrap .headline-feature {
|
.about-wrap .headline-feature {
|
||||||
margin-bottom: 40px;
|
margin: 0 auto 40px;
|
||||||
|
max-width: 680px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.about-wrap .featured-image {
|
.about-wrap .headline-feature h2 {
|
||||||
text-align: center;
|
margin: 50px 0 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.about-wrap .feature-section {
|
.about-wrap .headline-feature img {
|
||||||
overflow: hidden;
|
max-width: 600px;
|
||||||
}
|
|
||||||
|
|
||||||
.about-wrap .feature-section.no-heading {
|
|
||||||
padding-top: 35px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.about-wrap .feature-section .media-container {
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
|
|
||||||
.about-wrap .embed-container {
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.about-wrap .embed-container iframe {
|
|
||||||
max-width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.about-wrap .wp-embedded-content {
|
|
||||||
max-width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.about-wrap .feature-section .col {
|
|
||||||
margin-top: 40px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.about-wrap .changelog {
|
|
||||||
margin-bottom: 40px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.about-wrap .changelog.feature-section .col {
|
|
||||||
margin-top: 40px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Return to Dashboard Home link */
|
/* Return to Dashboard Home link */
|
||||||
|
|
@ -490,18 +447,25 @@
|
||||||
margin: 0.6em 0;
|
margin: 0.6em 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.freedoms-php .about-wrap .col .freedoms-image {
|
.freedoms-php .has-4-columns {
|
||||||
|
margin-bottom: 40px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.freedoms-php .column .freedoms-image {
|
||||||
background-image: url('https://s.w.org/wp-content/themes/pub/wporg-main/images/freedoms-2x.png');
|
background-image: url('https://s.w.org/wp-content/themes/pub/wporg-main/images/freedoms-2x.png');
|
||||||
background-size: 100%;
|
background-size: 100%;
|
||||||
padding-top: 100%;
|
padding-top: 100%;
|
||||||
}
|
}
|
||||||
.freedoms-php .about-wrap .col:nth-of-type(2) .freedoms-image {
|
|
||||||
|
.freedoms-php .column:nth-of-type(2) .freedoms-image {
|
||||||
background-position: 0 34%;
|
background-position: 0 34%;
|
||||||
}
|
}
|
||||||
.freedoms-php .about-wrap .col:nth-of-type(3) .freedoms-image {
|
|
||||||
|
.freedoms-php .column:nth-of-type(3) .freedoms-image {
|
||||||
background-position: 0 66%;
|
background-position: 0 66%;
|
||||||
}
|
}
|
||||||
.freedoms-php .about-wrap .col:nth-of-type(4) .freedoms-image {
|
|
||||||
|
.freedoms-php .column:nth-of-type(4) .freedoms-image {
|
||||||
background-position: 0 100%;
|
background-position: 0 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -510,51 +474,60 @@
|
||||||
------------------------------------------------------------------------------*/
|
------------------------------------------------------------------------------*/
|
||||||
|
|
||||||
@media screen and (max-width: 782px) {
|
@media screen and (max-width: 782px) {
|
||||||
.about-wrap .two-col-text {
|
.about-wrap .has-3-columns,
|
||||||
column-count: 1;
|
.about-wrap .has-4-columns {
|
||||||
|
-ms-grid-columns: 1fr 1fr;
|
||||||
|
grid-template-columns: 1fr 1fr;
|
||||||
}
|
}
|
||||||
|
|
||||||
.about-wrap .one-col .alignright {
|
.about-wrap .has-3-columns .column:nth-of-type(3n+1),
|
||||||
margin-left: 20px;
|
.about-wrap .has-4-columns .column:nth-of-type(4n+1) {
|
||||||
max-width: 150px;
|
-ms-grid-column: 1;
|
||||||
|
grid-column-start: 1;
|
||||||
|
-ms-grid-row: 1;
|
||||||
|
grid-row-start: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
.about-wrap .one-col .alignleft {
|
.about-wrap .has-3-columns .column:nth-of-type(3n+2),
|
||||||
margin-right: 20px;
|
.about-wrap .has-4-columns .column:nth-of-type(4n+2) {
|
||||||
max-width: 150px;
|
-ms-grid-column: 2;
|
||||||
|
grid-column-start: 2;
|
||||||
|
-ms-grid-row: 1;
|
||||||
|
grid-row-start: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
.about-wrap .two-col .col,
|
.about-wrap .has-3-columns .column:nth-of-type(3n),
|
||||||
.about-wrap .three-col .col,
|
.about-wrap .has-4-columns .column:nth-of-type(4n+3) {
|
||||||
.about-wrap .four-col .col {
|
-ms-grid-column: 1;
|
||||||
min-width: 48% !important;
|
grid-column-start: 1;
|
||||||
max-width: 48% !important;
|
-ms-grid-row: 2;
|
||||||
margin-left: 0 !important;
|
grid-row-start: 2;
|
||||||
}
|
}
|
||||||
|
|
||||||
.about-wrap .eight-col .col {
|
.about-wrap .has-4-columns .column:nth-of-type(4n) {
|
||||||
min-width: 24% !important;
|
-ms-grid-column: 2;
|
||||||
|
grid-column-start: 2;
|
||||||
|
-ms-grid-row: 2;
|
||||||
|
grid-row-start: 2;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.about-wrap .three-col img,
|
@media screen and (max-width: 600px) {
|
||||||
.about-wrap .four-col img,
|
.about-wrap .has-2-columns,
|
||||||
.about-wrap .eight-col img {
|
.about-wrap .has-3-columns,
|
||||||
|
.about-wrap .has-4-columns {
|
||||||
display: block;
|
display: block;
|
||||||
margin: 0 auto;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.about-wrap figcaption {
|
.about-wrap :not(.is-wider-right):not(.is-wider-left) .column {
|
||||||
position: relative;
|
margin-right: 0;
|
||||||
margin-top: 10px;
|
margin-left: 0;
|
||||||
margin-bottom: 15px;
|
|
||||||
padding: 0;
|
|
||||||
background: none;
|
|
||||||
color: #40464D;
|
|
||||||
text-shadow: none;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.about-wrap .under-the-hood .inline-svg {
|
.about-wrap .has-2-columns.is-wider-right,
|
||||||
margin-left: 40px;
|
.about-wrap .has-2-columns.is-wider-left {
|
||||||
|
display: -ms-grid;
|
||||||
|
display: grid;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -578,60 +551,21 @@
|
||||||
margin-bottom: 1.5em;
|
margin-bottom: 1.5em;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.about-wrap .one-col .alignright,
|
|
||||||
.about-wrap .one-col .alignleft {
|
|
||||||
max-width: 120px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.about-wrap .feature-section .col {
|
@media only screen and (max-width: 480px) {
|
||||||
margin-top: 1em;
|
.about-wrap .has-2-columns.is-wider-right,
|
||||||
|
.about-wrap .has-2-columns.is-wider-left {
|
||||||
|
display: block;
|
||||||
}
|
}
|
||||||
|
|
||||||
.about-wrap .two-col .col,
|
.about-wrap .column {
|
||||||
.about-wrap .three-col .col,
|
margin-right: 0;
|
||||||
.about-wrap .three-col .col {
|
margin-left: 0;
|
||||||
min-width: 100% !important;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.about-wrap .eight-col .col {
|
.about-wrap .has-2-columns.is-wider-right img,
|
||||||
min-width: 48% !important;
|
.about-wrap .has-2-columns.is-wider-left img {
|
||||||
}
|
max-width: 160px;
|
||||||
|
|
||||||
.about-wrap .under-the-hood.four-col .col,
|
|
||||||
.about-wrap .under-the-hood.three-col .col,
|
|
||||||
.about-wrap .under-the-hood.two-col .col,
|
|
||||||
.about-wrap .under-the-hood.one-col .col {
|
|
||||||
margin-bottom: 2em;
|
|
||||||
padding-bottom: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.about-wrap .under-the-hood:nth-of-type(2n),
|
|
||||||
.about-wrap .under-the-hood:nth-of-type(3n) {
|
|
||||||
margin-top: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.about-wrap .under-the-hood img + h3 {
|
|
||||||
margin-top: 1.25em;
|
|
||||||
}
|
|
||||||
|
|
||||||
.about-wrap .under-the-hood .inline-svg {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.about-wrap .inline-svg.full-width {
|
|
||||||
margin-bottom: 60px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@media only screen and (max-width: 320px) {
|
|
||||||
.about-wrap .one-col .alignright,
|
|
||||||
.about-wrap .one-col .alignleft {
|
|
||||||
float: none;
|
|
||||||
margin: 0 auto;
|
|
||||||
}
|
|
||||||
.about-wrap .one-col .alignright img,
|
|
||||||
.about-wrap .one-col .alignleft img {
|
|
||||||
margin: 0 0 1em;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -53,38 +53,35 @@ if ( $is_privacy_notice ) {
|
||||||
|
|
||||||
<?php else : ?>
|
<?php else : ?>
|
||||||
<div class="about-wrap-content">
|
<div class="about-wrap-content">
|
||||||
<div class="feature-section one-col">
|
<div class="feature-section has-1-columns">
|
||||||
<div class="col">
|
|
||||||
<h2><?php _e( 'Freedoms' ); ?></h2>
|
<h2><?php _e( 'Freedoms' ); ?></h2>
|
||||||
<p class="about-description"><?php printf( __( '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>
|
<p class="about-description"><?php printf( __( '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>
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="feature-section four-col">
|
<div class="feature-section has-4-columns is-fullwidth">
|
||||||
<div class="col">
|
<div class="column">
|
||||||
<div class="freedoms-image"></div>
|
<div class="freedoms-image"></div>
|
||||||
<h3><?php _e( 'The 1st Freedom' ); ?></h3>
|
<h3><?php _e( 'The 1st Freedom' ); ?></h3>
|
||||||
<p><?php _e( 'To run the program for any purpose.' ); ?></p>
|
<p><?php _e( 'To run the program for any purpose.' ); ?></p>
|
||||||
</div>
|
</div>
|
||||||
<div class="col">
|
<div class="column">
|
||||||
<div class="freedoms-image"></div>
|
<div class="freedoms-image"></div>
|
||||||
<h3><?php _e( 'The 2nd Freedom' ); ?></h3>
|
<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>
|
<p><?php _e( 'To study how the program works and change it to make it do what you wish.' ); ?></p>
|
||||||
</div>
|
</div>
|
||||||
<div class="col">
|
<div class="column">
|
||||||
<div class="freedoms-image"></div>
|
<div class="freedoms-image"></div>
|
||||||
<h3><?php _e( 'The 3rd Freedom' ); ?></h3>
|
<h3><?php _e( 'The 3rd Freedom' ); ?></h3>
|
||||||
<p><?php _e( 'To redistribute.' ); ?></p>
|
<p><?php _e( 'To redistribute.' ); ?></p>
|
||||||
</div>
|
</div>
|
||||||
<div class="col">
|
<div class="column">
|
||||||
<div class="freedoms-image"></div>
|
<div class="freedoms-image"></div>
|
||||||
<h3><?php _e( 'The 4th Freedom' ); ?></h3>
|
<h3><?php _e( 'The 4th Freedom' ); ?></h3>
|
||||||
<p><?php _e( 'To distribute copies of your modified versions to others.' ); ?></p>
|
<p><?php _e( 'To distribute copies of your modified versions to others.' ); ?></p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="feature-section one-col">
|
<div class="feature-section has-1-columns">
|
||||||
<div class="col">
|
|
||||||
<p><?php printf( __( 'WordPress grows when people like you tell their friends about it, and the thousands of businesses and services that are built on and around WordPress share that fact with their users. We’re flattered every time someone spreads the good word, just make sure to <a href="%s">check out our trademark guidelines</a> first.' ), 'https://wordpressfoundation.org/trademark-policy/' ); ?></p>
|
<p><?php printf( __( 'WordPress grows when people like you tell their friends about it, and the thousands of businesses and services that are built on and around WordPress share that fact with their users. We’re flattered every time someone spreads the good word, just make sure to <a href="%s">check out our trademark guidelines</a> first.' ), 'https://wordpressfoundation.org/trademark-policy/' ); ?></p>
|
||||||
|
|
||||||
<p>
|
<p>
|
||||||
|
|
@ -99,7 +96,6 @@ if ( $is_privacy_notice ) {
|
||||||
<p><?php _e( 'Don’t you wish all software came with these freedoms? So do we! For more information, check out the <a href="https://www.fsf.org/">Free Software Foundation</a>.' ); ?></p>
|
<p><?php _e( 'Don’t you wish all software came with these freedoms? So do we! For more information, check out the <a href="https://www.fsf.org/">Free Software Foundation</a>.' ); ?></p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
|
|
||||||
<?php endif; ?>
|
<?php endif; ?>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue