From 2dffda0c6c494fbefab141b764d32e77b2c599fe Mon Sep 17 00:00:00 2001
From: Andrew <andrew@feralresearch.org>
Date: Thu, 19 Oct 2017 01:10:44 +0200
Subject: [PATCH 1/2] WiP: Added search and contrast switcher

Fixes loading visual glitch on menus (should be hidden by default on load)

contrast adjustments
---
 _data/nav.csv                 |   2 +
 _includes/head.html           |  19 ++++++
 _includes/header.html         |   4 +-
 _includes/searchbox           |  16 +++++
 _includes/searchbox_small     |   3 +
 _layouts/home.html            |   4 +-
 _sass/_search.scss            | 113 ++++++++++++++++++++++++++++++++++
 css/highContrast.scss         |  56 +++++++++++++++++
 css/main.scss                 |   4 +-
 index.html                    |   1 -
 javascripts/search.js         |  93 ++++++++++++++++++++++++++++
 javascripts/toggleContrast.js |  56 +++++++++++++++++
 search.html                   |  12 ++++
 13 files changed, 376 insertions(+), 7 deletions(-)
 create mode 100644 _includes/searchbox
 create mode 100644 _includes/searchbox_small
 create mode 100644 _sass/_search.scss
 create mode 100644 css/highContrast.scss
 create mode 100644 javascripts/search.js
 create mode 100644 javascripts/toggleContrast.js
 create mode 100644 search.html

diff --git a/_data/nav.csv b/_data/nav.csv
index 7cb972c..2e710ff 100644
--- a/_data/nav.csv
+++ b/_data/nav.csv
@@ -11,3 +11,5 @@ News,/news/,true
 Interviews,/interviews/,true
 People,/people/,false
 Contact,/contact/,false
+Search,/search.html,false
+Toggle Contrast,javascript:toggleContrast();,false
diff --git a/_includes/head.html b/_includes/head.html
index a7c07c5..ff2a9a5 100644
--- a/_includes/head.html
+++ b/_includes/head.html
@@ -29,4 +29,23 @@
 
     <!-- Windows 8 / RT -->
     <meta name="msapplication-TileImage" content="{{ site.baseurl }}/images/drc.square.rcon144.png" />
+
+
+	<script>
+	  window.store = {
+		{% for post in site.posts %}
+		  "{{ post.url | slugify }}": {
+			"title": "{{ post.title | xml_escape }}",
+			"author": "{{ post.author | xml_escape }}",
+			"category": "{{ post.category | xml_escape }}",
+			"content": {{ post.content | strip_html | strip_newlines | jsonify }},
+			"url": "{{ post.url | xml_escape }}"
+		  }
+		  {% unless forloop.last %},{% endunless %}
+		{% endfor %}
+	  };
+	</script>
+	<script src="https://unpkg.com/lunr/lunr.js"></script>
+	<script src="/javascripts/search.js"></script>
+	<script src="/javascripts/toggleContrast.js"></script>	
  </head>
diff --git a/_includes/header.html b/_includes/header.html
index ffc0dc1..1306b0f 100644
--- a/_includes/header.html
+++ b/_includes/header.html
@@ -12,7 +12,7 @@
             <div class="navigation-wrapper">
                 <nav role="navigation">
                     <ul id="js-navigation-menu" class="navigation-menu show">
-                      <li class="hidden"><ul class="nav-nested hidden">
+                      <li class="hidden" style="display:none"><ul class="nav-nested hidden" style="display:none">
                         {% for page in site.data.nav %}
                             {% if page.nested == "false" %}
                               </ul>
@@ -21,7 +21,7 @@
                             {% if page.title %}
                             <li class="nav-link"><a class="page-link" href="{{ page.permalink | prepend: site.baseurl }}">{{ page.title | remove_first: "DRC " }}</a>
                               {% if page.nested == "false" %}
-                              <ul class="nav-nested hidden">
+                              <ul class="nav-nested hidden" style="display:none">
                               {% endif %}
                             {% endif %}
                         {% endfor %}
diff --git a/_includes/searchbox b/_includes/searchbox
new file mode 100644
index 0000000..1b93ef0
--- /dev/null
+++ b/_includes/searchbox
@@ -0,0 +1,16 @@
+{% if include.id == nil or include.id == '' %}
+	{% assign myid = 'largeSearch' %}
+{% else %}
+	{% assign myid = include.id %}
+{% endif %}
+
+<form action="{{ site.baseurl }}/search.html" method="get">
+<div class="searchbox">
+   <div class="search">
+      <input type="text" name="query" class="searchTerm" id="{{ myid }}" placeholder="{{ include.placeholder }}">
+      <button type="submit" value="search" class="searchButton">
+        <span class="fa fa-search" aria-hidden="true"></span>
+     </button>
+   </div>
+</div>
+</form>
diff --git a/_includes/searchbox_small b/_includes/searchbox_small
new file mode 100644
index 0000000..8426626
--- /dev/null
+++ b/_includes/searchbox_small
@@ -0,0 +1,3 @@
+<div class="smallSearch">
+	{% include searchbox placeholder=include.placeholder id="smallSearch" %}
+</div>
diff --git a/_layouts/home.html b/_layouts/home.html
index 458d337..4423260 100644
--- a/_layouts/home.html
+++ b/_layouts/home.html
@@ -5,7 +5,7 @@
 
 <body{% if page.id!='' %} class="page-{{ page.id }}"{% endif %}>
   {% include header.html %}
