Improve site search (update results template according to new index)

5 files changed, 58 insertions, 12 deletions

diff --git a/content/assets/stylesheets/_variables.scss b/content/assets/stylesheets/_variables.scss
index eadf5562..c59ebb70 100644
--- a/content/assets/stylesheets/_variables.scss
+++ b/content/assets/stylesheets/_variables.scss
@@ -49,6 +49,11 @@ $main-box-shadow: rgba(0, 0, 0, .1);
 $white: #fff;
 $black: #333;
 
+// tanuki
+$color-tanuki-dark: rgb(226, 67, 41);
+$color-tanuki-medium: rgb(252, 109, 38);
+$color-tanuki-light: rgb(252, 163, 38);
+
 // Footer variables
 
 $color-white: #fff;
@@ -77,9 +82,6 @@ $color-primary-medium: #503991;
 
 $divider-color: #d3d3d3;
 
-$link-color: #55acee;
-$link-code-color: rgb(55, 119, 176);
-
 $border-color: #dfdfdf;
 
 $header-text-light-color: #a69ebd;
diff --git a/content/assets/stylesheets/instantsearch.scss b/content/assets/stylesheets/instantsearch.scss
index c75e38a6..1cd92d9c 100644
--- a/content/assets/stylesheets/instantsearch.scss
+++ b/content/assets/stylesheets/instantsearch.scss
@@ -1,7 +1,9 @@
 ---
-version: 2
+version: 3
 ---
 
+@import "variables";
+
 // original CSS: https://github.com/algolia/examples/blob/master/instant-search/instantsearch.js/assets/style.css
 // original CSS customized and converted to SCSS with http://sebastianpontow.de/css2compass/
 
@@ -16,6 +18,7 @@ $color6: #999;
 $color7: #868686;
 $color8: #fff;
 $color9: #383838;
+$color10: rgb(117, 117, 117);
 
 //scss-lint:disable ImportantRule
 .ais-search-box {
@@ -44,10 +47,31 @@ $color9: #383838;
   font-weight: 300;
   width: 100%; // was 81%
   position: relative;
+  color: $color10;
 
   &:hover {
     border-color: $color1;
     box-shadow: 1px 1px 3px $color2;
+  
+    .lvl0,
+    .lvl1,
+    .lvl2,
+    .hit-text {
+      color: $link-color-hover;
+    }
+  }
+
+  .lvl0 {
+    color: $black;
+  }
+
+  .lvl1 {
+    font-size: 18px !important;
+  }
+
+  .lvl2 {
+    font-size: 14px;
+    color: $color7;
   }
 
   .hit-name {
@@ -65,9 +89,7 @@ $color9: #383838;
   }
 
   .hit-description {
-    color: $color7;
     margin: 1px 0 10px;
-    font-size: 14px;
   }
 
   .hit-tag {
@@ -80,12 +102,31 @@ $color9: #383838;
     border-bottom-left-radius: 5px;
     right: 0;
     top: 0;
-    width: 90px;
+    width: 70px;
     height: 25px;
     font-size: 11px;
+    font-weight: 500;
     text-align: center;
+    text-transform: uppercase;
     color: $color6;
   }
+
+  .hit-text {
+    font-size: inherit;
+    color: $link-color;
+  }
+
+  @media all and (max-width: $mobile-width) {
+    .hit-tag {
+      width: 60px;
+      height: 20px;
+      font-size: 10px;
+    }
+
+    .lvl0 {
+      padding-top: 5px;
+    }
+  }
 }
 //scss-lint:enable ImportantRule
 
@@ -145,4 +186,5 @@ $color9: #383838;
 
 .ais-refinement-list--label {
   text-transform: uppercase;
+  color: $link-color;
 }
diff --git a/content/assets/stylesheets/stylesheet.scss b/content/assets/stylesheets/stylesheet.scss
index 0c42b313..2108f475 100644
--- a/content/assets/stylesheets/stylesheet.scss
+++ b/content/assets/stylesheets/stylesheet.scss
@@ -1,5 +1,5 @@
 ---
-version: 27
+version: 28
 ---
 
 @import "variables";
diff --git a/content/search/index.md b/content/search/index.md
index 26d49c65..e18386ae 100644
--- a/content/search/index.md
+++ b/content/search/index.md
@@ -16,10 +16,11 @@ layout: instantsearch
   <script type="text/html" id="hit-template">
     <a href="{{ url }}" class="hit">
         <div class="hit-content">
-          <h3 class="hit-name">{{{_highlightResult.hierarchy.lvl1.value}}}</h3>
-            <h4 class="hit-description">{{{_highlightResult.hierarchy.lvl2.value}}}</h4>
-          <p class="hit-text">{{{_highlightResult.content.value}}}</p>
-          <div class="hit-tag">{{{_highlightResult.hierarchy.lvl0.value}}}</div>
+          <h3 class="hit-name lvl0">{{{_highlightResult.hierarchy.lvl0.value}}}</h3>
+            <h4 class="hit-description lvl1">{{{_highlightResult.hierarchy.lvl1.value}}}</h4>
+            <h5 class="hit-description lvl2">{{{_highlightResult.hierarchy.lvl2.value}}}</h5>
+          <div class="hit-text">{{{_highlightResult.content.value}}}</div>
+          <div class="hit-tag">{{ tags }}</div>
         </div>
       </a>
   </script>
diff --git a/layouts/instantsearch.html b/layouts/instantsearch.html
index 58da4541..58c7a304 100644
--- a/layouts/instantsearch.html
+++ b/layouts/instantsearch.html
@@ -50,6 +50,7 @@
           instantsearch.widgets.refinementList({
             container: '#refinement-list',
             attributeName: 'tags',
+            sortBy: ["name:asc","isRefined"],
             templates: {
               header: 'Refine your search:'
             }