JS: add bounce effect

_sass/2017/base/fade.scss

@@ -1,3 +1,5 @@
+$bounce: cubic-bezier(.75,-0.5,0,1.75);
+
 /*
  * "Preloader":
  * This makes the content semi-transparent before the page ad loads.
@@ -9,6 +11,23 @@
   }
 }
 
+/*
+ * Pop it in as the page loads
+ */
+
+.code-sponsor {
+  html.WithJs & {
+    transform: scale(0.7);
+    opacity: 0;
+  }
+
+  html.WithJs.LoadDone & {
+    transform: scale(1);
+    opacity: 1;
+    transition: transform 500ms $bounce, opacity 500ms linear;
+  }
+}
+
 /*
  * Defer "loading" until page's onload event fires.
  * (The page actually already loaded, we just pretend like it hasn't)

_support/critical.js

@@ -2,7 +2,7 @@ const critical = require('critical')
 
 console.warn('Generating critical path styles into _includes/2017/critical/...')
 
-const options = {
+const OPTIONS = {
   base: '_site',
   width: 1400,
   height: 900,
@@ -10,30 +10,36 @@ const options = {
   extract: true,
   ignore: [
     '@font-face'
+  ],
+  include: [
+    // fade-in magic (base/fade)
+    /html\.WithJs/
   ]
 }
 
 critical.generate({
-  ...options,
+  ...OPTIONS,
   src: 'index.html',
   dest: '../_includes/2017/critical/home.css',
   include: [
-    // fade-in magic (base/fade)
+    ...OPTIONS.include,
-    /html\.WithJs/
+
+    // searchbox with placeholder
+    /\.search-box/
   ]
 })
 
 critical.generate({
-  ...options,
+  ...OPTIONS,
   src: 'react.html',
   dest: '../_includes/2017/critical/sheet.css',
   include: [
+    ...OPTIONS.include,
+
+    // sections (and h3 section list), just to be sure
     /\.h3-section/,
 
     // eg, -six-column in devhints.io/layout-thrashing
-    /-column/,
+    /-column/
-
-    // fade-in magic (base/fade)
-    /html\.WithJs/
   ]
 })