About page design, first pass.

props melchoyce, ryelle.
see #27713.

Built from https://develop.svn.wordpress.org/trunk@28127


git-svn-id: http://core.svn.wordpress.org/trunk@27958 1a063a9b-81f0-0310-95a4-ce76da25c4cd
This commit is contained in:
Andrew Nacin 2014-04-15 01:31:14 +00:00
parent 9f81d0526e
commit 86daa61c45
34 changed files with 128 additions and 154 deletions

View File

@ -35,63 +35,66 @@ include( ABSPATH . 'wp-admin/admin-header.php' );
<div class="changelog"> <div class="changelog">
<h2 class="about-headline-callout"><?php echo ( 'A smoother media editing&nbsp;experience' ); ?></h2> <h2 class="about-headline-callout"><?php echo ( 'A smoother media editing&nbsp;experience' ); ?></h2>
<img class="about-overview-img" src="<?php echo is_ssl() ? 'https://' : '//s.'; ?>wordpress.org/images/core/3.8/overview.png?1" /> <div class="about-overview">
<div class="feature-section col three-col"> <img class="about-overview-img" src="//wordpress.org/images/core/3.9/overview.png?0" />
<div class="col-1">
<h4><?php echo ( 'Gallery previews' ); ?></h4>
<p><?php echo ( 'Galleries display a beautiful grid of images right in the editor, just like they do in your published post.' ); ?></p>
</div>
<div class="col-2">
<h4><?php echo ( 'Improved image editing' ); ?></h4>
<p><?php echo ( 'We&#8217;ve made it much easier to edit your images, with quicker access to cropping and rotation tools. You can also scale images directly in the editor to find just the right fit.' ); ?></p>
</div>
<div class="col-3 last-feature">
<h4><?php echo ( 'Drag and drop your images' ); ?></h4>
<p><?php echo ( 'Grab images from your desktop and drop them directly onto the editor, saving yourself that extra step.' ); ?></p>
</div>
</div> </div>
<div class="feature-section col three-col"> <div class="feature-section col three-col">
<div class="col-1"> <div class="col-1">
<img src="//wordpress.org/images/core/3.9/editor.jpg?0" />
<h4><?php echo ( 'Improved visual editor' ); ?></h4> <h4><?php echo ( 'Improved visual editor' ); ?></h4>
<p><?php echo ( 'We&#8217;ve updated the visual editor with better mobile support, improved speed and accessibility, and a modern API for developers.' ); ?></p> <p><?php echo ( 'We&#8217;ve updated the visual editor with better mobile support, improved speed and accessibility, and a modern API for developers.' ); ?></p>
<p><?php echo ( 'The visual editor will now automatically clean up the messy styling that certain word processing applications insert when copying and pasting. Yeah, we&#8217;re talking about you, Microsoft Word.' ); ?></p> <p><?php echo ( 'The visual editor will now automatically clean up the messy styling that certain word processing applications insert when copying and pasting. Yeah, we&#8217;re talking about you, Microsoft Word.' ); ?></p>
</div> </div>
<div class="col-2"> <div class="col-2">
<h4><?php echo ( 'Do more with audio and video' ); ?></h4> <img src="//wordpress.org/images/core/3.9/image.jpg?0" />
<p><?php echo ( 'Images have galleries; now we&#8217;ve added simple audio and video playlists, so you can showcase your music and clips.' ); ?></p> <h4><?php echo ( 'Improved image editing' ); ?></h4>
<!-- maybe insert note about playing/editing audio/video from the editor --> <p><?php echo ( 'We&#8217;ve made it much easier to edit your images, with quicker access to cropping and rotation tools. You can also scale images directly in the editor to find just the right fit.' ); ?></p>
</div> </div>
<div class="col-3 last-feature"> <div class="col-3 last-feature">
<img src="<?php echo is_ssl() ? 'https://' : '//s.'; ?>wordpress.org/images/core/3.8/colors.png?1" /> <img src="//wordpress.org/images/core/3.9/drop.jpg?0" />
<!-- embedded playlist? --> <h4><?php echo ( 'Drag and drop your images' ); ?></h4>
<p><?php echo ( 'Grab images from your desktop and drop them directly onto the editor, saving yourself that extra step.' ); ?></p>
</div>
</div>
<hr>
<div class="feature-section col two-col">
<div class="col-1">
<img src="//wordpress.org/images/core/3.9/gallery.jpg?0" />
<h4><?php echo ( 'Gallery previews' ); ?></h4>
<p><?php echo ( 'Galleries display a beautiful grid of images right in the editor, just like they do in your published post.' ); ?></p>
</div>
<div class="col-2 last-feature">
<h4><?php echo ( 'Do more with audio and video' ); ?></h4>
<p><?php echo ( 'Images have galleries; now we&#8217;ve added simple audio and video playlists, so you can showcase your music and clips.' ); ?></p>
</div> </div>
</div> </div>
</div> </div>
<hr> <hr>
<div class="changelog"> <div class="changelog customize">
<h3><?php echo ( 'Customize your heart out' ); ?></h3> <h3><?php echo ( 'Customize your heart out' ); ?></h3>
<div class="feature-section col two-col"> <div class="feature-section col two-col">
<div> <div>
<img src="<?php echo is_ssl() ? 'https://' : '//s.'; ?>wordpress.org/images/core/3.8/twentyfourteen.jpg?1" />
<h4><?php echo ( 'Live widget previews' ); ?></h4> <h4><?php echo ( 'Live widget previews' ); ?></h4>
<p><?php echo ( 'Add, edit, and rearrange your site&#8217;s widgets right in the theme customizer. No &#8220;save and surprise&#8221; &mdash; preview your changes live and only save them when you&#8217;re ready.' ); ?></p> <p><?php echo ( 'Add, edit, and rearrange your site&#8217;s widgets right in the theme customizer. No &#8220;save and surprise&#8221; &mdash; preview your changes live and only save them when you&#8217;re ready.' ); ?></p>
<p><?php echo ( 'The improved header image tool also lets you upload, crop, and manage headers while customizing your theme.' ); ?></p> <p><?php echo ( 'The improved header image tool also lets you upload, crop, and manage headers while customizing your theme.' ); ?></p>
</div> </div>
<div class="last-feature"> <div class="last-feature">
<img src="<?php echo is_ssl() ? 'https://' : '//s.'; ?>wordpress.org/images/core/3.8/twentyfourteen.jpg?1" /> <img src="//wordpress.org/images/core/3.9/theme.jpg?0" />
<h4><?php _e( 'Stunning new theme browser' ); ?></h4> <h4><?php _e( 'Stunning new theme browser' ); ?></h4>
<p><?php _e( 'Looking for a new theme should be easy and fun. Lose yourself in the boundless supply of free WordPress.org themes with the beautiful new theme browser.' ); ?></p> <p><?php _e( 'Looking for a new theme should be easy and fun. Lose yourself in the boundless supply of free WordPress.org themes with the beautiful new theme browser.' ); ?></p>
<p><a href="<?php echo network_admin_url( 'theme-install.php' ); ?>" class="button button-primary">Browse Themes</a></p> <p><a href="<?php echo network_admin_url( 'theme-install.php' ); ?>" class="button button-large button-primary">Browse Themes</a></p>
</div> </div>
</div> </div>
</div> </div>
<hr> <hr>
<div class="changelog"> <div class="changelog under-the-hood">
<h3><?php _e( 'Under the Hood' ); ?></h3> <h3><?php _e( 'Under the Hood' ); ?></h3>
<div class="feature-section col three-col"> <div class="feature-section col three-col">

