refactor: Optimize UI of search

layout/_components/search/algolia.pug

-div.algolia-mask
+div.search-mask
 
-div.algolia-popup
-  div.algolia-input-wrapper
-  span.algolia-close
-    i.fa.fa-times
+div.search-popup
+  span.search-close
+  div.search-input
   
-  div.algolia-results
+  div.search-results
     div#algolia-hits
   
   div#algolia-pagination

layout/_components/search/localsearch.pug

-div.localsearch-mask
+div.search-mask
 
-div.localsearch-popup
-  div.localsearch-input-wrapper
+div.search-popup
+  span.search-close
+  div.search-input
     input(placeholder= _p("local_search.input_placeholder"))
-  span.localsearch-close
-    i.fa.fa-times
 
-  div.localsearch-result
+  div.search-results

layout/_third-party/search/localsearch.pug

@@ -5,15 +5,15 @@ if theme.local_search.enable
         e.stopPropagation();
 
         $('body').css('overflow', 'hidden');
-        $('.localsearch-popup')
+        $('.search-popup')
           .velocity('stop')
           .velocity('transition.expandIn', {
             duration: 300,
             complete: function () {
-              $('.localsearch-popup input').focus();
+              $('.search-popup input').focus();
             }
           });
-        $('.localsearch-mask')
+        $('.search-mask')
           .velocity('stop')
           .velocity('transition.fadeIn', {
             duration: 300
@@ -22,7 +22,7 @@ if theme.local_search.enable
         initSearch();
       });
 
-      $('.localsearch-mask, .localsearch-close').on('click', function () {
+      $('.search-mask, .search-close').on('click', function () {
         closeSearch();
       });
 
@@ -59,8 +59,8 @@ if theme.local_search.enable
               };
             }).get() : res;
 
-            var $input = $('.localsearch-input-wrapper input');
-            var $result = $('.localsearch-result');
+            var $input = $('.search-input input');
+            var $result = $('.search-results');
 
             // 搜索对象（标题、内容）的权重，影响显示顺序
             var WEIGHT = { title: 100, content: 1 };
@@ -221,9 +221,9 @@ if theme.local_search.enable
               });
               
               matchPosts.forEach(function (post) {
-                resultInnerHtml += '<li><a class="localsearch-result-title" href="' + post.url + '">';
+                resultInnerHtml += '<li><a class="search-results-title" href="' + post.url + '">';
                 resultInnerHtml += post.title;
-                resultInnerHtml += '</a><div class="localsearch-result-content">';
+                resultInnerHtml += '</a><div class="search-results-content">';
                 resultInnerHtml += post.content;
                 resultInnerHtml += '</div></li>';
               });
