WordPress.org
Get WordPress

Make WordPress Core

Changeset 47477


Ignore:
Timestamp:
03/20/2020 05:43:15 PM (4 years ago)
Author:
SergeyBiryukov
Message:

Help/About: Add design for 5.4 About page.

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.

Location:
branches/5.4
Files:
6 edited

Legend:

Unmodified
Added
Removed

  • branches/5.4

  • branches/5.4/src/wp-admin/about.php

    r47438 r47477  
    2222            <div class="about__header-title">
    2323                <h1>
     24                    <?php _e( 'WordPress' ); ?>
    2425                    <span><?php echo $display_version; ?></span>
    25                     <?php _e( 'WordPress' ); ?>
    2626                </h1>
    2727            </div>
    28 
    29             <div class="about__header-badge"></div>
    3028
    3129            <div class="about__header-text">
    … …  
    4341        </div>
    4442
    45         <div class="about__section is-feature">
    46             <?php _e( 'Say hello to more and better.' ); ?>
    47             <br />
    48             <?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.' ); ?>
    49         </div>
    50 
    51         <div class="about__section is-feature">
    52             <p>
     43        <div class="about__section is-feature has-accent-background-color">
     44            <p><?php _e( 'Say hello to more and better.' ); ?></p>
     45            <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>
     46        </div>
     47
     48        <hr />
     49
     50        <div class="about__section has-2-columns has-subtle-background-color">
     51            <h2 class="is-section-header">
    5352                <?php
    5453                printf(
    … …  
    5857                );
    5958                ?>
    60             </p>
    61             <p>
    62                 <?php _e( 'Every major release adds more to the block editor.' ); ?>
    63             </p>
    64             <p>
    65                 <?php _e( 'More ways to make posts and pages come alive with your best images.' ); ?>
    66             </p>
    67             <p>
    68                 <?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.' ); ?>
    69             </p>
    70             <p>
    71                 <?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.' ); ?>
    72             </p>
    73             <p>
    74                 <?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.' ); ?>
    75             </p>
    76         </div>
    77 
    78         <hr />
    79 
    80         <div class="about__section has-2-columns">
    81             <div class="column is-edge-to-edge has-accent-background-color">
     59            </h2>
     60            <div class="column">
     61                <p>
     62                    <?php _e( 'Every major release adds more to the block editor.' ); ?>
     63                </p>
     64                <p>
     65                    <?php _e( 'More ways to make posts and pages come alive with your best images.' ); ?>
     66                    <?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.' ); ?>
     67                </p>
     68            </div>
     69            <div class="column">
     70                <p>
     71                    <?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.' ); ?>
     72                </p>
     73                <p>
     74                    <?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.' ); ?>
     75                </p>
     76            </div>
     77        </div>
     78
     79        <hr />
     80
     81        <div class="about__section has-2-columns">
     82            <div class="column is-edge-to-edge">
    8283                <div class="about__image aligncenter">
    83                     <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="" />
     84                    <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="" />
    8485                </div>
    8586            </div>
    … …  
    105106                    <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>
    106107                </ul>
    107                 <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>
    108             </div>
    109             <div class="column is-edge-to-edge has-accent-background-color">
     108                <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>
     109            </div>
     110            <div class="column is-edge-to-edge">
    110111                <div class="about__image aligncenter">
    111                     <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="">
     112                    <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="">
    112113                </div>
    113114            </div>
    … …  
    115116
    116117        <div class="about__section has-2-columns">
    117             <div class="column is-edge-to-edge has-accent-background-color">
     118            <div class="column is-edge-to-edge">
    118119                <div class="about__image aligncenter">
    119                     <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="" />
     120                    <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="" />
    120121                </div>
    121122            </div>
    … …  
    134135        <hr />
    135136
    136         <div class="about__section has-2-columns has-subtle-background-color">
    137             <h2 class="is-section-header"><?php _e( 'Just for developers' ); ?></h2>
    138 
     137        <div class="about__section ">
     138            <div class="column has-subtle-background-color">
     139                <h2 class="is-section-header"><?php _e( 'Just for developers' ); ?></h2>
     140            </div>
     141        </div>
     142
     143        <hr class="is-small" />
     144
     145        <div class="about__section">
     146            <div class="about__image aligncenter">
     147                <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="">
     148            </div>
     149        </div>
     150
     151        <hr class="is-small" />
     152
     153        <div class="about__section has-2-columns">
    139154            <div class="column">
    140155                <h3><?php _e( 'Add custom fields to menu items—natively' ); ?></h3>
    … …  
    175190        </div>
    176191
    177         <div class="about__section is-feature">
    178             <p>
    179                 <?php
    180                 printf(
    181                     /* translators: %s: WordPress 5.4 Field Guide link. */
    182                     __( '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>.' ),
    183                     'https://make.wordpress.org/core/?p=80034'
    184                 );
    185                 ?>
    186             </p>
     192        <hr class="is-small" />
     193
     194        <div class="about__section">
     195            <div class="column">
     196                <p>
     197                    <?php
     198                    printf(
     199                        /* translators: %s: WordPress 5.4 Field Guide link. */
     200                        __( '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>.' ),
     201                        'https://make.wordpress.org/core/?p=80034'
     202                    );
     203                    ?>
     204                </p>
     205            </div>
    187206        </div>
    188207

  • branches/5.4/src/wp-admin/credits.php

    r47422 r47477  
    2424        <div class="about__header-title">
    2525            <h1>
     26                <?php _e( 'WordPress' ); ?>
    2627                <span><?php echo $display_version; ?></span>
    27                 <?php _e( 'WordPress' ); ?>
    2828            </h1>
    2929        </div>
    30 
    31         <div class="about__header-badge"></div>
    3230
    3331        <div class="about__header-text">
    … …  
    7068
    7169        <div class="about__image aligncenter">
    72             <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="" />
     70            <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="" />
    7371        </div>
    7472    </div>

  • branches/5.4/src/wp-admin/css/about.css

    r47464 r47477  
    2121.about__container {
    2222    /* Section backgrounds */
    23     --background: #f4efe1;
    24     --subtle-background: #d7d2c5;
     23    --background: #f3f4f5;
     24    --subtle-background: #bde7f0;
    2525    /* Main text color */
    26     --text: #413e38;
     26    --text: #32373c;
     27    --text-light: #f3f4f5;
    2728    /* Navigation colors. */
    28     --nav-background: #fefcf7;
    29     --nav-color: #716d64;
     29    --nav-background: #216bce;
     30    --nav-border: #1730e5;
     31    --nav-color: #f3f4f5;
    3032    /* Reds, used as accents & in header. */
    31     --accent-1: #bd3854;
    32     --accent-2: #5f1b29;
    33     --accent-3: #321017;
     33    --accent-1: #1730e5;
     34    --accent-2: #216bce;
     35    --accent-3: #bde7f0;
    3436}
    3537
    … …  
    9698
    9799.about__section {
    98     background: #F4EFE1;
     100    background: #f3f4f5;
    99101    background: var(--background);
    100102}
    101103
    102104.about__container .has-accent-background-color {
    103     background-color: #BD3854;
     105    color: #f3f4f5;
     106    color: var(--text-light);
     107    background-color: #1730e5;
    104108    background-color: var(--accent-1);
    105109}
    106110
    107111.about__container .has-subtle-background-color {
    108     background-color: #D7D2C5;
     112    background-color: #bde7f0;
    109113    background-color: var(--subtle-background);
    110114}
    … …  
    122126.about__section .column.is-edge-to-edge {
    123127    padding: 0;
     128}
     129
     130.about__section .column p:first-of-type {
     131    margin-top: 0;
    124132}
    125133
    … …  
    133141}
    134142
     143/* Section header is alone in a container. */
     144.about__section .is-section-header:first-child:last-child {
     145    padding: 0;
     146}
     147
    135148.about__section.is-feature {
    136149    padding: 32px;
    … …  
    139152.about__section.is-feature p {
    140153    margin: 0;
     154}
     155
     156.about__section.is-feature p + p {
     157    margin-top: 1rem;
    141158}
    142159
    … …  
    307324
    308325.about__section a {
    309     color: #5f1b29;
     326    color: #1730e5;
     327    color: var(--accent-1);
    310328    text-decoration: underline;
    311329}
    … …  
    343361    justify-content: center;
    344362    height: 100%;
     363    overflow: hidden;
    345364}
    346365
    … …  
    357376}
    358377
     378.about__container hr.is-small {
     379    height: 8px;
     380}
     381
    359382.about__container div.updated,
    360383.about__container div.error,
    … …  
    370393    font-size: 1.6em;
    371394    font-weight: 600;
     395    text-align: center;
    372396}
    373397
    … …  
    398422    -ms-grid-rows: 1fr 1fr;
    399423    grid-template-rows: 1fr 1fr;
    400     min-height: 28em;
    401     max-height: 36em;
     424    min-height: 30em;
     425    max-height: 42em;
    402426    height: 90vh;
    403427    margin-bottom: 32px;
     428    background-color: #f3f4f5;
     429    background-color: var(--background);
     430    background-repeat: no-repeat;
     431    background-position: top center;
     432    background-size: contain;
     433    background-image: url('https://wordpress.org/images/core/5.4/header.svg');
    404434}
    405435
    … …  
    419449    grid-row: 1/span 2;
    420450    padding: 32px;
    421     background-color: #BD3854;
    422     background-color: var(--accent-1);
    423     color: white;
    424     padding: 32px;
     451    -webkit-writing-mode: vertical-rl;
     452    -ms-writing-mode: tb-rl;
     453    writing-mode: vertical-rl;
     454    transform: rotate(180deg);
     455}
     456
     457/* Needs to be inline-block to use vertical-align, needs specificity to override flex. */
     458.about__header .about__header-title {
     459    display: inline-block;
     460    vertical-align: top;
    425461}
    426462
    427463.about__header-title h1 {
    428464    padding: 0;
    429     color: inherit;
     465    color: #1730e5;
     466    color: var(--accent-1);
    430467}
    431468
    … …  
    435472    font-size: 1.2em;
    436473    line-height: 1;
    437 }
    438 
    439 .about__header-badge {
    440     -ms-grid-column: 2;
    441     grid-column: 2;
    442     -ms-grid-row: 1;
    443     grid-row: 1;
    444     background-color: #5f1b29;
    445     background-color: var(--accent-2);
    446     margin: 0;
    447     padding: 32px;
    448     justify-content: flex-end;
    449 }
    450 
    451 .about__header-badge img {
    452     align-self: flex-start;
    453     max-width: 100%;
     474    color: #216bce;
     475    color: var(--accent-2);
    454476}
    455477
    … …  
    460482    grid-row: 2;
    461483    padding: 32px;
    462     background-color: #321017;
    463     background-color: var(--accent-3);
    464     color: white;
    465484    font-size: 1.5em;
    466485    line-height: 1.4;
     486    text-align: right;
     487    justify-self: flex-end;
    467488}
    468489
    … …  
    478499    grid-row: 3;
    479500    padding-top: 0;
    480     background: #FEFCF7;
     501    background: #216bce;
    481502    background: var(--nav-background);
    482     color: #716d64;
     503    color: #f3f4f5;
    483504    color: var(--nav-color);
    484     border-bottom: 3px solid currentColor;
     505    border-bottom: 3px solid #1730e5;
     506    border-bottom: 3px solid var(--nav-border);
    485507}
    486508
    … …  
    499521.about__header-navigation .nav-tab:hover,
    500522.about__header-navigation .nav-tab:active {
    501     background-color: #F4EFE1;
    502     background-color: var(--background);
     523    background-color: #1730e5;
     524    background-color: var(--accent-1);
    503525}
    504526
    … …  
    506528    margin-bottom: -3px;
    507529    border-width: 0 0 6px;
    508     color: #BD3854;
    509     color: var(--accent-1);
    510     border-color: currentColor;
     530    border-color: #bde7f0;
     531    border-color: var(--accent-3);
    511532}
    512533
    513534.about__header-navigation .nav-tab-active:hover,
    514535.about__header-navigation .nav-tab-active:active {
    515     background-color: transparent;
    516     border-color: currentColor;
     536    background-color: #1730e5;
     537    background-color: var(--accent-1);
     538    border-color: #bde7f0;
     539    border-color: var(--accent-3);
    517540}
    518541
    … …  
    531554    }
    532555
    533     .about__header-badge {
    534         justify-content: flex-start;
     556    .about__header-title {
     557        /*
     558         * 80% is a "magic" number to create a top offset approx-equal to the height of the background image,
     559         * which scales to match the container width.
     560         */
     561        padding-top: 80%;
     562        padding-bottom: 0;
     563        -webkit-writing-mode: initial;
     564        -ms-writing-mode: initial;
     565        writing-mode: initial;
     566        transform: none;
     567    }
     568
     569    .about__header-text {
     570        text-align: left;
    535571    }
    536572
    … …  
    548584        margin-bottom: 0;
    549585        padding: 16px 16px;
    550         border-left-width: 3px;
     586        border-left-width: 6px;
    551587        border-bottom: none;
    552588    }
    … …  
    554590    .about__header-navigation .nav-tab-active {
    555591        border-bottom: none;
    556         border-left-width: 3px;
    557         background: #F4EFE1;
    558         background: var(--background);
     592        border-left-width: 6px;
    559593    }
    560594}
    … …  
    604638    font-weight: 600;
    605639    text-decoration: none;
    606     color: #413E38;
     640    color: #32373c;
    607641    color: var(--text);
    608642}

  • branches/5.4/src/wp-admin/freedoms.php

    r47464 r47477  
    2727        <div class="about__header-title">
    2828            <h1>
     29                <?php _e( 'WordPress' ); ?>
    2930                <span><?php echo $display_version; ?></span>
    30                 <?php _e( 'WordPress' ); ?>
    3131            </h1>
    3232        </div>
    33 
    34         <div class="about__header-badge"></div>
    3533
    3634        <div class="about__header-text">

  • branches/5.4/src/wp-admin/privacy.php

    r47422 r47477  
    2121        <div class="about__header-title">
    2222            <h1>
     23                <?php _e( 'WordPress' ); ?>
    2324                <span><?php echo $display_version; ?></span>
    24                 <?php _e( 'WordPress' ); ?>
    2525            </h1>
    2626        </div>
    27 
    28         <div class="about__header-badge"></div>
    2927
    3028        <div class="about__header-text">
Note: See TracChangeset for help on using the changeset viewer.