Simpler layout for the about screen (still needs text), props chexee, see #20423

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

wp-admin/css/wp-admin.dev.css

@@ -4948,11 +4948,11 @@ input.button-highlighted,
 .about-wrap {
 	position: relative;
 	margin: 25px 40px 0 20px;
-	min-width: 770px;
 	max-width: 1050px; /* readability */
 
 	font-size: 15px;
 }
+
 .about-wrap div.updated,
 .about-wrap div.error {
 	display: none !important;
@@ -4963,12 +4963,14 @@ input.button-highlighted,
 .about-wrap p {
 	line-height: 1.6em;
 }
+
 .about-wrap h1 {
 	margin: 0.2em 200px 0 0;
 	line-height: 1.2em;
 	font-size: 2.8em;
 	font-weight: 200;
 }
+
 .about-text,
 .about-description,
 .about-wrap li.wp-person a.web {
@@ -4977,14 +4979,17 @@ input.button-highlighted,
 	line-height: 1.6em;
 	font-size: 20px;
 }
+
 .about-description {
 	margin-top: 1.4em;
 }
+
 .about-text {
 	margin: 1em 200px 1.4em 0;
 	min-height: 60px;
 	font-size: 24px;
 }
+
 .about-wrap h3 {
 	font-size: 24px;
 	margin-bottom: 1em;
@@ -4992,34 +4997,40 @@ input.button-highlighted,
 }
 
 .about-wrap .changelog {
-	padding-bottom: 10px;
 	overflow: hidden;
 }
+
 .about-wrap .changelog li {
 	list-style-type: disc;
 	margin-left: 3em;
 }
+
+.about-wrap .feature-section {
+	padding-bottom: 20px;
+}
+
 .about-wrap .feature-section h4 {
 	margin-bottom: 0.6em;
 }
+
 .about-wrap .feature-section p {
 	margin-top: 0.6em;
 }
+
 .about-wrap code {
 	font-size: 14px;
 }
-html.ie8 .about-wrap img.element-screenshot {
-	padding: 2px;
-}
 
 /* Point Releases */
 
 .about-wrap .point-releases {
 	margin-top: 5px;
 }
+
 .about-wrap .changelog.point-releases h3 {
 	padding-top: 35px;
 }
+
 .about-wrap .changelog.point-releases h3:first-child {
 	padding-top: 7px;
 }
@@ -5030,13 +5041,10 @@ html.ie8 .about-wrap img.element-screenshot {
 	padding-top: 142px;
 	height: 50px;
 	width: 173px;
-
 	font-weight: bold;
 	font-size: 14px;
 	text-align: center;
-
 	margin: 0 -5px;
-
 	background: url('../images/wp-badge.png?ver=20111120') no-repeat;
 }
 
@@ -5051,12 +5059,14 @@ html.ie8 .about-wrap img.element-screenshot {
 .about-wrap h2.nav-tab-wrapper {
 	padding-left: 6px;
 }
+
 .about-wrap h2 .nav-tab {
 	padding: 4px 10px 6px;
 	margin: 0 3px -1px 0;
 	font-size: 18px;
 	vertical-align: top;
 }
+
 .about-wrap h2 .nav-tab-active {
 	font-weight: bold;
 	padding-top: 3px;
@@ -5064,128 +5074,70 @@ html.ie8 .about-wrap img.element-screenshot {
 
 /* Changelog / Update screen */
 
-.about-wrap .feature-section .left-feature,
-.about-wrap .feature-section img,
-.about-wrap .feature-section .right-feature {
-	float: left;
-}
-
-.about-wrap .feature-section {
-	min-height: 100px;
-	overflow: hidden;
-	clear: both;
-}
 .about-wrap .feature-section img {
-	margin: 5px auto;
-
 	border: none;
-
+	margin: 0 0.7% 10px 0;
 	-webkit-border-radius: 3px;
 	border-radius: 3px;
 }
-html.ie8 .about-wrap .feature-section img,
-html.ie8 .about-wrap .feature-section .image-mask {
+
+.about-wrap .feature-section img.image-50 {
+	max-width: 50%;
+}
+
+.about-wrap .feature-section img.image-30 {
+	max-width: 32%;
+}
+
+.ie8 .about-wrap .feature-section img {
 	border-width: 1px;
 	border-style: solid;
 }
 
-.about-wrap .feature-section.text-features {
-	width: 31%;
-
-	float: left;
-	overflow: visible;
-}
-.about-wrap .feature-section.text-features div {
-	width: 112%;
-}
-.about-wrap .feature-section.screenshot-features {
-	width: 67%;
-	margin-top: 1.33em;
-
-	float: right;
-	clear: none;
-	overflow: visible;
-}
-
-.about-wrap .feature-section.screenshot-features .angled-right {
-	margin-top: -1em;
-	margin-left: 2.5em;
-}
-.about-wrap .feature-section.screenshot-features .angled-right p {
-	margin-left: 290px;
-}
-
-.about-wrap .feature-section .angled-right h4,
-.about-wrap .feature-section .angled-left h4 {
-	margin-top: 0;
-}
-.about-wrap .feature-section .angled-right img,
-.about-wrap .feature-section .angled-left img {
-	margin-top: .1em;
-	margin-right: 30px;
-}
-
 .about-wrap .feature-section.three-col {
 	padding-top: 15px;
 	margin-bottom: 0;
 }
+
 .about-wrap .feature-section.three-col div {
 	width: 30%;
 	margin-right: 4.999999999%;
-
 	float: left;
 }
+
 .about-wrap .feature-section.three-col h4 {
 	margin:  0 0 0.6em 0;
 }
+
 .about-wrap .feature-section.three-col img {
 	margin: 0.5em 0 0.5em 5px;
 	max-width: 100%;
-
 	float: none;
 }
-html.ie8 .about-wrap .feature-section.three-col img {
+
+.ie8 .about-wrap .feature-section.three-col img {
 	margin-left: 0;
 }
+
 .about-wrap .feature-section.three-col .last-feature {
 	margin-right: 0;
 }
 
-.about-wrap .feature-section .feature-images {
-	width: 300px;
-	position: absolute;
-	margin-top: 1.1em;
-}
-.about-wrap .feature-section .feature-images img {
-	width: 250px;
-	height: 150px;
-	margin-right: 5px;
-}
-.about-wrap .feature-section.images-stagger-left,
-.about-wrap .feature-section.images-stagger-right {
-	min-height: 265px;
-}
-.about-wrap .feature-section.images-stagger-right .angled-right,
-.about-wrap .feature-section.images-stagger-left .angled-left {
-	margin-bottom: -30px;
-}
-.about-wrap .feature-section.images-stagger-left .angled-left {
-	margin-left: 5px;
-}
-.about-wrap .feature-section .angled-right {
+.about-wrap .feature-section.images-stagger-right img {
 	float: right;
+	margin: 0 5px 12px 12px;
 }
-.about-wrap .feature-section.images-stagger-right .feature-images {
-	right: 0;
+
+.about-wrap .feature-section.images-stagger-left img {
+	float: left;
+	margin: 0 12px 12px 5px;
 }
-.about-wrap .feature-section.images-stagger-left .feature-images {
-	left: 0;
-}
-.about-wrap .feature-section.images-stagger-right .left-feature {
-	margin-right: 350px;
-}
-.about-wrap .feature-section.images-stagger-left .right-feature {
-	margin-left: 350px;
+
+@media only screen and (max-width: 900px) {
+	.about-wrap .feature-section.images-stagger-left img,
+	.about-wrap .feature-section.images-stagger-right img {
+		clear: both;
+	}
 }
 
 /* Return to Dashboard Home link */
@@ -5195,6 +5147,7 @@ html.ie8 .about-wrap .feature-section.three-col img {
 	font-size: 14px;
 	font-weight: bold;
 }
+
 .about-wrap .return-to-dashboard a {
 	text-decoration: none;
 	padding: 0 5px;
@@ -5206,18 +5159,22 @@ html.ie8 .about-wrap .feature-section.three-col img {
 	margin-top: 2.6em;
 	font-size: 16px;
 }
+
 .about-wrap ul.wp-people-group {
 	overflow: hidden;
 	padding: 5px;
 	margin: 0 -15px 0 -5px;
 }
+
 .about-wrap ul.compact {
 	margin-bottom: 0
 }
+
 .about-wrap li.wp-person {
 	float: left;
 	margin-right: 10px;
 }
+
 .about-wrap li.wp-person img.gravatar {
 	float: left;
 	margin: 0 10px 10px 0;
@@ -5225,30 +5182,36 @@ html.ie8 .about-wrap .feature-section.three-col img {
 	width: 60px;
 	height: 60px;
 }
+
 .about-wrap ul.compact li.wp-person img.gravatar {
 	width: 30px;
 	height: 30px;
 }
+
 .about-wrap li.wp-person {
 	height: 70px;
 	width: 280px;
 	padding-bottom: 15px;
 }
+
 .about-wrap ul.compact li.wp-person {
 	height: auto;
 	width: 180px;
 	padding-bottom: 0;
 	margin-bottom: 0;
 }
+
 .about-wrap #wp-people-group-validators + p.wp-credits-list {
 	margin-top: 0;
 }
+
 .about-wrap li.wp-person a.web {
 	display: block;
 	margin: 6px 0 2px;
 	font-size: 16px;
 	text-decoration: none;
 }
+
 .about-wrap p.wp-credits-list a {
 	white-space: nowrap;
 }
@@ -5258,10 +5221,12 @@ html.ie8 .about-wrap .feature-section.three-col img {
 .freedoms-php .about-wrap ol {
 	margin: 40px 60px;
 }
+
 .freedoms-php .about-wrap ol li {
 	list-style-type: decimal;
 	font-weight: bold;
 }
+
 .freedoms-php .about-wrap ol p {
 	font-weight: normal;
 	margin: 0.6em 0;