first commit

source/css/_search/algolia.styl

@@ -0,0 +1,72 @@
+#algolia-search
+  .ais-search-box
+    margin: 0 auto
+    max-width: 100%
+    width: 100%
+
+    input
+      padding: 0.25rem 0.7rem
+      outline: none
+      border: 2px solid $light-blue
+      border-radius: 2rem
+      font-size: 14px
+
+  .ais-hits--item.algolia-hit-item
+    position: relative
+    padding-left: 1.5rem
+
+    &:hover
+      &:before
+        border-color: $ruby
+
+    &:before
+      $w = 0.3rem
+      position: absolute
+      top: 0.4rem
+      left: 0
+      width: w = $w
+      height: h = w
+      border: 0.5 * w solid $light-blue
+      border-radius: w
+      background: $white
+      content: ""
+      line-height: h
+      transition: all 0.2s ease-in-out
+
+    a
+      display: block
+      color: $font-black
+      text-decoration: none
+      font-size: 14px
+      cursor: pointer
+
+      &:hover
+        color: $light-blue
+
+  .ais-pagination.pagination
+    margin: 0.8rem 0 0 0
+    padding: 0
+    text-align: center
+
+    .ais-pagination--item
+      margin: 0 0.2rem
+      padding: 0
+
+      a
+        display: inline-block
+        min-width: 1.2rem
+        height: 1.2rem
+        text-align: center
+        line-height: 1.2rem
+
+    .ais-pagination--item.current
+      a
+        background: $cyan
+        color: $white
+        text-decoration: none
+        cursor: default
+
+  .algolia-logo
+    padding-top: 2px
+    width: 4rem
+    height: 1.5rem

source/css/_search/index.styl

@@ -0,0 +1,46 @@
+.search-dialog
+  position: fixed
+  top: 5rem
+  left: 50%
+  z-index: 1001
+  display: none
+  margin-left: -15rem
+  padding: 1rem
+  width: 30rem
+  background: $white
+
+  hr
+    margin: 1rem auto
+
+  span.search-close-button
+    position: absolute
+    top: 0.5rem
+    right: 0.5rem
+    color: $grey
+    line-height: 1
+    cursor: pointer
+    transition: color 0.2s ease-in-out
+
+    &:hover
+      color: $light-blue
+
+  &__title
+    padding: 0 0 0.7rem
+    color: $light-blue
+    font-size: 1rem
+    line-height: 1
+
+.search-mask
+  position: fixed
+  top: 0
+  right: 0
+  bottom: 0
+  left: 0
+  z-index: 1000
+  display: none
+  background: rgba(0, 0, 0, 0.6)
+
+@media screen and (max-width: $sm)
+  .search-dialog
+    margin-left: -45%
+    width: 90%

source/css/_search/local-search.styl

@@ -0,0 +1,52 @@
+#local-search
+  .local-search-box
+    margin: 0 auto
+    max-width: 100%
+    width: 100%
+
+    input
+      padding: 0.25rem 0.7rem
+      width: 100%
+      outline: none
+      border: 2px solid $light-blue
+      border-radius: 2rem
+      font-size: 14px
+
+  .local-search__hit-item
+    position: relative
+    padding-left: 1.5rem
+
+    &:hover
+      &:before
+        border-color: $ruby
+
+    &:before
+      $w = 0.3rem
+      position: absolute
+      top: 0.4rem
+      left: 0
+      width: w = $w
+      height: h = w
+      border: 0.5 * w solid $light-blue
+      border-radius: w
+      background: $white
+      content: ""
+      line-height: h
+      transition: all 0.2s ease-in-out
+
+    a
+      display: block
+      color: $font-black
+      text-decoration: none
+      font-size: 14px
+      cursor: pointer
+
+      &:hover
+        color: $light-blue
+
+  .local-search-stats__hr
+    display: none !important
+
+  .search-result-list
+    overflow-y: auto
+    max-height: 10.5rem