Ticket #19386: 19386.staggered-semifluid.2.diff

Index: wp-admin/css/wp-admin-rtl.dev.css
===================================================================
--- wp-admin/css/wp-admin-rtl.dev.css   (revision 19487)
+++ wp-admin/css/wp-admin-rtl.dev.css   (working copy)
@@ -1382,27 +1382,28 @@
        margin-right: 9%;
 }
 
-.about-wrap .feature-section.angled-left .left-feature,
-.about-wrap .feature-section.angled-right .left-feature {
-       margin-right: 0;
-       margin-left: 3%;
+.about-wrap .feature-section.left-third {
+       float: right;
 }
-
-.about-wrap .feature-section.angled-left .right-feature,
-.about-wrap .feature-section.angled-right .right-feature {
+.about-wrap .feature-section.right-two-thirds {
+       float: left;
+}
+.about-wrap .feature-section.right-two-thirds .angled-right {
        margin-left: 0;
-       margin-right: 4%;
+       margin-right: 2.5em;
 }
 
+.about-wrap .feature-section .angled-right img,
+.about-wrap .feature-section .angled-left img {
+       margin-right: 0;
+       margin-left: 2em;
+}
+
 .about-wrap .feature-section.images-stagger-right .angled-left,
 .about-wrap .feature-section.images-stagger-left .angled-left {
        float: left;
 }
 
-.about-wrap .feature-section.three-col img {
-       margin: 0.5em 0 1em 0;
-}
-
 .about-wrap li.wp-person,
 .about-wrap li.wp-person img.gravatar {
        float: right;
Index: wp-admin/css/wp-admin.dev.css
===================================================================
--- wp-admin/css/wp-admin.dev.css       (revision 19487)
+++ wp-admin/css/wp-admin.dev.css       (working copy)
@@ -4828,7 +4828,8 @@
 .about-wrap {
        position: relative;
        margin: 25px 40px 0 20px;
-       width: 770px;
+       min-width: 770px;
+       max-width: 1200px; /* readability */
        
        font-size: 15px;
 }
@@ -4918,6 +4919,7 @@
        padding: 4px 10px 6px;
        margin: 0 3px -1px 0;
        font-size: 18px;
+       vertical-align: top;
 }
 .about-wrap h2 .nav-tab-active {
        font-weight: bold;
@@ -4946,40 +4948,33 @@
        border-radius: 3px;
 }
 
-.about-wrap .feature-section.angled-right {
-       margin-top: -10.5em;
+.about-wrap .feature-section.left-third {
+       width: 31%;
+       float: left;
+       overflow: visible;
 }
-.about-wrap .feature-section.angled-right .left-feature {
-       padding-top: 9.5em;
+.about-wrap .feature-section.left-third div {
+       width: 112%;
 }
-.about-wrap .feature-section.angled-right img,
-.about-wrap .feature-section.angled-left img {
-       margin-top: 1.5em;
-}
-
-.about-wrap .feature-section.angled-left .left-feature,
-.about-wrap .feature-section.angled-right .left-feature {
-       margin-right: 3%;
-}
-.about-wrap .feature-section.angled-left .right-feature,
-.about-wrap .feature-section.angled-right .right-feature {
-       margin-left: 3%;
-}
-.about-wrap .feature-section .left-feature {
-       margin-right: 5%;
-}
-.about-wrap .feature-section .right-feature {
-       margin-left: 5%;
+.about-wrap .feature-section.right-two-thirds {
+       width: 67%;
+       margin-top: 1.33em;
        float: right;
+       clear: none;
 }
+.about-wrap .feature-section.right-two-thirds .angled-right {
+       margin-top: -1em;
+       margin-left: 2.5em;
+}
 
-.about-wrap .feature-section.angled-left .left-feature,
-.about-wrap .feature-section.angled-right .right-feature {
-       width: 27%;
+.about-wrap .feature-section .angled-right h4,
+.about-wrap .feature-section .angled-left h4 {
+       margin-top: 0;
 }
-.about-wrap .feature-section.angled-left .right-feature,
-.about-wrap .feature-section.angled-right .left-feature {
-       width: 32%;
+.about-wrap .feature-section .angled-right img,
+.about-wrap .feature-section .angled-left img {
+       margin-top: .1em;
+       margin-right: 2em;
 }
 
 .about-wrap .feature-section.three-col {
@@ -4996,7 +4991,8 @@
        margin:  0 0 0.6em 0;
 }
 .about-wrap .feature-section.three-col img {
-       margin: 0.5em 3px 1em 0;
+       float: none;
+       margin: 0.5em 0;
        max-width: 100%;
 }
 .about-wrap .feature-section.three-col .last-feature {
Index: wp-admin/about.php
===================================================================
--- wp-admin/about.php  (revision 19487)
+++ wp-admin/about.php  (working copy)
@@ -57,25 +57,24 @@
 <div class="changelog">
        <h3><?php _e( 'Dashboard Design' ); ?></h3>
        
-       <div class="feature-section angled-left">
-               <div class="left-feature">
-                       <h4><?php _e( 'Flyout Menus' ); ?></h4>
-                       <p><?php _e( 'Speed up navigating the dashboard and reduce repetitive clicking with our new flyout submenus. As you hover over each main menu item in your dashboard navigation, the submenus will magically appear, providing single-click access to any dashboard screen.' ); ?></p>
+       <div class="feature-section left-third">
+               <h4><?php _e( 'Flyout Menus' ); ?></h4>
+               <p><?php _e( 'Speed up navigating the dashboard and reduce repetitive clicking with our new flyout submenus. As you hover over each main menu item in your dashboard navigation, the submenus will magically appear, providing single-click access to any dashboard screen.' ); ?></p>
+               
+               <div>
+               <h4><?php _e( 'Header + Admin Bar = Toolbar' ); ?></h4>
+               <p><?php _e( 'To save space and increase efficiency, we&#8217;ve combined the admin bar and the old Dashboard header into one persistent toolbar. Hovering over the toolbar items will reveal submenus when available for quick access. ' ); ?></p>
                </div>
-               <img src="images/screenshots/admin-flyouts.png" />
-               <div class="right-feature">
+       </div>
+       
+       <div class="feature-section right-two-thirds">
+               <div class="angled-left">
+                       <img src="images/screenshots/admin-flyouts.png" />
                        <h4><?php _e( 'Responsive Design' ); ?></h4>
                        <p><?php _e( 'Certain dashboard screens have been updated to look better at various sizes, including improved iPad/tablet support.' ); ?></p>
                </div>
-       </div>
-       
-       <div class="feature-section angled-right">
-               <div class="left-feature">
-                       <h4><?php _e( 'Header + Admin Bar = Toolbar' ); ?></h4>
-                       <p><?php _e( 'To save space and increase efficiency, we&#8217;ve combined the admin bar and the old Dashboard header into one persistent toolbar. Hovering over the toolbar items will reveal submenus when available for quick access. ' ); ?></p>
-               </div>
-               <img src="images/screenshots/help-screen.png" />
-               <div class="right-feature">
+               <div class="angled-right">
+                       <img src="images/screenshots/help-screen.png" />
                        <h4><?php _e( 'Help Tabs' ); ?></h4>
                        <p><?php _e( 'The Help tabs located in the upper corner of the dashboard screens below your name have gotten a facelift. Help content is broken into smaller sections for easier access, with links to relevant documentation and the support forums always visible.' ); ?></p>
                </div>