feat: improve search

layout/404.ejs

@@ -10,15 +10,15 @@
   <div class="site-search">
     <div class="reimu-popup popup">
       <div class="reimu-search">
-        <span class="reimu-search-input-icon"></span>
+        <div class="reimu-search-input-icon"></div>
         <div class="reimu-search-input" id="reimu-search-input"></div>
+        <div class="popup-btn-close"></div>
       </div>
       <div class="reimu-results">
         <div id="reimu-stats"></div>
         <div id="reimu-hits"></div>
         <div id="reimu-pagination" class="reimu-pagination"></div>
       </div>
-      <span class="popup-btn-close"></span>
     </div>
   </div>
   <%- partial('_partial/after-footer') %>

layout/layout.ejs

@@ -30,15 +30,15 @@
     <div class="site-search">
       <div class="reimu-popup popup">
         <div class="reimu-search">
-          <span class="reimu-search-input-icon"></span>
+          <div class="reimu-search-input-icon"></div>
           <div class="reimu-search-input" id="reimu-search-input"></div>
+          <div class="popup-btn-close"></div>
         </div>
         <div class="reimu-results">
           <div id="reimu-stats"></div>
           <div id="reimu-hits"></div>
           <div id="reimu-pagination" class="reimu-pagination"></div>
         </div>
-        <span class="popup-btn-close"></span>
       </div>
     </div>
     <%- partial('_partial/after-footer') %>

source/css/_partial/archive.styl

@@ -107,10 +107,11 @@
   a
     color: var(--grey-9)
     text-decoration: none
-    transition: background .2s
+    transition: .2s
 
     &:hover
       background: var(--red-2)
+      box-shadow: 0 0 10px rgba(255, 78, 106, 0.55)
       color: #fff
 
   .prev
@@ -132,7 +133,7 @@
     background: var(--red-1)
     color: white
     font-weight: bold
-    box-shadow: 0 2px 12px rgba(255, 78, 106, 0.55)
+    box-shadow: 0 0 10px rgba(255, 78, 106, 0.55)
     @media mq-mobile
       display: inline-block
 

source/css/_partial/header.styl

@@ -42,7 +42,7 @@
   overflow: hidden
   background: var(--color-header-background)
   box-shadow: 0 0 15px 5px rgba(0, 0, 0, 0.1)
-  transition: .3s
+  transition: background .3s, top .3s
   z-index: 200
 
   &:hover

source/css/_partial/search.styl

@@ -1,5 +1,5 @@
 .popup
-  display: none
+  visibility: hidden
   position: fixed
   top: 10%
   left: 50%
@@ -11,6 +11,14 @@
   color: var(--grey-9)
   z-index: 9999
   border-radius: post-radius
+  opacity: 0
+  transform: scale(0.5)
+  transition: 0.3s
+
+  &.show
+    visibility: visible
+    opacity: 1
+    transform: scale(1)
 
   @media mg-normal
     padding: 5px
@@ -36,20 +44,17 @@
   padding: 0
 
 .popup-btn-close
-  position: absolute
-  right: 15px
   color: var(--red-1)
   font: 20px bold
-  text-transform: uppercase
-  vertical-align: middle
   if reimu_cursor
     cursor: var(--cursor-pointer)
   else
     cursor: pointer
   padding-left: 15px
-  top: 8px
 
 .reimu-search
+  display: flex
+  align-items: center
   padding: 8px 15px
   max-height: 50px
   border-bottom: 1px solid #ccc
@@ -64,8 +69,7 @@
   margin-right: 5px
 
 .reimu-search-input
-  display: inline-block
-  width: calc(90% - 20px)
+  flex: 1
 
   input
     padding: 5px 0
@@ -114,7 +118,7 @@
   &:before
     content: ""
     width: 6px
-    height: 15px
+    height: 12px
     background: var(--color-h2-after)
     display: inline-block
     vertical-align: middle
@@ -126,7 +130,6 @@
     transition: 0.2s
 
   &:hover:before
-    width: 6px
     height: 6px
     border-radius: 50%
     opacity: 1
@@ -143,10 +146,11 @@
     padding: 10px 15px
     color: var(--grey-9)
     text-decoration: none
-    transition: background 0.2s
+    transition: 0.2s
 
     &:hover
       background: var(--red-2)
+      box-shadow: 0 0 6px rgba(255, 78, 106, 0.55)
       color: #fff
 
   .pagination-item
@@ -162,7 +166,7 @@
       color: white
       background: var(--red-1)
       font-weight: bold
-      box-shadow: 0 2px 6px rgba(255, 78, 106, 0.55)
+      box-shadow: 0 0 6px rgba(255, 78, 106, 0.55)
 
   .disabled-item
     display: none

source/css/_partial/sidebar.styl

@@ -418,7 +418,7 @@ $siderbar-btn-icon
   background: var(--red-3)
   color: white
   font-weight: bold
-  box-shadow: 0 2px 12px rgba(255, 78, 106, 0.55)
+  box-shadow: 0 0 10px rgba(255, 78, 106, 0.55)
   border-radius: post-radius
   margin: 20px
   transition: .3s

source/js/algolia_search.js

@@ -108,18 +108,23 @@ const algoliaHandler = () => {
     .off("click")
     .on("click", (event) => {
       event.stopPropagation();
-      document.body.insertAdjacentHTML("beforeend", '<div class="popoverlay">');
+      document.body.insertAdjacentHTML("beforeend", '<div class="popoverlay"></div>');
+      const scrollWidth = window.innerWidth - document.documentElement.offsetWidth;
+      _$("#container").style.marginRight = scrollWidth + "px";
+      _$("#header-nav").style.marginRight = scrollWidth + "px";
+      _$(".popup").classList.add("show");
       document.body.style.overflow = "hidden";
-      _$(".popup").style.display = "block";
       _$("#reimu-search-input input").focus();
     });
 
   document
     .querySelector(".popup-btn-close")
     .off("click")
     .on("click", () => {
-      _$(".popup").style.display = "none";
+      _$(".popup").classList.remove("show");
       _$(".popoverlay").remove();
+      _$("#container").style.marginRight = "";
+      _$("#header-nav").style.marginRight = "";
       document.body.style.overflow = "";
     });
 };