WordPress.org
Get WordPress

Make WordPress Core

Changeset 46617


Ignore:
Timestamp:
10/29/2019 08:11:06 PM (5 years ago)
Author:
desrosj
Message:

Help/About: Update the 5.3 About page for RC3.

Previously [46556], [46572].

Reviewed by azaozz, desrosj.
Merges [46616] to the 5.3 branch.
Props ryelle, SergeyBiryukov, afercia, desrosj, davidbaumwald, azaozz.
See #47708.

Location:
branches/5.3
Files:
6 edited

Legend:

Unmodified
Added
Removed

  • branches/5.3

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

    r46572 r46617  
    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">
    … …  
    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://wordpress.org/images/core/5.4/code-is-poetry-rc.svg" alt="<?php _e( 'Code is Poetry' ); ?>" />
    3731            </div>
    3832
    … …  
    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.' ); ?>
    … …  
    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
    … …  
    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>
    … …  
    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
    … …  
    127121            <div class="column is-edge-to-edge">
    128122                <div class="about__image aligncenter">
    129                     <img src="https://cldup.com/rsaSI50LvZ.png" alt="" />
     123                    <img src="https://make.wordpress.org/core/files/2019/10/twentytwenty-mobile.png" alt="" />
    130124                </div>
    131125            </div>
    … …  
    135129            <div class="column is-edge-to-edge">
    136130                <div class="about__image aligncenter">
    137                     <img src="https://cldup.com/8AuwuFLW0J.png" alt="" />
     131                    <img src="https://make.wordpress.org/core/files/2019/10/twentytwenty-desktop.png" alt="" />
    138132                </div>
    139133            </div>
    … …  
    143137
    144138        <div class="about__section has-3-columns">
    145             <h3 class="is-section-header"><?php _e( 'Improvements for Everyone' ); ?></h3>
    146 
    147             <div class="column">
    148                 <h4><?php _e( 'Automatic Image Rotation' ); ?></h4>
     139            <h2 class="is-section-header"><?php _e( 'Improvements for Everyone' ); ?></h2>
     140
     141            <div class="column">
     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>
    157                 <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>
     150                <h3><?php _e( 'Admin Email Verification' ); ?></h3>
     151                <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 of your site if you change your email address.' ); ?></p>
    158152            </div>
    159153        </div>
    … …  
    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>
    … …  
    170164
    171165        <div class="about__section has-2-columns has-subtle-background-color">
    172             <h3 class="is-section-header"><?php _e( 'For Developers' ); ?></h3>
    173 
    174             <div class="column">
    175                 <h4><?php _e( 'Date/Time Component Fixes' ); ?></h4>
     166            <h2 class="is-section-header"><?php _e( 'For Developers' ); ?></h2>
     167
     168            <div class="column">
     169                <h3><?php _e( 'Date/Time Component Fixes' ); ?></h3>
    176170                <p>
    177171                    <?php
    … …  
    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

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

    r46572 r46617  
    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">
    … …  
    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://wordpress.org/images/core/5.4/code-is-poetry-rc.svg" alt="<?php _e( 'Code is Poetry' ); ?>" />
    3733        </div>
    3834
    … …  
    5753    </div>
    5854
    59     <div class="about-wrap-content">
     55    <div class="about__section">
     56        <div class="column">
     57            <h2><?php _e( 'WordPress is created by a worldwide team of passionate individuals.' ); ?></h2>
     58
     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>
     78
     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
    6084<?php
    61 
    62 $credits = wp_credits();
    63 
    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' );
    … …  
    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    ?>
     95    <?php
     96    if ( $previous_type !== $group_data['type'] ) {
     97        echo '<hr />';
     98    }
     99    ?>
     100    <div class="about__section">
     101        <div class="column <?php echo 'titles' === $group_data['type'] ? 'has-subtle-background-color' : ''; ?>">
    86102
    87 foreach ( $credits['groups'] as $group_slug => $group_data ) {
     103    <?php
    88104    if ( $group_data['name'] ) {
    89105        if ( 'Translators' == $group_data['name'] ) {
    … …  
    98114        }
    99115
    100         echo '<h2 class="wp-people-group">' . esc_html( $title ) . "</h2>\n";
     116        echo '<h2 class="wp-people-group-title">' . esc_html( $title ) . "</h2>\n";
    101117    }
    102118
    … …  
    121137                echo '<li class="wp-person" id="wp-person-' . esc_attr( $person_data[2] ) . '">' . "\n\t";
    122138                echo '<a href="' . esc_url( sprintf( $credits['data']['profiles'], $person_data[2] ) ) . '" class="web">';
    123                 $size   = 'compact' == $group_data['type'] ? 30 : 60;
     139                $size   = 'compact' == $group_data['type'] ? 40 : 80;
    124140                $data   = get_avatar_data( $person_data[1] . '@md5.gravatar.com', array( 'size' => $size ) );
    125141                $size  *= 2;
    … …  
    136152            break;
    137153    }
    138 }
     154    $previous_type = $group_data['type'];
     155    ?>
    139156
    140 ?>
     157        </div>
    141158    </div>
     159<?php endforeach; ?>
    142160</div>
    143161<?php

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

    r45287 r46617  
    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
    1434/*------------------------------------------------------------------------------
    15   1.0 - Global: About, Credits, Freedoms
     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
     588/*------------------------------------------------------------------------------
     589  x.2.0 - Legacy About Styles: Global
    16590------------------------------------------------------------------------------*/
    17591
    … …  
    99673}
    100674
    101 /* 1.1 - Typography */
     675/* x.2.1 - Typography */
    102676
    103677.about-wrap h1 {
    … …  
    160734}
    161735
    162 /* 1.2 - Structure */
     736/* x.2.2 - Structure */
    163737
    164738.about-wrap .has-1-columns,
    … …  
    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 {
    … …  
    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 {
    … …  
    331908}
    332909
    333 /* 2.2 - Structure */
     910/* x.3.2 - Structure */
    334911
    335912.about-wrap .headline-feature {
    … …  
    361938
    362939/*------------------------------------------------------------------------------
    363   3.0 - Credits & Freedoms Pages
     940  x.4.0 - Legacy About Styles: Credits & Freedoms Pages
    364941------------------------------------------------------------------------------*/
    365942
    … …  
    4721049
    4731050/*------------------------------------------------------------------------------
    474   4.0 - Media Queries
     1051  x.5.0 - Legacy About Styles: Media Queries
    4751052------------------------------------------------------------------------------*/
    4761053

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

    r46572 r46617  
    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">
    … …  
    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://wordpress.org/images/core/5.4/code-is-poetry-rc.svg" alt="<?php _e( 'Code is Poetry' ); ?>" />
    4236        </div>
    4337
    … …  
    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>
     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 />
     73
     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>
    7679        </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>
    7796
    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>
    99         </div>
    100 
    101         <div class="feature-section has-1-columns">
     97    <div class="about__section">
     98        <div class="column">
    10299            <p>
    103100            <?php

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

    r46572 r46617  
    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">
    … …  
    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://wordpress.org/images/core/5.4/code-is-poetry-rc.svg" alt="<?php _e( 'Code is Poetry' ); ?>" />
    3630        </div>
    3731
    … …  
    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
Note: See TracChangeset for help on using the changeset viewer.