Update styling (#1498)

rstacruz · web-flow · commit afc25b5e1ff2 · 2020-07-06T01:35:26.000+10:00
diff --git a/_layouts/2017/home.html b/_layouts/2017/home.html
@@ -10,7 +10,7 @@
 %}
 {% include 2017/head.html critical='home' %}
 
-</head><body>
+</head><body class='UseCompactHeader HighlightPubFirstLine'>
 
 {% include 2017/top-nav.html page=page is_home=true noedit=true noback=true %}
 
diff --git a/_layouts/2017/sheet.html b/_layouts/2017/sheet.html
@@ -4,7 +4,7 @@
 {% include 2017/head.html critical='sheet' %}
 {% include 2017/article-schema.html page=page %}
 
-</head><body>
+</head><body class='UseCompactHeader HighlightPubFirstLine'>
 
 {% include 2017/top-nav.html page=page %}
 
diff --git a/_sass/2017/components/headline-pub.scss b/_sass/2017/components/headline-pub.scss
@@ -78,7 +78,9 @@ $placeholder-bg-size: 450px;
 
   // Hide placeholders after carbon has loaded
   #carbonads ~ .placeholder {
-    display: none;
+    opacity: 0;
+    transition: opacity 250ms linear;
+    pointer-events: none;
   }
 
   & > .placeholder {
@@ -135,6 +137,10 @@ $placeholder-bg-size: 450px;
     text-align: left;
   }
 
+  .HighlightPubFirstLine & > div > span:first-line {
+    font-weight: bold;
+  }
+
   // Clearfix
   & > div > span::after {
     content: '';
@@ -149,6 +155,10 @@ $placeholder-bg-size: 450px;
   }
 }
 
+#carbonads {
+  animation: 250ms ease-out pub-text-enter;
+}
+
 @keyframes placeholder-swish {
   0% {
     background-position: ($placeholder-bg-size * -1 / 3) 0%;
@@ -162,3 +172,14 @@ $placeholder-bg-size: 450px;
     background-position: ($placeholder-bg-size * 2 / 3) 0%;
   }
 }
+
+@keyframes pub-text-enter {
+  0% {
+    opacity: 0;
+    transform: scale(0.97);
+  }
+
+  100% {
+    opacity: 1;
+  }
+}
diff --git a/enzyme.md b/enzyme.md
@@ -16,6 +16,7 @@ keywords:
 ## Getting started
 
 ### Introduction
+{: .-intro}
 
 [Enzyme](http://airbnb.io/enzyme) lets you write unit tests for React components. This guide covers Enzyme 3.x.
 
diff --git a/httpie.md b/httpie.md
@@ -47,8 +47,7 @@ $ echo '{"hello": "world"}' | http POST example.com/post
 
 ### Options
 
-Print options:
-{: .-setup}
+#### Printing options
 
 ```bash
 -v, --verbose            # same as --print=HhBb --all
diff --git a/promise.md b/promise.md
@@ -1,12 +1,20 @@
 ---
 title: Promises
 category: JavaScript
-intro: A quick reference to the [Promise API](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise).
+layout: 2017/sheet
 ---
 
 ## Reference
 {:.-three-column}
 
+### Introduction
+{: .-intro}
+
+intro: A quick reference to the JavaScript [Promise API](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise).
+
+- [Using Promises guide](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Using_promises) _(developer.mozilla.org)_
+- [Promise documentation](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise) _(developer.mozilla.org)_
+
 ### Creating promises
 
 ```js
