WordPress.org
Get WordPress

Make WordPress Core

Changeset 45278


Ignore:
Timestamp:
05/02/2019 03:43:10 PM (7 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.