Feature: Incorporate site search into masthead (#1383)

* Integrate search into masthead
* Fix cutoff descenders in archive article titles
* Remove search page from `/test` site
* Enable masthead search
* Remove dedicated search page
* Fix masthead search form padding
* Improve insertion of search content
* Speed up page transition
* Add fade transition to search content
* Rename visibility class names
* Add `site.search` to _config.yml
* Document site search feature
* Update CHANGELOG and history

_includes/masthead.html

@@ -15,7 +15,14 @@
             </li>
           {% endfor %}
         </ul>
-        <button type="button">
+        {% if site.search == true %}
+        <button class="search__toggle" type="button">
+          <svg class="icon" width="16" height="16" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 15.99 16">
+            <path d="M15.5,13.12L13.19,10.8a1.69,1.69,0,0,0-1.28-.55l-0.06-.06A6.5,6.5,0,0,0,5.77,0,6.5,6.5,0,0,0,2.46,11.59a6.47,6.47,0,0,0,7.74.26l0.05,0.05a1.65,1.65,0,0,0,.5,1.24l2.38,2.38A1.68,1.68,0,0,0,15.5,13.12ZM6.4,2A4.41,4.41,0,1,1,2,6.4,4.43,4.43,0,0,1,6.4,2Z" transform="translate(-.01)"></path>
+          </svg>
+        </button>
+        {% endif %}
+        <button class="greedy-nav__toggle" type="button">
           <span class="visually-hidden">{{ site.data.ui-text[site.locale].menu_label | default: "Toggle Menu" }}</span>
           <div class="navicon"></div>
         </button>

_includes/scripts.html

@@ -11,7 +11,7 @@
   <script src="{{ '/assets/js/main.min.js' | absolute_url }}"></script>
 {% endif %}
 
-{% if page.layout == 'search' %}
+{% if site.search == true or page.layout == 'search' %}
   <script src="{{ '/assets/js/lunr.min.js' | absolute_url }}"></script>
   <script src="{{ '/assets/js/lunr-en.js' | absolute_url }}"></script>
 {% endif %}

_includes/search_form.html

@@ -0,0 +1,4 @@
+<div class="search-content__inner-wrap">
+  <input type="text" id="search" class="search-input" tabindex="-1" placeholder="{{ site.data.ui-text[site.locale].search_placeholder_text | default: 'Enter your search term...' }}" />
+  <div id="results" class="results"></div>
+</div>