WordPress.org

Make WordPress Core

Changeset 39512


Ignore:
Timestamp:
12/06/16 04:00:32 (4 months ago)
Author:
helen
Message:

About page: Imagery and beautification.

Still to come: responsive images, optimized videos, and CDN URLs.

props melchoyce, helen, ramiabraham.
see #38616.

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

Legend:

Unmodified
Added
Removed
  • trunk/src/wp-admin/about.php

    r39443 r39512  
    1919} 
    2020 
    21 /** 
    22  * Replaces the height and width attributes with values for full size. 
    23  * 
    24  * wp_video_shortcode() limits the width to 640px. 
    25  * 
    26  * @since 4.6.0 
    27  * @ignore 
    28  * 
    29  * @param $output Video shortcode HTML output. 
    30  * @return string Filtered HTML content to display video. 
    31  */ 
    32 function _wp_override_admin_video_width_limit( $output ) { 
    33     return str_replace( array( '640', '384' ), array( '1050', '630' ), $output ); 
    34 } 
    35  
    36 $video_url = 'https://videopress.com/embed/GbdhpGF3?hd=true'; 
     21$video_url = 'https://videopress.com/embed/AHz0Ca46?hd=true'; 
    3722$lang_code = str_replace( '_', '-', get_user_locale() ); 
    3823list( $lang_code ) = explode( '-', $lang_code ); 
     
    6651        <hr /> 
    6752 
    68         <div class="twenty-seventeen feature-section one-col"> 
     53        <div class="feature-section one-col"> 
    6954            <h2><?php _e( 'Presenting Twenty Seventeen' ); ?></h2> 
    70             <p><?php _e( 'A brand new default theme brings your site to life with immersive featured images and video headers.' ); ?></p> 
     55            <p class="lead-description"><?php _e( 'A brand new default theme brings your site to life with immersive featured images and video headers.' ); ?></p> 
     56            <img src="https://cldup.com/vOUPhX0Y1J.jpg" alt="" /> 
    7157            <p><?php _e( 'Twenty Seventeen focuses on business sites and features a customizable front page with multiple sections. Personalize it with widgets, navigation, social menus, a logo, custom colors, and more. Our default theme for 2017 works great in many languages, on any device, and for a wide range of users.' ); ?></p> 
    7258        </div> 
     
    7460        <hr /> 
    7561 
    76         <div class="site-customization feature-section one-col"> 
     62        <div class="feature-section one-col"> 
    7763            <h2><?php _e( 'Your Site, Your Way' ); ?></h2> 
    78             <p><?php _e( 'WordPress 4.7 adds new features to the customizer to help take you through the initial setup of a theme, with non-destructive live previews of all your changes in one uninterrupted workflow.' ); ?></p> 
    79  
    80             <h3><?php _e( 'Theme Starter Content' ); ?></h2> 
    81             <p><?php _e( 'To help give you a solid base to build from, individual themes can provide starter content that appears when you go to customize your brand new site. This can range from placing a business information widget in the best location to providing a sample menu with social icon links to a static front page complete with beautiful images. Don&#8217;t worry - nothing new will appear on the live site until you&#8217;re ready to save and publish your initial theme setup.' ); ?></p> 
     64            <p class="lead-description"><?php _e( 'WordPress 4.7 adds new features to the customizer to help take you through the initial setup of a theme, with non-destructive live previews of all your changes in one uninterrupted workflow.' ); ?></p> 
    8265        </div> 
    8366 
    8467        <div class="feature-section two-col"> 
    8568            <div class="col"> 
     69                <h3><?php _e( 'Theme Starter Content' ); ?></h3> 
     70                <p><?php _e( 'To help give you a solid base to build from, individual themes can provide starter content that appears when you go to customize your brand new site. This can range from placing a business information widget in the best location to providing a sample menu with social icon links to a static front page complete with beautiful images. Don&#8217;t worry - nothing new will appear on the live site until you&#8217;re ready to save and publish your initial theme setup.' ); ?></p> 
     71            </div> 
     72            <div class="col"> 
     73                <?php 
     74                echo wp_video_shortcode( array( 
     75                    'mp4'      => 'https://cldup.com/drMtx9mh_D.mp4', 
     76                    // 'webm'     => 'https://s.w.org/images/core/4.6/streamlined-updates.webm', 
     77                    // 'poster'   => 'https://s.w.org/images/core/4.6/streamlined-updates-2000.png?v1', 
     78                    'loop'     => true, 
     79                    'autoplay' => true, 
     80                    'width'    => 1140, 
     81                    'height'   => 624, 
     82                    // 'class'    => 'wp-video-shortcode feature-video', 
     83                ) ); 
     84                ?> 
     85            </div> 
     86        </div> 
     87 
     88        <div class="feature-section two-col"> 
     89            <div class="col"> 
    8690                <h3><?php _e( 'Edit Shortcuts' ); ?></h3> 
     91                <?php 
     92                echo wp_video_shortcode( array( 
     93                    'mp4'      => 'https://cldup.com/PaNFgzdnna.mp4', 
     94                    // 'webm'     => 'https://s.w.org/images/core/4.6/streamlined-updates.webm', 
     95                    // 'poster'   => 'https://s.w.org/images/core/4.6/streamlined-updates-2000.png?v1', 
     96                    'loop'     => true, 
     97                    'autoplay' => true, 
     98                    'width'    => 2520, 
     99                    'height'   => 1454, 
     100                    // 'class'    => 'wp-video-shortcode feature-video', 
     101                ) ); 
     102                ?> 
    87103                <p><?php _e( 'Visible icons appear to show you which parts of your site can be customized while live previewing. Click on a shortcut and get straight to editing. Paired with starter content, getting started with customizing your site is faster than ever.' );?></p> 
    88104            </div> 
    89105            <div class="col"> 
    90106                <h3><?php _e( 'Video Headers' ); ?></h3> 
     107                <?php 
     108                echo wp_video_shortcode( array( 
     109                    'mp4'      => 'https://cldup.com/qPvXxrut7L.mp4', 
     110                    // 'webm'     => 'https://s.w.org/images/core/4.6/streamlined-updates.webm', 
     111                    // 'poster'   => 'https://s.w.org/images/core/4.6/streamlined-updates-2000.png?v1', 
     112                    'loop'     => true, 
     113                    'autoplay' => true, 
     114                    'width'    => 2520, 
     115                    'height'   => 1454, 
     116                    // 'class'    => 'wp-video-shortcode feature-video', 
     117                ) ); 
     118                ?> 
    91119                <p><?php _e( 'Sometimes a big atmospheric video as a moving header image is just what you need to showcase your wares; go ahead and try it out with Twenty Seventeen. Need some video inspiration? Try searching for sites with video headers available for download and use.' ); ?></p> 
    92120            </div> 
     
    96124            <div class="col"> 
    97125                <h3><?php _e( 'Smoother Menu Building' ); ?></h3> 
     126                <img src="https://cldup.com/qhkOJVA69G.jpg" alt="" /> 
    98127                <p><?php _e( 'Many menus for sites contain links to the pages of your site, but what happens when you don&#8217;t have any pages yet? Now you can add new pages while building menus instead of leaving the customizer and abandoning your changes. Once you&#8217;ve published your customizations, you&#8217;ll have new pages ready for you to fill with content.' );?></p> 
    99128            </div> 
    100129            <div class="col"> 
    101130                <h3><?php _e( 'Custom CSS' ); ?></h3> 
     131                <img src="https://cldup.com/uLLUgWamG1.jpg" alt="" /> 
    102132                <p><?php _e( 'Sometimes you just need a few visual tweaks to make your site perfect. WordPress 4.7 allows you to add custom CSS and instantly see how your changes affect your site. The live preview allows you to work quickly without page refreshes slowing you down.' ); ?></p> 
    103133            </div> 
     
    106136        <hr /> 
    107137 
    108         <div class="feature-section two-col"> 
     138        <div class="feature-section no-heading two-col"> 
    109139            <div class="col"> 
    110140                <h3><?php _e( 'PDF Thumbnail Previews' ); ?></h3> 
     141                <img src="https://cldup.com/tDz71MBtjn.jpg" alt="" /> 
    111142                <p><?php _e( 'Managing your document collection is easier with WordPress 4.7. Uploading PDFs will generate thumbnail images so you can more easily distinguish between all your documents.' ); ?></p> 
    112143            </div> 
    113144            <div class="col"> 
    114145                <h3><?php _e( 'Dashboard in your language' ); ?></h3> 
     146                <img src="https://cldup.com/PtlX3xeJpX.jpg" alt="" /> 
    115147                <p><?php _e( 'Just because your site is in one language doesn&#8217;t mean that everybody helping manage it prefers that language for their admin. Add more languages to your site and a user language option will show up in your user&#8217;s profiles.' );?></p> 
    116148            </div> 
     
    121153        <div class="rest-api feature-section one-col"> 
    122154            <h2><?php _e( 'Introducing REST API Content Endpoints' ); ?></h2> 
    123             <p><?php _e( 'WordPress 4.7 comes with REST API endpoints for posts, comments, terms, users, meta, and settings.' ); ?></p> 
     155            <p class="lead-description"><?php _e( 'WordPress 4.7 comes with REST API endpoints for posts, comments, terms, users, meta, and settings.' ); ?></p> 
     156            <img src="https://cldup.com/WkGAL4UJfI.jpg" alt="" /> 
    124157            <p><?php 
    125158                printf( 
  • trunk/src/wp-admin/css/about.css

    r38244 r39512  
    4141    height: auto; 
    4242    vertical-align: middle; 
     43    border: 1px solid rgba(0, 0, 0, 0.1); 
    4344} 
    4445 
     
    9495 
    9596.about-wrap .feature-section p { 
    96     max-width: 38em; 
     97    max-width: 55em; 
    9798    margin-left: auto; 
    9899    margin-right: auto; 
     
    109110 
    110111.about-wrap h2 { 
    111     margin: 50px 0 1em; 
    112     font-size: 1.8em; 
     112    margin: 40px 0 .6em; 
     113    font-size: 2.7em; 
    113114    line-height: 1.3; 
    114115    font-weight: 300; 
     
    118119.about-wrap h3 { 
    119120    margin: 1.25em 0 .6em; 
    120     font-size: 1.25em; 
     121    font-size: 1.4em; 
    121122    line-height: 1.5; 
    122123} 
     
    124125.about-wrap h4 { 
    125126    color: #23282d; 
     127} 
     128 
     129.about-wrap .changelog h2 { 
     130    font-size: 1.4em; 
     131    font-weight: 600; 
     132    text-align: left; 
    126133} 
    127134 
     
    194201} 
    195202 
    196 .about-wrap .under-the-hood:nth-of-type(2n), 
    197 .about-wrap .under-the-hood:nth-of-type(3n) { 
    198     margin-top: 3em; 
    199 } 
    200  
    201203.about-wrap .feature-video .mejs-controls { 
    202204    display: none !important; 
     
    228230/* 2.1 - Typography */ 
    229231 
    230 .about-wrap .headline-feature h2 { 
    231     margin: 30px 0 30px; 
    232     font-size: 2.2em; 
    233     font-weight: 300; 
    234     line-height: 1.3; 
    235     text-align: center; 
    236 } 
    237  
    238 .about-wrap .headline-feature h3 { 
    239     margin-top: 0; 
    240     text-align: left; 
    241 } 
    242  
    243232.about-wrap .feature-section.two-col h3 { 
    244233    margin-top: 0; 
     
    252241.about-wrap .feature-section p { 
    253242    margin-top: 0.6em; 
     243} 
     244 
     245.about-wrap .lead-description { 
     246    font-size: 1.5em; 
     247    text-align: center; 
    254248} 
    255249 
     
    301295} 
    302296 
     297.about-wrap .feature-section.no-heading { 
     298    padding-top: 35px; 
     299} 
     300 
    303301.about-wrap .headline-feature { 
    304302    margin: 0 auto; 
     
    308306.about-wrap .feature-section .media-container { 
    309307    overflow: hidden; 
     308} 
     309 
     310.about-wrap .feature-section img { 
     311    margin-bottom: 1em; 
    310312} 
    311313 
Note: See TracChangeset for help on using the changeset viewer.