Updates to the About page:

- Better screenshots
- Align screenshots with the dividers between sections
- Increase body text size
- Add a mention of Twenty Fourteen by name
- i18nalize 'Now with more color'
- Replace ’ with ’

See #26387.


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


git-svn-id: http://core.svn.wordpress.org/trunk@26608 1a063a9b-81f0-0310-95a4-ce76da25c4cd

wp-admin/about.php

@@ -36,8 +36,8 @@ include( ABSPATH . 'wp-admin/admin-header.php' );
 </h2>
 
 <div class="changelog">
-	<h2><?php _e( 'Introducing a new, modern admin design' ); ?></h2>
-	<img src="<?php echo admin_url( 'images/about-overview.png' ); ?>" />
+	<h2 class="about-headline-callout"><?php _e( 'Introducing a new, modern admin design' ); ?></h2>
+	<img class="about-overview-img" src="<?php echo admin_url( 'images/about-overview.png' ); ?>" />
 
 	<div class="feature-section col three-col about-updates">
 		<div class="col-1">
@@ -58,7 +58,7 @@ include( ABSPATH . 'wp-admin/admin-header.php' );
 	</div>
 </div>
 
-<hr />
+<hr>
 
 <!-- Image example -->
 <!-- <img alt="" src="<?php echo admin_url( 'images/about-search-2x.png' ); ?>" /> --> 
@@ -69,21 +69,21 @@ include( ABSPATH . 'wp-admin/admin-header.php' );
 			<h3><?php _e( 'Take WordPress with you anywhere with our responsive design' ); ?></h3>
 			<p><?php _e( 'The WordPress admin is now completely responsive: you can work on your website easily from your smartphone or tablet. The full power of WordPress is at your fingertips, even when you’re on the go.' ); ?></p>
 			<h4><?php _e( 'Naturally HiDPI' ); ?></h4>
-			<p><?php _e( 'No more blurry edges — with the inclusion of vector icons and graphics, the admin is now entirely HiDPI, so you get the best viewing experience no matter what kind of computer or mobile device you use.' ); ?></p>
+			<p><?php _e( 'No more blurry edges &#8212; with the inclusion of vector icons and graphics, the admin is now entirely HiDPI, so you get the best viewing experience no matter what kind of computer or mobile device you use.' ); ?></p>
 		</div>
-		<div class="last-feature">
+		<div class="last-feature about-colors-img">
 			<img src="<?php echo admin_url( 'images/about-colors.png' ); ?>" />
 		</div>
 	</div>
 </div>
 
-<hr />
+<hr class="flushtopdivider">
 
 <div class="changelog about-colors">
 	<div class="feature-section col one-col">
 		<div>
-			<h3>Now with more color</h3>
-			<p><?php _e( 'Your admin is not longer monochromatic — we&rsquo;ve brought some more color to keep it looking fresh. You now have the option of four different default color schemes.' ); ?></p>
+			<h3><?php _e( 'Now with more color' ); ?></h3>
+			<p><?php _e( 'Your admin is not longer monochromatic &#8212; we&#8217;ve brought some more color to keep it looking fresh. You now have the option of four different default color schemes.' ); ?></p>
 			<p><?php _e( 'Try them out below:' ); ?></p>
 			<img src="https://i.cloudup.com/NBlGusRk0H.png" style="border: 2px solid red; max-width: 99%; margin: 0;" />
 			<p><?php _e( 'You can change your color scheme at any time from your profile page.' ); ?></p>
@@ -91,7 +91,7 @@ include( ABSPATH . 'wp-admin/admin-header.php' );
 	</div>
 </div>
 
-<hr />
+<hr>
 
 <div class="changelog">
 	<div class="feature-section col two-col">
@@ -105,28 +105,28 @@ include( ABSPATH . 'wp-admin/admin-header.php' );
 			<h4><?php _e( 'Easier updates' ); ?></h4>
 			<p><?php _e( 'Identify immediately when a theme update is available.' ); ?></p>				
 		</div>
-		<div class="last-feature">
+		<div class="last-feature about-themes-img">
 			<img src="<?php echo admin_url( 'images/about-themes.png' ); ?>" />
 		</div>
 	</div>
 </div>
 
-<hr />
+<hr class="flushtopdivider">
 
 <div class="changelog">
-	<h2><?php _e( 'Sleek New Magazine Theme' ); ?></h2>
+	<h2 class="about-headline-callout"><?php _e( 'Twenty Fourteen, A Sleek New Magazine Theme' ); ?></h2>
 	<img src="<?php echo admin_url( 'images/about-twentyfourteen.png' ); ?>" />
 
 	<div class="feature-section col one-col">
 		<div>
 			<h3><?php _e( 'Our new default theme lets you create a responsive magazine website with an elegant, modern design.' ); ?></h3>
-			<p><?php _e( 'Feature your favorite homepage content in either a grid or a slider. Use the three widget areas to customize your website, and change your content&rsquo;s layout with a full width page template and a contributor page to show of your authors.' ); ?></p>
+			<p><?php _e( 'Feature your favorite homepage content in either a grid or a slider. Use the three widget areas to customize your website, and change your content&#8217;s layout with a full width page template and a contributor page to show of your authors.' ); ?></p>
 			<p><?php _e( 'Creating a magazine website with WordPress has never been easier.' ); ?></p>
 		</div>
 	</div>
 </div>
 
