<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>[28127] trunk/src/wp-admin: About page design, first pass.</title>
</head>
<body>

<style type="text/css"><!--
#msg dl.meta { border: 1px #006 solid; background: #369; padding: 6px; color: #fff; }
#msg dl.meta dt { float: left; width: 6em; font-weight: bold; }
#msg dt:after { content:':';}
#msg dl, #msg dt, #msg ul, #msg li, #header, #footer, #logmsg { font-family: verdana,arial,helvetica,sans-serif; font-size: 10pt;  }
#msg dl a { font-weight: bold}
#msg dl a:link    { color:#fc3; }
#msg dl a:active  { color:#ff0; }
#msg dl a:visited { color:#cc6; }
h3 { font-family: verdana,arial,helvetica,sans-serif; font-size: 10pt; font-weight: bold; }
#msg pre { overflow: auto; background: #ffc; border: 1px #fa0 solid; padding: 6px; }
#logmsg { background: #ffc; border: 1px #fa0 solid; padding: 1em 1em 0 1em; }
#logmsg p, #logmsg pre, #logmsg blockquote { margin: 0 0 1em 0; }
#logmsg p, #logmsg li, #logmsg dt, #logmsg dd { line-height: 14pt; }
#logmsg h1, #logmsg h2, #logmsg h3, #logmsg h4, #logmsg h5, #logmsg h6 { margin: .5em 0; }
#logmsg h1:first-child, #logmsg h2:first-child, #logmsg h3:first-child, #logmsg h4:first-child, #logmsg h5:first-child, #logmsg h6:first-child { margin-top: 0; }
#logmsg ul, #logmsg ol { padding: 0; list-style-position: inside; margin: 0 0 0 1em; }
#logmsg ul { text-indent: -1em; padding-left: 1em; }#logmsg ol { text-indent: -1.5em; padding-left: 1.5em; }
#logmsg > ul, #logmsg > ol { margin: 0 0 1em 0; }
#logmsg pre { background: #eee; padding: 1em; }
#logmsg blockquote { border: 1px solid #fa0; border-left-width: 10px; padding: 1em 1em 0 1em; background: white;}
#logmsg dl { margin: 0; }
#logmsg dt { font-weight: bold; }
#logmsg dd { margin: 0; padding: 0 0 0.5em 0; }
#logmsg dd:before { content:'\00bb';}
#logmsg table { border-spacing: 0px; border-collapse: collapse; border-top: 4px solid #fa0; border-bottom: 1px solid #fa0; background: #fff; }
#logmsg table th { text-align: left; font-weight: normal; padding: 0.2em 0.5em; border-top: 1px dotted #fa0; }
#logmsg table td { text-align: right; border-top: 1px dotted #fa0; padding: 0.2em 0.5em; }
#logmsg table thead th { text-align: center; border-bottom: 1px solid #fa0; }
#logmsg table th.Corner { text-align: left; }
#logmsg hr { border: none 0; border-top: 2px dashed #fa0; height: 1px; }
#header, #footer { color: #fff; background: #636; border: 1px #300 solid; padding: 6px; }
#patch { width: 100%; }
#patch h4 {font-family: verdana,arial,helvetica,sans-serif;font-size:10pt;padding:8px;background:#369;color:#fff;margin:0;}
#patch .propset h4, #patch .binary h4 {margin:0;}
#patch pre {padding:0;line-height:1.2em;margin:0;}
#patch .diff {width:100%;background:#eee;padding: 0 0 10px 0;overflow:auto;}
#patch .propset .diff, #patch .binary .diff  {padding:10px 0;}
#patch span {display:block;padding:0 10px;}
#patch .modfile, #patch .addfile, #patch .delfile, #patch .propset, #patch .binary, #patch .copfile {border:1px solid #ccc;margin:10px 0;}
#patch ins {background:#dfd;text-decoration:none;display:block;padding:0 10px;}
#patch del {background:#fdd;text-decoration:none;display:block;padding:0 10px;}
#patch .lines, .info {color:#888;background:#fff;}
--></style>
<div id="msg">
<dl class="meta">
<dt>Revision</dt> <dd><a href="http://core.trac.wordpress.org/changeset/28127">28127</a></dd>
<dt>Author</dt> <dd>nacin</dd>
<dt>Date</dt> <dd>2014-04-15 01:30:36 +0000 (Tue, 15 Apr 2014)</dd>
</dl>

