About page design for 4.2.

props melchoyce, ryelle.
see #31929.
Built from https://develop.svn.wordpress.org/trunk@32260


git-svn-id: http://core.svn.wordpress.org/trunk@32231 1a063a9b-81f0-0310-95a4-ce76da25c4cd
This commit is contained in:
Sergey Biryukov 2015-04-22 06:04:29 +00:00
parent 3fdd3ba9b5
commit 3e99df2858
6 changed files with 157 additions and 246 deletions

View File

@ -41,90 +41,69 @@ include( ABSPATH . 'wp-admin/admin-header.php' );
</a>
</h2>
<div class="changelog headline-feature dfw">
<h2>[video]</h2>
<div class="headline-feature feature-video">
<?php
// echo wp_video_shortcode( array(
// // 'mp4' => '//s.w.org/images/core/3.9/widgets.mp4',
// 'ogv' => '//videos.files.wordpress.com/bUdzKMro/wordpress-4-0_fmt1.ogv',
// // 'webm' => '//s.w.org/images/core/3.9/widgets.webm',
// 'loop' => false,
// ) );
?>
<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>
</div>
<div class="feature-section">
<div class="dfw-container">
<img src="//s.w.org/images/core/4.1/focus.png" class="base-image" />
</div>
<hr />
<div class="feature-section two-col">
<div class="col">
<h3><?php _e( 'An easier way to share content' ); ?></h3>
<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>
<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>
<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>
<p class="pressthis-bookmarklet-demo">
<a class="pressthis-bookmarklet" onclick="return false;" href="<?php echo htmlspecialchars( get_shortcut_link() ); ?>"><span><?php _e( 'Press This' ); ?></span></a>
</p>
</div>
</div>
<hr />
<div class="changelog headline-feature">
<div class="feature-section">
<div class="col">
<h3><?php _e( 'Extended character support' ); ?></h3>
<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>
<p><?php
/* translators: 1: heart emoji, 2: frog face emoji, 3, monkey emoji, 4: pizza emoji, 5: Emoji Codex link */
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' ) );
?></p>
</div>
<div class="col">
<img class="" src="//s.w.org/images/core/4.1/mobile.png" />
</div>
</div>
<div class="clear"></div>
</div>
<hr />
<div class="changelog customize">
<div class="feature-section col three-col">
<div>
<?php
echo wp_video_shortcode( array(
'mp4' => '//s.w.org/images/core/3.9/widgets.mp4',
'ogv' => '//s.w.org/images/core/3.9/widgets.ogv',
'webm' => '//s.w.org/images/core/3.9/widgets.webm',
'loop' => true,
'height' => 218
) );
?>
<h4><?php _e( 'Switch themes in the Customizer' ); ?></h4>
<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>
</div>
<div>
<?php
echo wp_video_shortcode( array(
'mp4' => '//s.w.org/images/core/3.9/widgets.mp4',
'ogv' => '//s.w.org/images/core/3.9/widgets.ogv',
'webm' => '//s.w.org/images/core/3.9/widgets.webm',
'loop' => true,
'height' => 218
) );
?>
<h4><?php _e( 'Even more embeds' ); ?></h4>
<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>
</div>
<div class="last-feature">
<?php
echo wp_video_shortcode( array(
'mp4' => '//s.w.org/images/core/3.9/widgets.mp4',
'ogv' => '//s.w.org/images/core/3.9/widgets.ogv',
'webm' => '//s.w.org/images/core/3.9/widgets.webm',
'loop' => true,
'height' => 218
) );
?>
<h4><?php _e( 'Streamlined plugin updates' ); ?></h4>
<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>
</div>
<div class="col">
<img src="https://cldup.com/xMJ2QCxvcz.jpg" />
</div>
</div>
<hr />
<div class="feature-section two-col">
<div class="col">
<img src="https://cldup.com/q-2svtgKe1.jpg" />
</div>
<div class="col">
<h3><?php _e( 'Extended character support' ); ?></h3>
<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>
<p><?php
/* translators: 1: heart emoji, 2: frog face emoji, 3, monkey emoji, 4: pizza emoji, 5: Emoji Codex link */
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' ) );
?></p>
</div>
</div>
<div class="changelog under-the-hood">
<div class="changelog feature-section three-col">
<div>
<img src="https://cldup.com/LKcPHn8rdr.png" />
<h3><?php _e( 'Switch themes in the Customizer' ); ?></h3>
<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>
</div>
<div>
<img src="https://cldup.com/h0VOskQA1C.png" />
<h3><?php _e( 'Even more embeds' ); ?></h3>
<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>
</div>
<div class="last-feature">
<img src="https://cldup.com/1_8tBZpvva.png" />
<h3><?php _e( 'Streamlined plugin updates' ); ?></h3>
<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>
</div>
</div>
<div class="changelog under-the-hood feature-list">
<h3><?php _e( 'Under the Hood' ); ?></h3>
<div class="feature-section col two-col">

