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

* feat(search): add local search

* docs: add docs for search

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;
 }

assets/css/_core/_layout.scss

@@ -14,11 +14,3 @@
     }
   }
 }
-
-.footer {
-  height: 2rem;
-  width: 100%;
-  text-align: center;
-  line-height: 1.5rem;
-  padding-top: 2rem;
-}

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;