About: Second pass at 4.3 about page.

Adds images and videos for major and minor features.
Restores a mangled placeholder in Formatting Shortcuts description.

Assets still need to be moved to the .org CDN once deemed final.

Props ryelle, melchoyce, helen.
See #32929.


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


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

wp-admin/css/about-rtl.css

@@ -236,6 +236,21 @@
 	max-width: 95%;
 }
 
+.about-wrap .feature-section .media-container {
+	border: 1px solid #ddd;
+	overflow: hidden;
+}
+
+.about-wrap .feature-section .svg-container {
+	padding: 50px 0;
+	text-align: center;
+	background-color: #e1e1e3;
+}
+
+.about-wrap .feature-section .svg-container img {
+	max-width: 150px;
+}
+
 .about-wrap .feature-section:not(.under-the-hood) .col {
 	margin-top: 40px;
 }
@@ -367,10 +382,6 @@
 		border-bottom: 1px solid rgba(0, 0, 0, 0.1);
 	}
 
-	.about-wrap .two-col .col h3 {
-		margin-top: 0;
-	}
-
 	.about-wrap .three-col img {
 		display: block;
 		margin: 0 auto;
@@ -423,15 +434,16 @@
 		border-bottom: 1px solid #ccc;
 	}
 
+	.about-wrap .feature-section .svg-container {
+		padding-top: 20px;
+		padding-bottom: 20px;
+	}
+
 	.about-wrap .three-col .col,
 	.about-wrap .headline-feature .feature-section .col {
 		width: 100% !important;
 		float: none !important;
 	}
-
-	.about-wrap .dfw p {
-		max-width: 90%;
-	}
 }
 
 @media only screen and (max-width: 400px) {

wp-admin/css/about.css

@@ -236,6 +236,21 @@
 	max-width: 95%;
 }
 
+.about-wrap .feature-section .media-container {
+	border: 1px solid #ddd;
+	overflow: hidden;
+}
+
+.about-wrap .feature-section .svg-container {
+	padding: 50px 0;
+	text-align: center;
+	background-color: #e1e1e3;
+}
+
+.about-wrap .feature-section .svg-container img {
+	max-width: 150px;
+}
+
 .about-wrap .feature-section:not(.under-the-hood) .col {
 	margin-top: 40px;
 }
@@ -367,10 +382,6 @@
 		border-bottom: 1px solid rgba(0, 0, 0, 0.1);
 	}
 
-	.about-wrap .two-col .col h3 {
-		margin-top: 0;
-	}
-
 	.about-wrap .three-col img {
 		display: block;
 		margin: 0 auto;
@@ -423,15 +434,16 @@
 		border-bottom: 1px solid #ccc;
 	}
 
+	.about-wrap .feature-section .svg-container {
+		padding-top: 20px;
+		padding-bottom: 20px;
+	}
+
 	.about-wrap .three-col .col,
 	.about-wrap .headline-feature .feature-section .col {
 		width: 100% !important;
 		float: none !important;
 	}
-
-	.about-wrap .dfw p {
-		max-width: 90%;
-	}
 }
 
 @media only screen and (max-width: 400px) {