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

Timestamp:

07/24/2018 05:27:23 PM (6 years ago)

Author:

obenland

Message:

DevHub: Add short descriptions to Related section

Props keesiemeijer, kevinwhoffman.
Fixes #1847.

File:

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

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

@@ -342 +342 @@
         border-image: none;
         border-style: solid solid none;
-        border-width: 1px 1px 0;   
+        border-width: 1px 1px 0;
         display: inline-block;
         padding: .5em 1em;
@@ -352 +352 @@
         border-color: #ccc;
         border-radius: 3px 3px 0 0;
-        color: #333;  
+        color: #333;
     }
     .tab-section {
@@ -1061 +1061 @@
     ----------------------------------------------- */
     .related {
-        ul {
-            line-height: 1.7; /* Slightly increase the line height for more readability */
-            list-style-type: none;
-            margin: 0;
-            overflow-x: auto;
-        }
-
         .show-more, .hide-more {
             display: none;
         }
-    }
-
+
+        /* Hide the title and toc links (same as .screen-reader-text)
+           this allows for linking from the toc. */
+        h3, .uses .toc-jump, .used-by .toc-jump {
+            height: 0;
+            margin-bottom: 0;
+            clip: rect(1px, 1px, 1px, 1px);
+            position: absolute !important;
+        }
+
+        .used-by, .uses {
+            overflow-x: auto;
+            clear: right;
+        }
+
+        td p  {
+            margin-bottom: 0;
+        }
+
+        th, td {
+            width: 50%;
+        }
+
+        @media (max-width: 43em) {
+            .related-desc, span {
+                display: none;
+            }
+        }
+    }
 
     .source-content {
@@ -1106 +1126 @@
 
     /* Changelog */
-    table {
+    .changelog table {
         .changelog-version {
             width: 10%;
@@ -1113 +1133 @@
             width: 90%;
         }
-
     }
 
@@ -1587 +1606 @@
             color: #fff;
             border-bottom: 1px solid #fff;
-            
+
             @media screen and (max-width: 48em) {
                 border-bottom: 0;
@@ -2393 +2412 @@
         }
     }
-    
+
     .entry-content {
         margin-top: 2rem;
@@ -2480 +2499 @@
             background: #eee;
         }
-        
+
         &:focus, &:active {
             border-color: #bbb;
@@ -2487 +2506 @@
             box-shadow: 0 0 4px rgba(0, 0, 0, 0.2);
         }
-        
+
         > span {
             color: #757575;
-            
+
             &.red {
                 color: #dc3232;
@@ -2503 +2522 @@
     .btn-group {
         display: inline;
-        
+
         > a {
             position: relative;
-            
+
             @media(min-width: 571px) {
                 &:first-child {