WordPress.org

Make WordPress Core

Ticket #47708: 47708.12.diff

File 47708.12.diff, 36.3 KB (added by ryelle, 2 years ago)
  • src/wp-admin/about.php

    diff --git src/wp-admin/about.php src/wp-admin/about.php
    index 55a7902979..9a4616b0fa 100644
    list( $display_version ) = explode( '-', get_bloginfo( 'version' ) ); 
    1616
    1717include( ABSPATH . 'wp-admin/admin-header.php' );
    1818?>
    19         <div class="wrap about-wrap full-width-layout">
     19        <div class="wrap about__container">
    2020
    2121                <div class="about__header">
    2222                        <div class="about__header-title">
    include( ABSPATH . 'wp-admin/admin-header.php' ); 
    2626                                </h1>
    2727                        </div>
    2828
    29                         <div class="about__header-badge wp-badge">
    30                                 <?php
    31                                 printf(
    32                                         /* translators: %s: The current WordPress version number. */
    33                                         __( 'Version %s' ),
    34                                         $display_version
    35                                 );
    36                                 ?>
     29                        <div class="about__header-badge">
     30                                <img src="https://cldup.com/lWO2MMKJtb.svg" alt="<?php _e( 'Code is Poetry' ); ?>" />
    3731                        </div>
    3832
    3933                        <div class="about__header-text">
    include( ABSPATH . 'wp-admin/admin-header.php' ); 
    6761                <div class="about__section has-2-columns">
    6862                        <div class="column is-edge-to-edge has-accent-background-color">
    6963                                <div class="about__image aligncenter">
    70                                         <img src="data:image/svg+xml;utf8,%3Csvg width='660' height='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="" />
     64                                        <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="" />
    7165                                </div>
    7266                        </div>
    7367                        <div class="column is-vertically-aligned-center">
    74                                 <h3><?php _e( 'Block Editor Improvements' ); ?></h3>
     68                                <h2><?php _e( 'Block Editor Improvements' ); ?></h2>
    7569                                <p>
    7670                                        <?php _e( 'This enhancement-focused update introduces over 150 new features and usability improvements, including improved large image support for uploading non-optimized, high-resolution pictures taken from your smartphone or other high-quality cameras. Combined with larger default image sizes, pictures always look their best.' ); ?>
    7771                                </p>
    include( ABSPATH . 'wp-admin/admin-header.php' ); 
    8478
    8579                <div class="about__section has-2-columns">
    8680                        <div class="column is-vertically-aligned-center">
    87                                 <h3><?php _e( 'Expanded Design Flexibility' ); ?></h3>
     81                                <h2><?php _e( 'Expanded Design Flexibility' ); ?></h2>
    8882                                <p>
    8983                                        <?php
    9084                                        printf(
    include( ABSPATH . 'wp-admin/admin-header.php' ); 
    10498                        </div>
    10599                        <div class="column is-edge-to-edge has-accent-background-color">
    106100                                <div class="about__image aligncenter">
    107                                         <img src="data:image/svg+xml;utf8,%3Csvg width='500' height='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="">
     101                                        <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="">
    108102                                </div>
    109103                        </div>
    110104                </div>
    111105
    112106                <div class="about__section has-2-columns has-subtle-background-color">
    113107                        <div class="column is-vertically-aligned-center">
    114                                 <h3><?php _e( 'Introducing Twenty Twenty' ); ?></h3>
     108                                <h2><?php _e( 'Introducing Twenty Twenty' ); ?></h2>
    115109                                <p><?php _e( 'As the block editor celebrates its first birthday, we are proud that Twenty Twenty is designed with flexibility at its core. Show off your services or products with a combination of columns, groups, and media blocks. Set your content to wide or full alignment for dynamic and engaging layouts. Or let your thoughts be the star with a centered content column!' ); ?></p>
    116110
    117111                                <p>
    include( ABSPATH . 'wp-admin/admin-header.php' ); 
    142136                <hr />
    143137
    144138                <div class="about__section has-3-columns">
    145                         <h3 class="is-section-header"><?php _e( 'Improvements for Everyone' ); ?></h3>
     139                        <h2 class="is-section-header"><?php _e( 'Improvements for Everyone' ); ?></h2>
    146140
    147141                        <div class="column">
    148                                 <h4><?php _e( 'Automatic Image Rotation' ); ?></h4>
     142                                <h3><?php _e( 'Automatic Image Rotation' ); ?></h3>
    149143                                <p><?php _e( 'Your images will be correctly rotated upon upload according to the embedded orientation data. This feature was first proposed nine years ago and made possible through the perserverance of many dedicated contributors.' ); ?></p>
    150144                        </div>
    151145                        <div class="column">
    152                                 <h4><?php _e( 'Site Health Checks' ); ?></h4>
     146                                <h3><?php _e( 'Site Health Checks' ); ?></h3>
    153147                                <p><?php _e( 'The improvements introduced in 5.3 make it even easier to identify issues. Expanded recommendations highlight areas that may need troubleshooting on your site from the Health Check screen.' ); ?></p>
    154148                        </div>
    155149                        <div class="column">
    156                                 <h4><?php _e( 'Admin Email Verification' ); ?></h4>
     150                                <h3><?php _e( 'Admin Email Verification' ); ?></h3>
    157151                                <p><?php _e( 'You’ll now be periodically asked to confirm that your admin email address is up to date when you log in as an administrator. This reduces the chance of getting locked out out of your site if you change your email address.' ); ?></p>
    158152                        </div>
    159153                </div>
    include( ABSPATH . 'wp-admin/admin-header.php' ); 
    161155                <div class="about__section">
    162156                        <div class="column is-edge-to-edge">
    163157                                <div class="about__image aligncenter">
    164                                         <img src="data:image/svg+xml;utf8,%3Csvg width='1000' height='498' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='865.463' y='36.8596' width='133.8' height='132.326' fill='%23942F44'/%3E%3Crect x='865.463' y='180.98' width='133.8' height='132.326' fill='%23942F44'/%3E%3Crect x='866.2' y='328.05' width='133.8' height='132.694' fill='%23942F44'/%3E%3Crect y='331.736' width='405.455' height='134.169' fill='%234E1521'/%3E%3Crect y='36.8596' width='405.455' height='129.008' fill='%234E1521'/%3E%3Crect y='184.298' width='387.025' height='133.8' fill='%234E1521'/%3E%3Crect x='719.13' y='34.6479' width='133.8' height='428.677' fill='%23BD3854'/%3E%3Crect x='571.323' y='18.4297' width='133.8' height='423.885' fill='%23BD3854'/%3E%3Crect x='423.516' y='35.0164' width='133.8' height='425.728' fill='%23BD3854'/%3E%3C/svg%3E" alt="" />
     158                                        <img src="data:image/svg+xml;charset=utf8,%3Csvg width='1000' height='498' viewbox='0 0 1000 498' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='865.463' y='36.8596' width='133.8' height='132.326' fill='%23942F44'/%3E%3Crect x='865.463' y='180.98' width='133.8' height='132.326' fill='%23942F44'/%3E%3Crect x='866.2' y='328.05' width='133.8' height='132.694' fill='%23942F44'/%3E%3Crect y='331.736' width='405.455' height='134.169' fill='%234E1521'/%3E%3Crect y='36.8596' width='405.455' height='129.008' fill='%234E1521'/%3E%3Crect y='184.298' width='387.025' height='133.8' fill='%234E1521'/%3E%3Crect x='719.13' y='34.6479' width='133.8' height='428.677' fill='%23BD3854'/%3E%3Crect x='571.323' y='18.4297' width='133.8' height='423.885' fill='%23BD3854'/%3E%3Crect x='423.516' y='35.0164' width='133.8' height='425.728' fill='%23BD3854'/%3E%3C/svg%3E" alt="" />
    165159                                </div>
    166160                        </div>
    167161                </div>
    include( ABSPATH . 'wp-admin/admin-header.php' ); 
    169163                <hr />
    170164
    171165                <div class="about__section has-2-columns has-subtle-background-color">
    172                         <h3 class="is-section-header"><?php _e( 'For Developers' ); ?></h3>
     166                        <h2 class="is-section-header"><?php _e( 'For Developers' ); ?></h2>
    173167
    174168                        <div class="column">
    175                                 <h4><?php _e( 'Date/Time Component Fixes' ); ?></h4>
     169                                <h3><?php _e( 'Date/Time Component Fixes' ); ?></h3>
    176170                                <p>
    177171                                        <?php
    178172                                        printf(
    include( ABSPATH . 'wp-admin/admin-header.php' ); 
    184178                                </p>
    185179                        </div>
    186180                        <div class="column">
    187                                 <h4><?php _e( 'PHP 7.4 Compatibility' ); ?></h4>
     181                                <h3><?php _e( 'PHP 7.4 Compatibility' ); ?></h3>
    188182                                <p>
    189183                                        <?php
    190184                                        printf(
  • src/wp-admin/credits.php

    diff --git src/wp-admin/credits.php src/wp-admin/credits.php
    index 1b5a5f4ca9..4e2fe3643d 100644
    $title = __( 'Credits' ); 
    1515list( $display_version ) = explode( '-', get_bloginfo( 'version' ) );
    1616
    1717include( ABSPATH . 'wp-admin/admin-header.php' );
     18
     19$credits = wp_credits();
    1820?>
    19 <div class="wrap about-wrap full-width-layout">
     21<div class="wrap about__container">
    2022
    2123        <div class="about__header">
    2224                <div class="about__header-title">
    include( ABSPATH . 'wp-admin/admin-header.php' ); 
    2628                        </h1>
    2729                </div>
    2830
    29                 <div class="about__header-badge wp-badge">
    30                         <?php
    31                         printf(
    32                                 /* translators: %s: The current WordPress version number. */
    33                                 __( 'Version %s' ),
    34                                 $display_version
    35                         );
    36                         ?>
     31                <div class="about__header-badge">
     32                        <img src="https://cldup.com/lWO2MMKJtb.svg" alt="<?php _e( 'Code is Poetry' ); ?>" />
    3733                </div>
    3834
    3935                <div class="about__header-text">
    include( ABSPATH . 'wp-admin/admin-header.php' ); 
    5652                </nav>
    5753        </div>
    5854
    59         <div class="about-wrap-content">
    60 <?php
     55        <div class="about__section">
     56                <div class="column">
     57                        <h2><?php _e( 'WordPress is created by a worldwide team of passionate individuals.' ); ?></h2>
    6158
    62 $credits = wp_credits();
     59                        <p>
     60                                <?php
     61                                if ( ! $credits ) {
     62                                        printf(
     63                                                /* translators: 1: https://wordpress.org/about/, 2: https://make.wordpress.org/ */
     64                                                __( 'WordPress is created by a <a href="%1$s">worldwide team</a> of passionate individuals. <a href="%2$s">Get involved in WordPress</a>.' ),
     65                                                __( 'https://wordpress.org/about/' ),
     66                                                __( 'https://make.wordpress.org/' )
     67                                        );
     68                                } else {
     69                                        printf(
     70                                                /* translators: %s: https://make.wordpress.org/ */
     71                                                __( 'Want to see your name in lights on this page? <a href="%s">Get involved in WordPress</a>.' ),
     72                                                __( 'https://make.wordpress.org/' )
     73                                        );
     74                                }
     75                                ?>
     76                        </p>
     77                </div>
    6378
     79                <div class="about__image aligncenter">
     80                        <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="" />
     81                </div>
     82        </div>
     83
     84<?php
    6485if ( ! $credits ) {
    65         echo '<p class="about-description">';
    66         printf(
    67                 /* translators: 1: https://wordpress.org/about/, 2: https://make.wordpress.org/ */
    68                 __( 'WordPress is created by a <a href="%1$s">worldwide team</a> of passionate individuals. <a href="%2$s">Get involved in WordPress</a>.' ),
    69                 __( 'https://wordpress.org/about/' ),
    70                 __( 'https://make.wordpress.org/' )
    71         );
    72         echo '</p>';
    73         echo '</div>';
    7486        echo '</div>';
    7587        include( ABSPATH . 'wp-admin/admin-footer.php' );
    7688        exit;
    7789}
    7890
    79 echo '<p class="about-description">' . __( 'WordPress is created by a worldwide team of passionate individuals.' ) . "</p>\n";
     91$previous_type = '';
    8092
    81 echo '<p>' . sprintf(
    82         /* translators: %s: https://make.wordpress.org/ */
    83         __( 'Want to see your name in lights on this page? <a href="%s">Get involved in WordPress</a>.' ),
    84         __( 'https://make.wordpress.org/' )
    85 ) . '</p>';
     93foreach ( $credits['groups'] as $group_slug => $group_data ) : ?>
     94        <?php
     95        if ( $previous_type !== $group_data['type'] ) {
     96                echo '<hr />';
     97        }
     98        ?>
     99        <div class="about__section">
     100                <div class="column <?php echo 'titles' === $group_data['type'] ? 'has-subtle-background-color' : ''; ?>">
    86101
    87 foreach ( $credits['groups'] as $group_slug => $group_data ) {
     102        <?php
    88103        if ( $group_data['name'] ) {
    89104                if ( 'Translators' == $group_data['name'] ) {
    90105                        // Considered a special slug in the API response. (Also, will never be returned for en_US.)
    foreach ( $credits['groups'] as $group_slug => $group_data ) { 
    97112                        $title = translate( $group_data['name'] );
    98113                }
    99114
    100                 echo '<h2 class="wp-people-group">' . esc_html( $title ) . "</h2>\n";
     115                echo '<h2 class="wp-people-group-title">' . esc_html( $title ) . "</h2>\n";
    101116        }
    102117
    103118        if ( ! empty( $group_data['shuffle'] ) ) {
    foreach ( $credits['groups'] as $group_slug => $group_data ) { 
    120135                        foreach ( $group_data['data'] as $person_data ) {
    121136                                echo '<li class="wp-person" id="wp-person-' . esc_attr( $person_data[2] ) . '">' . "\n\t";
    122137                                echo '<a href="' . esc_url( sprintf( $credits['data']['profiles'], $person_data[2] ) ) . '" class="web">';
    123                                 $size   = 'compact' == $group_data['type'] ? 30 : 60;
     138                                $size   = 'compact' == $group_data['type'] ? 40 : 80;
    124139                                $data   = get_avatar_data( $person_data[1] . '@md5.gravatar.com', array( 'size' => $size ) );
    125140                                $size  *= 2;
    126141                                $data2x = get_avatar_data( $person_data[1] . '@md5.gravatar.com', array( 'size' => $size ) );
    foreach ( $credits['groups'] as $group_slug => $group_data ) { 
    135150                        echo "</ul>\n";
    136151                        break;
    137152        }
    138 }
     153        $previous_type = $group_data['type'];
     154        ?>
    139155
    140 ?>
     156                </div>
    141157        </div>
     158<?php endforeach; ?>
    142159</div>
    143160<?php
    144161
  • src/wp-admin/css/about.css

    diff --git src/wp-admin/css/about.css src/wp-admin/css/about.css
    index c6e7c5e239..54336002fd 100644
     
    11/*------------------------------------------------------------------------------
    22  22.0 - About Pages
    33
    4    1.0 Global: About, Credits, Freedoms
    5     1.1 Typography
    6     1.2 Structure
    7     1.3 Point Releases
    8    2.0 About Page
    9     2.1 Typography
    10     2.2 Structure
    11    3.0 Credits & Freedoms Pages
     4   1.0 Global: About, Credits, Freedoms, Privacy
     5    1.1 Layout
     6    1.2 Typography & Elements
     7    1.3 Header
     8   2.0 Credits Page
     9   3.0 Freedoms Page
     10   x.2.0 Legacy About Styles: Global
     11    x.2.1 Typography
     12    x.2.2 Structure
     13    x.2.3 Point Releases
     14   x.3.0 Legacy About Styles: About Page
     15    x.3.1 Typography
     16    x.3.2 Structure
     17   x.4.0 Legacy About Styles: Credits & Freedoms Pages
     18   x.5.0 Legacy About Styles: Media Queries
    1219------------------------------------------------------------------------------*/
    1320
     21:root {
     22        /* Beiges, used as text backgrounds. */
     23        --base-1: #FEFCF7;
     24        --base-2: #F4EFE1;
     25        --base-3: #D7D2C5;
     26        --base-4: #7B776C;
     27        --text: #413E38;
     28        /* Reds, used as accents, backgrounds, etc */
     29        --accent-1: #BD3854;
     30        --accent-2: #5F1B29;
     31        --accent-3: #321017;
     32}
     33
     34/*------------------------------------------------------------------------------
     35  1.0 - Global: About, Credits, Freedoms, Privacy
     36------------------------------------------------------------------------------*/
     37
     38.about-php #wpcontent,
     39.credits-php #wpcontent,
     40.freedoms-php #wpcontent,
     41.privacy-php #wpcontent {
     42        background: white;
     43        padding: 0 24px;
     44}
     45
     46@media screen and (max-width: 782px) {
     47        .about-php.auto-fold #wpcontent,
     48        .credits-php.auto-fold #wpcontent,
     49        .freedoms-php.auto-fold #wpcontent,
     50        .privacy-php.auto-fold #wpcontent {
     51                padding-left: 24px;
     52        }
     53}
     54
     55.about__container {
     56        max-width: 1000px;
     57        margin: 24px auto;
     58}
     59
     60.about__container .alignleft {
     61        float: left;
     62}
     63
     64.about__container .alignright {
     65        float: right;
     66}
     67
     68.about__container .aligncenter {
     69        text-align: center;
     70}
     71
     72.about__container .is-vertically-aligned-top {
     73        -ms-grid-row-align: start;
     74        align-self: start;
     75}
     76
     77.about__container .is-vertically-aligned-center {
     78        -ms-grid-row-align: center;
     79        align-self: center;
     80}
     81
     82.about__container .is-vertically-aligned-bottom {
     83        -ms-grid-row-align: end;
     84        align-self: end;
     85}
     86
     87.about__section {
     88        background: #F4EFE1;
     89        background: var(--base-2);
     90}
     91
     92.about__container .has-accent-background-color {
     93        background-color: #BD3854;
     94        background-color: var(--accent-1);
     95}
     96
     97.about__container .has-subtle-background-color {
     98        background-color: #D7D2C5;
     99        background-color: var(--base-3);
     100}
     101
     102/* 1.1 - Layout */
     103
     104.about__section {
     105        margin: 0;
     106}
     107
     108.about__section .column {
     109        padding: 32px;
     110}
     111
     112.about__section .column.is-edge-to-edge {
     113        padding: 0;
     114}
     115
     116.about__section .column p:last-of-type {
     117        margin-bottom: 0;
     118}
     119
     120.about__section .is-section-header {
     121        margin-bottom: 0;
     122        padding: 32px 32px 0;
     123}
     124
     125.about__section.is-feature {
     126        padding: 32px;
     127}
     128
     129.about__section.is-feature p {
     130        margin: 0;
     131}
     132
     133.about__section.has-2-columns,
     134.about__section.has-3-columns,
     135.about__section.has-4-columns {
     136        display: -ms-grid;
     137        display: grid;
     138}
     139
     140.about__section.has-2-columns {
     141        -ms-grid-columns: 1fr 1fr;
     142        grid-template-columns: 1fr 1fr;
     143}
     144
     145.about__section.has-2-columns.is-wider-right {
     146        -ms-grid-columns: 1fr 2fr;
     147        grid-template-columns: 1fr 2fr;
     148}
     149
     150.about__section.has-2-columns.is-wider-left {
     151        -ms-grid-columns: 2fr 1fr;
     152        grid-template-columns: 2fr 1fr;
     153}
     154
     155.about__section.has-2-columns .is-section-header {
     156        -ms-grid-column: 1;
     157        grid-column-start: 1;
     158        -ms-grid-column-span: 2;
     159        grid-column-end: span 2;
     160}
     161
     162.about__section.has-2-columns .column:nth-of-type(2n+1) {
     163        -ms-grid-column: 1;
     164        grid-column-start: 1;
     165}
     166
     167.about__section.has-2-columns .column:nth-of-type(2n) {
     168        -ms-grid-column: 2;
     169        grid-column-start: 2;
     170}
     171
     172.about__section.has-3-columns {
     173        -ms-grid-columns: (1fr)[3];
     174        grid-template-columns: repeat(3, 1fr);
     175}
     176
     177.about__section.has-3-columns .is-section-header {
     178        -ms-grid-column: 1;
     179        grid-column-start: 1;
     180        -ms-grid-column-span: 3;
     181        grid-column-end: span 3;
     182}
     183
     184.about__section.has-3-columns .column:nth-of-type(3n+1) {
     185        -ms-grid-column: 1;
     186        grid-column-start: 1;
     187}
     188
     189.about__section.has-3-columns .column:nth-of-type(3n+2) {
     190        -ms-grid-column: 2;
     191        grid-column-start: 2;
     192}
     193
     194.about__section.has-3-columns .column:nth-of-type(3n) {
     195        -ms-grid-column: 3;
     196        grid-column-start: 3;
     197}
     198
     199.about__section.has-4-columns {
     200        -ms-grid-columns: (1fr)[4];
     201        grid-template-columns: repeat(4, 1fr);
     202}
     203
     204.about__section.has-4-columns .is-section-header {
     205        -ms-grid-column: 1;
     206        grid-column-start: 1;
     207        -ms-grid-column-span: 4;
     208        grid-column-end: span 4;
     209}
     210
     211.about__section.has-4-columns .column:nth-of-type(4n+1) {
     212        -ms-grid-column: 1;
     213        grid-column-start: 1;
     214}
     215
     216.about__section.has-4-columns .column:nth-of-type(4n+2) {
     217        -ms-grid-column: 2;
     218        grid-column-start: 2;
     219}
     220
     221.about__section.has-4-columns .column:nth-of-type(4n+3) {
     222        -ms-grid-column: 3;
     223        grid-column-start: 3;
     224}
     225
     226.about__section.has-4-columns .column:nth-of-type(4n) {
     227        -ms-grid-column: 4;
     228        grid-column-start: 4;
     229}
     230
     231/* Any columns following a section header need to be expicitly put into the second row, for IE support. */
     232.about__section.has-2-columns .is-section-header ~ .column,
     233.about__section.has-3-columns .is-section-header ~ .column,
     234.about__section.has-4-columns .is-section-header ~ .column {
     235        -ms-grid-row: 2;
     236        grid-row-start: 2;
     237}
     238
     239@media screen and (max-width: 782px) {
     240        .about__section.has-3-columns,
     241        .about__section.has-4-columns {
     242                display: block;
     243                padding-bottom: 16px;
     244        }
     245
     246        .about__section.has-3-columns .column:nth-of-type(n),
     247        .about__section.has-4-columns .column:nth-of-type(n) {
     248                padding-top: 16px;
     249                padding-bottom: 16px;
     250        }
     251}
     252
     253@media screen and (max-width: 600px) {
     254        .about__section.has-2-columns {
     255                display: flex; /* This is flex, not block, so we can use order below. */
     256                flex-wrap: wrap;
     257                align-content: stretch;
     258                padding-bottom: 16px;
     259        }
     260
     261        .about__section.has-2-columns .column:nth-of-type(n) {
     262                padding-top: 16px;
     263                padding-bottom: 16px;
     264                width: 100%;
     265        }
     266
     267        .about__section.has-2-columns .is-edge-to-edge {
     268                order: -1;
     269        }
     270}
     271
     272/* 1.2 - Typography & Elements */
     273
     274.about__container {
     275        line-height: 1.4;
     276}
     277
     278.about__container h1 {
     279        font-size: 5em;
     280        line-height: 1;
     281}
     282
     283.about__container h2 {
     284        margin-top: 0;
     285        font-size: 1.4em;
     286}
     287
     288.about__container h3 {
     289        margin-top: 0;
     290        font-size: 1em;
     291}
     292
     293.about__container p {
     294        font-size: inherit;
     295        line-height: inherit;
     296}
     297
     298.about__container ul {
     299        list-style: disc;
     300        margin-left: 16px;
     301}
     302
     303.about__container img {
     304        margin: 0;
     305        vertical-align: middle;
     306}
     307
     308.about__container .about__image {
     309        display: -ms-grid;
     310        display: grid;
     311        align-items: center;
     312        justify-content: center;
     313        height: 100%;
     314}
     315
     316.about__container .about__image img {
     317        max-width: 100%;
     318        width: 100%;
     319        height: auto;
     320}
     321
     322.about__container hr {
     323        margin: 0;
     324        height: 32px;
     325        border: none;
     326}
     327
     328.about__section {
     329        font-size: 1.2em;
     330}
     331
     332.about__section.is-feature {
     333        font-size: 1.6em;
     334        font-weight: bold;
     335}
     336
     337@media screen and (max-width: 782px) {
     338        .about__container h1 {
     339                font-size: 4em;
     340        }
     341}
     342
     343@media screen and (max-width: 480px) {
     344        .about__container h1 {
     345                font-size: 3.2em;
     346        }
     347
     348        .about__section.is-feature {
     349                font-size: 1.4em;
     350                font-weight: 500;
     351        }
     352}
     353
     354/* 1.3 - Header */
     355
     356.about__header {
     357        display: -ms-grid;
     358        display: grid;
     359        -ms-grid-columns: 1fr 1fr;
     360        grid-template-columns: 1fr 1fr;
     361        -ms-grid-rows: 1fr 1fr;
     362        grid-template-rows: 1fr 1fr;
     363        min-height: 28em;
     364        max-height: 36em;
     365        height: 90vh;
     366        margin-bottom: 32px;
     367}
     368
     369.about__header > div {
     370        display: flex;
     371}
     372
     373.about__header > div > * {
     374        align-self: flex-end;
     375}
     376
     377.about__header-title {
     378        -ms-grid-column: 1;
     379        grid-column: 1;
     380        -ms-grid-row: 1;
     381        -ms-grid-row-span: 2;
     382        grid-row: 1/span 2;
     383        padding: 32px;
     384        background-color: #BD3854;
     385        background-color: var(--accent-1);
     386        color: white;
     387        padding: 32px;
     388}
     389
     390.about__header-title h1 {
     391        padding: 0;
     392        color: inherit;
     393}
     394
     395.about__header-title h1 span {
     396        display: block;
     397        font-weight: bold;
     398        font-size: 1.2em;
     399        line-height: 1;
     400}
     401
     402.about__header-badge {
     403        -ms-grid-column: 2;
     404        grid-column: 2;
     405        -ms-grid-row: 1;
     406        grid-row: 1;
     407        background-color: #5F1B29;
     408        background-color: var(--accent-2);
     409        margin: 0;
     410        padding: 32px;
     411        justify-content: flex-end;
     412}
     413
     414.about__header-badge img {
     415        align-self: flex-start;
     416        max-width: 100%;
     417}
     418
     419.about__header-text {
     420        -ms-grid-column: 2;
     421        grid-column: 2;
     422        -ms-grid-row: 2;
     423        grid-row: 2;
     424        padding: 32px;
     425        background-color: #321017;
     426        background-color: var(--accent-3);
     427        color: white;
     428        font-size: 1.6em;
     429        line-height: 1.4;
     430}
     431
     432.about__header-text p {
     433        margin: 0;
     434}
     435
     436.about__header-navigation {
     437        -ms-grid-column: 1;
     438        -ms-grid-column-span: 2;
     439        grid-column: 1/span 2;
     440        -ms-grid-row: 3;
     441        grid-row: 3;
     442        padding-top: 0;
     443        background: #FEFCF7;
     444        background: var(--base-1);
     445        color: #7B776C;
     446        color: var(--base-4);
     447        border-bottom: 3px solid currentColor;
     448}
     449
     450.about__header-navigation .nav-tab {
     451        margin-left: 0;
     452        margin-bottom: -3px;
     453        padding: 24px 32px;
     454        font-size: 1.4em;
     455        line-height: 1;
     456        border-width: 0 0 3px;
     457        border-style: solid;
     458        border-color: transparent;
     459        background: transparent;
     460        color: inherit;
     461}
     462
     463.about__header-navigation .nav-tab-active {
     464        color: #BD3854;
     465        color: var(--accent-1);
     466        border-color: currentColor;
     467}
     468
     469@media screen and (max-width: 782px) {
     470        .about__container .about__header-text {
     471                font-size: 1.4em;
     472        }
     473}
     474
     475@media screen and (max-width: 600px) {
     476        .about__header {
     477                display: block;
     478                min-height: unset;
     479                max-height: unset;
     480                height: auto;
     481        }
     482
     483        .about__header-badge {
     484                justify-content: flex-start;
     485        }
     486
     487        .about__header-navigation .nav-tab {
     488                margin-top: 0;
     489                margin-right: 0;
     490                padding: 24px 16px;
     491        }
     492}
     493
     494@media screen and (max-width: 480px) {
     495        .about__header-navigation .nav-tab {
     496                float: none;
     497                display: block;
     498                margin-bottom: 0;
     499                padding: 16px 16px;
     500                border-left-width: 3px;
     501                border-bottom: none;
     502        }
     503
     504        .about__header-navigation .nav-tab-active {
     505                border-bottom: none;
     506                border-left-width: 3px;
     507                background: #F4EFE1;
     508                background: var(--base-2);
     509        }
     510}
     511
     512
     513/*------------------------------------------------------------------------------
     514  2.0 - Credits Page
     515------------------------------------------------------------------------------*/
     516
     517.about__section .wp-people-group-title {
     518        margin-bottom: 2em;
     519        font-size: 1.4em;
     520}
     521
     522.about__section .wp-people-group {
     523        margin: 0;
     524}
     525
     526.about__section .wp-person {
     527        display: inline-block;
     528        vertical-align: top;
     529        box-sizing: border-box;
     530        padding: 0 1em 1em 0;
     531        height: 6em;
     532        width: calc( 33% - 4px );
     533        min-width: 280px;
     534}
     535
     536.about__section .compact .wp-person {
     537        height: auto;
     538        width: calc( 25% - 4px );
     539        min-width: 220px;
     540        padding-bottom: 0.5em;
     541}
     542
     543.about__section .wp-person .gravatar {
     544        float: left;
     545        margin: -4px 0.85em 0.85em 0;
     546        padding: 1px;
     547        width: 80px;
     548        height: 80px;
     549        border-radius: 100%;
     550}
     551
     552.about__section .compact .wp-person .gravatar {
     553        width: 40px;
     554        height: 40px;
     555}
     556
     557.about__section .wp-person .web {
     558        font-size: 1.4em;
     559        font-weight: 700;
     560        text-decoration: none;
     561        color: #413E38;
     562        color: var(--text);
     563}
     564
     565.about__section .wp-person .web:hover {
     566        text-decoration: underline;
     567}
     568
     569.about__section .compact .wp-person .web {
     570        font-size: 1.2em;
     571}
     572
     573.about__section .wp-person .title {
     574        display: block;
     575        margin-top: 0.5em;
     576}
     577
     578
     579/*------------------------------------------------------------------------------
     580  3.0 - Freedoms Page
     581------------------------------------------------------------------------------*/
     582
     583.about__section .column .freedoms-image {
     584        margin-bottom: 1em;
     585}
     586
     587
    14588/*------------------------------------------------------------------------------
    15   1.0 - Global: About, Credits, Freedoms
     589  x.2.0 - Legacy About Styles: Global
    16590------------------------------------------------------------------------------*/
    17591
    18592.about-wrap {
     
    98672        line-height: 1.33333333;
    99673}
    100674
    101 /* 1.1 - Typography */
     675/* x.2.1 - Typography */
    102676
    103677.about-wrap h1 {
    104678        margin: 0.2em 200px 0 0;
     
    159733        color: #555d66;
    160734}
    161735
    162 /* 1.2 - Structure */
     736/* x.2.2 - Structure */
    163737
    164738.about-wrap .has-1-columns,
    165739.about-wrap .has-2-columns,
     
    281855}
    282856
    283857.about-wrap .is-vertically-aligned-top {
     858        -ms-grid-row-align: start;
    284859        align-self: start;
    285860}
    286861
    287862.about-wrap .is-vertically-aligned-center {
     863        -ms-grid-row-align: center;
    288864        align-self: center;
    289865}
    290866
    291867.about-wrap .is-vertically-aligned-bottom {
     868        -ms-grid-row-align: end;
    292869        align-self: end;
    293870}
    294871
    295 /* 1.3 - Point Releases */
     872/* x.2.3 - Point Releases */
    296873
    297874.about-wrap .point-releases {
    298875        margin-top: 5px;
     
    316893}
    317894
    318895/*------------------------------------------------------------------------------
    319   2.0 - About Page
     896  x.3.0 - Legacy About Styles: About Page
    320897------------------------------------------------------------------------------*/
    321898
    322 /* 2.1 - Typography */
     899/* x.3.1 - Typography */
    323900
    324901.about-wrap .lead-description {
    325902        font-size: 1.5em;
     
    330907        margin-top: 0.6em;
    331908}
    332909
    333 /* 2.2 - Structure */
     910/* x.3.2 - Structure */
    334911
    335912.about-wrap .headline-feature {
    336913        margin: 0 auto 40px;
     
    360937}
    361938
    362939/*------------------------------------------------------------------------------
    363   3.0 - Credits & Freedoms Pages
     940  x.4.0 - Legacy About Styles: Credits & Freedoms Pages
    364941------------------------------------------------------------------------------*/
    365942
    366943/* Credits */
     
    4711048}
    4721049
    4731050/*------------------------------------------------------------------------------
    474   4.0 - Media Queries
     1051  x.5.0 - Legacy About Styles: Media Queries
    4751052------------------------------------------------------------------------------*/
    4761053
    4771054@media screen and (max-width: 782px) {
  • src/wp-admin/freedoms.php

    diff --git src/wp-admin/freedoms.php src/wp-admin/freedoms.php
    index 4fe0cef9ba..77ea5c5bab 100644
    list( $display_version ) = explode( '-', get_bloginfo( 'version' ) ); 
    2121
    2222include( ABSPATH . 'wp-admin/admin-header.php' );
    2323?>
    24 <div class="wrap about-wrap full-width-layout">
     24<div class="wrap about__container">
    2525
    2626        <div class="about__header">
    2727                <div class="about__header-title">
    include( ABSPATH . 'wp-admin/admin-header.php' ); 
    3131                        </h1>
    3232                </div>
    3333
    34                 <div class="about__header-badge wp-badge">
    35                         <?php
    36                         printf(
    37                                 /* translators: %s: The current WordPress version number. */
    38                                 __( 'Version %s' ),
    39                                 $display_version
    40                         );
    41                         ?>
     34                <div class="about__header-badge">
     35                        <img src="https://cldup.com/lWO2MMKJtb.svg" alt="<?php _e( 'Code is Poetry' ); ?>" />
    4236                </div>
    4337
    4438                <div class="about__header-text">
    include( ABSPATH . 'wp-admin/admin-header.php' ); 
    6155                </nav>
    6256        </div>
    6357
    64         <div class="about-wrap-content">
    65                 <div class="feature-section has-1-columns">
    66                         <h2><?php _e( 'Freedoms' ); ?></h2>
    67                         <p class="about-description">
    68                         <?php
    69                         printf(
    70                                 /* translators: %s: https://wordpress.org/about/license/ */
    71                                 __( 'WordPress is Free and open source software, built by a distributed community of mostly volunteer developers from around the world. WordPress comes with some awesome, worldview-changing rights courtesy of its <a href="%s">license</a>, the GPL.' ),
    72                                 __( 'https://wordpress.org/about/license/' )
    73                         );
    74                         ?>
    75                         </p>
    76                 </div>
     58        <div class="about__section has-subtle-background-color is-feature">
     59                <h2><?php _e( 'Freedoms' ); ?></h2>
     60
     61                <p class="about-description">
     62                <?php
     63                printf(
     64                        /* translators: %s: https://wordpress.org/about/license/ */
     65                        __( 'WordPress is Free and open source software, built by a distributed community of mostly volunteer developers from around the world. WordPress comes with some awesome, worldview-changing rights courtesy of its <a href="%s">license</a>, the GPL.' ),
     66                        __( 'https://wordpress.org/about/license/' )
     67                );
     68                ?>
     69                </p>
     70        </div>
     71
     72        <hr />
    7773
    78                 <div class="feature-section has-4-columns is-fullwidth">
    79                         <div class="column">
    80                                 <div class="freedoms-image"></div>
    81                                 <h3><?php _e( 'The 1st Freedom' ); ?></h3>
    82                                 <p><?php _e( 'To run the program for any purpose.' ); ?></p>
    83                         </div>
    84                         <div class="column">
    85                                 <div class="freedoms-image"></div>
    86                                 <h3><?php _e( 'The 2nd Freedom' ); ?></h3>
    87                                 <p><?php _e( 'To study how the program works and change it to make it do what you wish.' ); ?></p>
    88                         </div>
    89                         <div class="column">
    90                                 <div class="freedoms-image"></div>
    91                                 <h3><?php _e( 'The 3rd Freedom' ); ?></h3>
    92                                 <p><?php _e( 'To redistribute.' ); ?></p>
    93                         </div>
    94                         <div class="column">
    95                                 <div class="freedoms-image"></div>
    96                                 <h3><?php _e( 'The 4th Freedom' ); ?></h3>
    97                                 <p><?php _e( 'To distribute copies of your modified versions to others.' ); ?></p>
    98                         </div>
     74        <div class="about__section has-4-columns">
     75                <div class="column">
     76                        <div class="freedoms-image"></div>
     77                        <h3><?php _e( 'The 1st Freedom' ); ?></h3>
     78                        <p><?php _e( 'To run the program for any purpose.' ); ?></p>
    9979                </div>
     80                <div class="column">
     81                        <div class="freedoms-image"></div>
     82                        <h3><?php _e( 'The 2nd Freedom' ); ?></h3>
     83                        <p><?php _e( 'To study how the program works and change it to make it do what you wish.' ); ?></p>
     84                </div>
     85                <div class="column">
     86                        <div class="freedoms-image"></div>
     87                        <h3><?php _e( 'The 3rd Freedom' ); ?></h3>
     88                        <p><?php _e( 'To redistribute.' ); ?></p>
     89                </div>
     90                <div class="column">
     91                        <div class="freedoms-image"></div>
     92                        <h3><?php _e( 'The 4th Freedom' ); ?></h3>
     93                        <p><?php _e( 'To distribute copies of your modified versions to others.' ); ?></p>
     94                </div>
     95        </div>
    10096
    101                 <div class="feature-section has-1-columns">
     97        <div class="about__section">
     98                <div class="column">
    10299                        <p>
    103100                        <?php
    104101                        printf(
  • src/wp-admin/privacy.php

    diff --git src/wp-admin/privacy.php src/wp-admin/privacy.php
    index d6f27e4d85..a2aaac3538 100644
    list( $display_version ) = explode( '-', get_bloginfo( 'version' ) ); 
    1515
    1616include( ABSPATH . 'wp-admin/admin-header.php' );
    1717?>
    18 <div class="wrap about-wrap full-width-layout">
     18<div class="wrap about__container">
    1919
    2020        <div class="about__header">
    2121                <div class="about__header-title">
    include( ABSPATH . 'wp-admin/admin-header.php' ); 
    2525                        </h1>
    2626                </div>
    2727
    28                 <div class="about__header-badge wp-badge">
    29                         <?php
    30                         printf(
    31                                 /* translators: %s: The current WordPress version number. */
    32                                 __( 'Version %s' ),
    33                                 $display_version
    34                         );
    35                         ?>
     28                <div class="about__header-badge">
     29                        <img src="https://cldup.com/lWO2MMKJtb.svg" alt="<?php _e( 'Code is Poetry' ); ?>" />
    3630                </div>
    3731
    3832                <div class="about__header-text">
    include( ABSPATH . 'wp-admin/admin-header.php' ); 
    5549                </nav>
    5650        </div>
    5751
    58         <div class="about-wrap-content">
    59                 <p class="about-description"><?php _e( 'From time to time, your WordPress site may send data to WordPress.org &#8212; including, but not limited to &#8212; the version of WordPress you are using, and a list of installed plugins and themes.' ); ?></p>
     52        <div class="about__section">
     53                <div class="column">
     54                        <h2><?php _e( 'Privacy' ); ?></h2>
    6055
    61                 <p>
    62                         <?php
    63                         printf(
    64                                 /* translators: %s: https://wordpress.org/about/stats/ */
    65                                 __( 'This data is used to provide general enhancements to WordPress, which includes helping to protect your site by finding and automatically installing new updates. It is also used to calculate statistics, such as those shown on the <a href="%s">WordPress.org stats page</a>.' ),
    66                                 __( 'https://wordpress.org/about/stats/' )
    67                         );
    68                         ?>
    69                 </p>
     56                        <p><?php _e( 'From time to time, your WordPress site may send data to WordPress.org &#8212; including, but not limited to &#8212; the version of WordPress you are using, and a list of installed plugins and themes.' ); ?></p>
    7057
    71                 <p>
    72                         <?php
    73                         printf(
    74                                 /* translators: %s: https://wordpress.org/about/privacy/ */
    75                                 __( 'We take privacy and transparency very seriously. To learn more about what data we collect, and how we use it, please visit <a href="%s">WordPress.org/about/privacy</a>.' ),
    76                                 __( 'https://wordpress.org/about/privacy/' )
    77                         );
    78                         ?>
    79                 </p>
     58                        <p>
     59                                <?php
     60                                printf(
     61                                        /* translators: %s: https://wordpress.org/about/stats/ */
     62                                        __( 'This data is used to provide general enhancements to WordPress, which includes helping to protect your site by finding and automatically installing new updates. It is also used to calculate statistics, such as those shown on the <a href="%s">WordPress.org stats page</a>.' ),
     63                                        __( 'https://wordpress.org/about/stats/' )
     64                                );
     65                                ?>
     66                        </p>
     67
     68                        <p>
     69                                <?php
     70                                printf(
     71                                        /* translators: %s: https://wordpress.org/about/privacy/ */
     72                                        __( 'We take privacy and transparency very seriously. To learn more about what data we collect, and how we use it, please visit <a href="%s">WordPress.org/about/privacy</a>.' ),
     73                                        __( 'https://wordpress.org/about/privacy/' )
     74                                );
     75                                ?>
     76                        </p>
     77                </div>
    8078        </div>
    8179
    8280</div>