Upstream/WordPress
1
0
Fork 0
mirror of https://github.com/WordPress/WordPress.git synced 2024-12-26 02:57:45 +01:00
Code Issues Projects Releases Wiki Activity

Help/About: Add design for 5.4 About page.

Browse Source 
Props melchoyce, marybaum, marktimemedia, elmastudio, ryelle, karmatosed, audrasjb, afercia, francina, sabernhardt.
Reviewed by karmatosed, SergeyBiryukov.
Merges [47475] and [47476] to the 5.4 branch.
See #49295.
Built from https://develop.svn.wordpress.org/branches/5.4@47477


git-svn-id: http://core.svn.wordpress.org/branches/5.4@47266 1a063a9b-81f0-0310-95a4-ce76da25c4cd
This commit is contained in:
Sergey Biryukov 2020-03-20 17:45:08 +00:00
parent 24285f9235
commit 6c4a15cb45
9 changed files with 250 additions and 169 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

61
wp-admin/about.php
View File

@ -21,13 +21,11 @@ require_once ABSPATH . 'wp-admin/admin-header.php';
<div class="about__header">
<div class="about__header-title">
<h1>
<span><?php echo $display_version; ?></span>
<?php _e( 'WordPress' ); ?>
<span><?php echo $display_version; ?></span>
</h1>
</div>
<div class="about__header-badge"></div>
<div class="about__header-text">
<p>
<?php _e( 'Building more with blocks, faster and easier.' ); ?>
@ -42,14 +40,15 @@ require_once ABSPATH . 'wp-admin/admin-header.php';
</nav>
</div>
<div class="about__section is-feature">
<?php _e( 'Say hello to more and better.' ); ?>
<br />
<?php _e( 'More ways to make your pages come alive. With easier ways to get it all done and looking better than ever&mdash;and boosts in speed you can feel.' ); ?>
<div class="about__section is-feature has-accent-background-color">
<p><?php _e( 'Say hello to more and better.' ); ?></p>
<p><?php _e( 'More ways to make your pages come alive. With easier ways to get it all done and looking better than ever&mdash;and boosts in speed you can feel.' ); ?></p>
</div>
<div class="about__section is-feature">
<p>
<hr />
<div class="about__section has-2-columns has-subtle-background-color">
<h2 class="is-section-header">
<?php
printf(
/* translators: %s: The current WordPress version number. */
@ -57,16 +56,17 @@ require_once ABSPATH . 'wp-admin/admin-header.php';
$display_version
);
?>
</p>
</h2>
<div class="column">
<p>
<?php _e( 'Every major release adds more to the block editor.' ); ?>
</p>
<p>
<?php _e( 'More ways to make posts and pages come alive with your best images.' ); ?>
</p>
<p>
<?php _e( 'More ways to bring your visitors in, and keep them engaged, with the richness of embedded media from the web&#8217;s top services.' ); ?>
</p>
</div>
<div class="column">
<p>
<?php _e( 'More ways to make your vision real, and put blocks in the perfect place&mdash;even if a particular kind of block is new to you. More efficient processes.' ); ?>
</p>
@ -74,13 +74,14 @@ require_once ABSPATH . 'wp-admin/admin-header.php';
<?php _e( 'And more speed everywhere, so as you build sections or galleries, or just type in a line of prose, you can feel how much faster your work flows.' ); ?>
</p>
</div>
</div>
<hr />
<div class="about__section has-2-columns">
<div class="column is-edge-to-edge has-accent-background-color">
<div class="column is-edge-to-edge">
<div class="about__image aligncenter">
<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="" />
<img src="data:image/svg+xml;charset=utf8,%3Csvg width='500' height='500' viewbox='0 0 500 500' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23F3F4F5' d='M0 0h500v500H0z'/%3E%3Cpath d='M346.7 37.645s100.5-2.8 102.6 0c2.1 2.8 0 124.999 0 124.999l-106.9 2.8 4.3-127.8z' fill='%232CA8EB'/%3E%3Cpath d='M343.5 185.844s100.5-1.9 102.6 0c2.1 1.9 1.1 125.9 4.3 127.8 3.2 1.9-100.5 1.9-104.8 2.8-4.3.9-2.1-130.6-2.1-130.6z' fill='%237CAED2'/%3E%3Cpath d='M195.6 186.744s102.7 2.8 106.9 2.8c4.2 0 7.4 120.4 4.2 122.2-3.2 1.9-106.9 2.8-106.9 2.8s2.1-126.9-4.2-127.8z' fill='%2381A4D4'/%3E%3Cpath d='M152.8 192.344s2.1 124.1 4.3 126.9c2.1 2.7-109.1 1.8-109.1 1.8v-128.7h104.8z' fill='%235DC3D8'/%3E%3Cpath d='M152 464.544H56v-119.8l101-1.7s-8.9 118-5 121.5z' fill='%230574E2'/%3E%3Cpath d='M195 35.844h101.6s-8.6 119.4 0 125c8.6 5.6-101.6 3.7-101.6 3.7v-128.7z' fill='%23216BCE'/%3E%3Cpath d='M302.3 463.844s-102.9 2.8-105.1 0c-2.2-2.8 0-125 0-125l109.5-2.8-4.4 127.8z' fill='%231C99D1'/%3E%3Cpath d='M346.2 464.544s-2.1-124.1-4.3-126.9c-2.1-2.8 109.1-1.9 109.1-1.9v128.7H346.2v.1z' fill='%231B44DD'/%3E%3Cpath d='M50.2 35.844s100.5-1.9 102.6 0c2.1 1.9 1.1 125.9 4.3 127.8 3.2 1.9-100.5 1.9-104.8 2.8-4.3.9-2.1-130.6-2.1-130.6z' fill='%231B36BC'/%3E%3C/svg%3E" alt="" />
</div>
</div>
<div class="column is-vertically-aligned-center">
@ -104,19 +105,19 @@ require_once ABSPATH . 'wp-admin/admin-header.php';
<li><?php _e( 'Tips are gone. In their place, a Welcome Guide window you can bring up when you need it&mdash;and only when you need it&mdash;again and again.' ); ?></li>
<li><?php _e( 'Know at a glance whether you&#8217;re in a block&#8217;s Edit or Navigation mode. Or, if you have restricted vision, your screen reader will tell you which mode you&#8217;re in.' ); ?></li>
</ul>
<p><?php _e( 'Of course, if you want to work with the very latest tools and features, install the <a href="https://wordpress.org/plugins/gutenberg/">Gutenberg plugin</a>. You&#8217;ll get to be the first to use new and exciting features in the block editor, before anyone else has seen them!' ); ?></p>
<p><em><?php _e( 'Of course, if you want to work with the very latest tools and features, install the <a href="https://wordpress.org/plugins/gutenberg/">Gutenberg plugin</a>. You&#8217;ll get to be the first to use new and exciting features in the block editor, before anyone else has seen them!' ); ?></em></p>
</div>
<div class="column is-edge-to-edge has-accent-background-color">
<div class="column is-edge-to-edge">
<div class="about__image aligncenter">
<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="">
<img src="data:image/svg+xml;charset=utf8,%3Csvg width='500' height='500' viewbox='0 0 500 500' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23F3F4F5' d='M0 0h500v500H0z'/%3E%3Cg clip-path='url(%23clip0)'%3E%3Cpath d='M169.6 171.55l-.3 72.3 330.7-1v-72.6l-330.4 1.3z' fill='%230740B3'/%3E%3Cpath d='M291.2 97.85l-1.3-14.8-63.4-.7v76c0 3.6 176.7 4.1 273.5 4.1v-64.5H291.2v-.1z' fill='%230285D7'/%3E%3Cpath d='M500 27.75l-215.5-5.9 5.4 61.2 210.1 2.5v-57.8z' fill='%231730E5'/%3E%3Cpath d='M500 97.85v-12.3l-210.1-2.5 1.3 14.8H500z' fill='%230285D7'/%3E%3Cpath d='M500 97.85v-12.3l-210.1-2.5 1.3 14.8H500z' fill='%231730E5' style='mix-blend-mode:multiply'/%3E%3Cpath d='M255.2 379.75l-1-49.2-229.2.3-2 69.7 477-1.3v-24.3l-244.8 4.8z' fill='%230285D7'/%3E%3Cpath d='M500 424.35v-15l-430.8 1.2-4 51.5 134.6-.5v-34.4c.1-2.8 214.4-2.9 300.2-2.8z' fill='%230878FF'/%3E%3Cpath d='M500 290.05l-246.4 4.3.6 36.2 245.8-.3v-40.2z' fill='%23072CF0'/%3E%3Cpath d='M500 374.95v-44.7l-245.8.3 1 49.2 244.8-4.8z' fill='%230285D7'/%3E%3Cpath d='M500 374.95v-44.7l-245.8.3 1 49.2 244.8-4.8z' fill='%23072CF0' style='mix-blend-mode:multiply'/%3E%3Cpath d='M199.9 461.55v17.6l300.1-2.4v-16.3l-300.1 1.1z' fill='%230285D7'/%3E%3Cpath d='M500 424.35c-85.8-.1-300.1 0-300.1 2.8v34.4l300.1-1.1v-36.1z' fill='%230878FF'/%3E%3Cpath d='M500 424.35c-85.8-.1-300.1 0-300.1 2.8v34.4l300.1-1.1v-36.1z' fill='%230285D7' style='mix-blend-mode:multiply'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0'%3E%3Cpath transform='rotate(-90 23 479.15)' fill='%23fff' d='M23 479.15h457.3v477H23z'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E" alt="">
</div>
</div>
</div>
<div class="about__section has-2-columns">
<div class="column is-edge-to-edge has-accent-background-color">
<div class="column is-edge-to-edge">
<div class="about__image aligncenter">
<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="" />
<img src="data:image/svg+xml;charset=utf8,%3Csvg width='500' height='500' viewbox='0 0 500 500' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23F3F4F5' d='M0 0h500v500H0z'/%3E%3Cpath d='M31.3 284.4c-2-.1 12.2-250.6 12.2-250.6s94.8 4.4 99.7 5.2c.3 21.8 4.1 250.1 4.1 250.1l-116-4.7z' fill='%231730E5'/%3E%3Cpath d='M346.8 467.4l-11.7-305.9 138.2 2.4-3 304.1-123.5-.6z' fill='%230840B3'/%3E%3Cpath d='M287.7 34.9c2.3 0 5.9 398.5 5.9 398.5s-109.6-2.2-115 .6c-5.4 2.8 10.6-400.5 10.6-400.5l98.5 1.4z' fill='%23018BDE'/%3E%3Cpath d='M372.3 138c32.585 0 59-26.415 59-59s-26.415-59-59-59-59 26.415-59 59 26.415 59 59 59z' fill='%23062EF7'/%3E%3Cpath d='M35.8 315c-12.8 0-24.9 2.9-35.8 8.1v148.7c10.8 5.2 22.9 8.1 35.8 8.1 45.6 0 82.5-36.9 82.5-82.5S81.3 315 35.8 315z' fill='%231C87C0'/%3E%3C/svg%3E" alt="" />
</div>
</div>
<div class="column is-vertically-aligned-center">
@ -133,9 +134,23 @@ require_once ABSPATH . 'wp-admin/admin-header.php';
<hr />
<div class="about__section has-2-columns has-subtle-background-color">
<div class="about__section ">
<div class="column has-subtle-background-color">
<h2 class="is-section-header"><?php _e( 'Just for developers' ); ?></h2>
</div>
</div>
<hr class="is-small" />
<div class="about__section">
<div class="about__image aligncenter">
<img src="data:image/svg+xml;charset=utf8,%3Csvg width='1000' height='500' viewbox='0 0 1000 500' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M761 360.917H428v66.8h333v-66.8z' fill='%230574E2'/%3E%3Cpath d='M921 399.801H592.2v99.7H921v-99.7z' fill='%231C99D1'/%3E%3Cpath d='M288.1 378.963c46.392 0 84-37.496 84-83.749 0-46.253-37.608-83.748-84-83.748s-84 37.495-84 83.748c0 46.253 37.608 83.749 84 83.749z' fill='%230F7DEA'/%3E%3Cpath d='M553.3 191.426H272.5v85.742h280.8v-85.742z' fill='%231730E5'/%3E%3Cpath d='M785 151.545H499.4v77.169H785v-77.169z' fill='%231C99D1'/%3E%3Cpath d='M777.3 284.247c50.258 0 91-40.62 91-90.728 0-50.107-40.742-90.727-91-90.727s-91 40.62-91 90.727c0 50.108 40.742 90.728 91 90.728z' fill='%231826D3'/%3E%3Cpath d='M635 33.898H413v101.695h222V33.898zM1000 303.091H708v76.769h292v-76.769zM366 102.692H0v66.799h366v-66.799z' fill='%230574E2'/%3E%3Cpath d='M275 24.925H96v93.719h179V24.925z' fill='%231C99D1'/%3E%3Cpath d='M861 0H573v66.8h288V0z' fill='%231730E5'/%3E%3Cpath d='M436 440.678c35.346 0 64-28.568 64-63.809 0-35.24-28.654-63.808-64-63.808-35.346 0-64 28.568-64 63.808 0 35.241 28.654 63.809 64 63.809z' fill='%23236FE8'/%3E%3Cpath d='M428 449.651H171.4V500H428v-50.349z' fill='%231C99D1'/%3E%3Cpath d='M318 404.786H77v63.908h241v-63.908z' fill='%231826D3'/%3E%3Cpath d='M818 258.225H600v73.281h218v-73.281zM613 117.647H456v93.719h157v-93.719zM96.1 198.604c18.833 0 34.1-15.221 34.1-33.998 0-18.776-15.267-33.998-34.1-33.998-18.833 0-34.1 15.222-34.1 33.998 0 18.777 15.267 33.998 34.1 33.998z' fill='%231C99D1'/%3E%3C/svg%3E" alt="">
</div>
</div>
<hr class="is-small" />
<div class="about__section has-2-columns">
<div class="column">
<h3><?php _e( 'Add custom fields to menu items—natively' ); ?></h3>
<p>
@ -174,7 +189,10 @@ require_once ABSPATH . 'wp-admin/admin-header.php';
</div>
</div>
<div class="about__section is-feature">
<hr class="is-small" />
<div class="about__section">
<div class="column">
<p>
<?php
printf(
@ -185,6 +203,7 @@ require_once ABSPATH . 'wp-admin/admin-header.php';
?>
</p>
</div>
</div>
<hr />

6
wp-admin/credits.php
View File

@ -23,13 +23,11 @@ $credits = wp_credits();
<div class="about__header">
<div class="about__header-title">
<h1>
<span><?php echo $display_version; ?></span>
<?php _e( 'WordPress' ); ?>
<span><?php echo $display_version; ?></span>
</h1>
</div>
<div class="about__header-badge"></div>
<div class="about__header-text">
<p>
<?php _e( 'Building more with blocks, faster and easier.' ); ?>
@ -69,7 +67,7 @@ $credits = wp_credits();
</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="" />
<img src="data:image/svg+xml;charset=utf8,%3Csvg width='1000' height='300' viewbox='0 0 1000 300' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23F3F4F5' d='M0 0h1000v300H0z'/%3E%3Cpath style='mix-blend-mode:multiply' d='M39.6 140.22l931.1 3.36.8 76.5-929.5 6.6-2.4-86.46z' fill='%23216DD2'/%3E%3Cpath style='mix-blend-mode:multiply' d='M963.7 275.14s-.9-59.58-1-64.14c-.1-4.2-932.3 1.74-932.3 1.74L29 268.48v8.4' fill='%237FCDE6'/%3E%3Cpath style='mix-blend-mode:multiply' d='M958 73.32L47.8 70.26l1.2 78.66 907.3 4.26 1.7-79.86z' fill='%23072CF0'/%3E%3Cpath style='mix-blend-mode:multiply' d='M34 91.32l910.4-2.16L939.2 21 33.3 23.82l.7 67.5z' fill='%230188D9'/%3E%3C/svg%3E" alt="" />
</div>
</div>

146
wp-admin/css/about-rtl.css
View File

@ -21,17 +21,19 @@
.about__container {
/* Section backgrounds */
--background: #f4efe1;
--subtle-background: #d7d2c5;
--background: #f3f4f5;
--subtle-background: #bde7f0;
/* Main text color */
--text: #413e38;
--text: #32373c;
--text-light: #f3f4f5;
/* Navigation colors. */
--nav-background: #fefcf7;
--nav-color: #716d64;
--nav-background: #216bce;
--nav-border: #1730e5;
--nav-color: #f3f4f5;
/* Reds, used as accents & in header. */
--accent-1: #bd3854;
--accent-2: #5f1b29;
--accent-3: #321017;
--accent-1: #1730e5;
--accent-2: #216bce;
--accent-3: #bde7f0;
}
/*------------------------------------------------------------------------------
@ -96,17 +98,19 @@
}
.about__section {
background: #F4EFE1;
background: #f3f4f5;
background: var(--background);
}
.about__container .has-accent-background-color {
background-color: #BD3854;
color: #f3f4f5;
color: var(--text-light);
background-color: #1730e5;
background-color: var(--accent-1);
}
.about__container .has-subtle-background-color {
background-color: #D7D2C5;
background-color: #bde7f0;
background-color: var(--subtle-background);
}
@ -124,6 +128,10 @@
padding: 0;
}
.about__section .column p:first-of-type {
margin-top: 0;
}
.about__section .column p:last-of-type {
margin-bottom: 0;
}
@ -133,6 +141,11 @@
padding: 32px 32px 0;
}
/* Section header is alone in a container. */
.about__section .is-section-header:first-child:last-child {
padding: 0;
}
.about__section.is-feature {
padding: 32px;
}
@ -141,6 +154,10 @@
margin: 0;
}
.about__section.is-feature p + p {
margin-top: 1rem;
}
.about__section.has-2-columns,
.about__section.has-3-columns,
.about__section.has-4-columns {
@ -307,7 +324,8 @@
}
.about__section a {
color: #5f1b29;
color: #1730e5;
color: var(--accent-1);
text-decoration: underline;
}
@ -343,6 +361,7 @@
align-items: center;
justify-content: center;
height: 100%;
overflow: hidden;
}
.about__container .about__image img {
@ -357,6 +376,10 @@
border: none;
}
.about__container hr.is-small {
height: 8px;
}
.about__container div.updated,
.about__container div.error,
.about__container .notice {
@ -370,6 +393,7 @@
.about__section.is-feature {
font-size: 1.6em;
font-weight: 600;
text-align: center;
}
@media screen and (max-width: 782px) {
@ -398,10 +422,16 @@
grid-template-columns: 1fr 1fr;
-ms-grid-rows: 1fr 1fr;
grid-template-rows: 1fr 1fr;
min-height: 28em;
max-height: 36em;
min-height: 30em;
max-height: 42em;
height: 90vh;
margin-bottom: 32px;
background-color: #f3f4f5;
background-color: var(--background);
background-repeat: no-repeat;
background-position: top center;
background-size: contain;
background-image: url('https://wordpress.org/images/core/5.4/header.svg');
}
.about__header > div {
@ -419,15 +449,22 @@
-ms-grid-row-span: 2;
grid-row: 1/span 2;
padding: 32px;
background-color: #BD3854;
background-color: var(--accent-1);
color: white;
padding: 32px;
-webkit-writing-mode: vertical-rl;
-ms-writing-mode: tb-rl;
writing-mode: vertical-rl;
transform: rotate(-180deg);
}
/* Needs to be inline-block to use vertical-align, needs specificity to override flex. */
.about__header .about__header-title {
display: inline-block;
vertical-align: top;
}
.about__header-title h1 {
padding: 0;
color: inherit;
color: #1730e5;
color: var(--accent-1);
}
.about__header-title h1 span {
@ -435,23 +472,8 @@
font-weight: 600;
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%;
color: #216bce;
color: var(--accent-2);
}
.about__header-text {
@ -460,11 +482,10 @@
-ms-grid-row: 2;
grid-row: 2;
padding: 32px;
background-color: #321017;
background-color: var(--accent-3);
color: white;
font-size: 1.5em;
line-height: 1.4;
text-align: left;
justify-self: flex-end;
}
.about__header-text p {
@ -478,11 +499,12 @@
-ms-grid-row: 3;
grid-row: 3;
padding-top: 0;
background: #FEFCF7;
background: #216bce;
background: var(--nav-background);
color: #716d64;
color: #f3f4f5;
color: var(--nav-color);
border-bottom: 3px solid currentColor;
border-bottom: 3px solid #1730e5;
border-bottom: 3px solid var(--nav-border);
}
.about__header-navigation .nav-tab {
@ -499,22 +521,23 @@
.about__header-navigation .nav-tab:hover,
.about__header-navigation .nav-tab:active {
background-color: #F4EFE1;
background-color: var(--background);
background-color: #1730e5;
background-color: var(--accent-1);
}
.about__header-navigation .nav-tab-active {
margin-bottom: -3px;
border-width: 0 0 6px;
color: #BD3854;
color: var(--accent-1);
border-color: currentColor;
border-color: #bde7f0;
border-color: var(--accent-3);
}
.about__header-navigation .nav-tab-active:hover,
.about__header-navigation .nav-tab-active:active {
background-color: transparent;
border-color: currentColor;
background-color: #1730e5;
background-color: var(--accent-1);
border-color: #bde7f0;
border-color: var(--accent-3);
}
@media screen and (max-width: 782px) {
@ -531,8 +554,21 @@
height: auto;
}
.about__header-badge {
justify-content: flex-start;
.about__header-title {
/*
* 80% is a "magic" number to create a top offset approx-equal to the height of the background image,
* which scales to match the container width.
*/
padding-top: 80%;
padding-bottom: 0;
-webkit-writing-mode: initial;
-ms-writing-mode: initial;
writing-mode: initial;
transform: none;
}
.about__header-text {
text-align: right;
}
.about__header-navigation .nav-tab {
@ -548,15 +584,13 @@
display: block;
margin-bottom: 0;
padding: 16px 16px;
border-right-width: 3px;
border-right-width: 6px;
border-bottom: none;
}
.about__header-navigation .nav-tab-active {
border-bottom: none;
border-right-width: 3px;
background: #F4EFE1;
background: var(--background);
border-right-width: 6px;
}
}
@ -604,7 +638,7 @@
font-size: 1.4em;
font-weight: 600;
text-decoration: none;
color: #413E38;
color: #32373c;
color: var(--text);
}

2
wp-admin/css/about-rtl.min.css vendored
View File

File diff suppressed because one or more lines are too long

146
wp-admin/css/about.css
View File

@ -20,17 +20,19 @@
.about__container {
/* Section backgrounds */
--background: #f4efe1;
--subtle-background: #d7d2c5;
--background: #f3f4f5;
--subtle-background: #bde7f0;
/* Main text color */
--text: #413e38;
--text: #32373c;
--text-light: #f3f4f5;
/* Navigation colors. */
--nav-background: #fefcf7;
--nav-color: #716d64;
--nav-background: #216bce;
--nav-border: #1730e5;
--nav-color: #f3f4f5;
/* Reds, used as accents & in header. */
--accent-1: #bd3854;
--accent-2: #5f1b29;
--accent-3: #321017;
--accent-1: #1730e5;
--accent-2: #216bce;
--accent-3: #bde7f0;
}
/*------------------------------------------------------------------------------
@ -95,17 +97,19 @@
}
.about__section {
background: #F4EFE1;
background: #f3f4f5;
background: var(--background);
}
.about__container .has-accent-background-color {
background-color: #BD3854;
color: #f3f4f5;
color: var(--text-light);
background-color: #1730e5;
background-color: var(--accent-1);
}
.about__container .has-subtle-background-color {
background-color: #D7D2C5;
background-color: #bde7f0;
background-color: var(--subtle-background);
}
@ -123,6 +127,10 @@
padding: 0;
}
.about__section .column p:first-of-type {
margin-top: 0;
}
.about__section .column p:last-of-type {
margin-bottom: 0;
}
@ -132,6 +140,11 @@
padding: 32px 32px 0;
}
/* Section header is alone in a container. */
.about__section .is-section-header:first-child:last-child {
padding: 0;
}
.about__section.is-feature {
padding: 32px;
}
@ -140,6 +153,10 @@
margin: 0;
}
.about__section.is-feature p + p {
margin-top: 1rem;
}
.about__section.has-2-columns,
.about__section.has-3-columns,
.about__section.has-4-columns {
@ -306,7 +323,8 @@
}
.about__section a {
color: #5f1b29;
color: #1730e5;
color: var(--accent-1);
text-decoration: underline;
}
@ -342,6 +360,7 @@
align-items: center;
justify-content: center;
height: 100%;
overflow: hidden;
}
.about__container .about__image img {
@ -356,6 +375,10 @@
border: none;
}
.about__container hr.is-small {
height: 8px;
}
.about__container div.updated,
.about__container div.error,
.about__container .notice {
@ -369,6 +392,7 @@
.about__section.is-feature {
font-size: 1.6em;
font-weight: 600;
text-align: center;
}
@media screen and (max-width: 782px) {
@ -397,10 +421,16 @@
grid-template-columns: 1fr 1fr;
-ms-grid-rows: 1fr 1fr;
grid-template-rows: 1fr 1fr;
min-height: 28em;
max-height: 36em;
min-height: 30em;
max-height: 42em;
height: 90vh;
margin-bottom: 32px;
background-color: #f3f4f5;
background-color: var(--background);
background-repeat: no-repeat;
background-position: top center;
background-size: contain;
background-image: url('https://wordpress.org/images/core/5.4/header.svg');
}
.about__header > div {
@ -418,15 +448,22 @@
-ms-grid-row-span: 2;
grid-row: 1/span 2;
padding: 32px;
background-color: #BD3854;
background-color: var(--accent-1);
color: white;
padding: 32px;
-webkit-writing-mode: vertical-rl;
-ms-writing-mode: tb-rl;
writing-mode: vertical-rl;
transform: rotate(180deg);
}
/* Needs to be inline-block to use vertical-align, needs specificity to override flex. */
.about__header .about__header-title {
display: inline-block;
vertical-align: top;
}
.about__header-title h1 {
padding: 0;
color: inherit;
color: #1730e5;
color: var(--accent-1);
}
.about__header-title h1 span {
@ -434,23 +471,8 @@
font-weight: 600;
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%;
color: #216bce;
color: var(--accent-2);
}
.about__header-text {
@ -459,11 +481,10 @@
-ms-grid-row: 2;
grid-row: 2;
padding: 32px;
background-color: #321017;
background-color: var(--accent-3);
color: white;
font-size: 1.5em;
line-height: 1.4;
text-align: right;
justify-self: flex-end;
}
.about__header-text p {
@ -477,11 +498,12 @@
-ms-grid-row: 3;
grid-row: 3;
padding-top: 0;
background: #FEFCF7;
background: #216bce;
background: var(--nav-background);
color: #716d64;
color: #f3f4f5;
color: var(--nav-color);
border-bottom: 3px solid currentColor;
border-bottom: 3px solid #1730e5;
border-bottom: 3px solid var(--nav-border);
}
.about__header-navigation .nav-tab {
@ -498,22 +520,23 @@
.about__header-navigation .nav-tab:hover,
.about__header-navigation .nav-tab:active {
background-color: #F4EFE1;
background-color: var(--background);
background-color: #1730e5;
background-color: var(--accent-1);
}
.about__header-navigation .nav-tab-active {
margin-bottom: -3px;
border-width: 0 0 6px;
color: #BD3854;
color: var(--accent-1);
border-color: currentColor;
border-color: #bde7f0;
border-color: var(--accent-3);
}
.about__header-navigation .nav-tab-active:hover,
.about__header-navigation .nav-tab-active:active {
background-color: transparent;
border-color: currentColor;
background-color: #1730e5;
background-color: var(--accent-1);
border-color: #bde7f0;
border-color: var(--accent-3);
}
@media screen and (max-width: 782px) {
@ -530,8 +553,21 @@
height: auto;
}
.about__header-badge {
justify-content: flex-start;
.about__header-title {
/*
* 80% is a "magic" number to create a top offset approx-equal to the height of the background image,
* which scales to match the container width.
*/
padding-top: 80%;
padding-bottom: 0;
-webkit-writing-mode: initial;
-ms-writing-mode: initial;
writing-mode: initial;
transform: none;
}
.about__header-text {
text-align: left;
}
.about__header-navigation .nav-tab {
@ -547,15 +583,13 @@
display: block;
margin-bottom: 0;
padding: 16px 16px;
border-left-width: 3px;
border-left-width: 6px;
border-bottom: none;
}
.about__header-navigation .nav-tab-active {
border-bottom: none;
border-left-width: 3px;
background: #F4EFE1;
background: var(--background);
border-left-width: 6px;
}
}
@ -603,7 +637,7 @@
font-size: 1.4em;
font-weight: 600;
text-decoration: none;
color: #413E38;
color: #32373c;
color: var(--text);
}

2
wp-admin/css/about.min.css vendored
View File

File diff suppressed because one or more lines are too long

4
wp-admin/freedoms.php
View File

@ -26,13 +26,11 @@ require_once ABSPATH . 'wp-admin/admin-header.php';
<div class="about__header">
<div class="about__header-title">
<h1>
<span><?php echo $display_version; ?></span>
<?php _e( 'WordPress' ); ?>
<span><?php echo $display_version; ?></span>
</h1>
</div>
<div class="about__header-badge"></div>
<div class="about__header-text">
<p>
<?php _e( 'Building more with blocks, faster and easier.' ); ?>

4
wp-admin/privacy.php
View File

@ -20,13 +20,11 @@ require_once ABSPATH . 'wp-admin/admin-header.php';
<div class="about__header">
<div class="about__header-title">
<h1>
<span><?php echo $display_version; ?></span>
<?php _e( 'WordPress' ); ?>
<span><?php echo $display_version; ?></span>
</h1>
</div>
<div class="about__header-badge"></div>
<div class="about__header-text">
<p>
<?php _e( 'Building more with blocks, faster and easier.' ); ?>

2
wp-includes/version.php
View File

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