-
+{% include searchbox %}
   <div class="home-columns">
     <div class="lab-column">
       <a href="{{ site.baseurl }}/lab/"><div class="column-header">
@@ -82,7 +82,7 @@ <h2>{{ lab_feature.title }}</h2>
           <!--
 		  	AS: Temp disabled link until we have content
 		  	<a class="card" href="{{ post.url | prepend: site.baseurl }}">
-		  -->	
+		  -->
 		  <a class="card" href="{{ site.baseurl }}/tools/">
             {% assign image_url = post.image %}
             {% unless post.image %}
diff --git a/_sass/_search.scss b/_sass/_search.scss
new file mode 100644
index 0000000..0541b18
--- /dev/null
+++ b/_sass/_search.scss
@@ -0,0 +1,113 @@
+
+/* FontAwesome icon font http://fontawesome.io/ */
+@import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css");
+
+/* Search */
+$color-search: #c2b4a5;
+$color-searchBackground: #333333;
+$color-searchFocus: #00B4CC;
+$color-searchPlaceholder: #DDDDDD;
+$size-searchBox: 1.3rem;
+$color-linkHover: $color-searchBackground;
+
+.search {
+	width: 100%;
+	position: relative;
+}
+
+.searchTerm {
+	font-size: $size-searchBox;
+	float: left;
+	width: 100%;
+	border: 3px solid $color-search;
+	padding: 5px;
+	border-radius: 5px;
+	outline: none;
+	color: $color-searchPlaceholder;
+}
+
+input::placeholder {
+	color: $color-searchPlaceholder;
+}
+
+.searchTerm:focus {
+	color: $color-searchFocus;
+}
+
+.searchButton {
+	margin: 0;
+	font-size: $size-searchBox;
+	padding: 0.4rem;
+	position: absolute;
+	right: 0rem;
+	border: 1px solid $color-search;
+	background: $color-search;
+	text-align: center;
+	color: white;
+	border-radius: 5px;
+	cursor: pointer;
+}
+
+.searchbox {
+	background-color: $color-searchBackground;
+	border-radius: 0.3rem 0.3rem 0 0;
+	padding: 1rem;
+	height: 4.3rem;
+}
+
+#search-results .searchMsgWrapper {
+  text-align:center;
+}
+
+#search-results .searchMsg {
+  font-size: 2em;
+  margin: 1rem auto 0;
+}
+
+
+/*
+	Small search overrides
+*/
+.smallSearch input::placeholder {
+	content: '';
+}
+
+.smallSearch .searchButton {
+	margin: 0.15rem 0 0;
+	font-size: 0.8rem;
+	border-radius: 0 0.3rem 0.3rem 0;
+	background-color: #625044;
+}
+
+.smallSearch .searchbox {
+	position: relative;
+	top: 0.8rem;
+	padding: 0;
+	margin: 0;
+	height: 0;
+}
+
+.smallSearch .searchTerm {
+	font-size: 1rem;
+}
+
+/*
+	Search results listing
+*/
+#search-results {
+  padding: 1rem; }
+
+#search-results h3 {
+  line-height: 1.2rem;
+  font-size: 1rem; }
+
+#search-results p {
+	  padding:0 .4rem 0 .4rem;
+  line-height: 1.2rem; }
+
+#search-results h3 a:hover {
+  color: $color-linkHover; }
+
+  #search-results h3 a{
+    text-decoration:none;
+    border-bottom:1px solid rgba(98, 80, 68, 0.14);}
diff --git a/css/highContrast.scss b/css/highContrast.scss
new file mode 100644
index 0000000..55358e1
--- /dev/null
+++ b/css/highContrast.scss
@@ -0,0 +1,56 @@
+---
+---
+/*
+
+highContrast.scss
+
+This is the high contrast stylesheet that is added to the site
+via toggleContrast.js.
+
+It can contain anything but should really just be overrides for the main.css
+
+*/
+.home-columns {
+  background-color: white; }
+
+.column-header,
+.featured-category-header {
+  background-color: black !important; }
+
+button {
+  background-color: white !important; }
+
+.card-header {
+  color: black !important;
+  font-weight: bold; }
+
+a {
+  color: black !important; }
+
+
+.flex-title{
+  color:black !important;
+  font-weight: bold;
+
+}
+
+.flex-box p{
+  color:black !important;
+
+}
+
+.flex-box{
+  border:1px solid black !important;
+}
+
+.searchButton {
+	top:-.1rem;
+	border: 3px solid black !important;
+	background: black !important;
+	color: white !important;
+}
+
+article{
+  background-color:white !important;
+  color:black !important;
+}
diff --git a/css/main.scss b/css/main.scss
index b23b693..600ec87 100644
--- a/css/main.scss
+++ b/css/main.scss
@@ -9,6 +9,6 @@
 	"neat/neat",
 	"base/base",
     "hofstra/hofstra",
