Changeset 42161

Timestamp:

11/13/2017 05:47:05 AM (7 years ago)

Author:

westonruter

Message:

About: Add vertical alignment for developer happiness sections.

Also run CSS autoprefixer to add -ms- prefixes for CSS grid identifiers for IE11.

Props Presskopp.
Amends [42121].
See #42087.
Fixes #42524 for trunk.

File:

• trunk/src/wp-admin/css/about.css (modified) (8 diffs)

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

@@ -173 +173 @@
     -webkit-box-pack: justify;
     justify-content: space-between;
-    -webkit-box-align: center;
-    align-items: center;
     flex-wrap: wrap;
 }
@@ -358 +356 @@
 
 .about-wrap .floating-header-section {
+    display: -ms-grid;
     display: grid;
     grid-gap: 0 60px;
+    -ms-grid-columns: 5fr 11fr;
     grid-template-columns: 5fr 11fr;
     max-width: 1020px;
@@ -366 +366 @@
 
 .about-wrap .floating-header-section h2 {
+    -ms-grid-column: 1;
     grid-column: 1;
     text-align: left;
@@ -377 +378 @@
 
 .about-wrap .floating-header-section .section-content {
+    display: -ms-grid;
     display: grid;
     grid-gap: 60px;
+    -ms-grid-columns: 5fr 5fr;
     grid-template-columns: 5fr 5fr;
+    -ms-grid-column: 2;
     grid-column: 2;
 }
 
 .about-wrap .floating-header-section .section-item:nth-of-type(odd) {
+    -ms-grid-column: 1;
     grid-column: 1;
 }
 
 .about-wrap .floating-header-section .section-item:nth-of-type(even) {
+    -ms-grid-column: 2;
     grid-column: 2;
 }
@@ -499 +505 @@
 
     .about-wrap .floating-header-section {
+        -ms-grid-columns: 1fr;
         grid-template-columns: 1fr;
         grid-gap: 60px 0;
@@ -505 +512 @@
     .about-wrap .floating-header-section h2,
     .about-wrap .floating-header-section .section-content {
+        -ms-grid-column: 1;
         grid-column: 1;
     }
@@ -562 +570 @@
 
     .about-wrap .floating-header-section .section-content {
+        -ms-grid-columns: 1fr;
         grid-template-columns: 1fr;
         grid-gap: 60px 0;
@@ -567 +576 @@
 
     .about-wrap .floating-header-section .section-content .section-item {
+        -ms-grid-column: 1;
         grid-column: 1;
     }