WordPress.org
Get WordPress

Make WordPress Core

Ticket #46901: 46901-remaining.2.diff

File 46901-remaining.2.diff, 23.3 KB (added by SergeyBiryukov, 5 years ago)

  • src/wp-admin/about.php

     
    4040                        <a href="freedoms.php?privacy-notice" class="nav-tab"><?php _e( 'Privacy' ); ?></a>
    4141                </nav>
    4242
    43                 <h2 class="feature-section-header"><?php _e( 'Keeping Your Site Safe' ); ?></h2>
    44 
    45                 <div class="feature-section headline-feature one-col">
    46                         <div class="col">
    47                                 <p><?php _e( 'WordPress 5.2 gives you even more robust tools for identifying and fixing configuration issues and fatal errors. Whether you are a developer helping clients or you manage your site solo, these tools can help get you the right information when you need it.' ); ?></p>
    48                                 <div class="inline-svg">
    49                                         <img src="https://make.wordpress.org/core/files/2019/04/site-safe.png" alt="">
    50                                 </div>
     43                <div class="headline-feature">
     44                        <h2><?php _e( 'Keeping Your Site Safe' ); ?></h2>
     45                        <p class="lead-description"><?php _e( 'WordPress 5.2 gives you even more robust tools for identifying and fixing configuration issues and fatal errors. Whether you are a developer helping clients or you manage your site solo, these tools can help get you the right information when you need it.' ); ?></p>
     46                        <div class="inline-svg aligncenter">
     47                                <img src="https://s.w.org/images/core/5.2/about_maintain-wordpress.svg" alt="">
    5148                        </div>
    5249                </div>
    5350
    5451                <hr />
    5552
    56                 <div class="feature-section one-col is-wide wp-clearfix">
    57                         <div class="col">
     53                <div class="feature-section is-wide has-2-columns is-wider-left">
     54                        <div class="column is-vertically-aligned-center">
    5855                                <h3><?php _e( 'Site Health Check' ); ?></h3>
    59                                 <div class="inline-svg alignright">
    60                                         <img src="https://make.wordpress.org/core/files/2019/04/health-check.png" alt="">
    61                                 </div>
    6256                                <p>
    6357                                        <?php
    6458                                        printf(
    … …  
    7165                                        ?>
    7266                                </p>
    7367                        </div>
     68                        <div class="column">
     69                                <div class="inline-svg aligncenter">
     70                                        <img src="https://s.w.org/images/core/5.2/about_site-health.svg" alt="">
     71                                </div>
     72                        </div>
    7473                </div>
    7574
    7675                <hr />
    7776
    78                 <div class="feature-section one-col is-wide wp-clearfix">
    79                         <div class="col">
    80                                 <div class="inline-svg alignleft">
    81                                         <img src="https://make.wordpress.org/core/files/2019/04/error-protection.png" alt="">
     77                <div class="feature-section is-wide has-2-columns is-wider-right">
     78                        <div class="column">
     79                                <div class="inline-svg aligncenter">
     80                                        <img src="https://s.w.org/images/core/5.2/about_error-protection.svg" alt="">
    8281                                </div>
     82                        </div>
     83                        <div class="column is-vertically-aligned-center">
    8384                                <h3><?php _e( 'PHP Error Protection' ); ?></h3>
    8485                                <p><?php _e( 'This administrator-focused update will let you safely fix or manage fatal errors without requiring developer time. It features better handling of the so-called “white screen of death,” and a way to enter recovery mode,  which pauses error-causing plugins or themes.' ); ?></p>
    8586                        </div>
    … …  
    8788
    8889                <hr />
    8990
    90                 <h3 class="under-the-hood-header"><?php _e( 'Improvements for Everyone' ); ?></h3>
     91                <h3 class="aligncenter"><?php _e( 'Improvements for Everyone' ); ?></h3>
    9192
    92                 <div class="under-the-hood feature-section two-col">
    93                         <div class="col cta">
     93                <div class="has-2-columns">
     94                        <div class="column aligncenter">
    9495                                <h4><?php _e( 'Accessibility Updates' ); ?></h4>
    9596                                <p><?php _e( 'A number of changes work together to improve contextual awareness and keyboard navigation flow for those using screen readers and other assistive technologies.' ); ?></p>
    9697                        </div>
    97                         <div class="col cta">
     98                        <div class="column aligncenter">
    9899                                <h4><?php _e( 'New Dashboard Icons' ); ?></h4>
    99100                                <p><?php _e( 'Thirteen new icons include Instagram, a suite of icons for BuddyPress, and rotated Earth icons for global inclusion. Find them in the Dashboard and have some fun!' ); ?></p>
    100101                        </div>
    … …  
    102103
    103104                <hr />
    104105
    105                 <h3 class="under-the-hood-header"><?php _e( 'Developer Happiness' ); ?></h3>
     106                <h3 class="aligncenter"><?php _e( 'Developer Happiness' ); ?></h3>
    106107
    107                 <div class="under-the-hood feature-section two-col">
    108                         <div class="col">
     108                <div class="has-2-columns is-fullwidth">
     109                        <div class="column">
    109110                                <h4><a href="https://make.wordpress.org/core/2019/03/26/coding-standards-updates-for-php-5-6/"><?php _e( 'PHP Version Bump' ); ?></a></h4>
    110111                                <p><?php _e( 'The minimum supported PHP version is now 5.6.20. As of WordPress 5.2, themes and plugins can safely take advantage of namespaces, anonymous functions, and more!' ); ?></p>
    111112                        </div>
    112                         <div class="col">
     113                        <div class="column">
    113114                                <h4><a href="https://make.wordpress.org/core/2019/04/24/developer-focused-privacy-updates-in-5-2/"><?php _e( 'Privacy Updates' ); ?></a></h4>
    114115                                <p><?php _e( 'A new theme page template, a conditional function, and two CSS classes make designing and customizing the Privacy Policy page easier.' ); ?></p>
    115116                        </div>
    116117                </div>
    117                 <div class="under-the-hood feature-section two-col">
    118                         <div class="col">
     118                <div class="has-2-columns is-fullwidth">
     119                        <div class="column">
    119120                                <h4><a href="https://make.wordpress.org/core/2019/04/24/miscellaneous-developer-updates-in-5-2/"><?php _e( 'New Body Tag Hook' ); ?></a></h4>
    120121                                <p>
    121122                                        <?php
    122123                                        printf(
    123124                                                /* translators: 1: wp_body_open 2: <body> */
    124                                                 __( '5.2 introduces a <code>%1$s</code> hook, which lets themes support injecting code right at the beginning of the <code>%2$s</code> element.' ),
    125                                                 'wp_body_open',
    126                                                 '&lt;body&gt;'
     125                                                __( '5.2 introduces a %1$s hook, which lets themes support injecting code right at the beginning of the %2$s element.' ),
     126                                                '<code>wp_body_open</code>',
     127                                                '<code>&lt;body&gt;</code>'
    127128                                        );
    128129                                        ?>
    129130                                </p>
    130131                        </div>
    131                         <div class="col">
     132                        <div class="column">
    132133                                <h4><a href="https://make.wordpress.org/core/2019/03/25/building-javascript/"><?php _e( 'Building JavaScript' ); ?></a></h4>
    133134                                <p><?php _e( 'With the addition of webpack and Babel configurations in the @wordpress/scripts package, developers won&#8217;t have to worry about setting up complex build tools to write modern JavaScript.' ); ?></p>
    134135                        </div>

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

     
    88   2.0 About Page
    99    2.1 Typography
    1010    2.2 Structure
    11     2.3 Floating Header Layout
    1211   3.0 Credits & Freedoms Pages
    1312------------------------------------------------------------------------------*/
    1413
    … …  
    5150        vertical-align: middle;
    5251}
    5352
    54 .about-wrap figure {
    55         position: relative;
    56         margin: 0;
    57 }
    58 
    59 .about-wrap .feature-section figure img {
    60         margin-bottom: 0;
    61 }
    62 
    63 .about-wrap figcaption {
    64         position: absolute;
    65         bottom: 0;
     53.about-wrap .inline-svg img {
     54        max-width: 100%;
    6655        width: 100%;
    67         padding: 40px 10px 15px;
    68         overflow: auto;
    69         box-sizing: border-box;
    70         background: linear-gradient(0deg, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.3) 60%, transparent);
    71         font-weight: 600;
    72         text-shadow: 0 0 5px rgba(0, 0, 0, 0.75);
     56        height: auto;
    7357}
    7458
    75 .about-wrap .jetpack-video-wrapper {
    76         margin-bottom: 0;
     59.about-wrap video {
     60        margin: 1.5em auto;
    7761}
    7862
    7963/* WordPress Version Badge */
    … …  
    116100
    117101/* 1.1 - Typography */
    118102
    119 .about-wrap p {
    120         line-height: 1.5;
    121         font-size: 14px;
    122 }
    123 
    124 .about-wrap .feature-section p {
    125         max-width: 55em;
    126         margin-left: auto;
    127         margin-right: auto;
    128 }
    129 
    130103.about-wrap h1 {
    131104        margin: 0.2em 200px 0 0;
    132105        padding: 0;
    … …  
    150123        line-height: 1.5;
    151124}
    152125
    153 .about-wrap .under-the-hood-header {
    154         margin: 40px 0 0;
    155         text-align: center;
    156 }
    157 
    158126.about-wrap h4 {
     127        font-size: 16px;
    159128        color: #23282d;
    160129}
    161130
     131.about-wrap p {
     132        line-height: 1.5;
     133        font-size: 16px;
     134}
     135
    162136.about-wrap code,
    163137.about-wrap ol li p {
    164138        font-size: 14px;
    … …  
    187161
    188162/* 1.2 - Structure */
    189163
    190 .about-wrap [class$="-col"] {
    191         display: flex;
    192         justify-content: space-between;
    193         flex-wrap: wrap;
     164.about-wrap .has-1-columns,
     165.about-wrap .has-2-columns,
     166.about-wrap .has-3-columns,
     167.about-wrap .has-4-columns {
     168        display: -ms-grid;
     169        display: grid;
     170        max-width: 800px;
     171        margin-top: 40px;
     172        margin-left: auto;
     173        margin-right: auto;
    194174}
    195175
    196 .about-wrap .one-col {
    197         margin: 0 auto;
    198         max-width: 680px;
     176.about-wrap .column {
     177        margin-right: 20px;
     178        margin-left: 20px;
    199179}
    200180
    201 .about-wrap .one-col.is-wide {
     181.about-wrap .is-wide {
    202182        max-width: 760px;
    203183}
    204184
    205 .about-wrap .under-the-hood {
    206         margin: auto;
    207         max-width: 1020px;
     185.about-wrap .is-fullwidth {
     186        max-width: 100%;
    208187}
    209188
    210 .about-wrap .inline-svg img {
    211         max-width: 100%;
    212         width: 100%;
    213         height: auto;
     189.about-wrap .has-1-columns {
     190        display: block;
     191        max-width: 680px;
     192        margin: 0 auto 40px;
    214193}
    215194
    216 .about-wrap .inline-svg.full-width {
    217         margin-bottom: 120px;
     195.about-wrap .has-2-columns {
     196        -ms-grid-columns: 1fr 1fr;
     197        grid-template-columns: 1fr 1fr;
    218198}
    219199
    220 .about-wrap .under-the-hood .inline-svg {
    221         margin-left: 100px;
     200.about-wrap .has-2-columns .column:nth-of-type(2n+1) {
     201        -ms-grid-column: 1;
     202        grid-column-start: 1;
    222203}
    223204
    224 .about-wrap [class$="-col"] .col {
    225         flex: 1;
    226         align-self: flex-start;
     205.about-wrap .has-2-columns .column:nth-of-type(2n) {
     206        -ms-grid-column: 2;
     207        grid-column-start: 2;
    227208}
    228209
    229 .about-wrap [class$="-col"] .col + .col {
    230         margin-left: 20px;
     210.about-wrap .has-2-columns.is-wider-right {
     211        -ms-grid-columns: 1fr 2fr;
     212        grid-template-columns: 1fr 2fr;
    231213}
    232214
    233 .about-wrap [class$="-col"] .is-span-two {
    234         flex: 2;
     215.about-wrap .has-2-columns.is-wider-left {
     216        -ms-grid-columns: 2fr 1fr;
     217        grid-template-columns: 2fr 1fr;
    235218}
    236219
    237 .about-wrap .one-col img {
    238         margin: 1em 0 2em;
     220.about-wrap .has-3-columns {
     221        -ms-grid-columns: (1fr)[3];
     222        grid-template-columns: repeat(3, 1fr);
    239223}
    240224
    241 .about-wrap .one-col .alignright img,
    242 .about-wrap .one-col .alignleft img {
    243         margin-top: 0;
     225.about-wrap .has-3-columns .column:nth-of-type(3n+1) {
     226        -ms-grid-column: 1;
     227        grid-column-start: 1;
    244228}
    245229
    246 .about-wrap .two-col img {
    247         margin-bottom: 1.5em;
     230.about-wrap .has-3-columns .column:nth-of-type(3n+2) {
     231        -ms-grid-column: 2;
     232        grid-column-start: 2;
    248233}
    249234
    250 .about-wrap .feature-video .mejs-controls {
    251         display: none !important;
     235.about-wrap .has-3-columns .column:nth-of-type(3n) {
     236        -ms-grid-column: 3;
     237        grid-column-start: 3;
    252238}
    253239
    254 .about-wrap .feature-video .mejs-overlay-loading span {
    255         background: transparent; /* Hide loading.gif */
     240.about-wrap .has-4-columns {
     241        -ms-grid-columns: (1fr)[4];
     242        grid-template-columns: repeat(4, 1fr);
    256243}
    257244
    258 .about-wrap video {
    259         margin: 1.5em auto;
     245.about-wrap .has-4-columns .column:nth-of-type(4n+1) {
     246        -ms-grid-column: 1;
     247        grid-column-start: 1;
    260248}
    261249
    262 .about-wrap .inline-svg.alignright {
    263         margin-left: 80px;
     250.about-wrap .has-4-columns .column:nth-of-type(4n+2) {
     251        -ms-grid-column: 2;
     252        grid-column-start: 2;
    264253}
    265254
    266 .about-wrap .inline-svg.alignleft {
    267         margin-right: 80px;
     255.about-wrap .has-4-columns .column:nth-of-type(4n+3) {
     256        -ms-grid-column: 3;
     257        grid-column-start: 3;
    268258}
    269259
    270 .about-wrap .cta {
     260.about-wrap .has-4-columns .column:nth-of-type(4n) {
     261        -ms-grid-column: 4;
     262        grid-column-start: 4;
     263}
     264
     265.about-wrap .column :first-child {
     266        margin-top: 0;
     267}
     268
     269.about-wrap .aligncenter {
    271270        text-align: center;
    272271}
    273272
    274 .about-wrap .cta .button {
    275         margin: 0 auto 5px;
    276         font-weight: 600;
     273.about-wrap .alignleft {
     274        float: left;
     275        margin-right: 40px;
    277276}
    278277
    279 .about-wrap .feature-section .button {
    280         margin-top: 1.5em;
    281         font-weight: 600;
     278.about-wrap .alignright {
     279        float: right;
     280        margin-left: 40px;
    282281}
    283282
     283.about-wrap .is-vertically-aligned-top {
     284        align-self: start;
     285}
     286
     287.about-wrap .is-vertically-aligned-center {
     288        align-self: center;
     289}
     290
     291.about-wrap .is-vertically-aligned-bottom {
     292        align-self: end;
     293}
     294
    284295/* 1.3 - Point Releases */
    285296
    286297.about-wrap .point-releases {
    … …  
    288299        border-bottom: 1px solid #ddd;
    289300}
    290301
     302.about-wrap .changelog {
     303        margin-bottom: 40px;
     304}
     305
    291306.about-wrap .changelog.point-releases h3 {
    292307        padding-top: 35px;
    293308}
    … …  
    296311        padding-top: 7px;
    297312}
    298313
     314.about-wrap .changelog.feature-section .col {
     315        margin-top: 40px;
     316}
     317
    299318/*------------------------------------------------------------------------------
    300319  2.0 - About Page
    301320------------------------------------------------------------------------------*/
    … …  
    302321
    303322/* 2.1 - Typography */
    304323
    305 .about-wrap .feature-section-header {
    306         margin: 50px 0 0;
    307 }
    308 
    309 .about-wrap .feature-section.two-col h3 {
    310         margin-top: 0;
    311 }
    312 
    313 .about-wrap .feature-section h4 {
    314         margin: 1.4em 0 0.6em 0;
    315         font-size: 1em;
    316 }
    317 
    318 .about-wrap .feature-section p {
    319         margin-top: 0.6em;
    320 }
    321 
    322324.about-wrap .lead-description {
    323325        font-size: 1.5em;
    324326        text-align: center;
    325327}
    326328
    327 .about-wrap .two-col-text {
    328         column-count: 2;
    329         column-gap: 40px;
     329.about-wrap .feature-section p {
     330        margin-top: 0.6em;
    330331}
    331332
    332 .about-wrap .two-col-text p:first-of-type {
    333         margin-top: 0;
    334 }
    335 
    336 .about-wrap .streamlined-updates p,
    337 .about-wrap .native-fonts p {
    338         margin-bottom: 3em;
    339 }
    340 
    341 .about-wrap .under-the-hood img + h3 {
    342         margin-top: 1.25em;
    343 }
    344 
    345333/* 2.2 - Structure */
    346334
    347335.about-wrap .headline-feature {
    348         margin-bottom: 40px;
     336        margin: 0 auto 40px;
     337        max-width: 680px;
    349338}
    350339
    351 .about-wrap .featured-image {
    352         text-align: center;
     340.about-wrap .headline-feature h2 {
     341        margin: 50px 0 0;
    353342}
    354343
    355 .about-wrap .feature-section {
    356         overflow: hidden;
     344.about-wrap .headline-feature img {
     345        max-width: 600px;
    357346}
    358347
    359 .about-wrap .feature-section.no-heading {
    360         padding-top: 35px;
    361 }
    362 
    363 .about-wrap .feature-section .media-container {
    364         overflow: hidden;
    365 }
    366 
    367 .about-wrap .embed-container {
    368         text-align: center;
    369 }
    370 
    371 .about-wrap .embed-container iframe {
    372         max-width: 100%;
    373 }
    374 
    375 .about-wrap .wp-embedded-content {
    376         max-width: 100%;
    377 }
    378 
    379 .about-wrap .feature-section .col {
    380         margin-top: 40px;
    381 }
    382 
    383 .about-wrap .changelog {
    384         margin-bottom: 40px;
    385 }
    386 
    387 .about-wrap .changelog.feature-section .col {
    388         margin-top: 40px;
    389 }
    390 
    391348/* Return to Dashboard Home link */
    392349
    393350.about-wrap .return-to-dashboard {
    … …  
    490447        margin: 0.6em 0;
    491448}
    492449
    493 .freedoms-php .about-wrap .col .freedoms-image {
     450.freedoms-php .has-4-columns {
     451        margin-bottom: 40px;
     452}
     453
     454.freedoms-php .column .freedoms-image {
    494455        background-image: url('https://s.w.org/wp-content/themes/pub/wporg-main/images/freedoms-2x.png');
    495456        background-size: 100%;
    496457        padding-top: 100%;
    497458}
    498 .freedoms-php .about-wrap .col:nth-of-type(2) .freedoms-image {
     459
     460.freedoms-php .column:nth-of-type(2) .freedoms-image {
    499461        background-position: 0 34%;
    500462}
    501 .freedoms-php .about-wrap .col:nth-of-type(3) .freedoms-image {
     463
     464.freedoms-php .column:nth-of-type(3) .freedoms-image {
    502465        background-position: 0 66%;
    503466}
    504 .freedoms-php .about-wrap .col:nth-of-type(4) .freedoms-image {
     467
     468.freedoms-php .column:nth-of-type(4) .freedoms-image {
    505469        background-position: 0 100%;
    506470}
    507471
    … …  
    510474------------------------------------------------------------------------------*/
    511475
    512476@media screen and (max-width: 782px) {
    513         .about-wrap .two-col-text {
    514                 column-count: 1;
     477        .about-wrap .has-3-columns,
     478        .about-wrap .has-4-columns {
     479                -ms-grid-columns: 1fr 1fr;
     480                grid-template-columns: 1fr 1fr;
    515481        }
    516482
    517         .about-wrap .one-col .alignright {
    518                 margin-left: 20px;
    519                 max-width: 150px;
     483        .about-wrap .has-3-columns .column:nth-of-type(3n+1),
     484        .about-wrap .has-4-columns .column:nth-of-type(4n+1) {
     485                -ms-grid-column: 1;
     486                grid-column-start: 1;
     487                -ms-grid-row: 1;
     488                grid-row-start: 1;
    520489        }
    521490
    522         .about-wrap .one-col .alignleft {
    523                 margin-right: 20px;
    524                 max-width: 150px;
     491        .about-wrap .has-3-columns .column:nth-of-type(3n+2),
     492        .about-wrap .has-4-columns .column:nth-of-type(4n+2) {
     493                -ms-grid-column: 2;
     494                grid-column-start: 2;
     495                -ms-grid-row: 1;
     496                grid-row-start: 1;
    525497        }
    526498
    527         .about-wrap .two-col .col,
    528         .about-wrap .three-col .col,
    529         .about-wrap .four-col .col {
    530                 min-width: 48% !important;
    531                 max-width: 48% !important;
    532                 margin-left: 0 !important;
     499        .about-wrap .has-3-columns .column:nth-of-type(3n),
     500        .about-wrap .has-4-columns .column:nth-of-type(4n+3) {
     501                -ms-grid-column: 1;
     502                grid-column-start: 1;
     503                -ms-grid-row: 2;
     504                grid-row-start: 2;
    533505        }
    534506
    535         .about-wrap .eight-col .col {
    536                 min-width: 24% !important;
     507        .about-wrap .has-4-columns .column:nth-of-type(4n) {
     508                -ms-grid-column: 2;
     509                grid-column-start: 2;
     510                -ms-grid-row: 2;
     511                grid-row-start: 2;
    537512        }
     513}
    538514
    539         .about-wrap .three-col img,
    540         .about-wrap .four-col img,
    541         .about-wrap .eight-col img {
     515@media screen and (max-width: 600px) {
     516        .about-wrap .has-2-columns,
     517        .about-wrap .has-3-columns,
     518        .about-wrap .has-4-columns {
    542519                display: block;
    543                 margin: 0 auto;
    544520        }
    545521
    546         .about-wrap figcaption {
    547                 position: relative;
    548                 margin-top: 10px;
    549                 margin-bottom: 15px;
    550                 padding: 0;
    551                 background: none;
    552                 color: #40464D;
    553                 text-shadow: none;
     522        .about-wrap :not(.is-wider-right):not(.is-wider-left) .column {
     523                margin-right: 0;
     524                margin-left: 0;
    554525        }
    555526
    556         .about-wrap .under-the-hood .inline-svg {
    557                 margin-left: 40px;
     527        .about-wrap .has-2-columns.is-wider-right,
     528        .about-wrap .has-2-columns.is-wider-left {
     529                display: -ms-grid;
     530                display: grid;
    558531        }
    559532}
    560533
    … …  
    578551                margin-bottom: 1.5em;
    579552                width: 100%;
    580553        }
     554}
    581555
    582         .about-wrap .one-col .alignright,
    583         .about-wrap .one-col .alignleft {
    584                 max-width: 120px;
     556@media only screen and (max-width: 480px) {
     557        .about-wrap .has-2-columns.is-wider-right,
     558        .about-wrap .has-2-columns.is-wider-left {
     559                display: block;
    585560        }
    586561
    587         .about-wrap .feature-section .col {
    588                 margin-top: 1em;
     562        .about-wrap .column {
     563                margin-right: 0;
     564                margin-left: 0;
    589565        }
    590566
    591         .about-wrap .two-col .col,
    592         .about-wrap .three-col .col,
    593         .about-wrap .three-col .col {
    594                 min-width: 100% !important;
     567        .about-wrap .has-2-columns.is-wider-right img,
     568        .about-wrap .has-2-columns.is-wider-left img {
     569                max-width: 160px;
    595570        }
    596 
    597         .about-wrap .eight-col .col {
    598                 min-width: 48% !important;
    599         }
    600 
    601         .about-wrap .under-the-hood.four-col .col,
    602         .about-wrap .under-the-hood.three-col .col,
    603         .about-wrap .under-the-hood.two-col .col,
    604         .about-wrap .under-the-hood.one-col .col {
    605                 margin-bottom: 2em;
    606                 padding-bottom: 0;
    607         }
    608 
    609         .about-wrap .under-the-hood:nth-of-type(2n),
    610         .about-wrap .under-the-hood:nth-of-type(3n) {
    611                 margin-top: 0;
    612         }
    613 
    614         .about-wrap .under-the-hood img + h3 {
    615                 margin-top: 1.25em;
    616         }
    617 
    618         .about-wrap .under-the-hood .inline-svg {
    619                 display: none;
    620         }
    621 
    622         .about-wrap .inline-svg.full-width {
    623                 margin-bottom: 60px;
    624         }
    625571}
    626 
    627 @media only screen and (max-width: 320px) {
    628         .about-wrap .one-col .alignright,
    629         .about-wrap .one-col .alignleft {
    630                 float: none;
    631                 margin: 0 auto;
    632         }
    633         .about-wrap .one-col .alignright img,
    634         .about-wrap .one-col .alignleft img {
    635                 margin: 0 0 1em;
    636         }
    637 }

  • src/wp-admin/freedoms.php

     
    5353
    5454<?php else : ?>
    5555<div class="about-wrap-content">
    56         <div class="feature-section one-col">
    57                 <div class="col">
    58                         <h2><?php _e( 'Freedoms' ); ?></h2>
    59                         <p class="about-description"><?php printf( __( '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.' ), 'https://wordpress.org/about/license/' ); ?></p>
    60                 </div>
     56        <div class="feature-section has-1-columns">
     57                <h2><?php _e( 'Freedoms' ); ?></h2>
     58                <p class="about-description"><?php printf( __( '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.' ), 'https://wordpress.org/about/license/' ); ?></p>
    6159        </div>
    6260
    63         <div class="feature-section four-col">
    64                 <div class="col">
     61        <div class="feature-section has-4-columns is-fullwidth">
     62                <div class="column">
    6563                        <div class="freedoms-image"></div>
    6664                        <h3><?php _e( 'The 1st Freedom' ); ?></h3>
    6765                        <p><?php _e( 'To run the program for any purpose.' ); ?></p>
    6866                </div>
    69                 <div class="col">
     67                <div class="column">
    7068                        <div class="freedoms-image"></div>
    7169                        <h3><?php _e( 'The 2nd Freedom' ); ?></h3>
    7270                        <p><?php _e( 'To study how the program works and change it to make it do what you wish.' ); ?></p>
    7371                </div>
    74                 <div class="col">
     72                <div class="column">
    7573                        <div class="freedoms-image"></div>
    7674                        <h3><?php _e( 'The 3rd Freedom' ); ?></h3>
    7775                        <p><?php _e( 'To redistribute.' ); ?></p>
    7876                </div>
    79                 <div class="col">
     77                <div class="column">
    8078                        <div class="freedoms-image"></div>
    8179                        <h3><?php _e( 'The 4th Freedom' ); ?></h3>
    8280                        <p><?php _e( 'To distribute copies of your modified versions to others.' ); ?></p>
    … …  
    8381                </div>
    8482        </div>
    8583
    86         <div class="feature-section one-col">
    87                 <div class="col">
    88                         <p><?php printf( __( 'WordPress grows when people like you tell their friends about it, and the thousands of businesses and services that are built on and around WordPress share that fact with their users. We&#8217;re flattered every time someone spreads the good word, just make sure to <a href="%s">check out our trademark guidelines</a> first.' ), 'https://wordpressfoundation.org/trademark-policy/' ); ?></p>
     84        <div class="feature-section has-1-columns">
     85                <p><?php printf( __( 'WordPress grows when people like you tell their friends about it, and the thousands of businesses and services that are built on and around WordPress share that fact with their users. We&#8217;re flattered every time someone spreads the good word, just make sure to <a href="%s">check out our trademark guidelines</a> first.' ), 'https://wordpressfoundation.org/trademark-policy/' ); ?></p>
    8986
    90                         <p>
    91                         <?php
    92                                 $plugins_url = current_user_can( 'activate_plugins' ) ? admin_url( 'plugins.php' ) : __( 'https://wordpress.org/plugins/' );
    93                                 $themes_url  = current_user_can( 'switch_themes' ) ? admin_url( 'themes.php' ) : __( 'https://wordpress.org/themes/' );
     87                <p>
     88                <?php
     89                        $plugins_url = current_user_can( 'activate_plugins' ) ? admin_url( 'plugins.php' ) : __( 'https://wordpress.org/plugins/' );
     90                        $themes_url  = current_user_can( 'switch_themes' ) ? admin_url( 'themes.php' ) : __( 'https://wordpress.org/themes/' );
    9491
    95                                 printf( __( 'Every plugin and theme in WordPress.org&#8217;s directory is 100%% GPL or a similarly free and compatible license, so you can feel safe finding <a href="%1$s">plugins</a> and <a href="%2$s">themes</a> there. If you get a plugin or theme from another source, make sure to <a href="%3$s">ask them if it&#8217;s GPL</a> first. If they don&#8217;t respect the WordPress license, we don&#8217;t recommend them.' ), $plugins_url, $themes_url, 'https://wordpress.org/about/license/' );
    96                         ?>
    97                         </p>
     92                        printf( __( 'Every plugin and theme in WordPress.org&#8217;s directory is 100%% GPL or a similarly free and compatible license, so you can feel safe finding <a href="%1$s">plugins</a> and <a href="%2$s">themes</a> there. If you get a plugin or theme from another source, make sure to <a href="%3$s">ask them if it&#8217;s GPL</a> first. If they don&#8217;t respect the WordPress license, we don&#8217;t recommend them.' ), $plugins_url, $themes_url, 'https://wordpress.org/about/license/' );
     93                ?>
     94                </p>
    9895
    99                         <p><?php _e( 'Don&#8217;t you wish all software came with these freedoms? So do we! For more information, check out the <a href="https://www.fsf.org/">Free Software Foundation</a>.' ); ?></p>
    100                 </div>
     96                <p><?php _e( 'Don&#8217;t you wish all software came with these freedoms? So do we! For more information, check out the <a href="https://www.fsf.org/">Free Software Foundation</a>.' ); ?></p>
    10197        </div>
    10298</div>
    10399