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

* feat(search): add local search

* docs: add docs for search

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

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;

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

assets/css/_partial/_single/_instagram.scss

@@ -1,5 +1,5 @@
 iframe.instagram-media {
-  .dark-theme & {
+  .dark & {
     border: none !important;
   }
 }

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 {