Changeset 3626 for sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-developer/scss/main.scss

Timestamp:

07/06/2016 07:16:58 PM (7 years ago)

Author:

drewapicture

Message:

developer.wordpress.org: Restructure reference pages to leverage a table of contents for the majority of the page output.

• Splits large sections of content-reference.php into individual template parts captured via output buffering.
• Introduces four top-level sections for any given reference page: Description, More Information (if an explanation exists), Related, and User Contributed Notes
• Improves overall responsive styling for smaller viewports

See #1802.

File:

• sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-developer/scss/main.scss (modified) (6 diffs)

sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-developer/scss/main.scss

@@ -1057 +1057 @@
             width: 300px;
         }
+        .toc-jump {
+            display: inline-block;
+            float: right;
+        }
     }
 
@@ -1088 +1092 @@
     ----------------------------------------------- */
     .usage {
-        article {
-            float: left;
-            width: 50%;
-        }
-
-        .used-by {
-            padding-right: 30px;
-        }
-
-        .uses {
-            padding-left: 30px;
-        }
-
         ul {
             line-height: 1.7; /* Slightly increase the line height for more readability */
@@ -1429 +1420 @@
         li {
             padding-bottom: 6px !important;
+            font-weight: 600;
 
             ul li,
             ul li ul li {
                 padding-bottom: 0 !important;
+                font-weight: normal;
             }
 
@@ -1614 +1607 @@
                 text-indent: -45px;
             }
-
-            .table-of-contents {
-                width: 200px;
-            }
         }
 
@@ -1623 +1612 @@
             width: 99%;
         }
-
-        .usage {
-            article {
+    }
+}
+
+@media (max-width: 32em) {
+    .devhub-wrap {
+        .wp-parser-class, .wp-parser-function, .wp-parser-hook, .wp-parser-method {
+            .table-of-contents {
                 width: 100%;
-            }
-
-            .uses {
-                padding-left: 0;
-                margin-top: 30px;
+                margin-bottom: 10px;
+            }
+
+            section {
+                overflow: inherit;
+            }
+
+            hr {
+                clear: both;
             }
         }
@@ -1649 +1646 @@
                 font-size: 16px;
             }
-            .table-of-contents {
-                width: 100%;
-                margin-bottom: 10px;
-            }
         }