feat(search): add local search (#231)

* feat(search): add local search * docs: add docs for search
2020-04-15 15:46:50 +08:00
parent b6ce753ae7
commit 90184ca3e7
92 changed files with 4843 additions and 1214 deletions
--- a/assets/css/_core/_base.scss
+++ b/assets/css/_core/_base.scss
@@ -9,8 +9,8 @@ html {

 /* scrollbar, only support webkit */
 ::-webkit-scrollbar {
-  width: 6px;
-  height: 6px;
+  width: .5rem;
+  height: .5rem;
 }

 ::-webkit-scrollbar-thumb {
@@ -22,44 +22,26 @@ html {
 }

 ::selection {
-  background: $selection-color;
+  background-color: $selection-color;

-  .dark-theme & {
-    background: $selection-color-dark;
+  .dark & {
+    background-color: $selection-color-dark;
  }
 }

 body {
-  -webkit-font-smoothing: subpixel-antialiased;
  background-color: $global-background-color;
  color: $global-font-color;
  overflow-wrap: break-word;

-  &::before {
-    content: "";
-    background-repeat: no-repeat;
-    background-position: center;
-    opacity: 0.05;
-    position: fixed;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    z-index: -1;
-    -webkit-filter: grayscale(100%);
-    -moz-filter: grayscale(100%);
-    -ms-filter: grayscale(100%);
-    -o-filter: grayscale(100%);
-    filter: grayscale(100%);
-    filter: gray;
-  }
-
-  &.dark-theme {
+  &.dark {
    color: $global-font-color-dark;
    background-color: $global-background-color-dark;
  }
 }

+@import "../_partial/mask";
+
 a {
  text-decoration: none;
 }
--- a/assets/css/_core/_layout.scss
+++ b/assets/css/_core/_layout.scss
@@ -14,11 +14,3 @@
    }
  }
 }
-
-.footer {
-  height: 2rem;
-  width: 100%;
-  text-align: center;
-  line-height: 1.5rem;
-  padding-top: 2rem;
-}
--- a/assets/css/_core/_media.scss
+++ b/assets/css/_core/_media.scss
@@ -11,16 +11,16 @@
 }

@media only screen and (max-width: 960px) {
+  #toc-auto {
+    display: none;
+  }
+
+  #toc-static {
+    display: block;
+  }
+
  .page {
    max-width: 80%;
-
-    #toc-auto {
-      display: none;
-    }
-
-    #toc-static {
-      display: block;
-    }
  }
 }

@@ -33,6 +33,10 @@
    display: block;
  }