-	"layout"
+	"layout",
+	"search"
 ;
-
diff --git a/index.html b/index.html
index 09547b4..da35039 100644
--- a/index.html
+++ b/index.html
@@ -1,7 +1,6 @@
 ---
 layout: home
 ---
-
 <div class="cards">
     <a class="card" href="/projects/rslt.html">
         <div class="card-image">
diff --git a/javascripts/search.js b/javascripts/search.js
new file mode 100644
index 0000000..d5c7092
--- /dev/null
+++ b/javascripts/search.js
@@ -0,0 +1,93 @@
+// search.js
+// Search handler for lunr search (http://lunrjs.com)
+//////////////////////////////////////////////////////
+
+// After DOM is loaded
+document.addEventListener('DOMContentLoaded', function() {
+
+	// Bounce if we're not on the search results page
+	if(!document.getElementById('search-results')){
+		return;
+	}
+	
+	// Parse keyword from GET vars
+	var searchTerm = getQueryVariable('query');
+
+	// If there is no search term (FIXME: We can handle this better)
+	if(!searchTerm){
+		document.getElementById('largeSearch').setAttribute("value", ' ');
+		document.getElementById('search-results').innerHTML='';
+	}
+
+	if (searchTerm) {
+
+		// Set the search boxes on the page to have the searchterm
+		/*
+		var testElements = document.getElementsByClassName('searchTerm');
+		for (var i = 0; i < testElements.length; i++) {
+			testElements.item(i).setAttribute("value", searchTerm);
+		}
+		*/
+		document.getElementById('largeSearch').setAttribute("value", searchTerm);
+
+		// Initalize lunr with the fields it will be searching on.
+		var idx = lunr(function() {
+			this.field('id');
+			this.field('title');
+			this.field('author');
+			this.field('category');
+			this.field('content');
+
+			// Build index
+			for (var key in window.store) {
+				this.add({
+					'id': key,
+					'title': window.store[key].title,
+					'author': window.store[key].author,
+					'category': window.store[key].category,
+					'content': window.store[key].content
+				});
+			}
+		});
+
+		// Run the search
+		for (var key in window.store) {
+			//NOTE: Any boost should go here, IE idx.search('title:foo^10')
+			var results = idx.search(searchTerm);
+			displaySearchResults(results, window.store);
+		}
+
+
+	}
+
+	// Display the search results on the page
+	function displaySearchResults(results, store) {
+		var searchResults = document.getElementById('search-results');
+		if (results.length) { // Are there any results?
+			var appendString = '';
+
+			for (var i = 0; i < results.length; i++) { // Iterate over the results
+				var item = store[results[i].ref];
+				appendString += '<h3><a href=".' + item.url + '">' + item.title + ' <div class="fa fa-arrow-right" aria-hidden="true"></div></a></h3>';
+				appendString += '<p>' + item.content.substring(0, 150) + '...</p></li>';
+			}
+			searchResults.innerHTML = appendString;
+		} else {
+			searchResults.innerHTML = '<div class="searchMsgWrapper"><div class="searchMsg">No results found for "' + searchTerm + '"</div></div>';
+		}
+	}
+
+	// Helper: Parse GET vars
+	function getQueryVariable(variable) {
+		var query = window.location.search.substring(1);
+		var vars = query.split('&');
+		for (var i = 0; i < vars.length; i++) {
+			var pair = vars[i].split('=');
+			if (pair[0] === variable) {
+				return decodeURIComponent(pair[1].replace(/\+/g, '%20'));
+			}
+		}
+	}
+
+
+}, false);
diff --git a/javascripts/toggleContrast.js b/javascripts/toggleContrast.js
new file mode 100644
index 0000000..bcc4ed4
--- /dev/null
+++ b/javascripts/toggleContrast.js
@@ -0,0 +1,56 @@
+// toggleContrast.js
+// swaps out the css for the site
+//////////////////////////////////////////////////////
+
+// After DOM is loaded
+document.addEventListener('DOMContentLoaded', function() {
+
+	// On load set default if it doesn't exist
+	if (localStorage.getItem("highContrastMode") === null) {
+		localStorage.setItem('highContrastMode', JSON.stringify(false));
+	}
+	setMode();
+
+	// Shove this into the window object (not great :/)
+	window.toggleContrast = function toggleContrast(){
+
+		if (JSON.parse(localStorage['highContrastMode'])) {
+				localStorage.setItem('highContrastMode', JSON.stringify(false));
+				location.reload();
+			} else {
+				localStorage.setItem('highContrastMode', JSON.stringify(true));
+			}
+			setMode();
+	}
+
+	function setMode(){
+
+		if (JSON.parse(localStorage['highContrastMode'])) {
+			// Inject CSS
+
+			// This is IE 8 only
+			var styleSheet="http://127.0.0.1:4000/css/highContrast.css";
+
+			if(document.createStyleSheet) {
+			  document.createStyleSheet(styleSheet);
+
+			// Every other normal browser
+			}else {
+			  var styles = "@import url("+styleSheet+");";
+			  var newSS=document.createElement('link');
+			  newSS.rel='stylesheet';
+			  newSS.href='data:text/css,'+escape(styles);
+			  document.getElementsByTagName("head")[0].appendChild(newSS);
+			}
+
+			console.log("Adding: "+styleSheet);
+
+		}else{
+			// No override
+		}
+
+
+
+	}
+
+}, false);
diff --git a/search.html b/search.html
new file mode 100644
index 0000000..39195ff
--- /dev/null
+++ b/search.html
@@ -0,0 +1,12 @@
+---
+layout: page
+title: Search
+permalink: search.html
+---
+{% include searchbox placeholder="Loading..."%}
+
+<div id="search-results">
+	<div class="searchMsgWrapper">
+		<div class="searchMsg">Searching...</div>
+	</div>
+</div>

