tweak things to perfection

Author: cvan

hearth/index.html

@@ -12,8 +12,8 @@
     <link rel="stylesheet" href="/media/css/site.styl.css">
     <link rel="stylesheet" href="/media/css/header.styl.css">
     <link rel="stylesheet" href="/media/css/cat-dropdown.styl.css">
-    <link rel="stylesheet" href="/media/css/tile.styl.css">
     <link rel="stylesheet" href="/media/css/listing.styl.css">
+    <link rel="stylesheet" href="/media/css/infobox.styl.css">
 
     <!-- These styles don't need to be in an order. -->
     <link rel="stylesheet" href="/media/css/abuse.styl.css">
@@ -22,7 +22,6 @@
     <link rel="stylesheet" href="/media/css/buttons.styl.css">
     <link rel="stylesheet" href="/media/css/detail.styl.css">
     <link rel="stylesheet" href="/media/css/forms.styl.css">
-    <link rel="stylesheet" href="/media/css/infobox.styl.css">
     <link rel="stylesheet" href="/media/css/lightbox.styl.css">
     <link rel="stylesheet" href="/media/css/menu.styl.css">
     <link rel="stylesheet" href="/media/css/notification.styl.css">

hearth/media/css/cat-dropdown.styl

@@ -89,7 +89,7 @@ $cat-icon-size-desktop = 60px;
             content: '';
             display: block;
             // Pseudo shadow under dropdown
-            gradientLinear(unquote('to top, rgba(0,0,0,0) 0%, rgba(0,0,0,0.3) 100%'));
+            gradientLinear(unquote('to top, rgba(0,0,0,0) 0%, rgba(0,0,0,0.375) 100%'));
             height: 3px;
             position: absolute;
             width: 100%;

hearth/media/css/detail.styl

@@ -18,20 +18,35 @@
     background-color: #fff;
 }
 
+.detail {
+    h3 {
+        font-size: 15px;
+        font-weight: 500;
+        line-height: 18px;
+    }
+}
+
 .blurbs {
     clear: both;
     color: $dark-gray;
     line-height: 22px;
-    .summary {
-        margin: 0;
+    > div {
+        padding: 0 10px 24px;
     }
     h3, p, ol, ul, dl {
-        margin: 15px 0;
+        margin: 0;
+        padding: 24px 0;
     }
-    h3 {
-        font-size: 15px;
-        font-weight: 500;
-        line-height: 18px;
+    .summary:only-child {
+        padding-bottom: 0;
+    }
+    .summary + div > {
+        h3:first-child {
+            padding-top: 0;
+        }
+        :last-child {
+            padding-bottom: 0;
+        }
     }
     blockquote {
         background: $faint-gray;
@@ -43,9 +58,7 @@
 }
 
 .reviews h3 {
-    color: #333;
-    font-weight: 500;
-    margin-bottom: 20px;
+    margin: 24px 0 18px;
 }
 
 .show-toggle {
@@ -157,16 +170,12 @@
 // ***************** Wide Mobile (> 671px)
 
 @media $at-least-desktop {
-    .blurbs {
-        > div {
-            text-columns(2, 24px);
-        }
-        h3, p, ol, ul, dl {
-            margin: 24px 0;
-        }
-        .summary {
-            position: relative;
+    .blurbs > div {
+        padding: 24px 15px;
+        p.summary {
+            padding-top: 0;
         }
+        text-columns(2, 24px);
     }
     #reviews-detail {
         font-size: 15px;

hearth/media/css/header.styl

@@ -158,10 +158,8 @@
     &::-webkit-input-placeholder {
         color: darken($cement-gray, 5%);
     }
-    &:not([data-context]):invalid ~ .search-clear,
-    &[data-context]:invalid:focus ~ .search-clear {
+    &:invalid ~ .search-clear {
         // Hide the X icon when the search field is empty.
-        // Hide the X icon when the search field is focused if there's a category placeholder.
         display: none;
     }
     &:valid {
@@ -468,11 +466,11 @@ main {
     }
 
     #search-q {
-        font-size: 24px;
+        font-size: 18px;
         font-weight: 400;
         height: 48px;
         line-height: 48px;
-        padding: 7px 15px 3px;
+        padding: 6px 15px 4px;
         &:valid {
             // Adjust width for padding for the X icon.
             padding-right: 42px;
@@ -536,6 +534,11 @@ main {
         top: 13px;
         right: 0;
     }
+    // Even if there's no Popular/New tabs, we show an orange border on
+    /// desktop but not on mobile.
+    .category .not-paginated {
+        border-top: 7px solid $flamin-hot-cheetos-orange;
+    }
 }
 
 @media (max-width: 540px) {