WordPress.org
Get WordPress

Make WordPress Core

Ticket #31929: 31929.10.diff

File 31929.10.diff, 11.9 KB (added by ryelle, 10 years ago)

  • src/wp-admin/about.php

     
    4141        </a>
    4242</h2>
    4343
    44 <div class="changelog headline-feature dfw">
    45         <h2>[video]</h2>
     44<div class="headline-feature feature-video">
     45        <?php
     46                // echo wp_video_shortcode( array(
     47                //      // 'mp4'      => '//s.w.org/images/core/3.9/widgets.mp4',
     48                //      'ogv'      => '//videos.files.wordpress.com/bUdzKMro/wordpress-4-0_fmt1.ogv',
     49                //      // 'webm'     => '//s.w.org/images/core/3.9/widgets.webm',
     50                //      'loop'     => false,
     51                // ) );
     52        ?>
     53        <embed type="application/x-shockwave-flash" src="https://v0.wordpress.com/player.swf?v=1.04" width="1000" height="560" wmode="direct" seamlesstabbing="true" allowfullscreen="true" allowscriptaccess="always" overstretch="true" flashvars="guid=bUdzKMro&amp;isDynamicSeeking=true"></embed>
     54</div>
    4655
    47         <div class="feature-section">
    48                 <div class="dfw-container">
    49                         <img src="//s.w.org/images/core/4.1/focus.png" class="base-image" />
    50                 </div>
     56<hr />
     57
     58<div class="feature-section two-col">
     59        <div class="col">
    5160                <h3><?php _e( 'An easier way to share content' ); ?></h3>
    5261                <p><?php printf( __( 'Clip it, edit it, publish it. Get familiar with the new and improved Press This. From the <a href="%s">Tools</a> menu, add Press This to your browser bookmark bar or your mobile device home screen. Once installed you can share your content with lightning speed. Sharing your favorite videos, images, and content has never been this fast or this easy.' ), admin_url( 'tools.php' ) ); ?></p>
    53                 <p><?php _e( 'Drag the bookmarklet below to your bookmarks bar. Then, when you&#8217;re on a page you want to share, simply &#8220;press&#8221; it.' ); ?> [bookmarklet]</p>
     62                <p><?php _e( 'Drag the bookmarklet below to your bookmarks bar. Then, when you&#8217;re on a page you want to share, simply &#8220;press&#8221; it.' ); ?></p>
     63
     64                <p class="pressthis-bookmarklet-demo">
     65                        <a class="pressthis-bookmarklet" onclick="return false;" href="<?php echo htmlspecialchars( get_shortcut_link() ); ?>"><span><?php _e( 'Press This' ); ?></span></a>
     66                </p>
    5467        </div>
    5568
     69        <div class="col">
     70                <img src="https://cldup.com/xMJ2QCxvcz.jpg" />
     71        </div>
    5672</div>
    5773
    58 <hr />
    59 
    60 <div class="changelog headline-feature">
    61 
    62         <div class="feature-section">
    63                 <div class="col">
    64                         <h3><?php _e( 'Extended character support' ); ?></h3>
    65                         <p><?php _e( 'Writing in WordPress, whatever your language, just got better. WordPress 4.2 supports a host of new characters out-of-the-box, including native Chinese, Japanese, and Korean characters, musical and mathematical symbols, and hieroglyphs.' ); ?></p>
    66                         <p><?php
    67                                 /* translators: 1: heart emoji, 2: frog face emoji, 3, monkey emoji, 4: pizza emoji, 5: Emoji Codex link */
    68                                 printf( __( 'Don&#8217;t use any of those characters? You can still have fun &mdash; emoji are now available in WordPress! Get creative and decorate your content with %1$s, %2$s, %3$s, %4$s, and all the many other <a href="%5$s">emoji</a>.' ), '&#x1F499', '&#x1F438', '&#x1F412', '&#x1F355', __( 'https://codex.wordpress.org/Emoji' ) );
    69                         ?></p>
    70                 </div>
    71                 <div class="col">
    72                         <img class="" src="//s.w.org/images/core/4.1/mobile.png" />
    73                 </div>
     74<div class="feature-section two-col">
     75        <div class="col">
     76                <img src="https://cldup.com/q-2svtgKe1.jpg" />
    7477        </div>
    75 
    76         <div class="clear"></div>
     78        <div class="col">
     79                <h3><?php _e( 'Extended character support' ); ?></h3>
     80                <p><?php _e( 'Writing in WordPress, whatever your language, just got better. WordPress 4.2 supports a host of new characters out-of-the-box, including native Chinese, Japanese, and Korean characters, musical and mathematical symbols, and hieroglyphs.' ); ?></p>
     81                <p><?php
     82                        /* translators: 1: heart emoji, 2: frog face emoji, 3, monkey emoji, 4: pizza emoji, 5: Emoji Codex link */
     83                        printf( __( 'Don&#8217;t use any of those characters? You can still have fun &mdash; emoji are now available in WordPress! Get creative and decorate your content with %1$s, %2$s, %3$s, %4$s, and all the many other <a href="%5$s">emoji</a>.' ), '&#x1F499', '&#x1F438', '&#x1F412', '&#x1F355', __( 'https://codex.wordpress.org/Emoji' ) );
     84                ?></p>
     85        </div>
    7786</div>
    7887
    79 <hr />
    80 
    81 <div class="changelog customize">
    82         <div class="feature-section col three-col">
    83                 <div>
    84                         <?php
    85                         echo wp_video_shortcode( array(
    86                                 'mp4'      => '//s.w.org/images/core/3.9/widgets.mp4',
    87                                 'ogv'      => '//s.w.org/images/core/3.9/widgets.ogv',
    88                                 'webm'     => '//s.w.org/images/core/3.9/widgets.webm',
    89                                 'loop'     => true,
    90                                 'height'   => 218
    91                         ) );
    92                         ?>
    93                         <h4><?php _e( 'Switch themes in the Customizer' ); ?></h4>
    94                         <p><?php _e( 'Browse and preview your installed themes from the Customizer. Make sure the theme looks great with <em>your</em> content, before it debuts on your site. ' ); ?></p>
    95                 </div>
    96                 <div>
    97                         <?php
    98                         echo wp_video_shortcode( array(
    99                                 'mp4'      => '//s.w.org/images/core/3.9/widgets.mp4',
    100                                 'ogv'      => '//s.w.org/images/core/3.9/widgets.ogv',
    101                                 'webm'     => '//s.w.org/images/core/3.9/widgets.webm',
    102                                 'loop'     => true,
    103                                 'height'   => 218
    104                         ) );
    105                         ?>
    106                         <h4><?php _e( 'Even more embeds' ); ?></h4>
    107                         <p><?php _e( 'Paste links from Tumblr.com and Kickstarter and watch them magically appear right in the editor. With every release, your publishing and editing experience get closer together.' ); ?></p>
    108                 </div>
    109                 <div class="last-feature">
    110                         <?php
    111                         echo wp_video_shortcode( array(
    112                                 'mp4'      => '//s.w.org/images/core/3.9/widgets.mp4',
    113                                 'ogv'      => '//s.w.org/images/core/3.9/widgets.ogv',
    114                                 'webm'     => '//s.w.org/images/core/3.9/widgets.webm',
    115                                 'loop'     => true,
    116                                 'height'   => 218
    117                         ) );
    118                         ?>
    119                         <h4><?php _e( 'Streamlined plugin updates' ); ?></h4>
    120                         <p><?php _e( 'Goodbye boring loading screen, hello smooth and simple plugin updates. Click <em>Update&nbsp;Now</em> and watch the magic happen.' ); ?></p>
    121                 </div>
     88<div class="changelog feature-section three-col">
     89        <div>
     90                <img src="https://cldup.com/LKcPHn8rdr.png" />
     91                <h3><?php _e( 'Switch themes in the Customizer' ); ?></h3>
     92                <p><?php _e( 'Browse and preview your installed themes from the Customizer. Make sure the theme looks great with <em>your</em> content, before it debuts on your site. ' ); ?></p>
    12293        </div>
     94        <div>
     95                <img src="https://cldup.com/h0VOskQA1C.png" />
     96                <h3><?php _e( 'Even more embeds' ); ?></h3>
     97                <p><?php _e( 'Paste links from Tumblr.com and Kickstarter and watch them magically appear right in the editor. With every release, your publishing and editing experience get closer together.' ); ?></p>
     98        </div>
     99        <div class="last-feature">
     100                <img src="https://cldup.com/1_8tBZpvva.png" />
     101                <h3><?php _e( 'Streamlined plugin updates' ); ?></h3>
     102                <p><?php _e( 'Goodbye boring loading screen, hello smooth and simple plugin updates. Click <em>Update&nbsp;Now</em> and watch the magic happen.' ); ?></p>
     103        </div>
    123104</div>
    124105
    125 <hr />
    126 
    127 <div class="changelog under-the-hood">
     106<div class="changelog under-the-hood feature-list">
    128107        <h3><?php _e( 'Under the Hood' ); ?></h3>
    129108
    130109        <div class="feature-section col two-col">

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

     
    103103}
    104104
    105105.about-wrap h3 {
    106         margin: 2em 0 .6em;
     106        margin: 1.25em 0 .6em;
    107107        font-size: 1.25em;
    108108        line-height: 1.5em;
    109109}
    … …  
    147147        float: left;
    148148}
    149149
    150 .about-wrap .col .last-feature {
     150.about-wrap [class$=col] .last-feature {
    151151        margin-right: 0;
    152152}
    153153
    … …  
    173173/* 2.1 - Typography */
    174174
    175175.about-wrap .headline-feature h2 {
    176         margin: 1.1em 0 0.2em;
    177         font-size: 2.4em;
     176        margin: 50px 0 30px;
     177        font-size: 2.2em;
    178178        font-weight: 300;
    179179        line-height: 1.3;
     180        text-align: left;
     181}
     182
     183.about-wrap .headline-feature h3 {
     184        margin-top: 30px;
    180185        text-align: center;
    181186}
    182187
    … …  
    185190        text-align: center;
    186191}
    187192
    188 .about-wrap .dfw h3 {
    189         margin-top: 1em;
    190         text-align: center;
    191 }
    192 
    193193.about-wrap .feature-section h4 {
    194194        margin: 1.4em 0 0.6em 0;
    195         font-size: 1.2em;
     195        font-size: 1em;
    196196}
    197197
    198198.about-wrap .feature-section p {
    … …  
    199199        margin-top: 0.6em;
    200200}
    201201
    202 .about-wrap .dfw p {
    203         max-width: 68%;
    204         margin: 0 auto 20px;
     202/* 2.2 - Structure */
     203
     204.about-wrap .feature-video {
     205        margin: 40px 0;
     206        width: 100%;
     207        text-align: center;
    205208}
    206209
    207 /* 2.2 - Structure */
     210.about-wrap .feature-video .wp-video {
     211        margin: 0 auto;
     212}
    208213
    209214.about-wrap .featured-image {
    210215        text-align: center;
    … …  
    212217
    213218.about-wrap .feature-section {
    214219        overflow: hidden;
    215         padding-bottom: 20px;
     220        padding: 0 0 40px;
     221        border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    216222}
    217223
    218224.about-wrap .headline-feature .feature-section {
    219225        margin: 0 auto;
    220         max-width: 82%;
     226        max-width: 95%;
    221227}
    222228
    223 .about-wrap .headline-feature .feature-section .col:first-child {
     229.about-wrap .feature-section .col:nth-of-type(odd) {
    224230        float: left;
    225         margin: 15px 5% 0 0;
    226         width: 55%;
     231        margin: 40px 5% 0 0;
     232        width: 48%;
    227233}
    228234
    229 .about-wrap .headline-feature .feature-section .col:last-child {
     235.about-wrap .feature-section .col:nth-of-type(even) {
    230236        float: right;
    231         margin: 15px 0 40px;
    232         width: 40%;
     237        margin: 40px 0 0;
     238        width: 46%;
    233239}
    234240
    235 .about-wrap .feature-list .feature-section {
    236         margin-top: 0;
     241.about-wrap .changelog {
     242        margin-bottom: 40px;
    237243}
    238244
    239 .about-wrap .dfw .feature-section {
    240         overflow: visible;
     245.about-wrap .changelog.feature-section > div {
     246        margin-top: 40px;
    241247}
    242248
    243 .about-wrap .dfw-container {
    244         position: relative;
    245         overflow: hidden;
    246         margin-top: 50px;
    247         -webkit-box-shadow: 0 0 10px rgba( 0, 0, 0, 0.25 );
    248         box-shadow: 0 0 10px rgba( 0, 0, 0, 0.25 );
    249 }
    250 
    251 .about-wrap .dfw-container .overlay-image {
    252         position: absolute;
    253         top: 0;
    254         left: 0;
    255         /* Cubic Bezier to speed up the slide-out of the full-width sidebar image */
    256         -webkit-transition: 0.8s -webkit-transform cubic-bezier(.9,.03,1,.61),
    257                     0.65s opacity linear;
    258         transition: 0.8s transform cubic-bezier(.9,.03,1,.61),
    259                     0.65s opacity linear;
    260 }
    261 
    262 .about-wrap .dfw-container .overlay-image.fade-in {
    263         opacity: 0;
    264 }
    265 
    266 /* rtl:ignore */
    267 .about-wrap .dfw-container .overlay-image.from-left {
    268         -webkit-transform: translate3d(-100%, 0, 0);
    269         transform: translate3d(-100%, 0, 0);
    270 }
    271 
    272 .about-wrap .dfw-container:hover .overlay-image {
    273         opacity: 1;
    274         -webkit-transform: translate3d(0, 0, 0);
    275         transform: translate3d(0, 0, 0);
    276         /* Cubic Bezier to speed up the slide-in of the full-width sidebar image */
    277         -webkit-transition: 0.7s -webkit-transform cubic-bezier( 0, 0.8, 0.8, 1 ),
    278                     0.8s opacity linear;
    279         transition: 0.7s transform cubic-bezier( 0, 0.8, 0.8, 1 ),
    280                     0.8s opacity linear;
    281 }
    282 
    283249/* Return to Dashboard Home link */
    284250
    285251.about-wrap .return-to-dashboard {
    … …  
    293259        padding: 0 5px;
    294260}
    295261
    296 /* SVGs */
    297 .about-wrap .feature-list svg {
    298         float: left;
    299         clear: left;
    300         margin: 15px 15px 0 0;
    301         height: 90px;
    302         width: 90px;
    303         background-color: #cccccc;
    304         -webkit-border-radius: 50%;
    305         border-radius: 50%;
    306         fill: #999;
    307         border: 1px solid #c1c1c1;
    308 }
    309 
    310262.about-wrap .feature-list.finer-points h4,
    311263.about-wrap .feature-list.finer-points p {
    312264        margin-left: 115px;
    … …  
    400352------------------------------------------------------------------------------*/
    401353
    402354@media screen and ( max-width: 782px ) {
     355        .about-wrap .feature-section {
     356                padding: 0;
     357                border-bottom: none;
     358        }
     359
    403360        .about-wrap .one-col > div,
    404361        .about-wrap .two-col > div,
    405         .about-wrap .three-col > div {
     362        .about-wrap .three-col > div,
     363        .about-wrap .two-col .col:nth-of-type(n) {
    406364                width: 100%;
    407                 margin: 0 0 40px;
     365                margin: 40px 0 0;
    408366                padding: 0 0 40px;
    409367                border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    410368        }
    411369
    412         .about-wrap .feature-list div,
    413         .about-wrap .col > div.last-feature {
     370        .about-wrap .two-col .col h3 {
     371                margin-top: 0;
     372        }
     373
     374        .about-wrap .three-col img {
     375                display: block;
     376                margin: 0 auto;
     377        }
     378
     379        .about-wrap .feature-list div {
    414380                margin: 0;
    415381                padding: 0;
    416382                border-bottom: none;