From b736aa2b951da1063e550961aa8603e302354e14 Mon Sep 17 00:00:00 2001
From: Andrew Sempere <a@feralresearch.org>
Date: Mon, 23 Oct 2017 14:34:35 +0200
Subject: [PATCH 2/2] Added support for preflight and search

---
 _config.yml                        |   3 +
 _data/search_quicknav.json.EXAMPLE |   7 ++
 _includes/search_js_include_once   |  24 +++++
 _includes/search_support_head.html |  15 +++
 _includes/searchbox                |   4 +-
 _layouts/search.html               |  47 +++++++++
 _pages/search.html                 |  27 ++++++
 _sass/_search.scss                 | 100 +++++++++++--------
 _sass/_search_typeahead.scss       |  48 ++++++++++
 css/main.scss                      |   9 +-
 javascripts/search.js              |  48 ++++++----
 javascripts/search_typeahead.js    | 148 +++++++++++++++++++++++++++++
 preflight                          |  20 ++++
 13 files changed, 442 insertions(+), 58 deletions(-)
 create mode 100644 _data/search_quicknav.json.EXAMPLE
 create mode 100644 _includes/search_js_include_once
 create mode 100644 _includes/search_support_head.html
 create mode 100644 _layouts/search.html
 create mode 100644 _pages/search.html
 create mode 100644 _sass/_search_typeahead.scss
 create mode 100644 javascripts/search_typeahead.js
 create mode 100755 preflight

diff --git a/_config.yml b/_config.yml
index 13a4149..2f9b901 100644
--- a/_config.yml
+++ b/_config.yml
@@ -18,5 +18,8 @@ github_username: hofstra
 markdown: kramdown
 excerpt_separator: "<!--more-->"
 permalink: none
+include:
+- _pages
 exclude:
 - drc-website.sublime-project