@@ -243,12 +243,12 @@ if theme.local_search.enable
 
       function closeSearch () {
         $('body').css('overflow', 'auto');
-        $('.localsearch-popup')
+        $('.search-popup')
           .velocity('stop')
           .velocity('transition.expandOut', {
             duration: 300
           });
-        $('.localsearch-mask')
+        $('.search-mask')
           .velocity('stop')
           .velocity('transition.fadeOut', {
             duration: 300

source/css/_common/responsive.styl

@@ -81,8 +81,7 @@
     .header-info-subtitle
       font-size: 1rem
 
-  div.algolia-popup,
-  div.localsearch-popup
+  div.search-popup
     top: 0
     left: 0
     margin: 0
@@ -91,7 +90,7 @@
     height: 100vh
     max-height: 100vh
 
-  div.localsearch-result
+  div.search-results
     max-height: calc(100vh - 6rem)
 
 // $xs-width: 576px - 0.02px
@@ -135,11 +134,8 @@
     span
       display: none
 
-  div.algolia-results
-    max-height: 10rem
-
-    .algolia-hit-item
-      margin: 0
+  .algolia-hit-item
+    margin: 0
 
   .post-header
     font-size: $font-size-base
@@ -179,11 +175,10 @@
   .gallery-image
     width: 100%
 
-  div.algolia-popup,
-  div.localsearch-popup
+  div.search-popup
     padding: .8rem .6rem 1rem
 
-  div.localsearch-result
+  div.search-results
     & > ul
       padding-left: 1rem
 

source/css/_components/search/algolia.styl

-.algolia-input-wrapper
+.search-input
   .ais-search-box
     max-width: 100%
 
@@ -14,6 +14,10 @@
     background-color: #fff
     transition: color .2s
 
+  em
+    font-style: normal
+    background-color: $yellow-light
+
 #algolia-pagination
   margin: .5rem 0
 

source/css/_components/search/common.styl

-.algolia-mask,
-.localsearch-mask
+.search-mask
   display: none
   position: fixed
   top: 0
@@ -9,8 +8,7 @@
   height: 100%
   background-color: alpha($black-dark, .7)
 
-.algolia-popup,
-.localsearch-popup
+.search-popup
   display: none
   position: fixed
   top: 10%
@@ -25,8 +23,7 @@
   color: $font-color
   background-color: $white-light
 
-.algolia-input-wrapper,
-.localsearch-input-wrapper
+.search-input
   margin: 1.2rem 0 1rem
 
   input
@@ -41,21 +38,35 @@
     &:focus
       border-color: $blue-light
 
-.algolia-close,
-.localsearch-close
+.search-close
   position: absolute
-  top: 0
-  right: .6rem
+  top: .5rem
+  right: .5rem
+  width: 1rem
+  height: 1rem
   font-size: 1.25em
   color: $black-light
+  transform: translateZ(0)
   cursor: pointer
 
-.algolia-results,
-.localsearch-results
+  &::before,
+  &::after
+    content: ''
+    display: block
+    position: absolute
+    top: 50%
+    margin-top: -.1rem
+    width: 1rem
+    height: .2rem
+    background-color: $black-light
+  
+  @extend .anime-close
+
+.search-results
   overflow-x: hidden
   overflow-y: scroll
   max-height: 16rem
 
   em
     font-style: normal
-    background-color: $yellow-light
+    background-color: $yellow-light
\ No newline at end of file

source/css/_components/search/localsearch.styl

-.localsearch-input-wrapper
+.search-input
   input
     width: 100%
 
-.localsearch-result
-  overflow: auto
+.search-results
   max-height: calc(80vh - 6rem)
 
   b
     border-bottom: 1px dashed red
     color: red
+    transition: color .2s
 
   & > ul
     margin: 0
@@ -18,18 +18,24 @@
       &:not(:last-child)
         margin-bottom: 1rem
 
-      &::after
-        content: ''
-        display: block
-        border-bottom: 1px dashed #ccc
-        padding-bottom: .5rem
-        width: 100%
+        &::after
+          content: ''
+          display: block
+          border-bottom: 1px dashed #ccc
+          padding-bottom: .5rem
+          width: 100%
 
   &-title
     clearAStyle()
     font-weight: $font-weight-bold
     color: #222
 
+    &:hover
+      color: $blue-light
+      
+      b
+        color: $blue-light
+
   &-content
     overflow: hidden
     width: 100%

source/css/_global/utils.styl

+// Clear global style
+// ----------------------------------------
 clearAStyle()
   border-bottom: 0
 
@@ -9,17 +11,21 @@ clearImgStyle()
   border-radius: 0
   padding: 0
 
+// Clear float
+// ----------------------------------------
 .clearfix::after
   content: ''
   display: table
   clear: both
 
+// UI component
+// ----------------------------------------
 $popover-bg-color = alpha(#000, .7)
 
+// UI components of "popover"
 [data-popover]
   position: relative
 
-// UI components of "popover"
 [data-popover]::before
   position: absolute
   top: 0
@@ -46,3 +52,19 @@ $popover-bg-color = alpha(#000, .7)
 [data-popover][data-popover-pos='up']:hover::before
   opacity: 1
   transform: translate(-50%, -115%)
+
+// Animation class
+// ----------------------------------------
+.anime-close
+  &::before,
+  &::after
+    transition: transform .25s
+    transform: rotate(-45deg)
+
+  &::after
+    transform: rotate(-135deg)
+
+  &:hover
+    &::before,
+    &::after
+      transform: rotate(0)
\ No newline at end of file

source/images/algolia.svg

-<svg xmlns="http://www.w3.org/2000/svg"><linearGradient id="a" x1="428.258" x2="434.145" y1="404.15" y2="409.85" gradientUnits="userSpaceOnUse" gradientTransform="matrix(94.045 0 0 -94.072 -40381.527 38479.52)"><stop offset="0" stop-color="#00aeff"/><stop offset="1" stop-color="#3369e7"/></linearGradient><path fill="url(#a)" d="M61.8 15.4h242.8c23.9 0 43.4 19.4 43.4 43.4v242.9c0 23.9-19.4 43.4-43.4 43.4H61.8c-23.9 0-43.4-19.4-43.4-43.4v-243c0-23.9 19.4-43.3 43.4-43.3z"/><path fill="#FFF" d="M187 98.7c-51.4 0-93.1 41.7-93.1 93.2S135.6 285 187 285s93.1-41.7 93.1-93.2-41.6-93.1-93.1-93.1zm0 158.8c-36.2 0-65.6-29.4-65.6-65.6s29.4-65.6 65.6-65.6 65.6 29.4 65.6 65.6-29.3 65.6-65.6 65.6zm0-117.8v48.9c0 1.4 1.5 2.4 2.8 1.7l43.4-22.5c1-.5 1.3-1.7.8-2.7-9-15.8-25.7-26.6-45-27.3-1 0-2 .8-2 1.9zm-60.8-35.9l-5.7-5.7c-5.6-5.6-14.6-5.6-20.2 0l-6.8 6.8c-5.6 5.6-5.6 14.6 0 20.2l5.6 5.6c.9.9 2.2.7 3-.2 3.3-4.5 6.9-8.8 10.9-12.8 4.1-4.1 8.3-7.7 12.9-11 1-.6 1.1-2 .3-2.9zM217.5 89V77.7c0-7.9-6.4-14.3-14.3-14.3h-33.3c-7.9 0-14.3 6.4-14.3 14.3v11.6c0 1.3 1.2 2.2 2.5 1.9 9.3-2.7 19.1-4.1 29-4.1 9.5 0 18.9 1.3 28 3.8 1.2.3 2.4-.6 2.4-1.9z"/><path fill="#182359" d="M842.5 267.6c0 26.7-6.8 46.2-20.5 58.6-13.7 12.4-34.6 18.6-62.8 18.6-10.3 0-31.7-2-48.8-5.8l6.3-31c14.3 3 33.2 3.8 43.1 3.8 15.7 0 26.9-3.2 33.6-9.6s10-15.9 10-28.5v-6.4c-3.9 1.9-9 3.8-15.3 5.8-6.3 1.9-13.6 2.9-21.8 2.9-10.8 0-20.6-1.7-29.5-5.1-8.9-3.4-16.6-8.4-22.9-15-6.3-6.6-11.3-14.9-14.8-24.8s-5.3-27.6-5.3-40.6c0-12.2 1.9-27.5 5.6-37.7 3.8-10.2 9.2-19 16.5-26.3 7.2-7.3 16-12.9 26.3-17s22.4-6.7 35.5-6.7c12.7 0 24.4 1.6 35.8 3.5 11.4 1.9 21.1 3.9 29 6.1v155.2zm-108.7-77.2c0 16.4 3.6 34.6 10.8 42.2 7.2 7.6 16.5 11.4 27.9 11.4 6.2 0 12.1-.9 17.6-2.6 5.5-1.7 9.9-3.7 13.4-6.1v-97.1c-2.8-.6-14.5-3-25.8-3.3-14.2-.4-25 5.4-32.6 14.7-7.5 9.3-11.3 25.6-11.3 40.8zm294.3 0c0 13.2-1.9 23.2-5.8 34.1s-9.4 20.2-16.5 27.9c-7.1 7.7-15.6 13.7-25.6 17.9s-25.4 6.6-33.1 6.6c-7.7-.1-23-2.3-32.9-6.6-9.9-4.3-18.4-10.2-25.5-17.9-7.1-7.7-12.6-17-16.6-27.9s-6-20.9-6-34.1c0-13.2 1.8-25.9 5.8-36.7 4-10.8 9.6-20 16.8-27.7s15.8-13.6 25.6-17.8c9.9-4.2 20.8-6.2 32.6-6.2s22.7 2.1 32.7 6.2c10 4.2 18.6 10.1 25.6 17.8 7.1 7.7 12.6 16.9 16.6 27.7 4.2 10.8 6.3 23.5 6.3 36.7zm-40 .1c0-16.9-3.7-31-10.9-40.8-7.2-9.9-17.3-14.8-30.2-14.8-12.9 0-23 4.9-30.2 14.8-7.2 9.9-10.7 23.9-10.7 40.8 0 17.1 3.6 28.6 10.8 38.5 7.2 10 17.3 14.9 30.2 14.9 12.9 0 23-5 30.2-14.9 7.2-10 10.8-21.4 10.8-38.5zm127.1 86.4c-64.1.3-64.1-51.8-64.1-60.1L1051 32l39.1-6.2v183.6c0 4.7 0 34.5 25.1 34.6v32.9zm68.9 0h-39.3V108.1l39.3-6.2v175zm-19.7-193.5c13.1 0 23.8-10.6 23.8-23.7S1177.6 36 1164.4 36s-23.8 10.6-23.8 23.7 10.7 23.7 23.8 23.7zm117.4 18.6c12.9 0 23.8 1.6 32.6 4.8 8.8 3.2 15.9 7.7 21.1 13.4s8.9 13.5 11.1 21.7c2.3 8.2 3.4 17.2 3.4 27.1v100.6c-6 1.3-15.1 2.8-27.3 4.6s-25.9 2.7-41.1 2.7c-10.1 0-19.4-1-27.7-2.9-8.4-1.9-15.5-5-21.5-9.3-5.9-4.3-10.5-9.8-13.9-16.6-3.3-6.8-5-16.4-5-26.4 0-9.6 1.9-15.7 5.6-22.3 3.8-6.6 8.9-12 15.3-16.2 6.5-4.2 13.9-7.2 22.4-9s17.4-2.7 26.6-2.7c4.3 0 8.8.3 13.6.8s9.8 1.4 15.2 2.7v-6.4c0-4.5-.5-8.8-1.6-12.8-1.1-4.1-3-7.6-5.6-10.7-2.7-3.1-6.2-5.5-10.6-7.2s-10-3-16.7-3c-9 0-17.2 1.1-24.7 2.4-7.5 1.3-13.7 2.8-18.4 4.5l-4.7-32.1c4.9-1.7 12.2-3.4 21.6-5.1s19.5-2.6 30.3-2.6zm3.3 141.9c12 0 20.9-.7 27.1-1.9v-39.8c-2.2-.6-5.3-1.3-9.4-1.9-4.1-.6-8.6-1-13.6-1-4.3 0-8.7.3-13.1 1-4.4.6-8.4 1.8-11.9 3.5s-6.4 4.1-8.5 7.2c-2.2 3.1-3.2 4.9-3.2 9.6 0 9.2 3.2 14.5 9 18 5.9 3.6 13.7 5.3 23.6 5.3zM512.9 103c12.9 0 23.8 1.6 32.6 4.8 8.8 3.2 15.9 7.7 21.1 13.4 5.3 5.8 8.9 13.5 11.1 21.7 2.3 8.2 3.4 17.2 3.4 27.1v100.6c-6 1.3-15.1 2.8-27.3 4.6-12.2 1.8-25.9 2.7-41.1 2.7-10.1 0-19.4-1-27.7-2.9-8.4-1.9-15.5-5-21.5-9.3-5.9-4.3-10.5-9.8-13.9-16.6-3.3-6.8-5-16.4-5-26.4 0-9.6 1.9-15.7 5.6-22.3 3.8-6.6 8.9-12 15.3-16.2 6.5-4.2 13.9-7.2 22.4-9s17.4-2.7 26.6-2.7c4.3 0 8.8.3 13.6.8 4.7.5 9.8 1.4 15.2 2.7v-6.4c0-4.5-.5-8.8-1.6-12.8-1.1-4.1-3-7.6-5.6-10.7-2.7-3.1-6.2-5.5-10.6-7.2-4.4-1.7-10-3-16.7-3-9 0-17.2 1.1-24.7 2.4-7.5 1.3-13.7 2.8-18.4 4.5l-4.7-32.1c4.9-1.7 12.2-3.4 21.6-5.1 9.4-1.8 19.5-2.6 30.3-2.6zm3.4 142c12 0 20.9-.7 27.1-1.9v-39.8c-2.2-.6-5.3-1.3-9.4-1.9-4.1-.6-8.6-1-13.6-1-4.3 0-8.7.3-13.1 1-4.4.6-8.4 1.8-11.9 3.5s-6.4 4.1-8.5 7.2c-2.2 3.1-3.2 4.9-3.2 9.6 0 9.2 3.2 14.5 9 18s13.7 5.3 23.6 5.3zm158.5 31.9c-64.1.3-64.1-51.8-64.1-60.1L610.6 32l39.1-6.2v183.6c0 4.7 0 34.5 25.1 34.6v32.9z"/></svg>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1366 362"><linearGradient id="a" x1="428.258" x2="434.145" y1="404.15" y2="409.85" gradientUnits="userSpaceOnUse" gradientTransform="matrix(94.045 0 0 -94.072 -40381.527 38479.52)"><stop offset="0" stop-color="#00aeff"/><stop offset="1" stop-color="#3369e7"/></linearGradient><path fill="url(#a)" d="M61.8 15.4h242.8c23.9 0 43.4 19.4 43.4 43.4v242.9c0 23.9-19.4 43.4-43.4 43.4H61.8c-23.9 0-43.4-19.4-43.4-43.4v-243c0-23.9 19.4-43.3 43.4-43.3z"/><path fill="#FFF" d="M187 98.7c-51.4 0-93.1 41.7-93.1 93.2S135.6 285 187 285s93.1-41.7 93.1-93.2-41.6-93.1-93.1-93.1zm0 158.8c-36.2 0-65.6-29.4-65.6-65.6s29.4-65.6 65.6-65.6 65.6 29.4 65.6 65.6-29.3 65.6-65.6 65.6zm0-117.8v48.9c0 1.4 1.5 2.4 2.8 1.7l43.4-22.5c1-.5 1.3-1.7.8-2.7-9-15.8-25.7-26.6-45-27.3-1 0-2 .8-2 1.9zm-60.8-35.9l-5.7-5.7c-5.6-5.6-14.6-5.6-20.2 0l-6.8 6.8c-5.6 5.6-5.6 14.6 0 20.2l5.6 5.6c.9.9 2.2.7 3-.2 3.3-4.5 6.9-8.8 10.9-12.8 4.1-4.1 8.3-7.7 12.9-11 1-.6 1.1-2 .3-2.9zM217.5 89V77.7c0-7.9-6.4-14.3-14.3-14.3h-33.3c-7.9 0-14.3 6.4-14.3 14.3v11.6c0 1.3 1.2 2.2 2.5 1.9 9.3-2.7 19.1-4.1 29-4.1 9.5 0 18.9 1.3 28 3.8 1.2.3 2.4-.6 2.4-1.9z"/><path fill="#182359" d="M842.5 267.6c0 26.7-6.8 46.2-20.5 58.6-13.7 12.4-34.6 18.6-62.8 18.6-10.3 0-31.7-2-48.8-5.8l6.3-31c14.3 3 33.2 3.8 43.1 3.8 15.7 0 26.9-3.2 33.6-9.6s10-15.9 10-28.5v-6.4c-3.9 1.9-9 3.8-15.3 5.8-6.3 1.9-13.6 2.9-21.8 2.9-10.8 0-20.6-1.7-29.5-5.1-8.9-3.4-16.6-8.4-22.9-15-6.3-6.6-11.3-14.9-14.8-24.8s-5.3-27.6-5.3-40.6c0-12.2 1.9-27.5 5.6-37.7 3.8-10.2 9.2-19 16.5-26.3 7.2-7.3 16-12.9 26.3-17s22.4-6.7 35.5-6.7c12.7 0 24.4 1.6 35.8 3.5 11.4 1.9 21.1 3.9 29 6.1v155.2zm-108.7-77.2c0 16.4 3.6 34.6 10.8 42.2 7.2 7.6 16.5 11.4 27.9 11.4 6.2 0 12.1-.9 17.6-2.6 5.5-1.7 9.9-3.7 13.4-6.1v-97.1c-2.8-.6-14.5-3-25.8-3.3-14.2-.4-25 5.4-32.6 14.7-7.5 9.3-11.3 25.6-11.3 40.8zm294.3 0c0 13.2-1.9 23.2-5.8 34.1s-9.4 20.2-16.5 27.9c-7.1 7.7-15.6 13.7-25.6 17.9s-25.4 6.6-33.1 6.6c-7.7-.1-23-2.3-32.9-6.6-9.9-4.3-18.4-10.2-25.5-17.9-7.1-7.7-12.6-17-16.6-27.9s-6-20.9-6-34.1c0-13.2 1.8-25.9 5.8-36.7 4-10.8 9.6-20 16.8-27.7s15.8-13.6 25.6-17.8c9.9-4.2 20.8-6.2 32.6-6.2s22.7 2.1 32.7 6.2c10 4.2 18.6 10.1 25.6 17.8 7.1 7.7 12.6 16.9 16.6 27.7 4.2 10.8 6.3 23.5 6.3 36.7zm-40 .1c0-16.9-3.7-31-10.9-40.8-7.2-9.9-17.3-14.8-30.2-14.8-12.9 0-23 4.9-30.2 14.8-7.2 9.9-10.7 23.9-10.7 40.8 0 17.1 3.6 28.6 10.8 38.5 7.2 10 17.3 14.9 30.2 14.9 12.9 0 23-5 30.2-14.9 7.2-10 10.8-21.4 10.8-38.5zm127.1 86.4c-64.1.3-64.1-51.8-64.1-60.1L1051 32l39.1-6.2v183.6c0 4.7 0 34.5 25.1 34.6v32.9zm68.9 0h-39.3V108.1l39.3-6.2v175zm-19.7-193.5c13.1 0 23.8-10.6 23.8-23.7S1177.6 36 1164.4 36s-23.8 10.6-23.8 23.7 10.7 23.7 23.8 23.7zm117.4 18.6c12.9 0 23.8 1.6 32.6 4.8 8.8 3.2 15.9 7.7 21.1 13.4s8.9 13.5 11.1 21.7c2.3 8.2 3.4 17.2 3.4 27.1v100.6c-6 1.3-15.1 2.8-27.3 4.6s-25.9 2.7-41.1 2.7c-10.1 0-19.4-1-27.7-2.9-8.4-1.9-15.5-5-21.5-9.3-5.9-4.3-10.5-9.8-13.9-16.6-3.3-6.8-5-16.4-5-26.4 0-9.6 1.9-15.7 5.6-22.3 3.8-6.6 8.9-12 15.3-16.2 6.5-4.2 13.9-7.2 22.4-9s17.4-2.7 26.6-2.7c4.3 0 8.8.3 13.6.8s9.8 1.4 15.2 2.7v-6.4c0-4.5-.5-8.8-1.6-12.8-1.1-4.1-3-7.6-5.6-10.7-2.7-3.1-6.2-5.5-10.6-7.2s-10-3-16.7-3c-9 0-17.2 1.1-24.7 2.4-7.5 1.3-13.7 2.8-18.4 4.5l-4.7-32.1c4.9-1.7 12.2-3.4 21.6-5.1s19.5-2.6 30.3-2.6zm3.3 141.9c12 0 20.9-.7 27.1-1.9v-39.8c-2.2-.6-5.3-1.3-9.4-1.9-4.1-.6-8.6-1-13.6-1-4.3 0-8.7.3-13.1 1-4.4.6-8.4 1.8-11.9 3.5s-6.4 4.1-8.5 7.2c-2.2 3.1-3.2 4.9-3.2 9.6 0 9.2 3.2 14.5 9 18 5.9 3.6 13.7 5.3 23.6 5.3zM512.9 103c12.9 0 23.8 1.6 32.6 4.8 8.8 3.2 15.9 7.7 21.1 13.4 5.3 5.8 8.9 13.5 11.1 21.7 2.3 8.2 3.4 17.2 3.4 27.1v100.6c-6 1.3-15.1 2.8-27.3 4.6-12.2 1.8-25.9 2.7-41.1 2.7-10.1 0-19.4-1-27.7-2.9-8.4-1.9-15.5-5-21.5-9.3-5.9-4.3-10.5-9.8-13.9-16.6-3.3-6.8-5-16.4-5-26.4 0-9.6 1.9-15.7 5.6-22.3 3.8-6.6 8.9-12 15.3-16.2 6.5-4.2 13.9-7.2 22.4-9s17.4-2.7 26.6-2.7c4.3 0 8.8.3 13.6.8 4.7.5 9.8 1.4 15.2 2.7v-6.4c0-4.5-.5-8.8-1.6-12.8-1.1-4.1-3-7.6-5.6-10.7-2.7-3.1-6.2-5.5-10.6-7.2-4.4-1.7-10-3-16.7-3-9 0-17.2 1.1-24.7 2.4-7.5 1.3-13.7 2.8-18.4 4.5l-4.7-32.1c4.9-1.7 12.2-3.4 21.6-5.1 9.4-1.8 19.5-2.6 30.3-2.6zm3.4 142c12 0 20.9-.7 27.1-1.9v-39.8c-2.2-.6-5.3-1.3-9.4-1.9-4.1-.6-8.6-1-13.6-1-4.3 0-8.7.3-13.1 1-4.4.6-8.4 1.8-11.9 3.5s-6.4 4.1-8.5 7.2c-2.2 3.1-3.2 4.9-3.2 9.6 0 9.2 3.2 14.5 9 18s13.7 5.3 23.6 5.3zm158.5 31.9c-64.1.3-64.1-51.8-64.1-60.1L610.6 32l39.1-6.2v183.6c0 4.7 0 34.5 25.1 34.6v32.9z"/></svg>
\ No newline at end of file

source/js/algolia-search.js

@@ -3,22 +3,22 @@ $(document).ready(function () {
     e.stopPropagation();
 
     $('body').css('overflow', 'hidden');
-    $('.algolia-popup')
+    $('.search-popup')
       .velocity('stop')
       .velocity('transition.expandIn', {
         duration: 300,
         complete: function () {
-          $('.algolia-popup input').focus();
+          $('.search-popup input').focus();
         }
       });
-    $('.algolia-mask')
+    $('.search-mask')
       .velocity('stop')
       .velocity('transition.fadeIn', {
         duration: 300
       });
   });
 
-  $('.algolia-mask, .algolia-close').on('click', function () {
+  $('.search-mask, .search-close').on('click', function () {
     closeSearch();
   });
 
@@ -43,7 +43,7 @@ $(document).ready(function () {
       hitsPerPage: algolia.hits.per_page || 10
     },
     searchFunction: function (helper) {
-      var searchInput = $('.algolia-input-wrapper').find('input');
+      var searchInput = $('.search-input').find('input');
 
       if (searchInput.val()) {
         helper.search();
@@ -53,7 +53,7 @@ $(document).ready(function () {
 
   search.addWidget(
     instantsearch.widgets.searchBox({
-      container: '.algolia-input-wrapper',
+      container: '.search-input',
       reset: false,
       magnifier: false,
       placeholder: algolia.languages.input_placeholder
@@ -136,12 +136,12 @@ $(document).ready(function () {
 
   function closeSearch () {
     $('body').css('overflow', 'auto');
-    $('.algolia-popup')
+    $('.search-popup')
       .velocity('stop')
       .velocity('transition.expandOut', {
         duration: 300
       });
-    $('.algolia-mask')
+    $('.search-mask')
       .velocity('stop')
       .velocity('transition.fadeOut', {
         duration: 300