+  body.blur {
+    overflow: hidden;
+  }
+
  .page {
    max-width: 100%;
    padding-top: $page-padding-top-mobile;
--- a/assets/css/_mixin/_blur.scss
+++ b/assets/css/_mixin/_blur.scss
@@ -0,0 +1,5 @@
+@mixin blur {
+  .blur & {
+    @include filter(blur(1.5px));
+  }
+}
--- a/assets/css/_mixin/_compatibility.scss
+++ b/assets/css/_mixin/_compatibility.scss
@@ -0,0 +1,69 @@
+@mixin border-radius($value) {
+  -webkit-border-radius: $value;
+  -moz-border-radius: $value;
+  border-radius: $value;
+}
+
+@mixin box-shadow($value) {
+  -webkit-box-shadow: $value;
+  box-shadow: $value;
+}
+
+@mixin transition($values...) {
+  -webkit-transition: $values;
+  -moz-transition: $values;
+  -o-transition: $values;
+  transition: $values;
+}
+
+@mixin transform($value) {
+  -webkit-transform: $value;
+  -moz-transform: $value;
+  -ms-transform: $value;
+  -o-transform: $value;
+  transform: $value;
+}
+
+@mixin filter($value) {
+  -webkit-filter: $value;
+  -moz-filter: $value;
+  -ms-filter: $value;
+  filter: $value;
+}
+
+@mixin flex($value) {
+  -webkit-flex: $value;
+  flex: $value;
+}
+
+@mixin box($orient) {
+  display: -moz-box;
+  display: -webkit-box;
+  display: box;
+
+  -moz-box-orient: $orient;
+  -webkit-box-orient: $orient;
+  box-orient: $orient;
+}
+
+@mixin placeholder($color) {
+  input::-webkit-input-placeholder{
+    color: $color;
+  }
+
+  input:-moz-placeholder{
+    color: $color;
+  }
+
+  input::-moz-placeholder{
+    color: $color;
+  }
+
+  input:-ms-input-placeholder{
+    color: $color;
+  }
+
+  input::placeholder {
+    color: $color;
+  }
+}
--- a/assets/css/_mixin/_index.scss
+++ b/assets/css/_mixin/_index.scss
@@ -1,2 +1,4 @@
+@import "_compatibility";
@import "_link";
+@import "_blur";
@import "_summary";
--- a/assets/css/_mixin/_link.scss
+++ b/assets/css/_mixin/_link.scss
@@ -2,7 +2,7 @@
  a {
    color: if($light, $global-link-color, $single-link-color);

-    .dark-theme & {
+    .dark & {
      color: if($dark, $global-link-color-dark, $single-link-color-dark);
    }

@@ -10,7 +10,7 @@
    &:hover {
      color: if($light, $global-link-hover-color, $single-link-hover-color);

-      .dark-theme & {
+      .dark & {
        color: if($dark, $global-link-hover-color-dark, $single-link-hover-color-dark);
      }
    }
--- a/assets/css/_mixin/_summary.scss
+++ b/assets/css/_mixin/_summary.scss
@@ -5,7 +5,7 @@
    color: $global-font-color;
    border-bottom: 1px dashed $global-border-color;

-    .dark-theme & {
+    .dark & {
      color: $global-font-color-dark;
      border-bottom: 1px dashed $global-border-color-dark;
    }
@@ -33,10 +33,7 @@
    }

    .content {
-      display: -moz-box;
-      display: -webkit-box;
-      -moz-box-orient: vertical;
-      -webkit-box-orient: vertical;
+      @include box(vertical);
      -webkit-line-clamp: 3;
      margin-top: .3rem;
      width: 100%;
@@ -45,7 +42,7 @@
      overflow-wrap: break-word;
      color: $global-font-secondary-color;

-      .dark-theme & {
+      .dark & {
        color: $global-font-secondary-color-dark;
      }

@@ -76,7 +73,7 @@
          margin-right: .3125rem;
          color: $global-link-color;

-          .dark-theme & {
+          .dark & {
            color: $global-link-color-dark;
          }
        }
@@ -93,7 +90,7 @@
      @include link(true, true);

      b, strong {
-        .dark-theme & {
+        .dark & {
          color: $global-font-secondary-color-dark;
        }
      }
--- a/assets/css/_page/_404.scss
+++ b/assets/css/_page/_404.scss
@@ -1,6 +1,6 @@
 #content-404 {
  font-size: 1.8rem;
  line-height: 3rem;
-  transform: translateY(30vh);
+  @include transform(translateY(30vh));
  text-align: center;
 }
--- a/assets/css/_page/_home.scss
+++ b/assets/css/_page/_home.scss
@@ -1,13 +1,8 @@
-/** Home **/
@mixin page-home($profile, $posts) {
  .home {
    @if $profile {
      .home-profile {
-        -webkit-transform: translateY(if($posts, 0, 16vh));
-        -moz-transform: translateY(if($posts, 0, 16vh));
-        -ms-transform: translateY(if($posts, 0, 16vh));
-        -o-transform: translateY(if($posts, 0, 16vh));
-        transform: translateY(if($posts, 0, 16vh));
+        @include transform(translateY(if($posts, 0, 16vh)));
        padding: if($posts, 2rem, 0) 0 .5rem;
        text-align: center;

@@ -15,27 +10,18 @@
          padding: 0.6rem;

          img {
+            display: inline-block;
            width: if($posts, 6rem, 8rem);
            height: auto;
-            display: inline-block;
-            -webkit-border-radius: 100%;
-            border-radius: 100%;
-            -webkit-box-shadow: 0 0 0 0.3618em rgba(0, 0, 0, 0.05);
-            box-shadow: 0 0 0 0.3618em rgba(0, 0, 0, 0.05);
            margin: 0 auto;
-            -webkit-transition: all ease 0.4s;
-            -moz-transition: all ease 0.4s;
-            -o-transition: all ease 0.4s;
-            transition: all ease 0.4s;
+            @include border-radius(100%);
+            @include box-shadow(0 0 0 .3618em rgba(0, 0, 0, .05));
+            @include transition(all 0.4s ease);
            cursor: pointer;

            &:hover {
              position: relative;
-              -webkit-transform: translateY(-0.75rem);
-              -moz-transform: translateY(-0.75rem);
-              -ms-transform: translateY(-0.75rem);
-              -o-transform: translateY(-0.75rem);
-              transform: translateY(-0.75rem);
+              @include transform(translateY(-.75rem));
              cursor: pointer;
            }
          }
@@ -70,7 +56,7 @@
          padding: .4rem;
          color: $global-font-secondary-color;

-          .dark-theme & {
+          .dark & {
            color: $global-font-secondary-color-dark;
          }
        }
--- a/assets/css/_page/_index.scss
+++ b/assets/css/_page/_index.scss
@@ -4,6 +4,8 @@
  max-width: 60%;
  margin: 0 auto;
  padding-top: $page-padding-top-desktop;
+
+  @include blur;
 }

@import "_single";
--- a/assets/css/_page/_single.scss
+++ b/assets/css/_page/_single.scss
@@ -1,4 +1,5 @@
-/** Single **/
+@import "../_partial/_single/toc";
+
 .single {
  .single-title {
    margin: 1rem 0 .5rem;
@@ -22,7 +23,7 @@
      display: inline-block;
    }

-    .dark-theme & {
+    .dark & {
      color: $global-font-secondary-color-dark;
    }

@@ -45,8 +46,6 @@
    }
  }

-  @import "../_partial/_single/toc";
-
  .content {
    > h2 {
      font-size: 1.5rem;
@@ -88,7 +87,7 @@
      font-weight: bold;
      margin: 1.2rem 0;

-      .dark-theme & {
+      .dark & {
        font-weight: bolder;
      }
    }
@@ -103,7 +102,7 @@
        margin-right: .3125rem;
        color: $single-link-color;

-        .dark-theme & {
+        .dark & {
          color: $single-link-color-dark;
        }
      }
@@ -120,7 +119,7 @@
    b, strong {
      font-weight: bold;

-      .dark-theme & {
+      .dark & {
        color: #ddd;
      }
    }
@@ -131,12 +130,12 @@
      word-break: break-all;
      word-break: break-word;

-      .dark-theme & b, .dark-theme & strong {
+      .dark & b, .dark & strong {
        color: $single-link-color-dark;
      }
    }

-    .dark-theme a:hover b, .dark-theme a:hover strong {
+    .dark a:hover b, .dark a:hover strong {
      color: $single-link-hover-color-dark;
    }

@@ -153,7 +152,7 @@
        color: $global-font-secondary-color;
      }

-      .dark-theme & {
+      .dark & {
        background: $code-background-color-dark;

        rt {
@@ -168,7 +167,7 @@
      &::-webkit-scrollbar {
        background-color: $table-background-color;

-        .dark-theme & {
+        .dark & {
          background-color: $table-background-color-dark;
        }
      }
@@ -181,14 +180,14 @@
        background: $table-background-color;
        border-collapse: collapse;

-        .dark-theme & {
+        .dark & {
          background: $table-background-color-dark;
        }

        thead {
          background: $table-thead-color;

-          .dark-theme & {
+          .dark & {
            background-color: $table-thead-color-dark;
          }
        }
@@ -197,7 +196,7 @@
          padding: .3rem 1rem;
          border: 1px double $global-border-color;

-          .dark-theme & {
+          .dark & {
            border: 1px double $global-border-color-dark;
          }
        }
@@ -249,14 +248,14 @@
        position: absolute;
        top: 0em;
        left: 50%;
-        transform: translate(-50%, -50%);
+        @include transform(translate(-50%, -50%));
        width: 3rem;
        height: 2rem;
        font: 6em/1.08em 'PT Sans', sans-serif;
        color: $single-link-color;
        text-align: center;

-        .dark-theme & {
+        .dark & {
          color: $single-link-color-dark;
        }
      }
@@ -268,12 +267,12 @@
        font-size: 0.875em;
        color: $single-link-color;

-        .dark-theme & {
+        .dark & {
          color: $single-link-color-dark;
        }
      }

-      .dark-theme & {
+      .dark & {
        border-color: $global-border-color-dark;
      }
    }
@@ -281,7 +280,7 @@
    .footnotes {
      color: $global-font-secondary-color;

-      .dark-theme & {
+      .dark & {
        color: $global-font-secondary-color-dark;
      }

@@ -304,7 +303,7 @@
      border-top: 1px dashed $global-border-color;
      border-bottom: none;

-      .dark-theme & {
+      .dark & {
        border-top: 1px dashed $global-border-color-dark;
      }
    }
@@ -315,19 +314,17 @@
      background-color: $global-background-color;
      border: 1px solid $global-border-color;
      border-bottom-color: $global-border-color;
-      border-radius: 3px;
-      -webkit-box-shadow: inset 0 -1px 0 $global-border-color;
-      box-shadow: inset 0 -1px 0 $global-border-color;
+      @include border-radius(3px);
+      @include box-shadow(inset 0 -1px 0 $global-border-color);
      font-size: .8rem;
      font-family: $code-font-family;
      color: $code-color;

-      .dark-theme & {
+      .dark & {
        background-color: $global-background-color-dark;
        border: 1px solid $global-border-color-dark;
        border-bottom-color: $global-border-color-dark;
-        -webkit-box-shadow: inset 0 -1px 0 $global-border-color-dark;
-        box-shadow: inset 0 -1px 0 $global-border-color-dark;
+        @include box-shadow(inset 0 -1px 0 $global-border-color-dark);
        color: $code-color-dark;
      }
    }
--- a/assets/css/_partial/_archive/_tags.scss
+++ b/assets/css/_partial/_archive/_tags.scss
@@ -8,25 +8,18 @@
    position: relative;
    margin: 5px 10px;
    overflow-wrap: break-word;
-    -webkit-transition: all ease-out .3s;
-    -moz-transition: all ease-out .3s;
-    -o-transition: all ease-out .3s;
-    transition: all ease-out .3s;
+    @include transition(all ease-out 0.3s);

    &:active,
    &:focus,
    &:hover {
-      -webkit-transform: scale(1.2);
-      -moz-transform: scale(1.2);
-      -ms-transform: scale(1.2);
-      -o-transform: scale(1.2);
-      transform: scale(1.2);
+      @include transform(scale(1.2));
    }

    sup {
      color: $global-font-secondary-color;

-      .dark-theme & {
+      .dark & {
        color: $global-font-secondary-color-dark;
      }
    }
--- a/assets/css/_partial/_archive/_terms.scss
+++ b/assets/css/_partial/_archive/_terms.scss
@@ -44,7 +44,6 @@

 .archive-item-link {
  display: inline-block;
-  text-decoration: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
@@ -55,15 +54,11 @@
    background-color: transparent;
  }

-  .dark-theme & {
+  .dark & {
    color: $global-link-color-dark;
-    text-decoration: none;
-    transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease, opacity 0.2s ease;

    &:hover {
      color: $global-link-hover-color-dark;
-      text-decoration: none;
-      transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease, opacity 0.2s ease;
    }
  }
 }
@@ -73,7 +68,7 @@
  text-align: right;
  color: $global-font-secondary-color;

-  .dark-theme & {
+  .dark & {
    color: $global-font-secondary-color-dark;
  }
 }
--- a/assets/css/_partial/_fixed-button.scss
+++ b/assets/css/_partial/_fixed-button.scss
@@ -13,7 +13,9 @@
  color: $global-font-secondary-color;
  background: $header-background-color;
  border: 1px solid darken($global-border-color, 10%);
-  border-radius: 2rem;
+  @include border-radius(2rem);
+
+  @include blur;

  &:hover, &:active {
    color: $global-font-color;
@@ -24,7 +26,7 @@
    outline: none;
  }

-  .dark-theme & {
+  .dark & {
    color: $global-font-secondary-color-dark;
    background: $header-background-color-dark;
    border-color: darken($global-border-color-dark, 10%);
@@ -35,11 +37,11 @@
  }
 }

-#top-button {
+#back-to-top {
  display: block;
  bottom: 1.5rem;
 }

-#comment-button {
+#view-comments {
  bottom: 4.5rem;
 }
--- a/assets/css/_partial/_footer.scss
+++ b/assets/css/_partial/_footer.scss
@@ -1,12 +1,21 @@
-/**Footer**/
-.copyright {
-  font-size: .875rem;
+footer {
+  height: 2rem;
+  width: 100%;
+  text-align: center;
+  line-height: 1.5rem;
+  padding-top: 2rem;

-  .copyright-line {
-    width: 100%;
+  .copyright {
+    font-size: .875rem;

-    .icp-br {
-      display: none;
+    .copyright-line {
+      width: 100%;
+
+      .icp-br {
+        display: none;
+      }
    }
  }
+
+  @include blur;
 }
--- a/assets/css/_partial/_header.scss
+++ b/assets/css/_partial/_header.scss
@@ -1,73 +1,169 @@
 header {
  width: 100%;
-  z-index: 100;
+  z-index: 150;
  background-color: $header-background-color;

-  .dark-theme & {
+  .dark & {
    background-color: $header-background-color-dark;
  }
+}

-  .header-title {
-    font-family: $header-title-font-family;
-    font-weight: bold;
-    overflow: hidden;
-    white-space: nowrap;
-    text-overflow: ellipsis;
+.header-wrapper {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  box-sizing: border-box;
+  width: 100%;
+}
+
+.header-title {
+  font-family: $header-title-font-family;
+  font-weight: bold;
+  margin-right: .5rem;
+  min-width: 10%;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  @include flex(10);
+}
+
+.menu .menu-item {
+  position: relative;
+}
+
+.language-select {
+  position: absolute;
+  opacity: 0;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+
+  &:hover {
+    cursor: pointer;
  }
+}

-  .menu .menu-item {
-    position: relative;
-  }
+.search {
+  position: relative;

-  .language-select {
-    position: absolute;
-    opacity: 0;
-    left: 0;
-    top: 0;
-    width: 100%;
-    height: 100%;
+  input {
+    color: transparent;
+    box-sizing: border-box;
+    height: 2.5rem;
+    width: 2.5rem;
+    @include border-radius(.5rem);
+    border: none;
+    outline: none;
+    background-color: $header-background-color;
+    vertical-align: baseline !important;
+    @include transition(width 0.3s ease 0s);

-    &:hover {
-      cursor: pointer;
+    .dark & {
+      background-color: $header-background-color-dark;
    }
  }

-  .theme-switch i {
-    -webkit-transform: rotate(225deg);
-    -moz-transform: rotate(225deg);
-    -ms-transform: rotate(225deg);
-    -o-transform: rotate(225deg);
-    transform: rotate(225deg);
+  @include placeholder(transparent);
+
+  .search-button {
+    margin: 0;
+    position: absolute;
+    left: auto;
+    right: 1rem;
  }
+
+  .search-toggle {
+    left: .5rem;
+    right: auto;
+  }
+
+  .search-loading {
+    display: none;
+  }
+
+  .search-clear {
+    display: none;
+  }
+
+  .open &, &.mobile {
+    input {
+      color: $global-font-color;
+      background-color: $search-background-color;
+      padding: 0 2rem 0 2rem;
+    }
+
+    .dark & {
+      input {
+        color: $global-font-color-dark;
+        background-color: $search-background-color-dark;
+      }
+
+      @include placeholder($global-font-secondary-color-dark);
+    }
+
+    @include placeholder($global-font-secondary-color);
+
+    .search-button {
+      color: $global-font-secondary-color;
+
+      .dark & {
+        color: $global-font-secondary-color-dark;
+      }
+    }
+
+    .search-clear:hover {
+      color: #ff6b6b;
+    }
+
+    .search-toggle:hover {
+      cursor: default;
+    }
+  }
+}
+
+.theme-switch i {
+  @include transform(rotate(225deg));
 }

 #header-desktop {
  display: block;
  position: $header-position-desktop;
-  height: $header-height-desktop;
-  line-height: $header-height-desktop;
+  height: $header-height;
+  line-height: $header-height;

  .header-wrapper {
-    width: auto;
-    text-align: center;
-    padding: 0 3%;
-    display: flex;
-    justify-content: space-between;
+    padding: 0 1.5rem;

    .header-title {
      font-size: $header-title-font-size-desktop;
-      max-width: 30%;
    }

    .menu {
      overflow: hidden;
      white-space: nowrap;

+      .menu-inner {
+        float: right;
+      }
+
      .menu-item {
        margin: 0 .5rem;

-        &.theme-switch {
-          margin: 0 .3rem;
+        &.delimiter {
+          border-left: 1.5px solid $global-font-color;
+
+          .dark & {
+            border-left-color: $global-border-color-dark;
+          }
+        }
+
+        &.language {
+          margin-right: 0;
+        }
+
+        &.search {
+          margin: 0 -.5rem 0 0;
        }
      }

@@ -75,58 +171,56 @@ header {
        font-weight: 900;
        color: $header-hover-color;

-        .dark-theme & {
+        .dark & {
          color: $header-hover-color-dark;
        }
      }
    }
  }
+
+  &.open .header-wrapper .menu .menu-item.search {
+    margin: 0 .25rem 0 .5rem;
+
+    input {
+      width: 24rem;
+    }
+  }
 }

 #header-mobile {
  display: none;
  position: $header-position-mobile;
-  height: $header-height-mobile;
-  line-height: $header-height-mobile;
+  height: $header-height;
+  line-height: $header-height;

-  .header-wrapper {
+  .header-container {
    padding: 0;
    margin: 0;
-    transition: all 0.3s ease 0s;

-    .header-container {
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-      width: 100%;
+    .header-wrapper {
+      padding: 0 1rem;
      font-size: 1.125rem;
-      padding-right: 1rem;
-      padding-left: 1rem;
-      box-sizing: border-box;
+      @include transition(margin-top 0.3s ease 0s);

      .header-title {
-        max-width: 80%;
        font-size: $header-title-font-size-mobile;
+        max-width: 80%;
      }

      .menu-toggle {
-        cursor: pointer;
        line-height: 4rem;
+        cursor: pointer;
+        @include transition(width 0.3s ease 0s);

        span {
          display: block;
          background: $global-font-color;
          width: 1.5rem;
          height: 2px;
-          -webkit-border-radius: 3px;
-          -moz-border-radius: 3px;
-          border-radius: 3px;
-          -webkit-transition: .1s margin .1s, .1s transform;
-          -moz-transition: .1s margin .1s, .1s transform;
-          -o-transition: .1s margin .1s, .1s transform;
-          transition: .1s margin .1s, .1s transform;
+          @include border-radius(3px);
+          @include transition(all 0.3s ease-in-out);

-          .dark-theme & {
+          .dark & {
            background: $global-font-color-dark;
          }
        }
@@ -140,19 +234,8 @@ header {
        }

        &.active {
-          span {
-            -webkit-transition: .1s margin, .1s transform .1s;
-            -moz-transition: .1s margin, .1s transform .1s;
-            -o-transition: .1s margin, .1s transform .1s;
-            transition: .1s margin, .1s transform .1s;
-          }
-
          span:nth-child(1) {
-            -webkit-transform: rotate(45deg) translate(.4rem, .5rem);
-            -moz-transform: rotate(45deg) translate(.4rem, .5rem);
-            -ms-transform: rotate(45deg) translate(.4rem, .5rem);
-            -o-transform: rotate(45deg) translate(.4rem, .5rem);
-            transform: rotate(45deg) translate(.4rem, .5rem);
+            @include transform(rotate(45deg) translate(.4rem, .5rem));
          }

          span:nth-child(2) {
@@ -160,11 +243,7 @@ header {
          }

          span:nth-child(3) {
-            -moz-transform: rotate(-45deg) translate(.4rem, -.5rem);
-            -ms-transform: rotate(-45deg) translate(.4rem, -.5rem);
-            -webkit-transform: rotate(-45deg) translate(.4rem, -.5rem);
-            -o-transform: rotate(-45deg) translate(.4rem, -.5rem);
-            transform: rotate(-45deg) translate(.4rem, -.5rem);
+            @include transform(rotate(-45deg) translate(.4rem, -.5rem));
          }
        }
      }
@@ -172,12 +251,35 @@ header {

    .menu {
      text-align: center;
-      background: $global-background-color;
-      border-top: 2px solid $global-font-color;
+      background: $header-background-color;
+      border-top: 2px solid $global-border-color;
      display: none;
-      box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1), 0px 4px 8px rgba(0, 0, 0, 0.1);
+      padding-top: .5rem;
+      @include box-shadow(0 .125rem .25rem rgba(0, 0, 0, .1));

-      a {
+      .search-wrapper {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        box-sizing: border-box;
+        padding: ($header-height - 2.5rem) / 2 1rem;
+        line-height: 2.5rem;
+      }
+
+      .search {
+        flex-grow: 10;
+
+        .algolia-autocomplete, input {
+          width: 100%;
+        }
+      }
+
+      .search-cancel {
+        display: none;
+        margin-left: .75rem;
+      }
+
+      .menu-item {
        display: block;
        line-height: 2.5rem;
      }
@@ -186,9 +288,149 @@ header {
        display: block;
      }

-      .dark-theme & {
-        background: $global-background-color-dark;
-        border-top: 2px solid $global-font-color-dark;
+      .dark & {
+        background: $header-background-color-dark;
+        border-top-color: $global-border-color-dark;
+      }
+    }
+  }
+
+  &.open {
+    .header-wrapper {
+      margin-top: -$header-height;
+    }
+
+    .menu {
+      padding-top: 0;
+      border-top: none;
+
+      .menu-item {
+        display: none;
+      }
+
+      .search-cancel {
+        display: inline;
+      }
+    }
+  }
+}
+
+.search-dropdown {
+  position: fixed;
+  z-index: 200;
+  top: $header-height;
+  @include box-shadow(0 .125rem .25rem rgba(0, 0, 0, .1));
+
+  &.desktop {
+    right: 1.5rem;
+    width: 30rem;
+  }
+
+  &.mobile {
+    right: 0;
+    width: 100%;
+  }
+
+  .dropdown-menu {
+    right: 0 !important;
+    background-color: $global-background-color;
+
+    .dark & {
+      background-color: $global-background-color-dark;
+    }
+
+    .suggestions {
+      overflow-y: auto;
+      max-height: calc(100vh - #{$header-height});
+
+      .suggestion {
+        padding: .75rem 1rem;
+
+        .suggestion-title {
+          display: inline-block;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          white-space: nowrap;
+          font-size: 1rem;
+          font-weight: bold;
+          max-width: 75%;
+        }
+
+        .suggestion-date {
+          font-size: .875rem;
+          float: right;
+          text-align: right;
+          color: $global-font-secondary-color;
+
+          .dark & {
+            color: $global-font-secondary-color-dark;
+          }
+        }
+
+        .suggestion-context {
+          line-height: 1.25rem;
+          @include box(vertical);
+          -webkit-line-clamp: 2;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          overflow-wrap: break-word;
+          color: $global-font-secondary-color;
+
+          .dark & {
+            color: $global-font-secondary-color-dark;
+          }
+        }
+
+        em {
+          font-style: normal;
+          background-color: $selection-color;
+
+          .dark & {
+            background-color: $selection-color-dark;
+          }
+        }
+
+        &.cursor {
+          background: darken($code-background-color, 5%);
+
+          .dark & {
+            background: lighten($code-background-color-dark, 5%);
+          }
+        }
+
+        &:hover {
+          cursor: pointer;
+        }
+      }
+    }
+
+    .search-empty {
+      padding: 1rem;
+      text-align: center;
+
+      .search-query {
+        font-weight: bold;
+
+        .dark & {
+          color: #ddd;
+        }
+      }
+    }
+
+    .search-footer {
+      padding: .5rem 1rem;
+      float: right;
+      font-size: .8rem;
+      color: $global-font-secondary-color;
+
+      .dark {
+        color: $global-font-secondary-color-dark;
+      }
+
+      @include link(false, false);
+
+      a {
+        font-size: 1rem;
      }
    }
  }
--- a/assets/css/_partial/_mask.scss
+++ b/assets/css/_partial/_mask.scss
@@ -0,0 +1,16 @@
+#mask {
+  background-repeat: no-repeat;
+  background-position: center;
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: -1;
+  background-color: rgba(0, 0, 0, 0);
+
+  .blur & {
+    z-index: 100;
+    background-color: rgba(0, 0, 0, .25);
+  }
+}
--- a/assets/css/_partial/_pagination.scss
+++ b/assets/css/_partial/_pagination.scss
@@ -1,4 +1,3 @@
-/** pagination **/
 .pagination {
  display: flex;
  flex-direction: row;
@@ -9,14 +8,13 @@
  padding: 1rem 0 0;

  a {
-    -webkit-font-smoothing: antialiased;
    font-size: .8rem;
    color: #bfbfbf;
    letter-spacing: .1rem;
    font-weight: 700;
    padding: 5px 5px;
    text-decoration: none;
-    transition: 0.3s;
+    @include transition(0.3s);
  }

  li {
@@ -34,7 +32,7 @@
      color: $pagination-link-hover-color;
    }

-    .dark-theme &:hover a {
+    .dark &:hover a {
      color: $pagination-link-hover-color-dark;
    }

@@ -45,12 +43,12 @@
      width: 0;
      height: 3px;
      background: $pagination-link-hover-color;
-      transition: 0.3s;
+      @include transition(0.3s);
      bottom: 0px;
    }

-    .dark-theme &:before,
-    .dark-theme &:after {
+    .dark &:before,
+    .dark &:after {
      background: $pagination-link-hover-color-dark;
    }

@@ -80,7 +78,7 @@
        color: $pagination-link-hover-color;
      }

-      .dark-theme & a {
+      .dark & a {
        color: $pagination-link-hover-color-dark;
      }

--- a/assets/css/_partial/_single/_admonition.scss
+++ b/assets/css/_partial/_single/_admonition.scss
@@ -68,7 +68,7 @@ details.admonition {
      right: .5rem;
      color: $global-font-color;

-      .dark-theme & {
+      .dark & {
        color: $global-font-color-dark;
      }
    }
@@ -77,6 +77,6 @@ details.admonition {

 details.admonition[open] {
  i.details {
-    transform: rotate(180deg);
+    @include transform(rotate(180deg));
  }
 }
--- a/assets/css/_partial/_single/_code.scss
+++ b/assets/css/_partial/_single/_code.scss
@@ -4,7 +4,7 @@ code {
  padding: .2rem .4rem;
  color: $code-color;

-  .dark-theme & {
+  .dark & {
    color: $code-color-dark;
  }
 }
@@ -12,7 +12,7 @@ code {
 code, pre, .highlight table, .highlight tr, .highlight td {
  background: $code-background-color;

-  .dark-theme & {
+  .dark & {
    background: $code-background-color-dark;
  }
 }
@@ -27,14 +27,14 @@ code, pre, .highlight table, .highlight tr, .highlight td {

  &::before {
    display: block;
-    padding: .4rem;
+    padding: .2rem .4rem;
    font-family: $global-font-family;
    font-weight: bold;
    color: $code-info-color;
    background: darken($code-background-color, 3%);
    content: 'Code';

-    .dark-theme & {
+    .dark & {
      color: $code-info-color-dark;
      background: darken($code-background-color-dark, 3%);
    }
@@ -56,7 +56,7 @@ code, pre, .highlight table, .highlight tr, .highlight td {
        display: block;
        background-color: darken($code-background-color, 5%);

-        .dark-theme & {
+        .dark & {
          background-color: darken($code-background-color-dark, 5%);
        }
      }
@@ -66,7 +66,7 @@ code, pre, .highlight table, .highlight tr, .highlight td {
  .ln, .lnt {
    color: $global-font-secondary-color;

-    .dark-theme & {
+    .dark & {
      color: $global-font-secondary-color-dark;
    }
  }
@@ -89,7 +89,7 @@ code, pre, .highlight table, .highlight tr, .highlight td {
    .#{$class} { color: $color; }
  }

-  .dark-theme & {
+  .dark & {
    @each $class, $color in $code-highlight-color-map-dark {
      .#{$class} { color: $color; }
    }
@@ -119,12 +119,12 @@ code, pre, .highlight table, .highlight tr, .highlight td {

    @include link(false, false);

-    .dark-theme & {
+    .dark & {
      background-color: darken($code-background-color-dark, 5%);
    }
  }

-  .dark-theme & {
+  .dark & {
    // imported from https://github.com/lonekorean/gist-syntax-themes/blob/master/stylesheets/one-dark.css
    .highlight {
      background: #141414;
--- a/assets/css/_partial/_single/_footer.scss
+++ b/assets/css/_partial/_single/_footer.scss
@@ -5,7 +5,7 @@
    border-bottom: 1px solid $global-border-color;
    padding: 1rem 0 0.3rem;

-    .dark-theme & {
+    .dark & {
      border-bottom: 1px solid $global-border-color-dark;
    }

@@ -17,7 +17,7 @@
        font-size: 0.8em;
        color: $global-font-secondary-color;

-        .dark-theme & {
+        .dark & {
          color: $global-font-secondary-color-dark;
        }

@@ -28,7 +28,7 @@
        font-size: 0.8em;
        color: $global-font-secondary-color;

-        .dark-theme & {
+        .dark & {
          color: $global-font-secondary-color-dark;
        }
      }
@@ -68,10 +68,7 @@
    & a.next {
      font-size: 1rem;
      font-weight: 600;
-      -webkit-transition: all ease-out .3s;
-      -moz-transition: all ease-out .3s;
-      -o-transition: all ease-out .3s;
-      transition: all ease-out .3s;
+      @include transition(all 0.3s ease-out);
    }

    & a.prev {
@@ -79,11 +76,7 @@
    }

    & a.prev:hover {
-      -webkit-transform: translateX(-4px);
-      -moz-transform: translateX(-4px);
-      -ms-transform: translateX(-4px);
-      -o-transform: translateX(-4px);
-      transform: translateX(-4px);
+      @include transform(translateX(-4px));
    }

    & a.next {
@@ -91,11 +84,7 @@
    }

    & a.next:hover {
-      -webkit-transform: translateX(4px);
-      -moz-transform: translateX(4px);
-      -ms-transform: translateX(4px);
-      -o-transform: translateX(4px);
-      transform: translateX(4px);
+      @include transform(translateX(4px));
    }
  }
 }
--- a/assets/css/_partial/_single/_instagram.scss
+++ b/assets/css/_partial/_single/_instagram.scss
@@ -1,5 +1,5 @@
 iframe.instagram-media {
-  .dark-theme & {
+  .dark & {
    border: none !important;
  }
 }
--- a/assets/css/_partial/_single/_toc.scss
+++ b/assets/css/_partial/_single/_toc.scss
@@ -9,7 +9,9 @@
  top: if($header-normal-mode-desktop, 5rem, 10rem);
  left: 10000px;

-  .dark-theme & {
+  @include blur;
+
+  .dark & {
    border-left: 1px solid $global-border-color-dark;
  }

@@ -39,7 +41,7 @@
        margin-right: .5rem;
        color: $single-link-color;

-        .dark-theme & {
+        .dark & {
          color: $single-link-color-dark;
        }
      }
@@ -58,14 +60,14 @@
      font-weight: bold;
      color: $single-link-color;

-      .dark-theme & {
+      .dark & {
        color: $single-link-color-dark;
      }

      &::before {
        color: $single-link-hover-color;

-        .dark-theme & {
+        .dark & {
          color: $single-link-hover-color-dark;
        }
      }
@@ -82,7 +84,7 @@
      list-style: none;
      background: darken($code-background-color, 3%);

-      .dark-theme & {
+      .dark & {
        background: darken($code-background-color-dark, 3%);
      }

@@ -111,7 +113,7 @@

  details[open] {
    i.details {
-      transform: rotate(180deg);
+      @include transform(rotate(180deg));
    }
  }

@@ -131,7 +133,7 @@
      }
    }

-    .dark-theme & {
+    .dark & {
      background-color: $code-background-color-dark;
    }
  }
@@ -153,7 +155,7 @@
      color: $global-font-secondary-color;
    }

-    .dark-theme & {
+    .dark & {
      background: $code-background-color-dark;

      rt {
--- a/assets/css/_variables.scss
+++ b/assets/css/_variables.scss
@@ -30,7 +30,7 @@ $global-link-hover-color: #2d96bd !default;
 $global-link-hover-color-dark: #fff !default;

 // Color of the border
-$global-border-color: #dcdcdc !default;
+$global-border-color: #cacaca !default;
 $global-border-color-dark: #4a4b50 !default;
 // ========== Global ========== //

@@ -44,14 +44,13 @@ $scrollbar-hover-color: #a9a9b3 !default;

 // ========== Selection ========== //
 // Color of the selected text
-$selection-color: rgba(38, 139, 211, 0.2) !default;
-$selection-color-dark: rgba(38, 139, 211, 0.3) !default;
+$selection-color: rgba(53, 166, 247, 0.25) !default;
+$selection-color-dark: rgba(50, 112, 194, 0.4) !default;
 // ========== Selection ========== //

 // ========== Header ========== //
 // Height of the header
-$header-height-desktop: 3.5rem !default;
-$header-height-mobile: 3.5rem !default;
+$header-height: 3.5rem !default;

 // Color of the header background
 $header-background-color: #f8f8f8 !default;
@@ -68,12 +67,16 @@ $header-position-desktop: if($header-normal-mode-desktop, static, fixed) !defaul
 $header-position-mobile: if($header-normal-mode-mobile, static, fixed) !default;

 // Top of the page padding
-$page-padding-top-desktop: if($header-normal-mode-desktop, 0, $header-height-desktop) !default;
-$page-padding-top-mobile: if($header-normal-mode-mobile, 0, $header-height-mobile) !default;
+$page-padding-top-desktop: if($header-normal-mode-desktop, 0, $header-height) !default;
+$page-padding-top-mobile: if($header-normal-mode-mobile, 0, $header-height) !default;

 // Color of the hover header item
 $header-hover-color: #161209 !default;
 $header-hover-color-dark: #fff !default;
+
+// Color of the search background
+$search-background-color: #e9e9e9 !default;
+$search-background-color-dark: #363636 !default;
 // ========== Header ========== //

 // ========== Single Content ========== //