Changeset 49479

Timestamp:

11/02/2020 07:43:36 PM (4 years ago)

Author:

helen

Message:

About: Optimize freedoms sprite and add 2 column layout.

Props garrett-eclipse, ryelle.
Fixes #46363.

Location:

trunk/src/wp-admin

Files:

• css/about.css (modified) (3 diffs)
• images/freedoms-2x.png (deleted)
• images/freedoms.png (added)

trunk/src/wp-admin/css/about.css

@@ -297 +297 @@
     .about__section.has-2-columns.is-wider-right,
     .about__section.has-2-columns.is-wider-left,
-    .about__section.has-3-columns,
-    .about__section.has-4-columns {
+    .about__section.has-3-columns {
         display: block;
         padding-bottom: 16px;
     }
 
-    .about__section.has-3-columns .column:nth-of-type(n),
-    .about__section.has-4-columns .column:nth-of-type(n) {
+    .about__section.has-3-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;
     }
 }
@@ -325 +344 @@
     .about__section.has-2-columns .is-edge-to-edge {
         order: -1;
+    }
+}
+
+@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;
     }
 }
@@ -1114 +1145 @@
 
 .freedoms-php .column .freedoms-image {
-    background-image: url('../images/freedoms-2x.png');
+    background-image: url('../images/freedoms.png');
     background-size: 100%;
     padding-top: 100%;