<h3>Log Message</h3>
<pre>About page design, first pass.

props melchoyce, ryelle.
see <a href="http://core.trac.wordpress.org/ticket/27713">#27713</a>.</pre>

<h3>Modified Paths</h3>
<ul>
<li><a href="#trunksrcwpadminaboutphp">trunk/src/wp-admin/about.php</a></li>
<li><a href="#trunksrcwpadmincssaboutcss">trunk/src/wp-admin/css/about.css</a></li>
<li><a href="#trunksrcwpadmincsscolors_adminscss">trunk/src/wp-admin/css/colors/_admin.scss</a></li>
</ul>

</div>
<div id="patch">
<h3>Diff</h3>
<a id="trunksrcwpadminaboutphp"></a>
<div class="modfile"><h4>Modified: trunk/src/wp-admin/about.php (28126 => 28127)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/src/wp-admin/about.php     2014-04-15 01:15:43 UTC (rev 28126)
+++ trunk/src/wp-admin/about.php        2014-04-15 01:30:36 UTC (rev 28127)
</span><span class="lines">@@ -35,63 +35,66 @@
</span><span class="cx"> 
</span><span class="cx"> <div class="changelog">
</span><span class="cx">  <h2 class="about-headline-callout"><?php echo ( 'A smoother media editing&nbsp;experience' ); ?></h2>
</span><del>-       <img class="about-overview-img" src="<?php echo is_ssl() ? 'https://' : '//s.'; ?>wordpress.org/images/core/3.8/overview.png?1" />
</del><ins>+        <div class="about-overview">
+               <img class="about-overview-img" src="//wordpress.org/images/core/3.9/overview.png?0" />
+       </div>
</ins><span class="cx">   <div class="feature-section col three-col">
</span><span class="cx">          <div class="col-1">
</span><del>-                       <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>
</del><ins>+                        <img src="//wordpress.org/images/core/3.9/editor.jpg?0" />
+                       <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 ( '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>
</ins><span class="cx">           </div>
</span><span class="cx">          <div class="col-2">
</span><ins>+                       <img src="//wordpress.org/images/core/3.9/image.jpg?0" />
</ins><span class="cx">                   <h4><?php echo ( 'Improved image editing' ); ?></h4>
</span><span class="cx">                  <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>
</span><span class="cx">          </div>
</span><span class="cx">          <div class="col-3 last-feature">
</span><ins>+                       <img src="//wordpress.org/images/core/3.9/drop.jpg?0" />
</ins><span class="cx">                   <h4><?php echo ( 'Drag and drop your images' ); ?></h4>
</span><span class="cx">                  <p><?php echo ( 'Grab images from your desktop and drop them directly onto the editor, saving yourself that extra step.' ); ?></p>
</span><span class="cx">          </div>
</span><span class="cx">  </div>
</span><del>-       <div class="feature-section col three-col">
</del><ins>+
+       <hr>
+
+       <div class="feature-section col two-col">
</ins><span class="cx">           <div class="col-1">
</span><del>-                       <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 ( '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>
</del><ins>+                        <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>
</ins><span class="cx">           </div>
</span><del>-               <div class="col-2">
</del><ins>+                <div class="col-2 last-feature">
</ins><span class="cx">                   <h4><?php echo ( 'Do more with audio and video' ); ?></h4>
</span><span class="cx">                  <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>
</span><del>-                       <!-- maybe insert note about playing/editing audio/video from the editor -->
</del><span class="cx">           </div>
</span><del>-               <div class="col-3 last-feature">
-                       <img src="<?php echo is_ssl() ? 'https://' : '//s.'; ?>wordpress.org/images/core/3.8/colors.png?1" />
-                       <!-- embedded playlist? -->
-               </div>
</del><span class="cx">   </div>
</span><span class="cx"> </div>
</span><span class="cx"> 
</span><span class="cx"> <hr>
</span><span class="cx"> 
</span><del>-<div class="changelog">
</del><ins>+<div class="changelog customize">
</ins><span class="cx">   <h3><?php echo ( 'Customize your heart out' ); ?></h3>
</span><span class="cx"> 
</span><span class="cx">  <div class="feature-section col two-col">
</span><span class="cx">          <div>
</span><del>-                       <img src="<?php echo is_ssl() ? 'https://' : '//s.'; ?>wordpress.org/images/core/3.8/twentyfourteen.jpg?1" />
</del><span class="cx">                   <h4><?php echo ( 'Live widget previews' ); ?></h4>
</span><span class="cx">                  <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>
</span><span class="cx">                  <p><?php echo ( 'The improved header image tool also lets you upload, crop, and manage headers while customizing your theme.' ); ?></p>
</span><span class="cx">          </div>
</span><span class="cx">          <div class="last-feature">
</span><del>-                       <img src="<?php echo is_ssl() ? 'https://' : '//s.'; ?>wordpress.org/images/core/3.8/twentyfourteen.jpg?1" />
</del><ins>+                        <img src="//wordpress.org/images/core/3.9/theme.jpg?0" />
</ins><span class="cx">                   <h4><?php _e( 'Stunning new theme browser' ); ?></h4>
</span><span class="cx">                  <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>
</span><del>-                       <p><a href="<?php echo network_admin_url( 'theme-install.php' ); ?>" class="button button-primary">Browse Themes</a></p>
</del><ins>+                        <p><a href="<?php echo network_admin_url( 'theme-install.php' ); ?>" class="button button-large button-primary">Browse Themes</a></p>
</ins><span class="cx">           </div>
</span><span class="cx">  </div>
</span><span class="cx"> </div>
</span><span class="cx"> 
</span><span class="cx"> <hr>
</span><span class="cx"> 
</span><del>-<div class="changelog">
</del><ins>+<div class="changelog under-the-hood">
</ins><span class="cx">   <h3><?php _e( 'Under the Hood' ); ?></h3>
</span><span class="cx"> 
</span><span class="cx">  <div class="feature-section col three-col">
</span></span></pre></div>
<a id="trunksrcwpadmincssaboutcss"></a>
<div class="modfile"><h4>Modified: trunk/src/wp-admin/css/about.css (28126 => 28127)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/src/wp-admin/css/about.css 2014-04-15 01:15:43 UTC (rev 28126)
+++ trunk/src/wp-admin/css/about.css    2014-04-15 01:30:36 UTC (rev 28127)
</span><span class="lines">@@ -23,8 +23,9 @@
</span><span class="cx"> }
</span><span class="cx"> 
</span><span class="cx"> .about-wrap img {
</span><del>-       margin: 0.5em 0 0.5em 5px;
</del><ins>+        margin: 0;
</ins><span class="cx">   max-width: 100%;
</span><ins>+       vertical-align: middle;
</ins><span class="cx"> }
</span><span class="cx"> 
</span><span class="cx"> /* Typography */
</span><span class="lines">@@ -79,6 +80,11 @@
</span><span class="cx">  line-height: 1.5em;
</span><span class="cx"> }
</span><span class="cx"> 
</span><ins>+.customize h3 {
+       margin-top: 1.75em;
+       text-align: center;
+}
+
</ins><span class="cx"> .about-wrap .feature-section h4 {
</span><span class="cx">  margin: 1.4em 0 0.6em 0;
</span><span class="cx">  font-size: 1.2em;
</span><span class="lines">@@ -93,28 +99,19 @@
</span><span class="cx">  font-size: 14px;
</span><span class="cx"> }
</span><span class="cx"> 
</span><del>-/* 3.8 Images */
-
-.about-wrap .about-colors-img {
-       bottom: -25px;
</del><ins>+.about-wrap .button.button-large {
+       padding: 8px 20px 10px !important;
+       height: 46px !important;
+       font-size: 14px;
+       line-height: 28px !important;
</ins><span class="cx"> }
</span><span class="cx"> 
</span><del>-.about-wrap .about-themes-img {
-       bottom: -38px;
-}
</del><ins>+/* 3.8 Images */
</ins><span class="cx"> 
</span><span class="cx"> .about-wrap .about-overview-img {
</span><del>-       border-bottom: 1px solid rgba(0, 0, 0, 0.1);
</del><span class="cx">   margin: 0;
</span><span class="cx"> }
</span><span class="cx"> 
</span><del>-.about-colors-img img,
-.about-themes-img img {
-       margin: 0 0;
-       padding: 0;
-       line-height: 1;
-}
-
</del><span class="cx"> /* Point Releases */
</span><span class="cx"> 
</span><span class="cx"> .about-wrap .point-releases {
</span><span class="lines">@@ -175,26 +172,21 @@
</span><span class="cx"> 
</span><span class="cx"> /* Changelog / Update screen */
</span><span class="cx"> 
</span><ins>+.about-overview {
+       margin-top: 40px;
+       text-align: center;
+       border-bottom: 1px solid rgba(0, 0, 0, 0.1);
+}
+
</ins><span class="cx"> .about-wrap .feature-section {
</span><ins>+       margin-top: 40px;
</ins><span class="cx">   padding-bottom: 20px;
</span><span class="cx"> }
</span><span class="cx"> 
</span><del>-.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%;
-}
-
</del><span class="cx"> .about-wrap .feature-section.two-col > div {
</span><span class="cx">  position: relative;
</span><del>-       width: 50%;
</del><ins>+        width: 47.5%;
+       margin-right: 4.999999999%;
</ins><span class="cx">   float: left;
</span><span class="cx"> }
</span><span class="cx"> 
</span><span class="lines">@@ -209,34 +201,14 @@
</span><span class="cx">  margin-right: 0;
</span><span class="cx"> }
</span><span class="cx"> 
</span><del>-.about-wrap .about-updates img,
-.about-wrap .about-twentyfourteen img {
-       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);
</del><ins>+.about-wrap .under-the-hood .feature-section {
+       margin-top: 0;
</ins><span class="cx"> }
</span><span class="cx"> 
</span><del>-.about-wrap .about-twentyfourteen img {
-       margin-top: 1em;
-}
-
</del><span class="cx"> .about-wrap .changelog .feature-section {
</span><span class="cx">  overflow: hidden;
</span><span class="cx"> }
</span><span class="cx"> 
</span><del>-.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;
-}
-
</del><span class="cx"> .about-wrap .feature-section.two-col div p {
</span><span class="cx">  margin-right: 3%;
</span><span class="cx"> }
</span><span class="lines">@@ -351,15 +323,21 @@
</span><span class="cx"> @media screen and ( max-width: 782px ) {
</span><span class="cx">  .about-wrap .feature-section.one-col > div,
</span><span class="cx">  .about-wrap .feature-section.two-col > div,
</span><del>-       .about-wrap .three-col.about-updates > div  {
</del><ins>+        .about-wrap .feature-section.three-col > div {
</ins><span class="cx">           width: 100%;
</span><del>-               margin: 0;
</del><ins>+                margin: 0 0 40px;
+               padding: 0 0 40px;
</ins><span class="cx">           float: none;
</span><ins>+               border-bottom: 1px solid rgba(0, 0, 0, 0.1);
</ins><span class="cx">   }
</span><span class="cx"> 
</span><del>-       .about-wrap .about-colors .color-option {
-               width: 49%;
</del><ins>+        .about-wrap .under-the-hood .feature-section > div,
+       .about-wrap .feature-section.col > div.last-feature {
+               margin: 0;
+               padding: 0;
+               border-bottom: none;
</ins><span class="cx">   }
</span><ins>+
</ins><span class="cx"> }
</span><span class="cx"> 
</span><span class="cx"> @media only screen and (max-width: 500px) {
</span></span></pre></div>
<a id="trunksrcwpadmincsscolors_adminscss"></a>
<div class="modfile"><h4>Modified: trunk/src/wp-admin/css/colors/_admin.scss (28126 => 28127)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/src/wp-admin/css/colors/_admin.scss        2014-04-15 01:15:43 UTC (rev 28126)
+++ trunk/src/wp-admin/css/colors/_admin.scss   2014-04-15 01:30:36 UTC (rev 28127)
</span><span class="lines">@@ -150,6 +150,7 @@
</span><span class="cx"> .about-wrap h2 .nav-tab-active,
</span><span class="cx"> .nav-tab-active,
</span><span class="cx"> .nav-tab-active:hover {
</span><ins>+       background-color: $body-background;
</ins><span class="cx">   border-bottom-color: $body-background;
</span><span class="cx"> }
</span><span class="cx"> 
</span></span></pre>
</div>
</div>

</body>
</html>