View File

@ -23,8 +23,9 @@
} }
.about-wrap img { .about-wrap img {
margin: 0.5em 5px 0.5em 0; margin: 0;
max-width: 100%; max-width: 100%;
vertical-align: middle;
} }
/* Typography */ /* Typography */
@ -79,6 +80,11 @@
line-height: 1.5em; line-height: 1.5em;
} }
.customize h3 {
margin-top: 1.75em;
text-align: center;
}
.about-wrap .feature-section h4 { .about-wrap .feature-section h4 {
margin: 1.4em 0 0.6em 0; margin: 1.4em 0 0.6em 0;
font-size: 1.2em; font-size: 1.2em;
@ -93,28 +99,19 @@
font-size: 14px; font-size: 14px;
} }
.about-wrap .button.button-large {
padding: 8px 20px 10px !important;
height: 46px !important;
font-size: 14px;
line-height: 28px !important;
}
/* 3.8 Images */ /* 3.8 Images */
.about-wrap .about-colors-img {
bottom: -25px;
}
.about-wrap .about-themes-img {
bottom: -38px;
}
.about-wrap .about-overview-img { .about-wrap .about-overview-img {
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
margin: 0; margin: 0;
} }
.about-colors-img img,
.about-themes-img img {
margin: 0 0;
padding: 0;
line-height: 1;
}
/* Point Releases */ /* Point Releases */
.about-wrap .point-releases { .about-wrap .point-releases {
@ -175,26 +172,21 @@
/* Changelog / Update screen */ /* Changelog / Update screen */
.about-overview {
margin-top: 40px;
text-align: center;
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}
.about-wrap .feature-section { .about-wrap .feature-section {
margin-top: 40px;
padding-bottom: 20px; padding-bottom: 20px;
} }
.about-wrap .feature-section.col {
margin-bottom: 0;
}
.about-wrap .feature-section.center-col > div {
margin: auto;
width: 60%;
}
.about-wrap .about-colors .one-col > div {
width: 100%;
}
.about-wrap .feature-section.two-col > div { .about-wrap .feature-section.two-col > div {
position: relative; position: relative;
width: 50%; width: 47.5%;
margin-left: 4.999999999%;
float: right; float: right;
} }
@ -209,34 +201,14 @@
margin-left: 0; margin-left: 0;
} }
.about-wrap .about-updates img, .about-wrap .under-the-hood .feature-section {
.about-wrap .about-twentyfourteen img { margin-top: 0;
margin: 2em 0 0 0;
border: 1px solid #ddd;
-webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}
.about-wrap .about-twentyfourteen img {
margin-top: 1em;
} }
.about-wrap .changelog .feature-section { .about-wrap .changelog .feature-section {
overflow: hidden; overflow: hidden;
} }
.about-wrap .about-colors .scheme-list {
margin-bottom: 1em;
}
.about-wrap .about-colors .color-option {
padding-top: 10px;
}
.about-wrap .about-colors .color-option label {
display: inline-block;
margin: 0.25em 0 0.5em;
}
.about-wrap .feature-section.two-col div p { .about-wrap .feature-section.two-col div p {
margin-left: 3%; margin-left: 3%;
} }
@ -351,15 +323,21 @@
@media screen and ( max-width: 782px ) { @media screen and ( max-width: 782px ) {
.about-wrap .feature-section.one-col > div, .about-wrap .feature-section.one-col > div,
.about-wrap .feature-section.two-col > div, .about-wrap .feature-section.two-col > div,
.about-wrap .three-col.about-updates > div { .about-wrap .feature-section.three-col > div {
width: 100%; width: 100%;
margin: 0; margin: 0 0 40px;
padding: 0 0 40px;
float: none; float: none;
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
} }
.about-wrap .about-colors .color-option { .about-wrap .under-the-hood .feature-section > div,
width: 49%; .about-wrap .feature-section.col > div.last-feature {
margin: 0;
padding: 0;
border-bottom: none;
} }
} }
@media only screen and (max-width: 500px) { @media only screen and (max-width: 500px) {

View File

@ -23,8 +23,9 @@
} }
.about-wrap img { .about-wrap img {
margin: 0.5em 0 0.5em 5px; margin: 0;
max-width: 100%; max-width: 100%;
vertical-align: middle;
} }
/* Typography */ /* Typography */
@ -79,6 +80,11 @@
line-height: 1.5em; line-height: 1.5em;
} }
.customize h3 {
margin-top: 1.75em;
text-align: center;
}
.about-wrap .feature-section h4 { .about-wrap .feature-section h4 {
margin: 1.4em 0 0.6em 0; margin: 1.4em 0 0.6em 0;
font-size: 1.2em; font-size: 1.2em;
@ -93,28 +99,19 @@
font-size: 14px; font-size: 14px;
} }
.about-wrap .button.button-large {
padding: 8px 20px 10px !important;
height: 46px !important;
font-size: 14px;
line-height: 28px !important;
}
/* 3.8 Images */ /* 3.8 Images */
.about-wrap .about-colors-img {
bottom: -25px;
}
.about-wrap .about-themes-img {
bottom: -38px;
}
.about-wrap .about-overview-img { .about-wrap .about-overview-img {
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
margin: 0; margin: 0;
} }
.about-colors-img img,
.about-themes-img img {
margin: 0 0;
padding: 0;
line-height: 1;
}
/* Point Releases */ /* Point Releases */
.about-wrap .point-releases { .about-wrap .point-releases {
@ -175,26 +172,21 @@
/* Changelog / Update screen */ /* Changelog / Update screen */
.about-overview {
margin-top: 40px;
text-align: center;
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}
.about-wrap .feature-section { .about-wrap .feature-section {
margin-top: 40px;
padding-bottom: 20px; padding-bottom: 20px;
} }
.about-wrap .feature-section.col {
margin-bottom: 0;
}
.about-wrap .feature-section.center-col > div {
margin: auto;
width: 60%;
}
.about-wrap .about-colors .one-col > div {
width: 100%;
}
.about-wrap .feature-section.two-col > div { .about-wrap .feature-section.two-col > div {
position: relative; position: relative;
width: 50%; width: 47.5%;
margin-right: 4.999999999%;
float: left; float: left;
} }
@ -209,34 +201,14 @@
margin-right: 0; margin-right: 0;
} }
.about-wrap .about-updates img, .about-wrap .under-the-hood .feature-section {
.about-wrap .about-twentyfourteen img { margin-top: 0;
margin: 2em 0 0 0;
border: 1px solid #ddd;
-webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}
.about-wrap .about-twentyfourteen img {
margin-top: 1em;
} }
.about-wrap .changelog .feature-section { .about-wrap .changelog .feature-section {
overflow: hidden; overflow: hidden;
} }
.about-wrap .about-colors .scheme-list {
margin-bottom: 1em;
}
.about-wrap .about-colors .color-option {
padding-top: 10px;
}
.about-wrap .about-colors .color-option label {
display: inline-block;
margin: 0.25em 0 0.5em;
}
.about-wrap .feature-section.two-col div p { .about-wrap .feature-section.two-col div p {
margin-right: 3%; margin-right: 3%;
} }
@ -351,15 +323,21 @@
@media screen and ( max-width: 782px ) { @media screen and ( max-width: 782px ) {
.about-wrap .feature-section.one-col > div, .about-wrap .feature-section.one-col > div,
.about-wrap .feature-section.two-col > div, .about-wrap .feature-section.two-col > div,
.about-wrap .three-col.about-updates > div { .about-wrap .feature-section.three-col > div {
width: 100%; width: 100%;
margin: 0; margin: 0 0 40px;
padding: 0 0 40px;
float: none; float: none;
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
} }
.about-wrap .about-colors .color-option { .about-wrap .under-the-hood .feature-section > div,
width: 49%; .about-wrap .feature-section.col > div.last-feature {
margin: 0;
padding: 0;
border-bottom: none;
} }
} }
@media only screen and (max-width: 500px) { @media only screen and (max-width: 500px) {

View File

@ -150,6 +150,7 @@ strong .post-com-count span {
.about-wrap h2 .nav-tab-active, .about-wrap h2 .nav-tab-active,
.nav-tab-active, .nav-tab-active,
.nav-tab-active:hover { .nav-tab-active:hover {
background-color: $body-background;
border-bottom-color: $body-background; border-bottom-color: $body-background;
} }

View File

@ -109,6 +109,7 @@ strong .post-com-count span {
/* Active tabs use a bottom border color that matches the page background color. */ /* Active tabs use a bottom border color that matches the page background color. */
.about-wrap h2 .nav-tab-active, .nav-tab-active, .nav-tab-active:hover { .about-wrap h2 .nav-tab-active, .nav-tab-active, .nav-tab-active:hover {
background-color: #f1f1f1;
border-bottom-color: #f1f1f1; } border-bottom-color: #f1f1f1; }
/* Admin Menu: submenu */ /* Admin Menu: submenu */

File diff suppressed because one or more lines are too long

View File

@ -109,6 +109,7 @@ strong .post-com-count span {
/* Active tabs use a bottom border color that matches the page background color. */ /* Active tabs use a bottom border color that matches the page background color. */
.about-wrap h2 .nav-tab-active, .nav-tab-active, .nav-tab-active:hover { .about-wrap h2 .nav-tab-active, .nav-tab-active, .nav-tab-active:hover {
background-color: #f1f1f1;
border-bottom-color: #f1f1f1; } border-bottom-color: #f1f1f1; }
/* Admin Menu: submenu */ /* Admin Menu: submenu */

File diff suppressed because one or more lines are too long

View File

@ -109,6 +109,7 @@ strong .post-com-count span {
/* Active tabs use a bottom border color that matches the page background color. */ /* Active tabs use a bottom border color that matches the page background color. */
.about-wrap h2 .nav-tab-active, .nav-tab-active, .nav-tab-active:hover { .about-wrap h2 .nav-tab-active, .nav-tab-active, .nav-tab-active:hover {
background-color: #f1f1f1;
border-bottom-color: #f1f1f1; } border-bottom-color: #f1f1f1; }
/* Admin Menu: submenu */ /* Admin Menu: submenu */

File diff suppressed because one or more lines are too long

View File

@ -109,6 +109,7 @@ strong .post-com-count span {
/* Active tabs use a bottom border color that matches the page background color. */ /* Active tabs use a bottom border color that matches the page background color. */
.about-wrap h2 .nav-tab-active, .nav-tab-active, .nav-tab-active:hover { .about-wrap h2 .nav-tab-active, .nav-tab-active, .nav-tab-active:hover {
background-color: #f1f1f1;
border-bottom-color: #f1f1f1; } border-bottom-color: #f1f1f1; }
/* Admin Menu: submenu */ /* Admin Menu: submenu */

File diff suppressed because one or more lines are too long

View File

@ -109,6 +109,7 @@ strong .post-com-count span {
/* Active tabs use a bottom border color that matches the page background color. */ /* Active tabs use a bottom border color that matches the page background color. */
.about-wrap h2 .nav-tab-active, .nav-tab-active, .nav-tab-active:hover { .about-wrap h2 .nav-tab-active, .nav-tab-active, .nav-tab-active:hover {
background-color: #f1f1f1;
border-bottom-color: #f1f1f1; } border-bottom-color: #f1f1f1; }
/* Admin Menu: submenu */ /* Admin Menu: submenu */

File diff suppressed because one or more lines are too long

View File

@ -109,6 +109,7 @@ strong .post-com-count span {
/* Active tabs use a bottom border color that matches the page background color. */ /* Active tabs use a bottom border color that matches the page background color. */
.about-wrap h2 .nav-tab-active, .nav-tab-active, .nav-tab-active:hover { .about-wrap h2 .nav-tab-active, .nav-tab-active, .nav-tab-active:hover {
background-color: #f1f1f1;
border-bottom-color: #f1f1f1; } border-bottom-color: #f1f1f1; }
/* Admin Menu: submenu */ /* Admin Menu: submenu */

File diff suppressed because one or more lines are too long

View File

@ -109,6 +109,7 @@ strong .post-com-count span {
/* Active tabs use a bottom border color that matches the page background color. */ /* Active tabs use a bottom border color that matches the page background color. */
.about-wrap h2 .nav-tab-active, .nav-tab-active, .nav-tab-active:hover { .about-wrap h2 .nav-tab-active, .nav-tab-active, .nav-tab-active:hover {
background-color: #f5f5f5;
border-bottom-color: #f5f5f5; } border-bottom-color: #f5f5f5; }
/* Admin Menu: submenu */ /* Admin Menu: submenu */

File diff suppressed because one or more lines are too long

View File

@ -109,6 +109,7 @@ strong .post-com-count span {
/* Active tabs use a bottom border color that matches the page background color. */ /* Active tabs use a bottom border color that matches the page background color. */
.about-wrap h2 .nav-tab-active, .nav-tab-active, .nav-tab-active:hover { .about-wrap h2 .nav-tab-active, .nav-tab-active, .nav-tab-active:hover {
background-color: #f5f5f5;
border-bottom-color: #f5f5f5; } border-bottom-color: #f5f5f5; }
/* Admin Menu: submenu */ /* Admin Menu: submenu */

File diff suppressed because one or more lines are too long

View File

@ -109,6 +109,7 @@ strong .post-com-count span {
/* Active tabs use a bottom border color that matches the page background color. */ /* Active tabs use a bottom border color that matches the page background color. */
.about-wrap h2 .nav-tab-active, .nav-tab-active, .nav-tab-active:hover { .about-wrap h2 .nav-tab-active, .nav-tab-active, .nav-tab-active:hover {
background-color: #f1f1f1;
border-bottom-color: #f1f1f1; } border-bottom-color: #f1f1f1; }
/* Admin Menu: submenu */ /* Admin Menu: submenu */

File diff suppressed because one or more lines are too long

View File

@ -109,6 +109,7 @@ strong .post-com-count span {
/* Active tabs use a bottom border color that matches the page background color. */ /* Active tabs use a bottom border color that matches the page background color. */
.about-wrap h2 .nav-tab-active, .nav-tab-active, .nav-tab-active:hover { .about-wrap h2 .nav-tab-active, .nav-tab-active, .nav-tab-active:hover {
background-color: #f1f1f1;
border-bottom-color: #f1f1f1; } border-bottom-color: #f1f1f1; }
/* Admin Menu: submenu */ /* Admin Menu: submenu */

File diff suppressed because one or more lines are too long

View File

@ -109,6 +109,7 @@ strong .post-com-count span {
/* Active tabs use a bottom border color that matches the page background color. */ /* Active tabs use a bottom border color that matches the page background color. */
.about-wrap h2 .nav-tab-active, .nav-tab-active, .nav-tab-active:hover { .about-wrap h2 .nav-tab-active, .nav-tab-active, .nav-tab-active:hover {
background-color: #f1f1f1;
border-bottom-color: #f1f1f1; } border-bottom-color: #f1f1f1; }
/* Admin Menu: submenu */ /* Admin Menu: submenu */

File diff suppressed because one or more lines are too long

View File

@ -109,6 +109,7 @@ strong .post-com-count span {
/* Active tabs use a bottom border color that matches the page background color. */ /* Active tabs use a bottom border color that matches the page background color. */
.about-wrap h2 .nav-tab-active, .nav-tab-active, .nav-tab-active:hover { .about-wrap h2 .nav-tab-active, .nav-tab-active, .nav-tab-active:hover {
background-color: #f1f1f1;
border-bottom-color: #f1f1f1; } border-bottom-color: #f1f1f1; }
/* Admin Menu: submenu */ /* Admin Menu: submenu */

File diff suppressed because one or more lines are too long

View File

@ -109,6 +109,7 @@ strong .post-com-count span {
/* Active tabs use a bottom border color that matches the page background color. */ /* Active tabs use a bottom border color that matches the page background color. */
.about-wrap h2 .nav-tab-active, .nav-tab-active, .nav-tab-active:hover { .about-wrap h2 .nav-tab-active, .nav-tab-active, .nav-tab-active:hover {
background-color: #f1f1f1;
border-bottom-color: #f1f1f1; } border-bottom-color: #f1f1f1; }
/* Admin Menu: submenu */ /* Admin Menu: submenu */

File diff suppressed because one or more lines are too long

View File

@ -109,6 +109,7 @@ strong .post-com-count span {
/* Active tabs use a bottom border color that matches the page background color. */ /* Active tabs use a bottom border color that matches the page background color. */
.about-wrap h2 .nav-tab-active, .nav-tab-active, .nav-tab-active:hover { .about-wrap h2 .nav-tab-active, .nav-tab-active, .nav-tab-active:hover {
background-color: #f1f1f1;
border-bottom-color: #f1f1f1; } border-bottom-color: #f1f1f1; }
/* Admin Menu: submenu */ /* Admin Menu: submenu */

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long