WordPress.org

Make WordPress Core

Ticket #49295: 49295.6.diff

File 49295.6.diff, 24.3 KB (added by audrasjb, 3 weeks ago)

Fix SVG image vertical overflow on small height viewports

  • src/wp-admin/about.php

    diff --git a/src/wp-admin/about.php b/src/wp-admin/about.php
    index 730ce6b28d..1feb113f15 100644
    a b require_once ABSPATH . 'wp-admin/admin-header.php'; 
    2121                <div class="about__header">
    2222                        <div class="about__header-title">
    2323                                <h1>
    24                                         <span><?php echo $display_version; ?></span>
    2524                                        <?php _e( 'WordPress' ); ?>
     25                                        <span><?php echo $display_version; ?></span>
    2626                                </h1>
    2727                        </div>
    2828
    29                         <div class="about__header-badge"></div>
    30 
    3129                        <div class="about__header-text">
    3230                                <p>
    3331                                        <?php _e( 'Building more with blocks, faster and easier.' ); ?>
    require_once ABSPATH . 'wp-admin/admin-header.php'; 
    4240                        </nav>
    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.' ); ?>
     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>
    4946                </div>
    5047
    51                 <div class="about__section is-feature">
    52                         <p>
     48                <hr />
     49
     50                <div class="about__section has-2-columns has-subtle-background-color">
     51                        <h2 class="is-section-header">
    5352                                <?php
    54                                 printf(
    55                                         /* translators: %s: The current WordPress version number. */
    56                                         __( 'Welcome to WordPress %s.' ),
    57                                         $display_version
    58                                 );
     53                                        printf(
     54                                                /* translators: %s: The current WordPress version number. */
     55                                                __( 'Welcome to WordPress %s.' ),
     56                                                $display_version
     57                                        );
    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>
     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>
    7677                </div>
    7778
    7879                <hr />
    7980
    8081                <div class="about__section has-2-columns">
    81                         <div class="column is-edge-to-edge has-accent-background-color">
     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>
    8687                        <div class="column is-vertically-aligned-center">
    require_once ABSPATH . 'wp-admin/admin-header.php'; 
    104105                                        <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>
    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                                <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>
    108109                        </div>
    109                         <div class="column is-edge-to-edge has-accent-background-color">
     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>
    114115                </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>
    122123                        <div class="column is-vertically-aligned-center">
    require_once ABSPATH . 'wp-admin/admin-header.php'; 
    133134
    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>
     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" />
    138152
     153                <div class="about__section has-2-columns">
    139154                        <div class="column">
    140155                                <h3><?php _e( 'Add custom fields to menu items—natively' ); ?></h3>
    141156                                <p>
    require_once ABSPATH . 'wp-admin/admin-header.php'; 
    174189                        </div>
    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
    189208                <hr />
  • src/wp-admin/credits.php

    diff --git a/src/wp-admin/credits.php b/src/wp-admin/credits.php
    index d7ecddb1fd..60b1ebb004 100644
    a b $credits = wp_credits(); 
    2323        <div class="about__header">
    2424                <div class="about__header-title">
    2525                        <h1>
    26                                 <span><?php echo $display_version; ?></span>
    2726                                <?php _e( 'WordPress' ); ?>
     27                                <span><?php echo $display_version; ?></span>
    2828                        </h1>
    2929                </div>
    3030
    31                 <div class="about__header-badge"></div>
    32 
    3331                <div class="about__header-text">
    3432                        <p>
    3533                                <?php _e( 'Building more with blocks, faster and easier.' ); ?>
    $credits = wp_credits(); 
    6967                </div>
    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>
    7573
  • src/wp-admin/css/about.css

    diff --git a/src/wp-admin/css/about.css b/src/wp-admin/css/about.css
    index c77f5e54b0..9d4af34a6b 100644
    a b  
    2020
    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
    3638/*------------------------------------------------------------------------------
     
    9597}
    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}
    111115
     
    123127        padding: 0;
    124128}
    125129
     130.about__section .column p:first-of-type {
     131        margin-top: 0;
     132}
     133
    126134.about__section .column p:last-of-type {
    127135        margin-bottom: 0;
    128136}
     
    132140        padding: 32px 32px 0;
    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;
    137150}
     
    140153        margin: 0;
    141154}
    142155
     156.about__section.is-feature p + p {
     157        margin-top: 1rem;
     158}
     159
    143160.about__section.has-2-columns,
    144161.about__section.has-3-columns,
    145162.about__section.has-4-columns {
     
    306323}
    307324
    308325.about__section a {
    309         color: #5f1b29;
     326        color: #1730e5;
     327        color: var(--accent-1);
    310328        text-decoration: underline;
    311329}
    312330
     
    342360        align-items: center;
    343361        justify-content: center;
    344362        height: 100%;
     363        overflow: hidden;
    345364}
    346365
    347366.about__container .about__image img {
     
    356375        border: none;
    357376}
    358377
     378.about__container hr.is-small {
     379        height: 8px;
     380}
     381
    359382.about__container div.updated,
    360383.about__container div.error,
    361384.about__container .notice {
     
    369392.about__section.is-feature {
    370393        font-size: 1.6em;
    371394        font-weight: 600;
     395        text-align: center;
    372396}
    373397
    374398@media screen and (max-width: 782px) {
     
    397421        grid-template-columns: 1fr 1fr;
    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('http://trunk.wordpress.test/wp-content/uploads/2020/03/header.svg');
    404434}
    405435
    406436.about__header > div {
     
    418448        -ms-grid-row-span: 2;
    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
    432469.about__header-title h1 span {
     
    434471        font-weight: 600;
    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
    456478.about__header-text {
     
    459481        -ms-grid-row: 2;
    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
    469490.about__header-text p {
     
    477498        -ms-grid-row: 3;
    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
    487509.about__header-navigation .nav-tab {
     
    498520
    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
    505527.about__header-navigation .nav-tab-active {
    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
    519542@media screen and (max-width: 782px) {
     
    530553                height: auto;
    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
    537573        .about__header-navigation .nav-tab {
     
    547583                display: block;
    548584                margin-bottom: 0;
    549585                padding: 16px 16px;
    550                 border-left-width: 3px;
     586                border-left-width: 6px;
    551587                border-bottom: none;
    552588        }
    553589
    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}
    561595
     
    603637        font-size: 1.4em;
    604638        font-weight: 600;
    605639        text-decoration: none;
    606         color: #413E38;
     640        color: #32373c;
    607641        color: var(--text);
    608642}
    609643
  • src/wp-admin/freedoms.php

    diff --git a/src/wp-admin/freedoms.php b/src/wp-admin/freedoms.php
    index 21e9d3c54d..c9bc298866 100644
    a b require_once ABSPATH . 'wp-admin/admin-header.php'; 
    2626        <div class="about__header">
    2727                <div class="about__header-title">
    2828                        <h1>
    29                                 <span><?php echo $display_version; ?></span>
    3029                                <?php _e( 'WordPress' ); ?>
     30                                <span><?php echo $display_version; ?></span>
    3131                        </h1>
    3232                </div>
    3333
    34                 <div class="about__header-badge"></div>
    35 
    3634                <div class="about__header-text">
    3735                        <p>
    3836                                <?php _e( 'Building more with blocks, faster and easier.' ); ?>
  • src/wp-admin/privacy.php

    diff --git a/src/wp-admin/privacy.php b/src/wp-admin/privacy.php
    index f99bdbce1b..09248661bb 100644
    a b require_once ABSPATH . 'wp-admin/admin-header.php'; 
    2020        <div class="about__header">
    2121                <div class="about__header-title">
    2222                        <h1>
    23                                 <span><?php echo $display_version; ?></span>
    2423                                <?php _e( 'WordPress' ); ?>
     24                                <span><?php echo $display_version; ?></span>
    2525                        </h1>
    2626                </div>
    2727
    28                 <div class="about__header-badge"></div>
    29 
    3028                <div class="about__header-text">
    3129                        <p>
    3230                                <?php _e( 'Building more with blocks, faster and easier.' ); ?>