About page design, first pass.

props melchoyce, ryelle.
see #27713.


git-svn-id: https://develop.svn.wordpress.org/trunk@28127 602fd350-edb4-49c9-b593-d223f7449a82

src/wp-admin/css/about.css

@@ -23,8 +23,9 @@
 }
 
 .about-wrap img {
-	margin: 0.5em 0 0.5em 5px;
+	margin: 0;
 	max-width: 100%;
+	vertical-align: middle;
 }
 
 /* Typography */
@@ -79,6 +80,11 @@
 	line-height: 1.5em;
 }
 
+.customize h3 {
+	margin-top: 1.75em;
+	text-align: center;
+}
+
 .about-wrap .feature-section h4 {
 	margin: 1.4em 0 0.6em 0;
 	font-size: 1.2em;
@@ -93,28 +99,19 @@
 	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 */
 
-.about-wrap .about-colors-img {
-	bottom: -25px;
-}
-
-.about-wrap .about-themes-img {
-	bottom: -38px;
-}
-
 .about-wrap .about-overview-img {
-	border-bottom: 1px solid rgba(0, 0, 0, 0.1);
 	margin: 0;
 }
 
-.about-colors-img img,
-.about-themes-img img {
-	margin: 0 0;
-	padding: 0;
-	line-height: 1;
-}
-
 /* Point Releases */
 
 .about-wrap .point-releases {
@@ -175,26 +172,21 @@
 
 /* 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 {
+	margin-top: 40px;
 	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 {
 	position: relative;
-	width: 50%;
+	width: 47.5%;
+	margin-right: 4.999999999%;
 	float: left;
 }
 
@@ -209,34 +201,14 @@
 	margin-right: 0;
 }
 
-.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);
-}
-
-.about-wrap .about-twentyfourteen img {
-	margin-top: 1em;
+.about-wrap .under-the-hood .feature-section {
+	margin-top: 0;
 }
 
 .about-wrap .changelog .feature-section {
 	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 {
 	margin-right: 3%;
 }
@@ -351,15 +323,21 @@
 @media screen and ( max-width: 782px ) {
 	.about-wrap .feature-section.one-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%;
-		margin: 0;
+		margin: 0 0 40px;
+		padding: 0 0 40px;
 		float: none;
+		border-bottom: 1px solid rgba(0, 0, 0, 0.1);
 	}
 
-	.about-wrap .about-colors .color-option {
-		width: 49%;
+	.about-wrap .under-the-hood .feature-section > div,
+	.about-wrap .feature-section.col > div.last-feature {
+		margin: 0;
+		padding: 0;
+		border-bottom: none;
 	}
+
 }
 
 @media only screen and (max-width: 500px) {

src/wp-admin/css/colors/_admin.scss

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