Make WordPress Core

Ticket #31929: 31929.9.diff

File 31929.9.diff, 12.0 KB (added by melchoyce, 9 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="button button-secondary" onclick="<?php echo htmlspecialchars( get_shortcut_link() ); ?>"><span class="dashicons dashicons-pressthis"></span><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.about-wrap .pressthis-bookmarklet-demo .button {
     203        margin-top: 10px;
     204        padding-top: 4px;
     205        height: 36px;
    205206}
    206207
    207208/* 2.2 - Structure */
    208209
     210.about-wrap .feature-video {
     211        margin: 40px 0;
     212        width: 100%;
     213        text-align: center;
     214}
     215
     216.about-wrap .feature-video .wp-video {
     217        margin: 0 auto;
     218}
     219
    209220.about-wrap .featured-image {
    210221        text-align: center;
    211222}
     
    212223
    213224.about-wrap .feature-section {
    214225        overflow: hidden;
    215         padding-bottom: 20px;
     226        padding: 0 0 40px;
     227        border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    216228}
    217229
    218230.about-wrap .headline-feature .feature-section {
    219231        margin: 0 auto;
    220         max-width: 82%;
     232        max-width: 95%;
    221233}
    222234
    223 .about-wrap .headline-feature .feature-section .col:first-child {
     235.about-wrap .feature-section .col:nth-of-type(odd) {
    224236        float: left;
    225         margin: 15px 5% 0 0;
    226         width: 55%;
     237        margin: 40px 5% 0 0;
     238        width: 48%;
    227239}
    228240
    229 .about-wrap .headline-feature .feature-section .col:last-child {
     241.about-wrap .feature-section .col:nth-of-type(even) {
    230242        float: right;
    231         margin: 15px 0 40px;
    232         width: 40%;
     243        margin: 40px 0 0;
     244        width: 46%;
    233245}
    234246
    235 .about-wrap .feature-list .feature-section {
    236         margin-top: 0;
     247.about-wrap .changelog {
     248        margin-bottom: 40px;
    237249}
    238250
    239 .about-wrap .dfw .feature-section {
    240         overflow: visible;
     251.about-wrap .changelog.feature-section > div {
     252        margin-top: 40px;
    241253}
    242254
    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 
    283255/* Return to Dashboard Home link */
    284256
    285257.about-wrap .return-to-dashboard {
     
    293265        padding: 0 5px;
    294266}
    295267
    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 
    310268.about-wrap .feature-list.finer-points h4,
    311269.about-wrap .feature-list.finer-points p {
    312270        margin-left: 115px;
     
    400358------------------------------------------------------------------------------*/
    401359
    402360@media screen and ( max-width: 782px ) {
     361        .about-wrap .feature-section {
     362                padding: 0;
     363                border-bottom: none;
     364        }
     365
    403366        .about-wrap .one-col > div,
    404367        .about-wrap .two-col > div,
    405         .about-wrap .three-col > div {
     368        .about-wrap .three-col > div,
     369        .about-wrap .two-col .col:nth-of-type(n) {
    406370                width: 100%;
    407                 margin: 0 0 40px;
     371                margin: 40px 0 0;
    408372                padding: 0 0 40px;
    409373                border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    410374        }
    411375
    412         .about-wrap .feature-list div,
    413         .about-wrap .col > div.last-feature {
     376        .about-wrap .two-col .col h3 {
     377                margin-top: 0;
     378        }
     379
     380        .about-wrap .three-col img {
     381                display: block;
     382                margin: 0 auto;
     383        }
     384
     385        .about-wrap .feature-list div {
    414386                margin: 0;
    415387                padding: 0;
    416388                border-bottom: none;