View File

@ -103,7 +103,7 @@
}
.about-wrap h3 {
margin: 2em 0 .6em;
margin: 1.25em 0 .6em;
font-size: 1.25em;
line-height: 1.5em;
}
@ -147,7 +147,7 @@
float: right;
}
.about-wrap .col .last-feature {
.about-wrap [class$=col] .last-feature {
margin-left: 0;
}
@ -173,10 +173,15 @@
/* 2.1 - Typography */
.about-wrap .headline-feature h2 {
margin: 1.1em 0 0.2em;
font-size: 2.4em;
margin: 50px 0 30px;
font-size: 2.2em;
font-weight: 300;
line-height: 1.3;
text-align: right;
}
.about-wrap .headline-feature h3 {
margin-top: 30px;
text-align: center;
}
@ -185,26 +190,26 @@
text-align: center;
}
.about-wrap .dfw h3 {
margin-top: 1em;
text-align: center;
}
.about-wrap .feature-section h4 {
margin: 1.4em 0 0.6em 0;
font-size: 1.2em;
font-size: 1em;
}
.about-wrap .feature-section p {
margin-top: 0.6em;
}
.about-wrap .dfw p {
max-width: 68%;
margin: 0 auto 20px;
/* 2.2 - Structure */
.about-wrap .feature-video {
margin: 40px 0;
width: 100%;
text-align: center;
}
/* 2.2 - Structure */
.about-wrap .feature-video .wp-video {
margin: 0 auto;
}
.about-wrap .featured-image {
text-align: center;
@ -212,72 +217,33 @@
.about-wrap .feature-section {
overflow: hidden;
padding-bottom: 20px;
padding: 0 0 40px;
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}
.about-wrap .headline-feature .feature-section {
margin: 0 auto;
max-width: 82%;
max-width: 95%;
}
.about-wrap .headline-feature .feature-section .col:first-child {
.about-wrap .feature-section .col:nth-of-type(odd) {
float: right;
margin: 15px 0 0 5%;
width: 55%;
margin: 40px 0 0 5%;
width: 48%;
}
.about-wrap .headline-feature .feature-section .col:last-child {
.about-wrap .feature-section .col:nth-of-type(even) {
float: left;
margin: 15px 0 40px;
width: 40%;
margin: 40px 0 0;
width: 46%;
}
.about-wrap .feature-list .feature-section {
margin-top: 0;
.about-wrap .changelog {
margin-bottom: 40px;
}
.about-wrap .dfw .feature-section {
overflow: visible;
}
.about-wrap .dfw-container {
position: relative;
overflow: hidden;
margin-top: 50px;
-webkit-box-shadow: 0 0 10px rgba( 0, 0, 0, 0.25 );
box-shadow: 0 0 10px rgba( 0, 0, 0, 0.25 );
}
.about-wrap .dfw-container .overlay-image {
position: absolute;
top: 0;
right: 0;
/* Cubic Bezier to speed up the slide-out of the full-width sidebar image */
-webkit-transition: 0.8s -webkit-transform cubic-bezier(.9,.03,1,.61),
0.65s opacity linear;
transition: 0.8s transform cubic-bezier(.9,.03,1,.61),
0.65s opacity linear;
}
.about-wrap .dfw-container .overlay-image.fade-in {
opacity: 0;
}
/* rtl:ignore */
.about-wrap .dfw-container .overlay-image.from-left {
-webkit-transform: translate3d(-100%, 0, 0);
transform: translate3d(-100%, 0, 0);
}
.about-wrap .dfw-container:hover .overlay-image {
opacity: 1;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
/* Cubic Bezier to speed up the slide-in of the full-width sidebar image */
-webkit-transition: 0.7s -webkit-transform cubic-bezier( 0, 0.8, 0.8, 1 ),
0.8s opacity linear;
transition: 0.7s transform cubic-bezier( 0, 0.8, 0.8, 1 ),
0.8s opacity linear;
.about-wrap .changelog.feature-section > div {
margin-top: 40px;
}
/* Return to Dashboard Home link */
@ -293,20 +259,6 @@
padding: 0 5px;
}
/* SVGs */
.about-wrap .feature-list svg {
float: right;
clear: right;
margin: 15px 0 0 15px;
height: 90px;
width: 90px;
background-color: #cccccc;
-webkit-border-radius: 50%;
border-radius: 50%;
fill: #999;
border: 1px solid #c1c1c1;
}
.about-wrap .feature-list.finer-points h4,
.about-wrap .feature-list.finer-points p {
margin-right: 115px;
@ -400,17 +352,31 @@
------------------------------------------------------------------------------*/
@media screen and ( max-width: 782px ) {
.about-wrap .feature-section {
padding: 0;
border-bottom: none;
}
.about-wrap .one-col > div,
.about-wrap .two-col > div,
.about-wrap .three-col > div {
.about-wrap .three-col > div,
.about-wrap .two-col .col:nth-of-type(n) {
width: 100%;
margin: 0 0 40px;
margin: 40px 0 0;
padding: 0 0 40px;
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}
.about-wrap .feature-list div,
.about-wrap .col > div.last-feature {
.about-wrap .two-col .col h3 {
margin-top: 0;
}
.about-wrap .three-col img {
display: block;
margin: 0 auto;
}
.about-wrap .feature-list div {
margin: 0;
padding: 0;
border-bottom: none;

View File

@ -103,7 +103,7 @@
}
.about-wrap h3 {
margin: 2em 0 .6em;
margin: 1.25em 0 .6em;
font-size: 1.25em;
line-height: 1.5em;
}
@ -147,7 +147,7 @@
float: left;
}
.about-wrap .col .last-feature {
.about-wrap [class$=col] .last-feature {
margin-right: 0;
}
@ -173,10 +173,15 @@
/* 2.1 - Typography */
.about-wrap .headline-feature h2 {
margin: 1.1em 0 0.2em;
font-size: 2.4em;
margin: 50px 0 30px;
font-size: 2.2em;
font-weight: 300;
line-height: 1.3;
text-align: left;
}
.about-wrap .headline-feature h3 {
margin-top: 30px;
text-align: center;
}
@ -185,26 +190,26 @@
text-align: center;
}
.about-wrap .dfw h3 {
margin-top: 1em;
text-align: center;
}
.about-wrap .feature-section h4 {
margin: 1.4em 0 0.6em 0;
font-size: 1.2em;
font-size: 1em;
}
.about-wrap .feature-section p {
margin-top: 0.6em;
}
.about-wrap .dfw p {
max-width: 68%;
margin: 0 auto 20px;
/* 2.2 - Structure */
.about-wrap .feature-video {
margin: 40px 0;
width: 100%;
text-align: center;
}
/* 2.2 - Structure */
.about-wrap .feature-video .wp-video {
margin: 0 auto;
}
.about-wrap .featured-image {
text-align: center;
@ -212,72 +217,33 @@
.about-wrap .feature-section {
overflow: hidden;
padding-bottom: 20px;
padding: 0 0 40px;
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}
.about-wrap .headline-feature .feature-section {
margin: 0 auto;
max-width: 82%;
max-width: 95%;
}
.about-wrap .headline-feature .feature-section .col:first-child {
.about-wrap .feature-section .col:nth-of-type(odd) {
float: left;
margin: 15px 5% 0 0;
width: 55%;
margin: 40px 5% 0 0;
width: 48%;
}
.about-wrap .headline-feature .feature-section .col:last-child {
.about-wrap .feature-section .col:nth-of-type(even) {
float: right;
margin: 15px 0 40px;
width: 40%;
margin: 40px 0 0;
width: 46%;
}
.about-wrap .feature-list .feature-section {
margin-top: 0;
.about-wrap .changelog {
margin-bottom: 40px;
}
.about-wrap .dfw .feature-section {
overflow: visible;
}
.about-wrap .dfw-container {
position: relative;
overflow: hidden;
margin-top: 50px;
-webkit-box-shadow: 0 0 10px rgba( 0, 0, 0, 0.25 );
box-shadow: 0 0 10px rgba( 0, 0, 0, 0.25 );
}
.about-wrap .dfw-container .overlay-image {
position: absolute;
top: 0;
left: 0;
/* Cubic Bezier to speed up the slide-out of the full-width sidebar image */
-webkit-transition: 0.8s -webkit-transform cubic-bezier(.9,.03,1,.61),
0.65s opacity linear;
transition: 0.8s transform cubic-bezier(.9,.03,1,.61),
0.65s opacity linear;
}
.about-wrap .dfw-container .overlay-image.fade-in {
opacity: 0;
}
/* rtl:ignore */
.about-wrap .dfw-container .overlay-image.from-left {
-webkit-transform: translate3d(-100%, 0, 0);
transform: translate3d(-100%, 0, 0);
}
.about-wrap .dfw-container:hover .overlay-image {
opacity: 1;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
/* Cubic Bezier to speed up the slide-in of the full-width sidebar image */
-webkit-transition: 0.7s -webkit-transform cubic-bezier( 0, 0.8, 0.8, 1 ),
0.8s opacity linear;
transition: 0.7s transform cubic-bezier( 0, 0.8, 0.8, 1 ),
0.8s opacity linear;
.about-wrap .changelog.feature-section > div {
margin-top: 40px;
}
/* Return to Dashboard Home link */
@ -293,20 +259,6 @@
padding: 0 5px;
}
/* SVGs */
.about-wrap .feature-list svg {
float: left;
clear: left;
margin: 15px 15px 0 0;
height: 90px;
width: 90px;
background-color: #cccccc;
-webkit-border-radius: 50%;
border-radius: 50%;
fill: #999;
border: 1px solid #c1c1c1;
}
.about-wrap .feature-list.finer-points h4,
.about-wrap .feature-list.finer-points p {
margin-left: 115px;
@ -400,17 +352,31 @@
------------------------------------------------------------------------------*/
@media screen and ( max-width: 782px ) {
.about-wrap .feature-section {
padding: 0;
border-bottom: none;
}
.about-wrap .one-col > div,
.about-wrap .two-col > div,
.about-wrap .three-col > div {
.about-wrap .three-col > div,
.about-wrap .two-col .col:nth-of-type(n) {
width: 100%;
margin: 0 0 40px;
margin: 40px 0 0;
padding: 0 0 40px;
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}
.about-wrap .feature-list div,
.about-wrap .col > div.last-feature {
.about-wrap .two-col .col h3 {
margin-top: 0;
}
.about-wrap .three-col img {
display: block;
margin: 0 auto;
}
.about-wrap .feature-list div {
margin: 0;
padding: 0;
border-bottom: none;

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@ -4,7 +4,7 @@
*
* @global string $wp_version
*/
$wp_version = '4.2-RC3-32259';
$wp_version = '4.2-RC3-32260';
/**
* Holds the WordPress DB revision, increments when changes are made to the WordPress DB schema.