Make WordPress Core

Ticket #46901: 46901-layout.diff

File 46901-layout.diff, 23.0 KB (added by ryelle, 6 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://cldup.com/nfQEOYZYFG.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://cldup.com/nmr4gyemWg.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://cldup.com/iD5A-zYiSk.svg" alt="">
    8281                                </div>
     82                        </div>
     83                        <div class="column is-vertically-aligned-center">
    8384                                <h3><?php _e( 'PHP Error Protection' ); ?></h3>
    84                                 <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>
     85                                <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>
    8687                </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
     
    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 */
     
    11599
    116100/* 1.1 - Typography */
    117101
    118 .about-wrap p {
    119         line-height: 1.5;
    120         font-size: 14px;
    121 }
    122 
    123 .about-wrap .feature-section p {
    124         max-width: 55em;
    125         margin-left: auto;
    126         margin-right: auto;
    127 }
    128 
    129102.about-wrap h1 {
    130103        margin: 0.2em 200px 0 0;
    131104        padding: 0;
     
    149122        line-height: 1.5;
    150123}
    151124
    152 .about-wrap .under-the-hood-header {
    153         margin: 40px 0 0;
    154         text-align: center;
    155 }
    156 
    157125.about-wrap h4 {
     126        font-size: 16px;
    158127        color: #23282d;
    159128}
    160129
     130.about-wrap p {
     131        line-height: 1.5;
     132        font-size: 16px;
     133}
     134
    161135.about-wrap code,
    162136.about-wrap ol li p {
    163137        font-size: 14px;
     
    186160
    187161/* 1.2 - Structure */
    188162
    189 .about-wrap [class$="-col"] {
    190         display: flex;
    191         justify-content: space-between;
    192         flex-wrap: wrap;
     163.about-wrap .has-1-columns,
     164.about-wrap .has-2-columns,
     165.about-wrap .has-3-columns,
     166.about-wrap .has-4-columns {
     167        display: -ms-grid;
     168        display: grid;
     169        max-width: 800px;
     170        margin-top: 40px;
     171        margin-left: auto;
     172        margin-right: auto;
    193173}
    194174
    195 .about-wrap .one-col {
    196         margin: 0 auto;
    197         max-width: 680px;
     175.about-wrap .column {
     176        margin-right: 20px;
     177        margin-left: 20px;
    198178}
    199179
    200 .about-wrap .one-col.is-wide {
     180.about-wrap .is-wide {
    201181        max-width: 760px;
    202182}
    203183
    204 .about-wrap .under-the-hood {
    205         margin: auto;
    206         max-width: 1020px;
     184.about-wrap .is-fullwidth {
     185        max-width: 100%;
    207186}
    208187
    209 .about-wrap .inline-svg img {
    210         max-width: 100%;
    211         width: 100%;
    212         height: auto;
     188.about-wrap .has-1-columns {
     189        display: block;
     190        max-width: 680px;
     191        margin: 0 auto 40px;
    213192}
    214193
    215 .about-wrap .inline-svg.full-width {
    216         margin-bottom: 120px;
     194.about-wrap .has-2-columns {
     195        -ms-grid-columns: 1fr 1fr;
     196        grid-template-columns: 1fr 1fr;
    217197}
    218198
    219 .about-wrap .under-the-hood .inline-svg {
    220         margin-left: 100px;
     199.about-wrap .has-2-columns .column:nth-of-type(2n+1) {
     200        -ms-grid-column: 1;
     201        grid-column-start: 1;
    221202}
    222203
    223 .about-wrap [class$="-col"] .col {
    224         flex: 1;
    225         align-self: flex-start;
     204.about-wrap .has-2-columns .column:nth-of-type(2n) {
     205        -ms-grid-column: 2;
     206        grid-column-start: 2;
    226207}
    227208
    228 .about-wrap [class$="-col"] .col + .col {
    229         margin-left: 20px;
     209.about-wrap .has-2-columns.is-wider-right {
     210        -ms-grid-columns: 1fr 2fr;
     211        grid-template-columns: 1fr 2fr;
    230212}
    231213
    232 .about-wrap [class$="-col"] .is-span-two {
    233         flex: 2;
     214.about-wrap .has-2-columns.is-wider-left {
     215        -ms-grid-columns: 2fr 1fr;
     216        grid-template-columns: 2fr 1fr;
    234217}
    235218
    236 .about-wrap .one-col img {
    237         margin: 1em 0 2em;
     219.about-wrap .has-3-columns {
     220        -ms-grid-columns: (1fr)[3];
     221        grid-template-columns: repeat(3, 1fr);
    238222}
    239223
    240 .about-wrap .one-col .alignright img,
    241 .about-wrap .one-col .alignleft img {
    242         margin-top: 0;
     224.about-wrap .has-3-columns .column:nth-of-type(3n+1) {
     225        -ms-grid-column: 1;
     226        grid-column-start: 1;
    243227}
    244228
    245 .about-wrap .two-col img {
    246         margin-bottom: 1.5em;
     229.about-wrap .has-3-columns .column:nth-of-type(3n+2) {
     230        -ms-grid-column: 2;
     231        grid-column-start: 2;
    247232}
    248233
    249 .about-wrap .feature-video .mejs-controls {
    250         display: none !important;
     234.about-wrap .has-3-columns .column:nth-of-type(3n) {
     235        -ms-grid-column: 3;
     236        grid-column-start: 3;
    251237}
    252238
    253 .about-wrap .feature-video .mejs-overlay-loading span {
    254         background: transparent; /* Hide loading.gif */
     239.about-wrap .has-4-columns {
     240        -ms-grid-columns: (1fr)[4];
     241        grid-template-columns: repeat(4, 1fr);
    255242}
    256243
    257 .about-wrap video {
    258         margin: 1.5em auto;
     244.about-wrap .has-4-columns .column:nth-of-type(4n+1) {
     245        -ms-grid-column: 1;
     246        grid-column-start: 1;
    259247}
    260248
    261 .about-wrap .inline-svg.alignright {
    262         margin-left: 80px;
     249.about-wrap .has-4-columns .column:nth-of-type(4n+2) {
     250        -ms-grid-column: 2;
     251        grid-column-start: 2;
    263252}
    264253
    265 .about-wrap .inline-svg.alignleft {
    266         margin-right: 80px;
     254.about-wrap .has-4-columns .column:nth-of-type(4n+3) {
     255        -ms-grid-column: 3;
     256        grid-column-start: 3;
    267257}
    268258
    269 .about-wrap .cta {
     259.about-wrap .has-4-columns .column:nth-of-type(4n) {
     260        -ms-grid-column: 4;
     261        grid-column-start: 4;
     262}
     263
     264.about-wrap .column :first-child {
     265        margin-top: 0;
     266}
     267
     268.about-wrap .aligncenter {
    270269        text-align: center;
    271270}
    272271
    273 .about-wrap .cta .button {
    274         margin: 0 auto 5px;
    275         font-weight: 600;
     272.about-wrap .alignleft {
     273        float: left;
     274        margin-right: 40px;
    276275}
    277276
    278 .about-wrap .feature-section .button {
    279         margin-top: 1.5em;
    280         font-weight: 600;
     277.about-wrap .alignright {
     278        float: right;
     279        margin-left: 40px;
    281280}
    282281
     282.about-wrap .is-vertically-aligned-top {
     283        align-self: start;
     284}
     285
     286.about-wrap .is-vertically-aligned-center {
     287        align-self: center;
     288}
     289
     290.about-wrap .is-vertically-aligned-bottom {
     291        align-self: end;
     292}
     293
    283294/* 1.3 - Point Releases */
    284295
    285296.about-wrap .point-releases {
     
    287298        border-bottom: 1px solid #ddd;
    288299}
    289300
     301.about-wrap .changelog {
     302        margin-bottom: 40px;
     303}
     304
    290305.about-wrap .changelog.point-releases h3 {
    291306        padding-top: 35px;
    292307}
     
    295310        padding-top: 7px;
    296311}
    297312
     313.about-wrap .changelog.feature-section .col {
     314        margin-top: 40px;
     315}
     316
    298317/*------------------------------------------------------------------------------
    299318  2.0 - About Page
    300319------------------------------------------------------------------------------*/
     
    301320
    302321/* 2.1 - Typography */
    303322
    304 .about-wrap .feature-section-header {
    305         margin: 50px 0 0;
    306 }
    307 
    308 .about-wrap .feature-section.two-col h3 {
    309         margin-top: 0;
    310 }
    311 
    312 .about-wrap .feature-section h4 {
    313         margin: 1.4em 0 0.6em 0;
    314         font-size: 1em;
    315 }
    316 
    317 .about-wrap .feature-section p {
    318         margin-top: 0.6em;
    319 }
    320 
    321323.about-wrap .lead-description {
    322324        font-size: 1.5em;
    323325        text-align: center;
    324326}
    325327
    326 .about-wrap .two-col-text {
    327         column-count: 2;
    328         column-gap: 40px;
     328.about-wrap .feature-section p {
     329        margin-top: 0.6em;
    329330}
    330331
    331 .about-wrap .two-col-text p:first-of-type {
    332         margin-top: 0;
    333 }
    334 
    335 .about-wrap .streamlined-updates p,
    336 .about-wrap .native-fonts p {
    337         margin-bottom: 3em;
    338 }
    339 
    340 .about-wrap .under-the-hood img + h3 {
    341         margin-top: 1.25em;
    342 }
    343 
    344332/* 2.2 - Structure */
    345333
    346334.about-wrap .headline-feature {
    347         margin-bottom: 40px;
     335        margin: 0 auto 40px;
     336        max-width: 680px;
    348337}
    349338
    350 .about-wrap .featured-image {
    351         text-align: center;
     339.about-wrap .headline-feature h2 {
     340        margin: 50px 0 0;
    352341}
    353342
    354 .about-wrap .feature-section {
    355         overflow: hidden;
     343.about-wrap .headline-feature img {
     344        max-width: 600px;
    356345}
    357346
    358 .about-wrap .feature-section.no-heading {
    359         padding-top: 35px;
    360 }
    361 
    362 .about-wrap .feature-section .media-container {
    363         overflow: hidden;
    364 }
    365 
    366 .about-wrap .embed-container {
    367         text-align: center;
    368 }
    369 
    370 .about-wrap .embed-container iframe {
    371         max-width: 100%;
    372 }
    373 
    374 .about-wrap .wp-embedded-content {
    375         max-width: 100%;
    376 }
    377 
    378 .about-wrap .feature-section .col {
    379         margin-top: 40px;
    380 }
    381 
    382 .about-wrap .changelog {
    383         margin-bottom: 40px;
    384 }
    385 
    386 .about-wrap .changelog.feature-section .col {
    387         margin-top: 40px;
    388 }
    389 
    390347/* Return to Dashboard Home link */
    391348
    392349.about-wrap .return-to-dashboard {
     
    489446        margin: 0.6em 0;
    490447}
    491448
    492 .freedoms-php .about-wrap .col .freedoms-image {
     449.freedoms-php .has-4-columns {
     450        margin-bottom: 40px;
     451}
     452
     453.freedoms-php .column .freedoms-image {
    493454        background-image: url('https://s.w.org/wp-content/themes/pub/wporg-main/images/freedoms-2x.png');
    494455        background-size: 100%;
    495456        padding-top: 100%;
    496457}
    497 .freedoms-php .about-wrap .col:nth-of-type(2) .freedoms-image {
     458
     459.freedoms-php .column:nth-of-type(2) .freedoms-image {
    498460        background-position: 0 34%;
    499461}
    500 .freedoms-php .about-wrap .col:nth-of-type(3) .freedoms-image {
     462
     463.freedoms-php .column:nth-of-type(3) .freedoms-image {
    501464        background-position: 0 66%;
    502465}
    503 .freedoms-php .about-wrap .col:nth-of-type(4) .freedoms-image {
     466
     467.freedoms-php .column:nth-of-type(4) .freedoms-image {
    504468        background-position: 0 100%;
    505469}
    506470
     
    509473------------------------------------------------------------------------------*/
    510474
    511475@media screen and (max-width: 782px) {
    512         .about-wrap .two-col-text {
    513                 column-count: 1;
     476        .about-wrap .has-3-columns,
     477        .about-wrap .has-4-columns {
     478                -ms-grid-columns: 1fr 1fr;
     479                grid-template-columns: 1fr 1fr;
    514480        }
    515481
    516         .about-wrap .one-col .alignright {
    517                 margin-left: 20px;
    518                 max-width: 150px;
     482        .about-wrap .has-3-columns .column:nth-of-type(3n+1),
     483        .about-wrap .has-4-columns .column:nth-of-type(4n+1) {
     484                -ms-grid-column: 1;
     485                grid-column-start: 1;
     486                -ms-grid-row: 1;
     487                grid-row-start: 1;
    519488        }
    520489
    521         .about-wrap .one-col .alignleft {
    522                 margin-right: 20px;
    523                 max-width: 150px;
     490        .about-wrap .has-3-columns .column:nth-of-type(3n+2),
     491        .about-wrap .has-4-columns .column:nth-of-type(4n+2) {
     492                -ms-grid-column: 2;
     493                grid-column-start: 2;
     494                -ms-grid-row: 1;
     495                grid-row-start: 1;
    524496        }
    525497
    526         .about-wrap .two-col .col,
    527         .about-wrap .three-col .col,
    528         .about-wrap .four-col .col {
    529                 min-width: 48% !important;
    530                 max-width: 48% !important;
    531                 margin-left: 0 !important;
     498        .about-wrap .has-3-columns .column:nth-of-type(3n),
     499        .about-wrap .has-4-columns .column:nth-of-type(4n+3) {
     500                -ms-grid-column: 1;
     501                grid-column-start: 1;
     502                -ms-grid-row: 2;
     503                grid-row-start: 2;
    532504        }
    533505
    534         .about-wrap .eight-col .col {
    535                 min-width: 24% !important;
     506        .about-wrap .has-4-columns .column:nth-of-type(4n) {
     507                -ms-grid-column: 2;
     508                grid-column-start: 2;
     509                -ms-grid-row: 2;
     510                grid-row-start: 2;
    536511        }
     512}
    537513
    538         .about-wrap .three-col img,
    539         .about-wrap .four-col img,
    540         .about-wrap .eight-col img {
     514@media screen and (max-width: 600px) {
     515        .about-wrap .has-2-columns,
     516        .about-wrap .has-3-columns,
     517        .about-wrap .has-4-columns {
    541518                display: block;
    542                 margin: 0 auto;
    543519        }
    544520
    545         .about-wrap figcaption {
    546                 position: relative;
    547                 margin-top: 10px;
    548                 margin-bottom: 15px;
    549                 padding: 0;
    550                 background: none;
    551                 color: #40464D;
    552                 text-shadow: none;
     521        .about-wrap :not(.is-wider-right):not(.is-wider-left) .column {
     522                margin-right: 0;
     523                margin-left: 0;
    553524        }
    554525
    555         .about-wrap .under-the-hood .inline-svg {
    556                 margin-left: 40px;
     526        .about-wrap .has-2-columns.is-wider-right,
     527        .about-wrap .has-2-columns.is-wider-left {
     528                display: -ms-grid;
     529                display: grid;
    557530        }
    558531}
    559532
     
    577550                margin-bottom: 1.5em;
    578551                width: 100%;
    579552        }
     553}
    580554
    581         .about-wrap .one-col .alignright,
    582         .about-wrap .one-col .alignleft {
    583                 max-width: 120px;
     555@media only screen and (max-width: 480px) {
     556        .about-wrap .has-2-columns.is-wider-right,
     557        .about-wrap .has-2-columns.is-wider-left {
     558                display: block;
    584559        }
    585560
    586         .about-wrap .feature-section .col {
    587                 margin-top: 1em;
     561        .about-wrap .column {
     562                margin-right: 0;
     563                margin-left: 0;
    588564        }
    589565
    590         .about-wrap .two-col .col,
    591         .about-wrap .three-col .col,
    592         .about-wrap .three-col .col {
    593                 min-width: 100% !important;
     566        .about-wrap .has-2-columns.is-wider-right img,
     567        .about-wrap .has-2-columns.is-wider-left img {
     568                max-width: 160px;
    594569        }
    595 
    596         .about-wrap .eight-col .col {
    597                 min-width: 48% !important;
    598         }
    599 
    600         .about-wrap .under-the-hood.four-col .col,
    601         .about-wrap .under-the-hood.three-col .col,
    602         .about-wrap .under-the-hood.two-col .col,
    603         .about-wrap .under-the-hood.one-col .col {
    604                 margin-bottom: 2em;
    605                 padding-bottom: 0;
    606         }
    607 
    608         .about-wrap .under-the-hood:nth-of-type(2n),
    609         .about-wrap .under-the-hood:nth-of-type(3n) {
    610                 margin-top: 0;
    611         }
    612 
    613         .about-wrap .under-the-hood img + h3 {
    614                 margin-top: 1.25em;
    615         }
    616 
    617         .about-wrap .under-the-hood .inline-svg {
    618                 display: none;
    619         }
    620 
    621         .about-wrap .inline-svg.full-width {
    622                 margin-bottom: 60px;
    623         }
    624570}
    625 
    626 @media only screen and (max-width: 320px) {
    627         .about-wrap .one-col .alignright,
    628         .about-wrap .one-col .alignleft {
    629                 float: none;
    630                 margin: 0 auto;
    631         }
    632         .about-wrap .one-col .alignright img,
    633         .about-wrap .one-col .alignleft img {
    634                 margin: 0 0 1em;
    635         }
    636 }
  • 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