Ticket #49295: 49295.5.diff

src/wp-admin/about.php

@@ -21 +21 @@
                 <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 +40 @@
                         </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. */
-                                        __( 'Welcome to WordPress %s.' ),
-                                        $display_version
-                                );
+                                        printf(
+                                                /* translators: %s: The current WordPress version number. */
+                                                __( 'Welcome to WordPress %s.' ),
+                                                $display_version
+                                        );
                                 ?>
-                        </p>
-                        <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>
-                        <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>
-                        <p>
-                                <?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>
+                        </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.' ); ?>
+                                        <?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>
+                                <p>
+                                        <?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 +105 @@
                                         <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 +134 @@
 
                 <hr />
 
-                <div class="about__section has-2-columns has-subtle-background-color">
-                        <h2 class="is-section-header"><?php _e( 'Just for developers' ); ?></h2>
+                <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 +189 @@
                         </div>
                 </div>
 
-                <div class="about__section is-feature">
-                        <p>
-                                <?php
-                                printf(
-                                        /* translators: %s: WordPress 5.4 Field Guide link. */
-                                        __( 'There&#8217;s lots more for developers to love in WordPress 5.4. To discover more and learn how to make these changes shine on your on your sites, themes, plugins and more, check the <a href="%s">WordPress 5.4 Field Guide</a>.' ),
-                                        'https://make.wordpress.org/core/?p=80034'
-                                );
-                                ?>
-                        </p>
+                <hr class="is-small" />
+
+                <div class="about__section">
+                        <div class="column">
+                                <p>
+                                        <?php
+                                        printf(
+                                                /* translators: %s: WordPress 5.4 Field Guide link. */
+                                                __( 'There&#8217;s lots more for developers to love in WordPress 5.4. To discover more and learn how to make these changes shine on your on your sites, themes, plugins and more, check the <a href="%s">WordPress 5.4 Field Guide</a>.' ),
+                                                'https://make.wordpress.org/core/?p=80034'
+                                        );
+                                        ?>
+                                </p>
+                        </div>
                 </div>
 
                 <hr />

src/wp-admin/credits.php

@@ -23 +23 @@
         <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 +67 @@
                 </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>
 

src/wp-admin/css/about.css

@@ -20 +20 @@
 
 .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 +97 @@
 }
 
 .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 +127 @@
         padding: 0;
 }
 
+.about__section .column p:first-of-type {
+        margin-top: 0;
+}
+
 .about__section .column p:last-of-type {
         margin-bottom: 0;
 }
@@ -132 +140 @@
         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 +153 @@
         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 +323 @@
 }
 
 .about__section a {
-        color: #5f1b29;
+        color: #1730e5;
+        color: var(--accent-1);
         text-decoration: underline;
 }
 
@@ -356 +374 @@
         border: none;
 }
 
+.about__container hr.is-small {
+        height: 8px;
+}
+
 .about__container div.updated,
 .about__container div.error,
 .about__container .notice {
@@ -369 +391 @@
 .about__section.is-feature {
         font-size: 1.6em;
         font-weight: 600;
+        text-align: center;
 }
 
 @media screen and (max-width: 782px) {
@@ -397 +420 @@
         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('http://trunk.wordpress.test/wp-content/uploads/2020/03/header.svg');
 }
 
 .about__header > div {
@@ -418 +447 @@
         -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 +470 @@
         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 +480 @@
         -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 +497 @@
         -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 +519 @@
 
 .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 +552 @@
                 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 +582 @@
                 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 +636 @@
         font-size: 1.4em;
         font-weight: 600;
         text-decoration: none;
-        color: #413E38;
+        color: #32373c;
         color: var(--text);
 }
 

src/wp-admin/freedoms.php

@@ -26 +26 @@
         <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.' ); ?>

src/wp-admin/privacy.php

@@ -20 +20 @@
         <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.' ); ?>