Admin: Update the About page design to match mockups.

This commit also moves the images to s.w.org, removes the old "Gutenberg has been deactivated" warning, as well as removing some old JS from About pages of years gone past.

Props melchoyce, ryelle, paaljoachim, karmatosed, pento.
Fixes #46161.


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


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

wp-admin/css/about-rtl.css

@@ -149,6 +149,11 @@
 	line-height: 1.5;
 }
 
+.about-wrap .under-the-hood-header {
+	margin: 40px 0 0;
+	text-align: center;
+}
+
 .about-wrap h4 {
 	color: #23282d;
 }
@@ -187,11 +192,20 @@
 	flex-wrap: wrap;
 }
 
-.about-wrap .feature-section.one-col {
+.about-wrap .one-col {
 	margin: 0 auto;
 	max-width: 680px;
 }
 
+.about-wrap .one-col.is-wide {
+	max-width: 760px;
+}
+
+.about-wrap .under-the-hood {
+	margin: auto;
+	max-width: 1020px;
+}
+
 .about-wrap .inline-svg img {
 	max-width: 100%;
 	width: 100%;
@@ -202,44 +216,31 @@
 	margin-bottom: 120px;
 }
 
+.about-wrap .under-the-hood .inline-svg {
+	margin-right: 100px;
+}
+
 .about-wrap [class$="-col"] .col {
 	flex: 1;
-}
-
-.about-wrap .two-col .col {
-	min-width: 47%;
-	max-width: 47%;
-}
-
-.about-wrap .three-col,
-.about-wrap .four-col {
-	margin: auto;
-	max-width: 1020px;
-}
-
-.about-wrap .three-col .col {
 	align-self: flex-start;
-	min-width: 31%;
-	max-width: 31%;
 }
 
-.about-wrap .four-col .col {
-	align-self: flex-start;
-	min-width: 23%;
-	max-width: 23%;
+.about-wrap [class$="-col"] .col + .col {
+	margin-right: 20px;
 }
 
-.about-wrap .feature-section.eight-col .col {
-	align-self: flex-start;
-	margin-top: 6px;
-	min-width: 12%;
-	max-width: 12%;
+.about-wrap [class$="-col"] .is-span-two {
+	flex: 2;
 }
 
 .about-wrap .one-col img {
 	margin: 1em 0 2em;
 }
 
+.about-wrap .one-col .alignright img {
+	margin-top: 0;
+}
+
 .about-wrap .two-col img {
 	margin-bottom: 1.5em;
 }
@@ -256,14 +257,24 @@
 	margin: 1.5em auto;
 }
 
+.about-wrap .inline-svg.alignright {
+	margin-right: 80px;
+}
+
 .about-wrap .cta {
 	text-align: center;
 }
+
 .about-wrap .cta .button {
 	margin: 0 auto 5px;
 	font-weight: 600;
 }
 
+.about-wrap .feature-section .button {
+	margin-top: 1.5em;
+	font-weight: 600;
+}
+
 /* 1.3 - Point Releases */
 
 .about-wrap .point-releases {
@@ -285,6 +296,10 @@
 
 /* 2.1 - Typography */
 
+.about-wrap .feature-section-header {
+	margin: 50px 0 0;
+}
+
 .about-wrap .feature-section.two-col h3 {
 	margin-top: 0;
 }
@@ -323,22 +338,8 @@
 
 /* 2.2 - Structure */
 
-.about-wrap .headline-feature.feature-video {
-	position: relative;
-	margin: 40px 0;
-	padding-bottom: 56.25%;
-	width: 100%;
-	max-width: 100%;
-	height: 0;
-	text-align: center;
-}
-
-.about-wrap .feature-video embed {
-	position: absolute;
-	top: 0;
-	right: 0;
-	width: 100%;
-	height: 100%;
+.about-wrap .headline-feature {
+	margin-bottom: 40px;
 }
 
 .about-wrap .featured-image {
@@ -500,32 +501,22 @@
   4.0 - Media Queries
 ------------------------------------------------------------------------------*/
 
-@media screen and (max-width: 1250px) {
-	.about-wrap .floating-header-section.has-long-title .section-item:nth-child(1),
-	.about-wrap .floating-header-section.has-long-title .section-item:nth-child(2) {
-		margin: 0 0 60px;
-	}
-
-	.about-wrap .floating-header-section.has-long-title .section-item:nth-child(3),
-	.about-wrap .floating-header-section.has-long-title .section-item:nth-child(4) {
-		margin: 0;
-	}
-
-	.about-wrap .floating-header-section.has-long-title .section-item:nth-child(2),
-	.about-wrap .floating-header-section.has-long-title .section-item:nth-child(4) {
-		margin-right: 60px;
-	}
-}
-
 @media screen and (max-width: 782px) {
 	.about-wrap .two-col-text {
 		column-count: 1;
 	}
 
+	.about-wrap .one-col .alignright {
+		margin-right: 20px;
+		max-width: 150px;
+	}
+
 	.about-wrap .two-col .col,
 	.about-wrap .three-col .col,
 	.about-wrap .four-col .col {
 		min-width: 48% !important;
+		max-width: 48% !important;
+		margin-right: 0 !important;
 	}
 
 	.about-wrap .eight-col .col {
@@ -549,18 +540,8 @@
 		text-shadow: none;
 	}
 
-	.about-wrap .floating-header-section {
-		display: block;
-	}
-
-	.about-wrap .floating-header-section .section-header,
-	.about-wrap .floating-header-section .section-content {
-		max-width: 100%;
-	}
-
-	.about-wrap .floating-header-section h2 {
-		position: static;
-		margin-bottom: 60px;
+	.about-wrap .under-the-hood .inline-svg {
+		margin-right: 40px;
 	}
 }
 
@@ -585,6 +566,10 @@
 		width: 100%;
 	}
 
+	.about-wrap .one-col .alignright {
+		max-width: 120px;
+	}
+
 	.about-wrap .feature-section .col {
 		margin-top: 1em;
 	}
@@ -616,24 +601,21 @@
 		margin-top: 1.25em;
 	}
 
-	.about-wrap .floating-header-section {
-		margin-bottom: 60px;
-		grid-gap: 30px 0;
+	.about-wrap .under-the-hood .inline-svg {
+		display: none;
 	}
 
 	.about-wrap .inline-svg.full-width {
 		margin-bottom: 60px;
 	}
+}
 
-	.about-wrap .floating-header-section h2 {
-		word-break: break-all;
-		-webkit-hyphens: auto;
-		-ms-hyphens: auto;
-		hyphens: auto;
+@media only screen and (max-width: 320px) {
+	.about-wrap .one-col .alignright {
+		float: none;
+		margin: 0 auto;
 	}
-
-	.about-wrap .floating-header-section .section-content .section-item {
-		max-width: 100%;
-		margin: 0 0 60px;
+	.about-wrap .one-col .alignright img {
+		margin: 0 0 1em;
 	}
 }