+- preflight
diff --git a/_data/search_quicknav.json.EXAMPLE b/_data/search_quicknav.json.EXAMPLE
new file mode 100644
index 0000000..e3aca15
--- /dev/null
+++ b/_data/search_quicknav.json.EXAMPLE
@@ -0,0 +1,7 @@
+{
+	"home": "/coyote/",
+	"browse posts": "/coyote/browse/",
+	"about the project": "/coyote/about-project/",
+	"about the team": "/coyote/about-team/",
+	"contact us": "/coyote/contact-us/"
+}
diff --git a/_includes/search_js_include_once b/_includes/search_js_include_once
new file mode 100644
index 0000000..87a8100
--- /dev/null
+++ b/_includes/search_js_include_once
@@ -0,0 +1,24 @@
+<!--
+search_js_include_once
+
+Some black magic to include javascript only one time. Checks to see if the path is already loaded,
+if not it injects it via document write.
+
+Note: Chrome issues a warning because it may (optionally) block this kind of JS inclusion on slow networks
+
+-->
+<script>
+	var src="{{ include.src }}";
+	var isIncluded=false;
+	var scripts = document.getElementsByTagName("script");
+    for(var i = 0; i < scripts.length; i++){
+		if(scripts[i].getAttribute('src') == src){
+			isIncluded=true;
+			break;
+		}
+	}
+	if(!isIncluded){
+		// Weird syntax to insist we really mean this (otherwise browser blocks)
+		document.write('<script type="text/javascript" src="'+src+'"><\/scr'+'ipt>');
+	}
+</script>
diff --git a/_includes/search_support_head.html b/_includes/search_support_head.html
new file mode 100644
index 0000000..e5d598b
--- /dev/null
+++ b/_includes/search_support_head.html
@@ -0,0 +1,15 @@
+<!--
+search_support_head.html
+
+This file should be included in any page you want to support search and typeahead.
+It may be included harmlessly in more than one file
+-->
+{% include search_js_include_once src="https://cdnjs.cloudflare.com/ajax/libs/typeahead.js/0.11.1/typeahead.bundle.min.js" %}
+
+{% assign path="//javascripts/search_typeahead.js" | prepend:site.baseurl %}
+{% include search_js_include_once src=path %}
+
+{% include search_js_include_once src="https://cdnjs.cloudflare.com/ajax/libs/lunr.js/2.1.4/lunr.min.js" %}
+
+{% assign path="//javascripts/search.js" | prepend:site.baseurl %}
+{% include search_js_include_once src=path %}
diff --git a/_includes/searchbox b/_includes/searchbox
index 1b93ef0..55e2790 100644
--- a/_includes/searchbox
+++ b/_includes/searchbox
@@ -4,10 +4,10 @@
 	{% assign myid = include.id %}
 {% endif %}
 
-<form action="{{ site.baseurl }}/search.html" method="get">
+<form name="{{ myid }}" action="{{ site.baseurl }}/search.html" method="get" onsubmit="return window.formValidator();">
 <div class="searchbox">
    <div class="search">
-      <input type="text" name="query" class="searchTerm" id="{{ myid }}" placeholder="{{ include.placeholder }}">
+      <input type="text" name="query" class="searchTerm typeahead" id="{{ myid }}" placeholder="{{ include.placeholder }}">
       <button type="submit" value="search" class="searchButton">
         <span class="fa fa-search" aria-hidden="true"></span>
      </button>
diff --git a/_layouts/search.html b/_layouts/search.html
new file mode 100644
index 0000000..594751f
--- /dev/null
+++ b/_layouts/search.html
@@ -0,0 +1,47 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+	<title>{{ page.title }}</title>
+	{% include head.html %}
+	{% include search_support_head.html %}
+
+	<!-- Build a store for lunr -->
+	<script>
+	  window.store = {
+	    {% for post in site.posts %}
+	      "{{ post.url | slugify }}": {
+	        "title": "{{ post.title | xml_escape }}",
+	        "author": "{{ post.author | xml_escape }}",
+	        "category": "{{ post.category | xml_escape }}",
+	        "content": {{ post.content | strip_html | strip_newlines | jsonify }},
+	        "url": "{{ post.url | xml_escape }}"
+	      }
+	      {% unless forloop.last %},{% endunless %}
+	    {% endfor %}
+	  };
+	</script>
+</head>
+
+<body>
+	<div class="outer">
+		<div class="wrapper content-wrapper">
+
+			<br><br>
+
+			{% include searchbox placeholder=""%}
+
+			{{ content }}
+
+			<div id="search-results">
+				<div class="searchMsgWrapper">
+					<div class="searchMsg">Searching...</div>
+				</div>
+			</div>
+
+		</div>
+	</div>
+
+	{% include footer.html %}
+
+</body>
+</html>
diff --git a/_pages/search.html b/_pages/search.html
new file mode 100644
index 0000000..0ac186f
--- /dev/null
+++ b/_pages/search.html
@@ -0,0 +1,27 @@
+---
+title: Search
+permalink: search.html
+layout: page
+---
+<!-- Build a store for lunr -->
+<script>
+	window.store = {
+		{% for post in site.posts %}
+			"{{ post.url | slugify }}": {
+			"title": "{{ post.title | xml_escape }}",
+			"author": "{{ post.author | xml_escape }}",
+			"category": "{{ post.category | xml_escape }}",
+			"content": {{ post.content | strip_html | strip_newlines | jsonify }},
+			"url": "{{ post.url | xml_escape }}"
+		}
+		{% unless forloop.last %},{% endunless %}
+		{% endfor %}
+	};
+</script>
+
+{% include searchbox placeholder=""%}
+<div id="search-results">
+	<div class="searchMsgWrapper">
+		<div class="searchMsg">Searching...</div>
+	</div>
+</div>
diff --git a/_sass/_search.scss b/_sass/_search.scss
index 0541b18..2337aab 100644
--- a/_sass/_search.scss
+++ b/_sass/_search.scss
@@ -1,27 +1,34 @@
-
-/* FontAwesome icon font http://fontawesome.io/ */
-@import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css");
-
 /* Search */
