About: Optimize freedoms sprite and add 2 column layout.

Props garrett-eclipse, ryelle.
Fixes #46363.

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


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

wp-admin/css/about-rtl.css

@@ -297,17 +297,36 @@
 @media screen and (max-width: 782px) {
 	.about__section.has-2-columns.is-wider-right,
 	.about__section.has-2-columns.is-wider-left,
-	.about__section.has-3-columns,
+	.about__section.has-3-columns {
-	.about__section.has-4-columns {
 		display: block;
 		padding-bottom: 16px;
 	}
 
-	.about__section.has-3-columns .column:nth-of-type(n),
+	.about__section.has-3-columns .column:nth-of-type(n) {
-	.about__section.has-4-columns .column:nth-of-type(n) {
 		padding-top: 16px;
 		padding-bottom: 16px;
 	}
+
+	.about__section.has-4-columns {
+		-ms-grid-columns: (1fr)[2];
+		grid-template-columns: repeat(2, 1fr);
+	}
+
+	.about__section.has-4-columns .column:nth-of-type(2n+1) {
+		-ms-grid-column: 1;
+		grid-column-start: 1;
+	}
+
+	.about__section.has-4-columns .column:nth-of-type(2n) {
+		-ms-grid-column: 2;
+		grid-column-start: 2;
+	}
+
+	.about__section.has-4-columns .column:nth-of-type(4n+3),
+	.about__section.has-4-columns .column:nth-of-type(4n) {
+		-ms-grid-row: 2;
+		grid-row-start: 2;
+	}
 }
 
 @media screen and (max-width: 600px) {
@@ -328,6 +347,18 @@
 	}
 }
 
+@media screen and (max-width: 480px) {
+	.about__section.has-4-columns {
+		display: block;
+		padding-bottom: 16px;
+	}
+
+	.about__section.has-4-columns .column:nth-of-type(n) {
+		padding-top: 16px;
+		padding-bottom: 16px;
+	}
+}
+
 /* 1.2 - Typography & Elements */
 
 .about__container {
@@ -1114,7 +1145,7 @@
 }
 
 .freedoms-php .column .freedoms-image {
-	background-image: url('../images/freedoms-2x.png');
+	background-image: url('../images/freedoms.png');
 	background-size: 100%;
 	padding-top: 100%;
 }

wp-admin/css/about.css

@@ -296,17 +296,36 @@
 @media screen and (max-width: 782px) {
 	.about__section.has-2-columns.is-wider-right,
 	.about__section.has-2-columns.is-wider-left,
-	.about__section.has-3-columns,
+	.about__section.has-3-columns {
-	.about__section.has-4-columns {
 		display: block;
 		padding-bottom: 16px;
 	}
 
-	.about__section.has-3-columns .column:nth-of-type(n),
+	.about__section.has-3-columns .column:nth-of-type(n) {
-	.about__section.has-4-columns .column:nth-of-type(n) {
 		padding-top: 16px;
 		padding-bottom: 16px;
 	}
+
+	.about__section.has-4-columns {
+		-ms-grid-columns: (1fr)[2];
+		grid-template-columns: repeat(2, 1fr);
+	}
+
+	.about__section.has-4-columns .column:nth-of-type(2n+1) {
+		-ms-grid-column: 1;
+		grid-column-start: 1;
+	}
+
+	.about__section.has-4-columns .column:nth-of-type(2n) {
+		-ms-grid-column: 2;
+		grid-column-start: 2;
+	}
+
+	.about__section.has-4-columns .column:nth-of-type(4n+3),
+	.about__section.has-4-columns .column:nth-of-type(4n) {
+		-ms-grid-row: 2;
+		grid-row-start: 2;
+	}
 }
 
 @media screen and (max-width: 600px) {
@@ -327,6 +346,18 @@
 	}
 }
 
+@media screen and (max-width: 480px) {
+	.about__section.has-4-columns {
+		display: block;
+		padding-bottom: 16px;
+	}
+
+	.about__section.has-4-columns .column:nth-of-type(n) {
+		padding-top: 16px;
+		padding-bottom: 16px;
+	}
+}
+
 /* 1.2 - Typography & Elements */
 
 .about__container {
@@ -1113,7 +1144,7 @@
 }
 
 .freedoms-php .column .freedoms-image {
-	background-image: url('../images/freedoms-2x.png');
+	background-image: url('../images/freedoms.png');
 	background-size: 100%;
 	padding-top: 100%;
 }

wp-includes/version.php

@@ -13,7 +13,7 @@
  *
  * @global string $wp_version
  */
-$wp_version = '5.6-beta2-49478';
+$wp_version = '5.6-beta2-49479';
 
 /**
  * Holds the WordPress DB revision, increments when changes are made to the WordPress DB schema.