WordPress.org
Get WordPress

Make WordPress Core

Changeset 45278


Ignore:
Timestamp:
05/02/2019 03:43:10 PM (6 years ago)
Author:
desrosj
Message:

Help/About: Polish the About page for 5.2.

  • The About page now uses a CSS grid to layout its design, making the page’s structure more obvious and hopefully easier for contributors in the future.
  • Removes some code that is no longer used (such as videos, mejs elements, etc.).
  • Update images.
  • Unnecessary HTML is removed from a string on the page. This was a regression.
  • Only users with the correct capability should be instructed to check their site status.
  • Fixes the placement of commas.

Reviewed by melchoyce, afercia, jeremyfelt, and desrosj.

Props ryelle, melchoyce, cathibosco1, man4toman, SergeyBiryukov, afercia, ramiy, kjellr, tellyworth, earnjam, andreamiddleton, marybaum.
See #46901.

Location:
trunk/src/wp-admin
Files:
3 edited

Legend:

Unmodified
Added
Removed

  • trunk/src/wp-admin/about.php

    r45274 r45278  
    4141        </nav>
    4242
    43         <h2 class="feature-section-header"><?php _e( 'Keeping Your Site Safe' ); ?></h2>
     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://make.wordpress.org/core/files/2019/05/about_maintain-wordpress.png" alt="">
     48            </div>
     49        </div>
    4450
    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="">
     51        <hr />
     52
     53        <div class="feature-section is-wide has-2-columns is-wider-left">
     54            <div class="column is-vertically-aligned-center">
     55                <h3><?php _e( 'Site Health Check' ); ?></h3>
     56                <p>
     57                    <?php
     58                    printf(
     59                        /* translators: 1: link to the WordPress 5.1 release post */
     60                        __( 'Building on <a href="%1$s">the Site Health features introduced in 5.1</a>, this release adds two new pages to help debug common configuration issues. It also adds space where developers can include debugging information for site maintainers.' ),
     61                        __( 'https://wordpress.org/news/2019/02/betty/' )
     62                    );
     63
     64                    if ( current_user_can( 'install_plugins' ) ) {
     65                        printf(
     66                            /* translators: 1: link to /wp-admin/site-health.php 2: link to /wp-admin/site-health.php?tab=debug */
     67                            __( ' <a href="%1$s">Check your site status</a>, and <a href="%2$s">learn how to debug issues</a>.' ),
     68                            admin_url( 'site-health.php' ),
     69                            admin_url( 'site-health.php?tab=debug' )
     70                        );
     71                    }
     72                    ?>
     73                </p>
     74            </div>
     75            <div class="column">
     76                <div class="inline-svg aligncenter">
     77                    <img src="https://s.w.org/images/core/5.2/about_site-health.svg" alt="">
    5078                </div>
    5179            </div>
    … …  
    5482        <hr />
    5583
    56         <div class="feature-section one-col is-wide wp-clearfix">
    57             <div class="col">
    58                 <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="">
     84        <div class="feature-section is-wide has-2-columns is-wider-right">
     85            <div class="column">
     86                <div class="inline-svg aligncenter">
     87                    <img src="https://s.w.org/images/core/5.2/about_error-protection.svg" alt="">
    6188                </div>
    62                 <p>
    63                     <?php
    64                     printf(
    65                         /* translators: 1: link to the WordPress 5.1 release post 2: link to /wp-admin/site-health.php 3: link to /wp-admin/site-health.php?tab=debug */
    66                         __( 'Building on <a href="%1$s">the Site Health features introduced in 5.1</a>, this release adds two new pages to help debug common configuration issues. It also adds space where developers can include debugging information for site maintainers. <a href="%2$s">Check your site status</a>, and <a href="%3$s">learn how to debug issues</a>.' ),
    67                         __( 'https://wordpress.org/news/2019/02/betty/' ),
    68                         admin_url( 'site-health.php' ),
    69                         admin_url( 'site-health.php?tab=debug' )
    70                     );
    71                     ?>
    72                 </p>
    7389            </div>
    74         </div>
    75 
    76         <hr />
    77 
    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="">
    82                 </div>
     90            <div class="column is-vertically-aligned-center">
    8391                <h3><?php _e( 'PHP Error Protection' ); ?></h3>
    8492                <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>
    … …  
    8896        <hr />
    8997
    90         <h3 class="under-the-hood-header"><?php _e( 'Improvements for Everyone' ); ?></h3>
     98        <h3 class="aligncenter"><?php _e( 'Improvements for Everyone' ); ?></h3>
    9199
    92         <div class="under-the-hood feature-section two-col">
    93             <div class="col cta">
     100        <div class="has-2-columns">
     101            <div class="column aligncenter">
    94102                <h4><?php _e( 'Accessibility Updates' ); ?></h4>
    95103                <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>
    96104            </div>
    97             <div class="col cta">
     105            <div class="column aligncenter">
    98106                <h4><?php _e( 'New Dashboard Icons' ); ?></h4>
    99107                <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>
    … …  
    103111        <hr />
    104112
    105         <h3 class="under-the-hood-header"><?php _e( 'Developer Happiness' ); ?></h3>
     113        <h3 class="aligncenter"><?php _e( 'Developer Happiness' ); ?></h3>
    106114
    107         <div class="under-the-hood feature-section two-col">
    108             <div class="col">
     115        <div class="has-2-columns is-fullwidth">
     116            <div class="column">
    109117                <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>
    110118                <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>
    111119            </div>
    112             <div class="col">
     120            <div class="column">
    113121                <h4><a href="https://make.wordpress.org/core/2019/04/24/developer-focused-privacy-updates-in-5-2/"><?php _e( 'Privacy Updates' ); ?></a></h4>
    114122                <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>
    115123            </div>
    116124        </div>
    117         <div class="under-the-hood feature-section two-col">
    118             <div class="col">
     125        <div class="has-2-columns is-fullwidth">
     126            <div class="column">
    119127                <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>
    120128                <p>
    … …  
    122130                    printf(
    123131                        /* 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;'
     132                        __( '5.2 introduces a %1$s hook, which lets themes support injecting code right at the beginning of the %2$s element.' ),
     133                        '<code>wp_body_open</code>',
     134                        '<code>&lt;body&gt;</code>'
    127135                    );
    128136                    ?>
    129137                </p>
    130138            </div>
    131             <div class="col">
     139            <div class="column">
    132140                <h4><a href="https://make.wordpress.org/core/2019/03/25/building-javascript/"><?php _e( 'Building JavaScript' ); ?></a></h4>
    133141                <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>

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

    r45276 r45278  
    99    2.1 Typography
    1010    2.2 Structure
    11     2.3 Floating Header Layout
    1211   3.0 Credits & Freedoms Pages
    1312------------------------------------------------------------------------------*/
    … …  
    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);
    73 }
    74 
    75 .about-wrap .jetpack-video-wrapper {
    76     margin-bottom: 0;
     56    height: auto;
     57}
     58
     59.about-wrap video {
     60    margin: 1.5em auto;
    7761}
    7862
    … …  
    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;
    … …  
    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;
     129}
     130
     131.about-wrap p {
     132    line-height: 1.5;
     133    font-size: 16px;
    160134}
    161135
    … …  
    188162/* 1.2 - Structure */
    189163
    190 .about-wrap [class$="-col"] {
    191     display: flex;
    192     justify-content: space-between;
    193     flex-wrap: wrap;
    194 }
    195 
    196 .about-wrap .one-col {
    197     margin: 0 auto;
     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;
     174}
     175
     176.about-wrap .column {
     177    margin-right: 20px;
     178    margin-left: 20px;
     179}
     180
     181.about-wrap .is-wide {
     182    max-width: 760px;
     183}
     184
     185.about-wrap .is-fullwidth {
     186    max-width: 100%;
     187}
     188
     189.about-wrap .has-1-columns {
     190    display: block;
    198191    max-width: 680px;
    199 }
    200 
    201 .about-wrap .one-col.is-wide {
    202     max-width: 760px;
    203 }
    204 
    205 .about-wrap .under-the-hood {
    206     margin: auto;
    207     max-width: 1020px;
    208 }
    209 
    210 .about-wrap .inline-svg img {
    211     max-width: 100%;
    212     width: 100%;
    213     height: auto;
    214 }
    215 
    216 .about-wrap .inline-svg.full-width {
    217     margin-bottom: 120px;
    218 }
    219 
    220 .about-wrap .under-the-hood .inline-svg {
    221     margin-left: 100px;
    222 }
    223 
    224 .about-wrap [class$="-col"] .col {
    225     flex: 1;
    226     align-self: flex-start;
    227 }
    228 
    229 .about-wrap [class$="-col"] .col + .col {
    230     margin-left: 20px;
    231 }
    232 
    233 .about-wrap [class$="-col"] .is-span-two {
    234     flex: 2;
    235 }
    236 
    237 .about-wrap .one-col img {
    238     margin: 1em 0 2em;
    239 }
    240 
    241 .about-wrap .one-col .alignright img,
    242 .about-wrap .one-col .alignleft img {
     192    margin: 0 auto 40px;
     193}
     194
     195.about-wrap .has-2-columns {
     196    -ms-grid-columns: 1fr 1fr;
     197    grid-template-columns: 1fr 1fr;
     198}
     199
     200.about-wrap .has-2-columns .column:nth-of-type(2n+1) {
     201    -ms-grid-column: 1;
     202    grid-column-start: 1;
     203}
     204
     205.about-wrap .has-2-columns .column:nth-of-type(2n) {
     206    -ms-grid-column: 2;
     207    grid-column-start: 2;
     208}
     209
     210.about-wrap .has-2-columns.is-wider-right {
     211    -ms-grid-columns: 1fr 2fr;
     212    grid-template-columns: 1fr 2fr;
     213}
     214
     215.about-wrap .has-2-columns.is-wider-left {
     216    -ms-grid-columns: 2fr 1fr;
     217    grid-template-columns: 2fr 1fr;
     218}
     219
     220.about-wrap .has-3-columns {
     221    -ms-grid-columns: (1fr)[3];
     222    grid-template-columns: repeat(3, 1fr);
     223}
     224
     225.about-wrap .has-3-columns .column:nth-of-type(3n+1) {
     226    -ms-grid-column: 1;
     227    grid-column-start: 1;
     228}
     229
     230.about-wrap .has-3-columns .column:nth-of-type(3n+2) {
     231    -ms-grid-column: 2;
     232    grid-column-start: 2;
     233}
     234
     235.about-wrap .has-3-columns .column:nth-of-type(3n) {
     236    -ms-grid-column: 3;
     237    grid-column-start: 3;
     238}
     239
     240.about-wrap .has-4-columns {
     241    -ms-grid-columns: (1fr)[4];
     242    grid-template-columns: repeat(4, 1fr);
     243}
     244
     245.about-wrap .has-4-columns .column:nth-of-type(4n+1) {
     246    -ms-grid-column: 1;
     247    grid-column-start: 1;
     248}
     249
     250.about-wrap .has-4-columns .column:nth-of-type(4n+2) {
     251    -ms-grid-column: 2;
     252    grid-column-start: 2;
     253}
     254
     255.about-wrap .has-4-columns .column:nth-of-type(4n+3) {
     256    -ms-grid-column: 3;
     257    grid-column-start: 3;
     258}
     259
     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 {
    243266    margin-top: 0;
    244267}
    245268
    246 .about-wrap .two-col img {
    247     margin-bottom: 1.5em;
    248 }
    249 
    250 .about-wrap .feature-video .mejs-controls {
    251     display: none !important;
    252 }
    253 
    254 .about-wrap .feature-video .mejs-overlay-loading span {
    255     background: transparent; /* Hide loading.gif */
    256 }
    257 
    258 .about-wrap video {
    259     margin: 1.5em auto;
    260 }
    261 
    262 .about-wrap .inline-svg.alignright {
    263     margin-left: 80px;
    264 }
    265 
    266 .about-wrap .inline-svg.alignleft {
    267     margin-right: 80px;
    268 }
    269 
    270 .about-wrap .cta {
     269.about-wrap .aligncenter {
    271270    text-align: center;
    272271}
    273272
    274 .about-wrap .cta .button {
    275     margin: 0 auto 5px;
    276     font-weight: 600;
    277 }
    278 
    279 .about-wrap .feature-section .button {
    280     margin-top: 1.5em;
    281     font-weight: 600;
     273.about-wrap .alignleft {
     274    float: left;
     275    margin-right: 40px;
     276}
     277
     278.about-wrap .alignright {
     279    float: right;
     280    margin-left: 40px;
     281}
     282
     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;
    282293}
    283294
    … …  
    289300}
    290301
     302.about-wrap .changelog {
     303    margin-bottom: 40px;
     304}
     305
    291306.about-wrap .changelog.point-releases h3 {
    292307    padding-top: 35px;
    … …  
    295310.about-wrap .changelog.point-releases h3:first-child {
    296311    padding-top: 7px;
     312}
     313
     314.about-wrap .changelog.feature-section .col {
     315    margin-top: 40px;
    297316}
    298317
    … …  
    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;
    … …  
    325327}
    326328
    327 .about-wrap .two-col-text {
    328     column-count: 2;
    329     column-gap: 40px;
    330 }
    331 
    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;
     329.about-wrap .feature-section p {
     330    margin-top: 0.6em;
    343331}
    344332
    … …  
    346334
    347335.about-wrap .headline-feature {
    348     margin-bottom: 40px;
    349 }
    350 
    351 .about-wrap .featured-image {
    352     text-align: center;
    353 }
    354 
    355 .about-wrap .feature-section {
    356     overflow: hidden;
    357 }
    358 
    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;
     336    margin: 0 auto 40px;
     337    max-width: 680px;
     338}
     339
     340.about-wrap .headline-feature h2 {
     341    margin: 50px 0 0;
     342}
     343
     344.about-wrap .headline-feature img {
     345    max-width: 600px;
    389346}
    390347
    … …  
    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}
    … …  
    511475
    512476@media screen and (max-width: 782px) {
    513     .about-wrap .two-col-text {
    514         column-count: 1;
    515     }
    516 
    517     .about-wrap .one-col .alignright {
    518         margin-left: 20px;
    519         max-width: 150px;
    520     }
    521 
    522     .about-wrap .one-col .alignleft {
    523         margin-right: 20px;
    524         max-width: 150px;
    525     }
    526 
    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;
    533     }
    534 
    535     .about-wrap .eight-col .col {
    536         min-width: 24% !important;
    537     }
    538 
    539     .about-wrap .three-col img,
    540     .about-wrap .four-col img,
    541     .about-wrap .eight-col img {
     477    .about-wrap .has-3-columns,
     478    .about-wrap .has-4-columns {
     479        -ms-grid-columns: 1fr 1fr;
     480        grid-template-columns: 1fr 1fr;
     481    }
     482
     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;
     489    }
     490
     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;
     497    }
     498
     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;
     505    }
     506
     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;
     512    }
     513}
     514
     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;
    544     }
    545 
    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;
    554     }
    555 
    556     .about-wrap .under-the-hood .inline-svg {
    557         margin-left: 40px;
     520    }
     521
     522    .about-wrap :not(.is-wider-right):not(.is-wider-left) .column {
     523        margin-right: 0;
     524        margin-left: 0;
     525    }
     526
     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}
    … …  
    579552        width: 100%;
    580553    }
    581 
    582     .about-wrap .one-col .alignright,
    583     .about-wrap .one-col .alignleft {
    584         max-width: 120px;
    585     }
    586 
    587     .about-wrap .feature-section .col {
    588         margin-top: 1em;
    589     }
    590 
    591     .about-wrap .two-col .col,
    592     .about-wrap .three-col .col,
    593     .about-wrap .three-col .col {
    594         min-width: 100% !important;
    595     }
    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     }
    625 }
    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 }
     554}
     555
     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;
     560    }
     561
     562    .about-wrap .column {
     563        margin-right: 0;
     564        margin-left: 0;
     565    }
     566
     567    .about-wrap .has-2-columns.is-wider-right img,
     568    .about-wrap .has-2-columns.is-wider-left img {
     569        max-width: 160px;
     570    }
     571}

  • trunk/src/wp-admin/freedoms.php

    r44905 r45278  
    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>
    … …  
    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>
Note: See TracChangeset for help on using the changeset viewer.