Add actual search bar

content/search.md

@@ -1,5 +1,6 @@
 ---
 title: Search
+linkTitle: 🔎
 layout: search
 ---
 

layouts/_default/search.html

@@ -1,10 +1,15 @@
 {{ partial "page_start.html" . }}
 <section id="main" class="container">
   {{ partial "content.html" . }}
+  <div class="search-input-container">
+    <input id="search" type="text" placeholder="Search &#8981;"/>
+  </div>
 
   <div class="row search-results">
-    {{ $valid_pages :=  where (where .Site.Pages.ByTitle "Kind" "page") ".Parent" "!=" nil }}
-    {{ range $valid_pages }}
+    {{ $valid_pages :=  where .Site.Pages ".Parent" "!=" nil }}
+    {{ $valid_pages := where $valid_pages "Kind" "page" }}
+    {{ $valid_pages := where $valid_pages ".UniqueID" "!=" .UniqueID }}
+    {{ range (sort $valid_pages ".LinkTitle") }}
       {{ partial "box_image.html" . }}
     {{ end }}
   </div>

static/src/js/index.js

@@ -9,6 +9,7 @@ require('club-alpha/assets/js/util');
 require('lightgallery/dist/js/lightgallery');
 require('lg-thumbnail/dist/lg-thumbnail');
 require('./alpha/main');
+require('./search');
 
 
 $('.image').each(function () {  // setup div-image hybrids

static/src/js/search.js

@@ -0,0 +1,16 @@
+$(document).ready(function(){
+  var FADE_SETTINGS = {
+    duration: 400
+  };
+
+  $("input#search").keyup(function() {
+    var filter = new RegExp($(this).val(), 'gi');
+    $("div.search-results > div").each(function(){
+      if ($(this).text().search(filter) === -1) {
+        $(this).fadeOut(FADE_SETTINGS);
+      } else {
+        $(this).fadeIn(FADE_SETTINGS);
+      }
+    });
+  });
+});

static/src/scss/style.scss

@@ -178,3 +178,11 @@ nav {
   display: inline-block;
   padding: 0 2px;
 }
+
+.search-input-container {
+  margin: 20px 40px;
+
+  input {
+    text-align: center;
+  }
+}