-$color-search: #c2b4a5;
-$color-searchBackground: #333333;
-$color-searchFocus: #00B4CC;
+$color-search: #5f5e6f;
+$color-searchBackground: #3d3c48;
+$color-searchFocus: #5f5e6f;
 $color-searchPlaceholder: #DDDDDD;
-$size-searchBox: 1.3rem;
-$color-linkHover: $color-searchBackground;
+$size-searchBox: 2rem;
+$color-searchResultsLinkHover: #c2b4a5;
+
+mark {
+	background-color: yellow;
+	color: black;
+}
 
 .search {
 	width: 100%;
 	position: relative;
 }
 
+.searchbox input {
+	border: 0;
+	padding: 0;
+	margin: 0;
+}
+
 .searchTerm {
-	font-size: $size-searchBox;
+	font-size: $size-searchBox !important;
 	float: left;
 	width: 100%;
-	border: 3px solid $color-search;
-	padding: 5px;
-	border-radius: 5px;
+	border: 0;
+	padding: 0.4rem 0.5rem 0.5rem 3.5rem !important;
+	border-radius: 1rem 0 0 1rem;
 	outline: none;
 	color: $color-searchPlaceholder;
 }
@@ -35,51 +42,63 @@ input::placeholder {
 }
 
 .searchButton {
-	margin: 0;
-	font-size: $size-searchBox;
-	padding: 0.4rem;
+	  font-size: 1.2rem;
 	position: absolute;
-	right: 0rem;
+	top: 0;
+	width: 3.2rem;
+	left: -.1rem;
+	margin: 0;
+	right: 0.1rem;
 	border: 1px solid $color-search;
 	background: $color-search;
 	text-align: center;
 	color: white;
-	border-radius: 5px;
+	border-radius: 0.3rem 0 0 0.3rem;
 	cursor: pointer;
 }
 
 .searchbox {
 	background-color: $color-searchBackground;
-	border-radius: 0.3rem 0.3rem 0 0;
+	border-radius: 0.3rem;
 	padding: 1rem;
-	height: 4.3rem;
+	height: 5.5rem;
 }
 
 #search-results .searchMsgWrapper {
-  text-align:center;
+	text-align: center;
 }
 
 #search-results .searchMsg {
-  font-size: 2em;
-  margin: 1rem auto 0;
+	background: rgba(255, 255, 255, 0.25);
+	padding: 5rem;
+	border-radius: 1rem;
+	width: 100%;
+	font-size: 1.2em;
 }
-
-
 /*
 	Small search overrides
 */
+@media all and (max-width: 940px) {
+	.smallSearch {
+		display: none;
+	}
+}
+
 .smallSearch input::placeholder {
 	content: '';
 }
 
 .smallSearch .searchButton {
-	margin: 0.15rem 0 0;
-	font-size: 0.8rem;
-	border-radius: 0 0.3rem 0.3rem 0;
+	width: 2rem;
+	margin: 0;
+	font-size: 1.6rem;
+	top: 0;
+	border-radius: 0.3rem 0 0 0.3rem;
 	background-color: #625044;
 }
 
 .smallSearch .searchbox {
+	width: 10rem;
 	position: relative;
 	top: 0.8rem;
 	padding: 0;
@@ -89,25 +108,30 @@ input::placeholder {
 
 .smallSearch .searchTerm {
 	font-size: 1rem;
+	border-radius: 0.3rem;
 }
-
 /*
 	Search results listing
 */
 #search-results {
-  padding: 1rem; }
+	padding: 1rem;
+}
 
 #search-results h3 {
-  line-height: 1.2rem;
-  font-size: 1rem; }
+	line-height: 1.2rem;
+	font-size: 1rem;
+}
 
 #search-results p {
-	  padding:0 .4rem 0 .4rem;
-  line-height: 1.2rem; }
+	padding: 0 0.4rem;
+	line-height: 1.2rem;
+}
 
 #search-results h3 a:hover {
-  color: $color-linkHover; }
+	color: $color-searchResultsLinkHover;
+}
 
