WordPress.org
Get WordPress

Make WordPress Core

Ticket #47708: 47708.11.diff

File 47708.11.diff, 30.9 KB (added by ryelle, 5 years ago)

  • src/wp-admin/about.php 

    diff --git src/wp-admin/about.php src/wp-admin/about.php
index 55a7902979..b13d444313 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' ); 
    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' ); 
    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' ); 
    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..60d51dbcec 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;utf8,%3Csvg width='1320' height='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..6c66f307de 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        display: -ms-grid;
     106        display: grid;
     107        margin: 0;
     108}
     109
     110.about__section .column {
     111        padding: 32px;
     112}
     113
     114.about__section .column.is-edge-to-edge {
     115        padding: 0;
     116}
     117
     118.about__section .column p:last-of-type {
     119        margin-bottom: 0;
     120}
     121
     122.about__section .is-section-header {
     123        margin-bottom: 0;
     124        padding: 32px 32px 0;
     125}
     126
     127.about__section.is-feature {
     128        padding: 32px;
     129}
     130
     131.about__section.is-feature p {
     132        margin: 0;
     133}
     134
     135.about__section.has-2-columns {
     136        -ms-grid-columns: 1fr 1fr;
     137        grid-template-columns: 1fr 1fr;
     138}
     139
     140.about__section.has-2-columns.is-wider-right {
     141        -ms-grid-columns: 1fr 2fr;
     142        grid-template-columns: 1fr 2fr;
     143}
     144
     145.about__section.has-2-columns.is-wider-left {
     146        -ms-grid-columns: 2fr 1fr;
     147        grid-template-columns: 2fr 1fr;
     148}
     149
     150.about__section.has-2-columns .is-section-header {
     151        -ms-grid-column: 1;
     152        grid-column-start: 1;
     153        -ms-grid-column-span: 2;
     154        grid-column-end: span 2;
     155}
     156
     157.about__section.has-2-columns .column:nth-of-type(2n+1) {
     158        -ms-grid-column: 1;
     159        grid-column-start: 1;
     160}
     161
     162.about__section.has-2-columns .column:nth-of-type(2n) {
     163        -ms-grid-column: 2;
     164        grid-column-start: 2;
     165}
     166
     167.about__section.has-3-columns {
     168        -ms-grid-columns: (1fr)[3];
     169        grid-template-columns: repeat(3, 1fr);
     170}
     171
     172.about__section.has-3-columns .is-section-header {
     173        -ms-grid-column: 1;
     174        grid-column-start: 1;
     175        -ms-grid-column-span: 3;
     176        grid-column-end: span 3;
     177}
     178
     179.about__section.has-3-columns .column:nth-of-type(3n+1) {
     180        -ms-grid-column: 1;
     181        grid-column-start: 1;
     182}
     183
     184.about__section.has-3-columns .column:nth-of-type(3n+2) {
     185        -ms-grid-column: 2;
     186        grid-column-start: 2;
     187}
     188
     189.about__section.has-3-columns .column:nth-of-type(3n) {
     190        -ms-grid-column: 3;
     191        grid-column-start: 3;
     192}
     193
     194.about__section.has-4-columns {
     195        -ms-grid-columns: (1fr)[4];
     196        grid-template-columns: repeat(4, 1fr);
     197}
     198
     199.about__section.has-4-columns .is-section-header {
     200        -ms-grid-column: 1;
     201        grid-column-start: 1;
     202        -ms-grid-column-span: 4;
     203        grid-column-end: span 4;
     204}
     205
     206.about__section.has-4-columns .column:nth-of-type(4n+1) {
     207        -ms-grid-column: 1;
     208        grid-column-start: 1;
     209}
     210
     211.about__section.has-4-columns .column:nth-of-type(4n+2) {
     212        -ms-grid-column: 2;
     213        grid-column-start: 2;
     214}
     215
     216.about__section.has-4-columns .column:nth-of-type(4n+3) {
     217        -ms-grid-column: 3;
     218        grid-column-start: 3;
     219}
     220
     221.about__section.has-4-columns .column:nth-of-type(4n) {
     222        -ms-grid-column: 4;
     223        grid-column-start: 4;
     224}
     225
     226@media screen and (max-width: 782px) {
     227        .about__section.has-3-columns,
     228        .about__section.has-4-columns {
     229                display: block;
     230                padding-bottom: 16px;
     231        }
     232
     233        .about__section.has-3-columns .column:nth-of-type(n),
     234        .about__section.has-4-columns .column:nth-of-type(n) {
     235                padding-top: 16px;
     236                padding-bottom: 16px;
     237        }
     238}
     239
     240@media screen and (max-width: 600px) {
     241        .about__section.has-2-columns {
     242                display: flex; /* This is flex, not block, so we can use order below. */
     243                flex-wrap: wrap;
     244                align-content: stretch;
     245                padding-bottom: 16px;
     246        }
     247
     248        .about__section.has-2-columns .column:nth-of-type(n) {
     249                padding-top: 16px;
     250                padding-bottom: 16px;
     251                width: 100%;
     252        }
     253
     254        .about__section.has-2-columns .is-edge-to-edge {
     255                order: -1;
     256        }
     257}
     258
     259/* 1.2 - Typography & Elements */
     260
     261.about__container {
     262        line-height: 1.4;
     263}
     264
     265.about__container h1 {
     266        font-size: 5em;
     267        line-height: 1;
     268}
     269
     270.about__container h2 {
     271        margin-top: 0;
     272        font-size: 1.4em;
     273}
     274
     275.about__container h3 {
     276        margin-top: 0;
     277        font-size: 1em;
     278}
     279
     280.about__container p {
     281        font-size: inherit;
     282        line-height: inherit;
     283}
     284
     285.about__container ul {
     286        list-style: disc;
     287        margin-left: 16px;
     288}
     289
     290.about__container img {
     291        margin: 0;
     292        vertical-align: middle;
     293}
     294
     295.about__container .about__image {
     296        display: -ms-grid;
     297        display: grid;
     298        align-items: center;
     299        justify-content: center;
     300        height: 100%;
     301}
     302
     303.about__container .about__image img {
     304        max-width: 100%;
     305        width: auto;
     306        height: auto;
     307}
     308
     309.about__container hr {
     310        margin: 0;
     311        height: 32px;
     312        border: none;
     313}
     314
     315.about__section {
     316        font-size: 1.2em;
     317}
     318
     319.about__section.is-feature {
     320        font-size: 1.6em;
     321        font-weight: bold;
     322}
     323
     324@media screen and (max-width: 782px) {
     325        .about__container h1 {
     326                font-size: 4em;
     327        }
     328}
     329
     330@media screen and (max-width: 480px) {
     331        .about__container h1 {
     332                font-size: 3.2em;
     333        }
     334
     335        .about__section.is-feature {
     336                font-size: 1.4em;
     337                font-weight: 500;
     338        }
     339}
     340
     341/* 1.3 - Header */
     342
     343.about__header {
     344        display: -ms-grid;
     345        display: grid;
     346        -ms-grid-columns: 1fr 1fr;
     347        grid-template-columns: 1fr 1fr;
     348        -ms-grid-rows: 1fr 1fr;
     349        grid-template-rows: 1fr 1fr;
     350        min-height: 28em;
     351        max-height: 36em;
     352        height: 90vh;
     353        margin-bottom: 32px;
     354}
     355
     356.about__header > div {
     357        display: flex;
     358}
     359
     360.about__header > div > * {
     361        align-self: flex-end;
     362}
     363
     364.about__header-title {
     365        -ms-grid-column: 1;
     366        grid-column: 1;
     367        -ms-grid-row: 1;
     368        -ms-grid-row-span: 2;
     369        grid-row: 1/span 2;
     370        padding: 32px;
     371        background-color: #BD3854;
     372        background-color: var(--accent-1);
     373        color: white;
     374        padding: 32px;
     375}
     376
     377.about__header-title h1 {
     378        padding: 0;
     379        color: inherit;
     380}
     381
     382.about__header-title h1 span {
     383        display: block;
     384        font-weight: bold;
     385        font-size: 1.2em;
     386        line-height: 1;
     387}
     388
     389.about__header-badge {
     390        -ms-grid-column: 2;
     391        grid-column: 2;
     392        -ms-grid-row: 1;
     393        grid-row: 1;
     394        background-color: #5F1B29;
     395        background-color: var(--accent-2);
     396        margin: 0;
     397        padding: 32px;
     398        justify-content: flex-end;
     399}
     400
     401.about__header-badge img {
     402        align-self: flex-start;
     403        max-width: 100%;
     404}
     405
     406.about__header-text {
     407        -ms-grid-column: 2;
     408        grid-column: 2;
     409        -ms-grid-row: 2;
     410        grid-row: 2;
     411        padding: 32px;
     412        background-color: #321017;
     413        background-color: var(--accent-3);
     414        color: white;
     415        font-size: 1.6em;
     416        line-height: 1.4;
     417}
     418
     419.about__header-text p {
     420        margin: 0;
     421}
     422
     423.about__header-navigation {
     424        -ms-grid-column: 1;
     425        -ms-grid-column-span: 2;
     426        grid-column: 1/span 2;
     427        -ms-grid-row: 3;
     428        grid-row: 3;
     429        padding-top: 0;
     430        background: #FEFCF7;
     431        background: var(--base-1);
     432        color: #7B776C;
     433        color: var(--base-4);
     434        border-bottom: 3px solid currentColor;
     435}
     436
     437.about__header-navigation .nav-tab {
     438        margin-left: 0;
     439        margin-bottom: -3px;
     440        padding: 24px 32px;
     441        font-size: 1.4em;
     442        line-height: 1;
     443        border-width: 0 0 3px;
     444        border-style: solid;
     445        border-color: transparent;
     446        background: unset;
     447        color: inherit;
     448}
     449
     450.about__header-navigation .nav-tab-active {
     451        color: #BD3854;
     452        color: var(--accent-1);
     453        border-color: currentColor;
     454}
     455
     456@media screen and (max-width: 782px) {
     457        .about__container .about__header-text {
     458                font-size: 1.4em;
     459        }
     460}
     461
     462@media screen and (max-width: 600px) {
     463        .about__header {
     464                display: block;
     465                min-height: unset;
     466                max-height: unset;
     467                height: auto;
     468        }
     469
     470        .about__header-badge {
     471                justify-content: flex-start;
     472        }
     473
     474        .about__header-navigation .nav-tab {
     475                margin-top: 0;
     476                margin-right: 0;
     477                padding: 24px 16px;
     478        }
     479}
     480
     481@media screen and (max-width: 480px) {
     482        .about__header-navigation .nav-tab {
     483                float: none;
     484                display: block;
     485                margin-bottom: 0;
     486                padding: 16px 16px;
     487                border-left-width: 3px;
     488                border-bottom: none;
     489        }
     490
     491        .about__header-navigation .nav-tab-active {
     492                border-bottom: none;
     493                border-left-width: 3px;
     494                background: #F4EFE1;
     495                background: var(--base-2);
     496        }
     497}
     498
     499
     500/*------------------------------------------------------------------------------
     501  2.0 - Credits Page
     502------------------------------------------------------------------------------*/
     503
     504.about__section .wp-people-group-title {
     505        margin-bottom: 2em;
     506        font-size: 1.4em;
     507}
     508
     509.about__section .wp-people-group {
     510        margin: 0;
     511}
     512
     513.about__section .wp-person {
     514        display: inline-block;
     515        vertical-align: top;
     516        box-sizing: border-box;
     517        padding: 0 1em 1em 0;
     518        height: 6em;
     519        width: calc( 33% - 4px );
     520        min-width: 280px;
     521}
     522
     523.about__section .compact .wp-person {
     524        height: auto;
     525        width: calc( 25% - 4px );
     526        min-width: 220px;
     527        padding-bottom: 0.5em;
     528}
     529
     530.about__section .wp-person .gravatar {
     531        float: left;
     532        margin: -4px 0.85em 0.85em 0;
     533        padding: 1px;
     534        width: 80px;
     535        height: 80px;
     536        border-radius: 100%;
     537}
     538
     539.about__section .compact .wp-person .gravatar {
     540        width: 40px;
     541        height: 40px;
     542}
     543
     544.about__section .wp-person .web {
     545        font-size: 1.4em;
     546        font-weight: 700;
     547        text-decoration: none;
     548        color: #413E38;
     549        color: var(--text);
     550}
     551
     552.about__section .wp-person .web:hover {
     553        text-decoration: underline;
     554}
     555
     556.about__section .compact .wp-person .web {
     557        font-size: 1.2em;
     558}
     559
     560.about__section .wp-person .title {
     561        display: block;
     562        margin-top: 0.5em;
     563}
     564
     565
     566/*------------------------------------------------------------------------------
     567  3.0 - Freedoms Page
     568------------------------------------------------------------------------------*/
     569
     570.about__section .column .freedoms-image {
     571        margin-bottom: 1em;
     572}
     573
     574
    14575/*------------------------------------------------------------------------------
    15   1.0 - Global: About, Credits, Freedoms
     576  x.2.0 - Legacy About Styles: Global
    16577------------------------------------------------------------------------------*/
    17578
    18579.about-wrap {
    … …  
    98659        line-height: 1.33333333;
    99660}
    100661
    101 /* 1.1 - Typography */
     662/* x.2.1 - Typography */
    102663
    103664.about-wrap h1 {
    104665        margin: 0.2em 200px 0 0;
    … …  
    159720        color: #555d66;
    160721}
    161722
    162 /* 1.2 - Structure */
     723/* x.2.2 - Structure */
    163724
    164725.about-wrap .has-1-columns,
    165726.about-wrap .has-2-columns,
    … …  
    281842}
    282843
    283844.about-wrap .is-vertically-aligned-top {
     845        -ms-grid-row-align: start;
    284846        align-self: start;
    285847}
    286848
    287849.about-wrap .is-vertically-aligned-center {
     850        -ms-grid-row-align: center;
    288851        align-self: center;
    289852}
    290853
    291854.about-wrap .is-vertically-aligned-bottom {
     855        -ms-grid-row-align: end;
    292856        align-self: end;
    293857}
    294858
    295 /* 1.3 - Point Releases */
     859/* x.2.3 - Point Releases */
    296860
    297861.about-wrap .point-releases {
    298862        margin-top: 5px;
    … …  
    316880}
    317881
    318882/*------------------------------------------------------------------------------
    319   2.0 - About Page
     883  x.3.0 - Legacy About Styles: About Page
    320884------------------------------------------------------------------------------*/
    321885
    322 /* 2.1 - Typography */
     886/* x.3.1 - Typography */
    323887
    324888.about-wrap .lead-description {
    325889        font-size: 1.5em;
    … …  
    330894        margin-top: 0.6em;
    331895}
    332896
    333 /* 2.2 - Structure */
     897/* x.3.2 - Structure */
    334898
    335899.about-wrap .headline-feature {
    336900        margin: 0 auto 40px;
    … …  
    360924}
    361925
    362926/*------------------------------------------------------------------------------
    363   3.0 - Credits & Freedoms Pages
     927  x.4.0 - Legacy About Styles: Credits & Freedoms Pages
    364928------------------------------------------------------------------------------*/
    365929
    366930/* Credits */
    … …  
    4711035}
    4721036
    4731037/*------------------------------------------------------------------------------
    474   4.0 - Media Queries
     1038  x.5.0 - Legacy About Styles: Media Queries
    4751039------------------------------------------------------------------------------*/
    4761040
    4771041@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>