Changeset 1469

Timestamp:

04/03/2015 04:27:27 PM (10 years ago)

Author:

coffee2code

Message:

wp4.css: Responsive enhancements and add responsive styling for selected w.org pages (/about/*, /news).

• Remove page-specific class qualifiers (e.g. '.wporg-page-download') for rules that can be applied more broadly.
• Rework some rules to properly apply without page-specific class qualifiers.
• Add some responsive handling for some markup unique to certain /about/* and /news pages.

File:

• sites/trunk/wordpress.org/public_html/style/wp4.css (modified) (9 diffs)

sites/trunk/wordpress.org/public_html/style/wp4.css

@@ -1373 +1373 @@
 #books p, #otherbooks p {
     padding-right: 22px;
+    padding-left: 22px;
     margin-bottom: 7px;
     line-height: 1.4em;
@@ -1406 +1407 @@
     margin: 32px 0;
     overflow: auto;
-    width: 670px;
+    /*width: 670px;*/
 }
 
@@ -1838 +1839 @@
 }
 
-.wporg-responsive.wporg-page-download .col-7, body.wporg-responsive.wporg-page-parent-download .col-8 {
-    margin-left: 160px;
-}
-.wporg-responsive.wporg-page-download .col-2, body.wporg-responsive.wporg-page-parent-download .col-2 {
+.wporg-responsive .col-7,
+body.wporg-responsive .col-8,
+body.wporg-responsive .col-10 {
+    margin-left: 174px;
+}
+body.wporg-responsive .col-2 {
     position: absolute;
 }
 
+.wporg-responsive .col-10 .col-5 {
+    width: 50%;
+    box-sizing: border-box;
+    padding-right: 14px;
+}
+.wporg-responsive .col-10 .col-5:last-child {
+    padding-right: 0;
+    padding-left: 14px;
+}
+.wporg-responsive.wporg-page-parent-about .col-7,
+.wporg-responsive.wporg-page-parent-about .col-8,
+.wporg-responsive.wporg-page-parent-about .col-10 {
+    min-height: 550px;
+}
+
+.wporg-responsive.wporg-page-about-logos h3.graphics img {
+    float: right;
+    margin-top: -40px;
+    margin-left: 40px;
+}
+.wporg-responsive.wporg-page-about-logos .all-logos ul.logo li {
+    min-height: 39px;
+}
+.wporg-responsive.wporg-page-about-logos .all-logos ul.logo li.img {
+    min-height: 150px;
+}
+.wporg-responsive.wporg-page-about-logos ul.logo li.img {
+    line-height: 0;
+    text-align: center;
+}
 @media screen and (max-width: 974px) { 
     body.wporg-responsive #pagebody .wrapper {
@@ -1855 +1888 @@
     body.wporg-responsive .col-3,
     body.wporg-responsive .col-7,
+    body.wporg-responsive .col-8,
+    body.wporg-responsive .col-9,
     body.wporg-responsive .col-10,
     body.wporg-responsive .col-12 {
         width: inherit;
         float: none;
-    }
-
-    body.wporg-responsive.wporg-page-parent-download .col-2 {
+        word-wrap: break-word;
+    }
+
+    body.wporg-responsive .col-2 {
         position: inherit;
         width: 100%;
     }
 
-    body.wporg-responsive.wporg-page-parent-download .col-8 {
+    body.wporg-responsive .col-8,
+    body.wporg-responsive .col-9,
+    body.wporg-responsive .col-10 {
         margin-left: 14px;
         margin-right: 14px;
-        width: inherit;
+    }
+
+    .wporg-responsive.wporg-page-parent-about .col-7,
+    .wporg-responsive.wporg-page-parent-about .col-8,
+    .wporg-responsive.wporg-page-parent-about .col-10 {
+        min-height: inherit;
     }
 
@@ -1882 +1925 @@
      */
 
-    .wporg-responsive.wporg-page-download .col-2 {
+    .wporg-responsive .col-7 ~.col-2 {
         position: inherit;
         float: left;
@@ -1890 +1933 @@
         padding: 0 14px;
     }
-    .wporg-responsive.wporg-page-download .col-3 {
+    .wporg-responsive .col-7 ~ .col-3 {
         float: right;
         width: 50%;
@@ -1897 +1940 @@
         padding: 0 14px;
     }
-    .wporg-responsive.wporg-page-download .col-7 {
+    .wporg-responsive .col-7 {
         margin-left: 14px;
         margin-right: 14px;
@@ -1906 +1949 @@
     }
 
+    .wporg-responsive .storycontent {
+        padding-right: 0;
+    }
+
+}
+@media screen and (max-width: 700px) {
+    .wporg-responsive.wporg-page-about-logos h3.graphics {
+        padding-top: 0;
+    }
+    .wporg-responsive.wporg-page-about-logos h3.graphics img {
+        display: block;
+        float: none;
+        margin: 0 auto 14px;
+    }
 }
 @media screen and (max-width: 480px) {
-    .wporg-responsive.wporg-page-download .col-7 {
+    .wporg-responsive .col-7 {
         border-bottom: 0;
     }
-    .wporg-responsive.wporg-page-download #sidebar, .wporg-responsive.wporg-page-download .col-7 {
+    .wporg-responsive #sidebar, .wporg-responsive .col-7 {
         float: none;
     }
-    .wporg-responsive.wporg-page-download #sidebar {
+    .wporg-responsive #sidebar {
         width: 100%;
     }
-    .wporg-responsive.wporg-page-download .col-3 {
+
+    .wporg-responsive .col-10 .col-5, .wporg-responsive .col-10 .col-5:last-child {
+        width: 100%;
+        padding: 0;
+    }
+
+    .wporg-responsive .col-7 ~ .col-3 {
         margin-top: 2em;
         border-top: 1px solid #ccc;
@@ -1935 +1998 @@
         display: none;
     }
-}
+
+    .wporg-page-about-books #books li {
+        padding: 0 18px 18px;
+        box-sizing: border-box;
+    }
+    .wporg-page-about-books #books .image {
+        border-right: 0;
+        float: none;
+        width: inherit;
+    }
+    .wporg-page-about-books #books p {
+        padding-right: 0;
+        padding-left: 0;
+    }
+
+    .wporg-responsive.wporg-page-about-logos ul.logo {
+        width: 100%;
+    }
+}