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

Timestamp:

02/05/2019 09:55:07 PM (7 years ago)

Author:

coffee2code

Message:

Developer: Miscellaneous Code Reference landing page UI tweaks.

• Reduce padding within widget headers
• Remove border above search form
• Center horizontal list of topics
• Move search filter checkboxes onto separate line from label on smaller viewports
• Ensure consistent margin between sections and left of viewport
• Vertically center checkboxes with labels in form (and also in search slide-down panel)

File:

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

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

@@ -533 +533 @@
         }
 
+        .widget-title {
+            line-height: 60px;
+            line-height: 6rem;
+        }
+
+        &.search-guide {
+            border-top: 2px solid #efefef;
+        }
+
         @media ( max-width: 974px ) {
             width: 640px;
@@ -561 +570 @@
         }
         &.search-guide {
-            border-top: 2px solid #efefef;
             padding-top: 60px;
             padding-top: 6rem;
@@ -575 +583 @@
             font-size: 25px;
             font-size: 2.5rem;
-            line-height: 60px;
-            line-height: 6rem;
+            line-height: 20px;
+            line-height: 2rem;
             .dashicons {
                 color: #222;
@@ -822 +830 @@
                 padding-right: 1.3em;
                 input {
+                    margin-bottom: 6px;
                     padding-left: 0.5em;
+                    vertical-align: middle;
                 }
             }
             label:last-child {
                 border-right-width: 0;
+            }
+
+            @media ( max-width: 688px ) {
+                span {
+                    display: block;
+                }
+
+                label {
+                    margin-left: 0;
+                    margin-right: 1em;
+                    width: 130px;
+
+                    &:last-child {
+                        margin-right: 0;
+                        padding-right: 0;
+                        width: initial;
+                    }
+                }
             }
         }
@@ -928 +956 @@
     }
     .horizontal-list {
-        display: inline;
+        display: block;
+        width: 100%;
         list-style-type: none;
         margin: 0;
         padding: 0;
+        text-align: center;
     }
     .horizontal-list li {
@@ -2334 +2364 @@
             }
         }
+        #content-area {
+            padding-left: 2%;
+        }
 
         &.archive, &.search {
@@ -2358 +2391 @@
             .sourcefile {
                 float: left;
+            }
+        }
+        #content-area {
+            @media (max-width: 43em) {
+                padding-left: 2%;
             }
         }