refactor: Change & add responsive style of algolia

README.md

@@ -34,15 +34,15 @@
 进入 hexo 根目录，执行指令。
 
 ``` bash
-git clone https://github.com/liuyib/hexo-theme-stun.git themes/stun
+$ git clone https://github.com/liuyib/hexo-theme-stun.git themes/stun
 ```
 
 - 安装 pug 和 stylus
 
-如果你没有安装对 pug、stylus 的支持，执行指令（如果你不确定，直接执行指令就好了）。
+主题依赖于 pug 和 stylus，请执行指令。
 
 ``` bash
-npm install --save-dev hexo-render-pug hexo-renderer-stylus
+$ npm install --save-dev hexo-render-pug hexo-renderer-stylus
 ```
 
 ## 使用
@@ -56,9 +56,9 @@ theme: stun
 ## 更新
 
 ``` bash
-cd themes/stun
+$ cd themes/stun
 
-git pull
+$ git pull
 ```
 
 ## 配置

README_en_US.md

@@ -32,15 +32,15 @@ If you are using the stun theme and would like it to be shown here, you can fill
 Enter your hexo directory, run this.
 
 ``` bash
-git clone https://github.com/liuyib/hexo-theme-stun.git themes/stun
+$ git clone https://github.com/liuyib/hexo-theme-stun.git themes/stun
 ```
 
-- Install pug and stylus
+- Install `pug` and `stylus`
 
-If you don't have pug and stylus renderer, run this (If you`re not sure, just do it).
+The theme depends on `pug` and `stylus`, please run this.
 
 ``` bash
-npm install --save-dev hexo-render-pug hexo-renderer-stylus
+$ npm install --save-dev hexo-render-pug hexo-renderer-stylus
 ```
 
 ## How to use
@@ -54,9 +54,9 @@ theme: stun
 ## Update
 
 ``` bash
-cd themes/stun
+$ cd themes/stun
 
-git pull
+$ git pull
 ```
 
 ## Configuration

source/css/_common/responsive.styl

@@ -109,6 +109,11 @@
 
     .site-info-subtitle
       font-size: 1.5rem
+  
+  div.algolia-popup
+    left: 0
+    margin: 0 1rem
+    width: calc(100% - 2rem)
 
 // $xs-width: 576px
 // -----------------------------------------
@@ -130,6 +135,12 @@
   .header-nav-search
     span
       display: none
+    
+  div.algolia-results
+    max-height: 10rem
+    
+    .algolia-hit-item
+      margin: 0
 
   .main-content
     padding: 1rem

source/css/_components/search/algolia.styl

@@ -18,16 +18,14 @@
   border-radius: 5px
   padding: 1rem
   width: 700px
-  height: 80%
+  max-height: 80%
   font-size: $font-size-large
   color: $font-color
   background-color: $white-light
 
-column-height = 2rem
-
 .algolia-input-wrapper
   display: flex
-  height: column-height * 2
+  margin: 1rem 0
   flex-direction: column
 
   .ais-search-box
@@ -55,31 +53,16 @@ column-height = 2rem
   color: $black-light
   cursor: pointer
 
-if (hexo-config('algolia_search.labels.show_stats'))
-  $algolia-results
-    height: calc(100% - 8rem)
-else
-  $algolia-results
-    height: calc(100% - 6rem)
-
 .algolia-results
-  display: flex
   overflow-x: hidden
-  overflow-y: auto
-  flex-direction: column
-  @extend $algolia-results
+  overflow-y: scroll
+  max-height: 16rem
 
   em
     font-style: normal
     background-color: $yellow-light
 
-#algolia-hits,
-.ais-hits
-  flex: 1 0 auto
-
 .algolia-hit-item
-  margin: .3rem 0
-
   &::before
     content: ''
     display: inline-block
@@ -92,10 +75,11 @@ else
     transition: color .2s
 
 #algolia-pagination
-  margin-bottom: .5rem
-  
+  margin: .5rem 0
+
   ul
     margin: 0
+    padding: 0
     text-align: center
 
 .ais-pagination
@@ -115,6 +99,9 @@ else
         color: #fff
         background-color: $blue-light
 
+#algolia-stats
+  overflow: hidden
+
 .algolia-logo
   img
     width: 4rem