Changeset 8206

Timestamp:

02/05/2019 09:55:07 PM (6 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)

Location:

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

Files:

• scss/main.scss (modified) (7 diffs)
• stylesheets/main.css (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%;
             }
         }

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

@@ -876 +876 @@
 }
 
+.devhub-wrap .home-landing .section .widget-title {
+  line-height: 60px;
+  line-height: 6rem;
+}
+
+.devhub-wrap .home-landing .section.search-guide {
+  border-top: 2px solid #efefef;
+}
+
 @media (max-width: 974px) {
   .devhub-wrap .home-landing .section {
@@ -907 +916 @@
 
 .devhub-wrap .section.search-guide {
-  border-top: 2px solid #efefef;
   padding-top: 60px;
   padding-top: 6rem;
@@ -920 +928 @@
   font-size: 25px;
   font-size: 2.5rem;
-  line-height: 60px;
-  line-height: 6rem;
+  line-height: 20px;
+  line-height: 2rem;
 }
 
@@ -1190 +1198 @@
 
 .devhub-wrap .searchform .search-post-type label input {
+  margin-bottom: 6px;
   padding-left: 0.5em;
+  vertical-align: middle;
 }
 
 .devhub-wrap .searchform .search-post-type label:last-child {
   border-right-width: 0;
+}
+
+@media (max-width: 688px) {
+  .devhub-wrap .searchform .search-post-type span {
+    display: block;
+  }
+  .devhub-wrap .searchform .search-post-type label {
+    margin-left: 0;
+    margin-right: 1em;
+    width: 130px;
+  }
+  .devhub-wrap .searchform .search-post-type label:last-child {
+    margin-right: 0;
+    padding-right: 0;
+    width: initial;
+  }
 }
 
@@ -1306 +1332 @@
 
 .devhub-wrap .horizontal-list {
-  display: inline;
+  display: block;
+  width: 100%;
   list-style-type: none;
   margin: 0;
   padding: 0;
+  text-align: center;
 }
 
@@ -2708 +2736 @@
     width: 100%;
   }
+  .devhub-wrap #content-area {
+    padding-left: 2%;
+  }
   .devhub-wrap.archive .meta, .devhub-wrap.search .meta {
     font-size: 100%;
@@ -2723 +2754 @@
   .devhub-wrap.archive .sourcefile, .devhub-wrap.search .sourcefile {
     float: left;
+  }
+}
+
+@media (min-width: 43em) and (max-width: 43em) {
+  .devhub-wrap #content-area {
+    padding-left: 2%;
   }
 }