pjax

source/css/_search/algolia.styl

@@ -11,7 +11,8 @@
       outline: none
       border: 2px solid $search-color
       border-radius: 2rem
-      background: $search-bg
+      background: var(--search-bg)
+      color: var(--search-input-color)
       font-size: 14px
 
   .ais-hits--item.algolia-hit-item
@@ -20,7 +21,7 @@
 
     &:hover
       &:before
-        border-color: $theme-button-hover-color
+        border-color: $pseudo-hover
 
     &:before
       $w = .3rem
@@ -38,7 +39,7 @@
 
     a
       display: block
-      color: $font-black
+      color: var(--search-result-title)
       font-size: 14px
       cursor: pointer
 

source/css/_search/index.styl

@@ -7,7 +7,14 @@
   margin-left: -15rem
   padding: 1rem
   width: 30rem
-  background: $search-bg
+  background: var(--search-bg)
+
+  @media screen and (max-width: $sm)
+    top: 0
+    left: 0
+    margin: 0
+    width: 100%
+    height: 100%
 
   hr
     margin: 1rem auto
@@ -31,7 +38,7 @@
     font-size: 1rem
     line-height: 1
 
-.search-mask
+#search-mask
   position: fixed
   top: 0
   right: 0
@@ -39,16 +46,4 @@
   left: 0
   z-index: 1000
   display: none
-  background: rgba($dark-black, .6)
-
-@media screen and (max-width: $sm)
-  .search-dialog
-    top: 0
-    left: 0
-    margin: 0
-    width: 100%
-    height: 100%
-
-  .search-result-list
-    padding-bottom: 2rem
-    max-height: 75vh !important
+  background: rgba($dark-black, .6)

source/css/_search/local-search.styl

@@ -12,7 +12,8 @@
       outline: none
       border: 2px solid $search-color
       border-radius: 2rem
-      background: $search-bg
+      background: var(--search-bg)
+      color: var(--search-input-color)
       font-size: 14px
       -webkit-appearance: none
 
@@ -23,7 +24,7 @@
 
     &:hover
       &:before
-        border-color: $theme-button-hover-color
+        border-color: $pseudo-hover
 
     &:before
       $w = .3rem
@@ -41,7 +42,7 @@
 
     a
       display: block
-      color: $font-black
+      color: var(--search-result-title)
       font-weight: 600
       font-size: 14px
       cursor: pointer
@@ -62,4 +63,8 @@
 
   .search-result-list
     overflow-y: auto
-    max-height: 10.5rem
+    max-height: 10.5rem
+
+    @media screen and (max-width: $sm)
+      padding-bottom: 2rem
+      max-height: 75vh !important