add Google custom search

_includes/header.html

@@ -14,6 +14,13 @@
       </a>
 
       <div class="trigger">
+        <a class="page-link">
+        <form action="http://www.google.com" id="cse-search-box">
+            <input type="hidden" name="cx" value="partner-pub-2020708490119286:5373226250" />
+            <input type="hidden" name="ie" value="UTF-8" />
+            <input type="text" name="q" size="55" />
+        </form>
+        </a>
         {% for page in site.pages %}
           {% if page.title %}
           <a class="page-link" href="{{ page.url | prepend: site.baseurl }}">{{ page.title }}</a>

_layouts/default.html

@@ -25,6 +25,8 @@
       ga('create', 'UA-3189083-1', 'auto');
       ga('send', 'pageview');
     </script>
+    <script src="http://www.google.com/coop/cse/brand?form=cse-search-box&amp;lang=en"></script>
+
   </body>
 
 </html>

css/main.scss

@@ -27,7 +27,52 @@ $content-width:    800px;
 $on-palm:          600px;
 $on-laptop:        800px;
 
+form#cse-search-box {
+    display: inline;
+}
 
+form#cse-search-box input {
+    font-size: $base-font-size;
+    font-family: $base-font-family;
+    color: $brand-color;
+    border-bottom-color: $grey-color-light;
+    border-bottom-left-radius: 0px;
+    border-bottom-right-radius: 0px;
+    border-bottom-style: solid;
+    border-bottom-width: 1px;
+    border-collapse: collapse;
+    border-image-outset: 0 0 0 0;
+    border-image-repeat: stretch stretch;
+    border-image-slice: 100% 100% 100% 100%;
+    border-image-source: none;
+    border-image-width: 1 1 1 1;
+    border-left-color: rgb(85, 85, 85);
+    border-left-style: none;
+    border-left-width: 0px;
+    border-right-color: rgb(85, 85, 85);
+    border-right-style: none;
+    border-right-width: 0px;
+    border-spacing: 0px 0px;
+    border-top-color: rgb(85, 85, 85);
+    border-top-left-radius: 0px;
+    border-top-right-radius: 0px;
+    border-top-style: none;
+    border-top-width: 0px;
+    box-shadow: rgba(0, 0, 0, 0.075) 0px 0px 0px 0px inset;
+    display: inline-block;
+    margin: 0px;
+    padding: 4px 6px;
+    text-align: start;
+    transition-delay: 0s, 0s;
+    transition-duration: 0.2s, 0.2s;
+    transition-property: border, box-shadow;
+    transition-timing-function: cubic-bezier(0, 0, 1, 1), cubic-bezier(0, 0, 1, 1);
+    vertical-align: middle;
+    -moz-border-bottom-colors: none;
+    -moz-border-left-colors: none;
+    -moz-border-right-colors: none;
+    -moz-border-top-colors: none;
+}
 
 // Using media queries with like this:
 // @include media-query($on-palm) {