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

* feat(search): add local search

* docs: add docs for search

assets/css/_mixin/_blur.scss

@@ -0,0 +1,5 @@
+@mixin blur {
+  .blur & {
+    @include filter(blur(1.5px));
+  }
+}

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

assets/css/_mixin/_index.scss

@@ -1,2 +1,4 @@
+@import "_compatibility";
 @import "_link";
+@import "_blur";
 @import "_summary";

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

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