Changeset 1456

Timestamp:

03/27/2015 09:25:01 PM (10 years ago)

Author:

coffee2code

Message:

wp4.css: Add responsive styling for selected w.org pages (namely /download/* and /mobile for now).

The pages need to be subsequently modified to opt into the styling by assigning the appropriate new class names.

Props hugobaeta for initial patch.

File:

• sites/trunk/wordpress.org/public_html/style/wp4.css (modified) (1 diff)

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

@@ -1795 +1795 @@
     margin: -10px 10px 0;
 }
+
+/* Responsive styling ---------------------------------- */
+
+.wporg-page-download .mobile-notice {
+    display: none;
+}
+.wporg-page-download .download-button-container {
+    text-align: center;
+}
+.wporg-page-mobile ul#books {
+    display: -webkit-box;
+    display: -moz-box;
+    display: -ms-flexbox;
+    display: -webkit-flex;
+    display: flex;
+    flex-wrap: wrap;
+}
+.wporg-page-mobile #books li {
+    width: 49%;
+    margin-left: 1%;
+}
+.wporg-page-mobile #books li:first-child {
+    margin-left: 0;
+    margin-right: 1%;
+}
+.wporg-responsive.wporg-page-mobile #books p {
+    margin-bottom: 14px;
+}
+.wporg-responsive.wporg-page-mobile #books li {
+    padding: 0 14px 15px;
+    box-sizing: border-box;
+}
+.wporg-responsive.wporg-page-mobile #books h3 {
+    margin-bottom: 15px;
+}
+.wporg-responsive.wporg-page-mobile #books .image {
+    float: right;
+    border-right: 0;
+    border-left: 1px solid #dadada;
+    margin-left: 14px;
+    margin-right: 0;
+    margin-top: 0;
+}
+
+.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 {
+    position: absolute;
+}
+
+@media screen and (max-width: 974px) { 
+    body.wporg-responsive #pagebody .wrapper {
+        display: -webkit-box;
+        display: -moz-box;
+        display: -ms-flexbox;
+        display: -webkit-flex;
+        display: flex;
+        flex-wrap: wrap;
+    }
+    body.wporg-responsive .col-2,
+    body.wporg-responsive .col-3,
+    body.wporg-responsive .col-7,
+    body.wporg-responsive .col-10,
+    body.wporg-responsive .col-12 {
+        width: inherit;
+        float: none;
+    }
+
+    body.wporg-responsive.wporg-page-parent-download .col-2 {
+        position: inherit;
+        width: 100%;
+    }
+
+    body.wporg-responsive.wporg-page-parent-download .col-8 {
+        margin-left: 14px;
+        width: 100%;
+    }
+
+    .wporg-responsive.wporg-page-mobile #books li {
+        width: 100%;
+        margin-left: 0;
+        margin-right: 0;
+    }
+
+    /*
+     * /download
+     */
+
+    .wporg-responsive.wporg-page-download .col-2 {
+        position: inherit;
+        float: left;
+        width: 50%;
+        margin: 0;
+        box-sizing: border-box;
+        padding: 0 14px;
+    }
+    .wporg-responsive.wporg-page-download .col-3 {
+        float: right;
+        width: 50%;
+        margin: 0;
+        box-sizing: border-box;
+        padding: 0 14px;
+    }
+    .wporg-responsive.wporg-page-download .col-7 {
+        margin-left: 14px;
+        width: 100%;
+        margin-bottom: 3em;
+        padding-bottom: 2em;
+        border-bottom: 1px solid #ccc;
+    }
+
+}
+@media screen and (max-width: 480px) {
+    .wporg-responsive.wporg-page-download .col-7 {
+        border-bottom: 0;
+    }
+    .wporg-responsive.wporg-page-download #sidebar, .wporg-responsive.wporg-page-download .col-7 {
+        width: 90%;
+        float: none;
+        margin: 0 auto;
+    }
+    .wporg-responsive.wporg-page-download .col-3 {
+        margin-top: 2em;
+        border-top: 1px solid #ccc;
+        padding-top: 3em;
+        width: 90%;
+        float: none;
+        margin: 2em auto;
+    }
+    .wporg-page-download .mobile-notice {
+        display: block;
+        width: 60%;
+        margin: 1px auto 3em;
+        border: 1px solid #ccc;
+        padding: 2em 1.9em 0.5em;
+    }
+    .wporg-page-download .mobile-notice-inner {
+        display: none;
+    }
+}