-  #search-results h3 a{
-    text-decoration:none;
-    border-bottom:1px solid rgba(98, 80, 68, 0.14);}
+#search-results h3 a {
+	text-decoration: none;
+	border-bottom: 1px solid rgba(98, 80, 68, 0.14);
+}
diff --git a/_sass/_search_typeahead.scss b/_sass/_search_typeahead.scss
new file mode 100644
index 0000000..d763269
--- /dev/null
+++ b/_sass/_search_typeahead.scss
@@ -0,0 +1,48 @@
+.tt-hint,
+.tt-query {
+	line-height: 30px;
+	border: 2px solid #ccc;
+	border-radius: 8px;
+	outline: none;
+}
+
+.tt-query {
+	/* UPDATE: newer versions use tt-input instead of tt-query */
+	box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
+}
+
+.tt-hint {
+	color: #999;
+}
+
+.tt-menu {
+	/* UPDATE: newer versions use tt-menu instead of tt-dropdown-menu */
+	width: 100%;
+	margin-top: 12px;
+	padding: 8px 0;
+	background-color: #fff;
+	border: 1px solid #ccc;
+	border: 1px solid rgba(0, 0, 0, 0.2);
+	border-radius: 8px;
+	box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
+}
+
+.tt-suggestion {
+	padding: 3px 20px;
+	font-size: 18px;
+	line-height: 24px;
+}
+
+.tt-suggestion.tt-suggestion.tt-cursor {
+	/* UPDATE: newer versions use .tt-suggestion.tt-cursor */
+	color: #fff;
+	background-color: #0097cf;
+}
+
+.tt-suggestion p {
+	margin: 0;
+}
+
+.twitter-typeahead {
+	width: 100%;
+}
diff --git a/css/main.scss b/css/main.scss
index 600ec87..ff1f0ec 100644
--- a/css/main.scss
+++ b/css/main.scss
@@ -3,12 +3,17 @@
 
 @charset "utf-8";
 
+/* FontAwesome icon font http://fontawesome.io/ */
+@import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css");
+
 // Import partials from `sass_dir` (defaults to `_sass`)
 @import
 	"bourbon/bourbon",
 	"neat/neat",
 	"base/base",
     "hofstra/hofstra",
-	"layout",
-	"search"
+	"layout"
 ;