-<hr />
+<hr>
 
 <div class="changelog">
 	<h3><?php _e( 'Under the Hood' ); ?></h3>

wp-admin/css/colors-rtl.css

@@ -1792,12 +1792,10 @@ h2.nav-tab-wrapper, h3.nav-tab-wrapper {
 	border-bottom-color: #eee;
 }
 
-.about-wrap h3 {
-	color: #333;
-}
-
-.about-wrap .feature-section h4 {
-	color: #464646;
+.about-wrap h2,
+.about-wrap h3,
+.about-wrap h4 {
+	color: #222;
 }
 
 .about-wrap .feature-section .col-2:before,

wp-admin/css/colors.css

@@ -1792,12 +1792,10 @@ h2.nav-tab-wrapper, h3.nav-tab-wrapper {
 	border-bottom-color: #eee;
 }
 
-.about-wrap h3 {
-	color: #333;
-}
-
-.about-wrap .feature-section h4 {
-	color: #464646;
+.about-wrap h2,
+.about-wrap h3,
+.about-wrap h4 {
+	color: #222;
 }
 
 .about-wrap .feature-section .col-2:before,

wp-admin/css/wp-admin-rtl.css

@@ -7804,6 +7804,7 @@ body.press-this {
 
 .about-wrap p {
 	line-height: 1.6em;
+	font-size: 14px;
 }
 
 .about-wrap h1 {
@@ -7831,10 +7832,10 @@ body.press-this {
 	font-size: 24px;
 }
 
-.about-wrap .changelog h2 {
+.about-wrap .changelog h2.about-headline-callout {
 	margin: 1.4em 0 0;
-	font-size: 2.1em;
 	line-height: 1.3;
+	font-weight: 600;
 	text-align: center;
 }
 
@@ -7846,6 +7847,7 @@ body.press-this {
 
 .about-wrap .feature-section h4 {
 	margin: 1.4em 0 0.6em 0;
+	font-size: 1.2em;
 }
 
 .about-wrap .feature-section p {
@@ -7857,6 +7859,27 @@ body.press-this {
 	font-size: 14px;
 }
 
+/* 3.8 Images */
+
+.about-wrap .about-colors-img,
+.about-wrap .about-themes-img {
+	bottom: -25px;
+}
+
+.about-wrap .about-overview-img {
+	border-bottom: 1px solid #ddd;
+}
+
+.about-wrap hr.flushtopdivider {
+	margin-top: 0;
+}
+
+.about-colors-img img,
+.about-themes-img img {
+	margin: 0 0;
+	padding: 0;
+	line-height: 1;
+}
 
 /* Point Releases */
 
@@ -7936,11 +7959,14 @@ body.press-this {
 
 .about-wrap .feature-section.two-col div {
 	position: relative;
-	width: 47%;
-	margin-left: 4.999999999%;
+	width: 50%;
 	float: right;
 }
 
+.about-wrap .feature-section.two-col div p {
+	margin-left: 3%;
+}
+
 .about-wrap .feature-section.three-col div {
 	position: relative;
 	width: 30%;

wp-admin/css/wp-admin.css

@@ -7804,6 +7804,7 @@ body.press-this {
 
 .about-wrap p {
 	line-height: 1.6em;
+	font-size: 14px;
 }
 
 .about-wrap h1 {
@@ -7831,10 +7832,10 @@ body.press-this {
 	font-size: 24px;
 }
 
-.about-wrap .changelog h2 {
+.about-wrap .changelog h2.about-headline-callout {
 	margin: 1.4em 0 0;
-	font-size: 2.1em;
 	line-height: 1.3;
+	font-weight: 600;
 	text-align: center;
 }
 
@@ -7846,6 +7847,7 @@ body.press-this {
 
 .about-wrap .feature-section h4 {
 	margin: 1.4em 0 0.6em 0;
+	font-size: 1.2em;
 }
 
 .about-wrap .feature-section p {
@@ -7857,6 +7859,27 @@ body.press-this {
 	font-size: 14px;
 }
 
+/* 3.8 Images */
+
+.about-wrap .about-colors-img,
+.about-wrap .about-themes-img {
+	bottom: -25px;
+}
+
+.about-wrap .about-overview-img {
+	border-bottom: 1px solid #ddd;
+}
+
+.about-wrap hr.flushtopdivider {
+	margin-top: 0;
+}
+
+.about-colors-img img,
+.about-themes-img img {
+	margin: 0 0;
+	padding: 0;
+	line-height: 1;
+}
 
 /* Point Releases */
 
@@ -7936,11 +7959,14 @@ body.press-this {
 
 .about-wrap .feature-section.two-col div {
 	position: relative;
-	width: 47%;
-	margin-right: 4.999999999%;
+	width: 50%;
 	float: left;
 }
 
+.about-wrap .feature-section.two-col div p {
+	margin-right: 3%;
+}
+
 .about-wrap .feature-section.three-col div {
 	position: relative;
 	width: 30%;