+
+@import "_search";
+@import "_search_typeahead";
diff --git a/javascripts/search.js b/javascripts/search.js
index d5c7092..23970a8 100644
--- a/javascripts/search.js
+++ b/javascripts/search.js
@@ -5,21 +5,11 @@
 // After DOM is loaded
 document.addEventListener('DOMContentLoaded', function() {
 
-	// Bounce if we're not on the search results page
-	if(!document.getElementById('search-results')){
-		return;
-	}
-	
 	// Parse keyword from GET vars
 	var searchTerm = getQueryVariable('query');
-
-	// If there is no search term (FIXME: We can handle this better)
-	if(!searchTerm){
-		document.getElementById('largeSearch').setAttribute("value", ' ');
-		document.getElementById('search-results').innerHTML='';
-	}
-
-	if (searchTerm) {
+	if (!searchTerm) {
+		displayFailureMessage('');
+	}else{
 
 		// Set the search boxes on the page to have the searchterm
 		/*
@@ -53,13 +43,25 @@ document.addEventListener('DOMContentLoaded', function() {
 		// Run the search
 		for (var key in window.store) {
 			//NOTE: Any boost should go here, IE idx.search('title:foo^10')
-			var results = idx.search(searchTerm);
+			try {
+    			var results = idx.search(searchTerm);
+
+			// Search supports things like category: title:
+			}catch(error) {
+				displayFailureMessage(error.message);
+				return;
+			}
+
 			displaySearchResults(results, window.store);
 		}
 
 
 	}
 
+
+
+
+
 	// Display the search results on the page
 	function displaySearchResults(results, store) {
 		var searchResults = document.getElementById('search-results');
@@ -73,10 +75,25 @@ document.addEventListener('DOMContentLoaded', function() {
 			}
 			searchResults.innerHTML = appendString;
 		} else {
-			searchResults.innerHTML = '<div class="searchMsgWrapper"><div class="searchMsg">No results found for "' + searchTerm + '"</div></div>';
+			displayFailureMessage('No results found for "' + searchTerm+'"');
+		}
+
+
+	}
+
+
+	// Inject a failure message onto the screen (into #search-results)
+	function displayFailureMessage(message){
+		var searchResults = document.getElementById('search-results');
+		if(searchResults == null){return;}
+		if($.trim(message) == ''){
+			searchResults.innerHTML = '';
+		}else{
+			searchResults.innerHTML = '<div class="searchMsgWrapper"><div class="searchMsg">'+message+'</div></div>';
 		}
 	}
 
+
 	// Helper: Parse GET vars
 	function getQueryVariable(variable) {
 		var query = window.location.search.substring(1);
@@ -89,5 +106,4 @@ document.addEventListener('DOMContentLoaded', function() {
 		}
 	}
 
-
 }, false);
diff --git a/javascripts/search_typeahead.js b/javascripts/search_typeahead.js
new file mode 100644
index 0000000..fc7140f
--- /dev/null
+++ b/javascripts/search_typeahead.js
@@ -0,0 +1,148 @@
+---
+---
+
+$(document).ready(function() {
+
+
+	var levDist = function(s, t) {
+		var d = []; //2d matrix
+
+		// Step 1
+		var n = s.length;
+		var m = t.length;
+
+		if (n == 0) return m;
+		if (m == 0) return n;
+
+		//Create an array of arrays in javascript (a descending loop is quicker)
+		for (var i = n; i >= 0; i--) d[i] = [];
+
+		// Step 2
+		for (var i = n; i >= 0; i--) d[i][0] = i;
+		for (var j = m; j >= 0; j--) d[0][j] = j;
+
+		// Step 3
+		for (var i = 1; i <= n; i++) {
+			var s_i = s.charAt(i - 1);
+
+			// Step 4
+			for (var j = 1; j <= m; j++) {
+
+				//Check the jagged ld total so far
+				if (i == j && d[i][j] > 4) return n;
+
+				var t_j = t.charAt(j - 1);
+				var cost = (s_i == t_j) ? 0 : 1; // Step 5
+
+				//Calculate the minimum
+				var mi = d[i - 1][j] + 1;
+				var b = d[i][j - 1] + 1;
+				var c = d[i - 1][j - 1] + cost;
+
+				if (b < mi) mi = b;
+				if (c < mi) mi = c;
+
+				d[i][j] = mi; // Step 6
+
+				//Damerau transposition
+				if (i > 1 && j > 1 && s_i == t.charAt(j - 2) && s.charAt(i - 2) == t_j) {
+					d[i][j] = Math.min(d[i][j], d[i - 2][j - 2] + cost);
+				}
+			}
+		}
+
+		// Step 7
+		return d[n][m];
+	}
+
+	var substringMatcher = function(strs) {
+		return function findMatches(q, cb) {
+			var matches, substringRegex;
+
+			// an array that will be populated with substring matches
+			matches = [];
+
+			// regex used to determine if a string contains the substring `q`
+			substrRegex = new RegExp(q.replace(/[\-\[\]\/\{\}\(\)\*\+\?\.\\\^\$\|]/g, "\\$&"), 'i');
+
+			// iterate through the pool of strings and for any string that
+			// contains the substring `q`, add it to the `matches` array
+			$.each(strs, function(i, str) {
+				if (substrRegex.test(str)) {
+					matches.push(str);
+				}
+			});
+
+			matches = matches.sort(function(a, b) {
+				return levDist(a, q) - levDist(b, q);
+			});
+
+
+			// For demonstration:
+			//for (var i = 0; i < matches.length; i++) {
+			//	matches[i] = matches[i] + "(" + levDist(matches[i], q) + ")";
+			//}
+
+			cb(matches);
+		};
+	};
+
+
+
+	// Load the quick-nav from a json data file and prepend special char
+	var quickNav={{ site.data.search_quicknav | jsonify }};
+	window.quickNav=[];
+	for(var key in quickNav){
+		var newKey = '» '+key;
+		//console.log(newKey + " is "+quickNav[key] );
+		window.quickNav[newKey]=quickNav[key];
+	}
+
+	// Typeahead should be search capabilities
+	var typeaheadData = [
+		'id:',
+		'title:',
+		'author:',
+		'category:',
+		'content:',
+	];
+
+	// ...plus quicknav items
+	for (var key in window.quickNav) {
+	   	typeaheadData.push(key)
+	}
+
+
+	$('#largeSearch').typeahead({
+		hint: true,
+		highlight: true,
+		minLength: 1
+	}, {
+		name: 'typeaheadData',
+		source: substringMatcher(typeaheadData)
+	});
+
+
+	// When the typeahead enter is hit, submit the form
+	$('input.typeahead').bind("typeahead:selected", function () {
+           $("form").submit();
+	});
+
+
+
+	// Intercept form submission
+	window.formValidator = function(){
+
+		// If we find the special char, then we navigate, otherwise submit form
+		var searchTerm = document.forms["largeSearch"]["query"].value;
+		if(searchTerm.indexOf('»') !== -1){
+			destination=window.quickNav[searchTerm];
+			console.log("Navigate to: "+ searchTerm + destination);
+			document.location=destination;
+			return false;
+		}
+
+		return true;
+	}
+
+});
diff --git a/preflight b/preflight
new file mode 100755
index 0000000..7e5d61a
--- /dev/null
+++ b/preflight
@@ -0,0 +1,20 @@
+#!/bin/bash
+#
+# preflight hook, runs a bunch of scripts on the jekyll dir
+#
+####################
+
+# Where do the jekyll source files live? (relative to the project root)
+JEKYLL_PROJECT_SASS=/css
+JEKYLL_PROJECT_JS=/javascripts
+
+
+############################################################
+# DO NOT EDIT BELOW
+############################################################
+DIR="$( cd "$( dirname "${BASH_SOURCE[0]}" )" && pwd )"
+#PREFLIGHT_DIR=$DIR/preflightSupport
+
+# Search
+# script EXECDIR SASSDIR JSDIR
+$DIR/../jekyll-shared/preflight/search/_preflight_search $DIR $JEKYLL_PROJECT_SASS $JEKYLL_PROJECT_JS