diff --git a/source/js/search.js b/source/js/search.js
index 72b1f60..5486a62 100755
--- a/source/js/search.js
+++ b/source/js/search.js
@@ -8,7 +8,7 @@ var SearchService = "";
    */
   SearchService = function(options) {
     var self = this;
-    
+
     self.config = $.extend({
       per_page: 10,
       selectors: {
@@ -70,7 +70,7 @@ var SearchService = "";
       self.dom.modal_ajax_content.removeClass('loaded');
       self.startLoading();
     };
-    
+
     self.afterQuery = function() {
       self.dom.modal_body.scrollTop(0);
       self.dom.modal_ajax_content.addClass('loaded');
@@ -109,19 +109,19 @@ var SearchService = "";
       self.dom.modal_error.html(errMsg);
       self.dom.modal_error.show();
     };
-    
+
     self.nextPage = function() {
       if (self.nav.next !== -1) {
         self.search(self.nav.next);
       }
     };
-    
+
     self.prevPage = function() {
       if (self.nav.prev !== -1) {
         self.search(self.nav.prev);
       }
     };
-    
+
     /**
      * Generate html for one result
      * @param url : (string) url
@@ -134,12 +134,12 @@ var SearchService = "";
       html +=   "<a class='result' href='" +url+ "'>";
       html +=     "<span class='title'>" +title+ "</span>";
       html +=     "<span class='digest'>" +digest+ "</span>";
-      html +=     "<span class='icon icon-chevron-thin-right'></span>";
+      html +=     "<span class='fas fa-chevron-thin-right'></span>";
       html +=   "</a>";
       html += "</li>";
       return html;
     };
-    
+
     /**
      * Close the modal, resume body scrolling
      * no param
@@ -149,7 +149,7 @@ var SearchService = "";
       self.dom.container.fadeOut();
       self.dom.body.removeClass('modal-active');
     };
-    
+
     /**
      * Searchform submit event handler
      * @param queryText : (string) the query text
@@ -161,19 +161,19 @@ var SearchService = "";
         self.search(1);
       }
     };
-    
+
     /**
      * Start loading bar animation
      * no param
      */
     self.startLoading = function() {
       self.dom.modal_loading_bar.show();
-      self.loadingTimer = setInterval(function() { 
+      self.loadingTimer = setInterval(function() {
         self.percentLoaded = Math.min(self.percentLoaded+5,95);
         self.dom.modal_loading_bar.css('width', self.percentLoaded+'%');
       }, 100);
     };
-    
+
     /**
      * Stop loading bar animation
      * no param
@@ -212,7 +212,7 @@ var SearchService = "";
       self.dom.btn_prev.off('click');
       self.dom.container.remove();
     };
-    
+
     /**
      * Load template and register event handlers
      * no param
@@ -233,7 +233,7 @@ var SearchService = "";
     self.init();
   };
 
-  var template = '<div id="u-search"><div class="modal"> <header class="modal-header" class="clearfix"><form id="u-search-modal-form" class="u-search-form" name="uSearchModalForm"> <input type="text" id="u-search-modal-input" class="u-search-input" /> <button type="submit" id="u-search-modal-btn-submit" class="u-search-btn-submit"> <span class="icon icon-search"></span> </button></form> <a class="btn-close"> <span class="icon icon-close"></span> </a><div class="modal-loading"><div class="modal-loading-bar"></div></div> </header> <main class="modal-body"><ul class="modal-results modal-ajax-content"></ul> </main> <footer class="modal-footer clearfix"><div class="modal-metadata modal-ajax-content"> <strong class="range"></strong> of <strong class="total"></strong></div><div class="modal-error"></div> <div class="logo"></div> <a class="nav btn-next modal-ajax-content"> <span class="text">NEXT</span> <span class="icon icon-chevron-right"></span> </a> <a class="nav btn-prev modal-ajax-content"> <span class="icon icon-chevron-left"></span> <span class="text">PREV</span> </a> </footer></div><div class="modal-overlay"></div></div>';
+  var template = '<div id="u-search"><div class="modal"> <header class="modal-header" class="clearfix"><form id="u-search-modal-form" class="u-search-form" name="uSearchModalForm"> <input type="text" id="u-search-modal-input" class="u-search-input" /> <button type="submit" id="u-search-modal-btn-submit" class="u-search-btn-submit"> <span class="fas fa-search"></span> </button></form> <a class="btn-close"> <span class="fas fa-times"></span> </a><div class="modal-loading"><div class="modal-loading-bar"></div></div> </header> <main class="modal-body"><ul class="modal-results modal-ajax-content"></ul> </main> <footer class="modal-footer clearfix"><div class="modal-metadata modal-ajax-content"> <strong class="range"></strong> of <strong class="total"></strong></div><div class="modal-error"></div> <div class="logo"></div> <a class="nav btn-next modal-ajax-content"> <span class="text">NEXT</span> <span class="fas fa-chevron-right"></span> </a> <a class="nav btn-prev modal-ajax-content"> <span class="fas fa-chevron-left"></span> <span class="text">PREV</span> </a> </footer></div><div class="modal-overlay"></div></div>';
 })(jQuery);
 
 var AlgoliaSearch;
@@ -250,7 +250,7 @@ var AlgoliaSearch;
     var self = this;
     var endpoint = "https://" +self.config.appId+ "-dsn.algolia.net/1/indexes/" +self.config.indexName;
     self.addLogo('algolia');
-    
+
     /**
      * Generate result list html
      * @param data : (array) result items
@@ -268,7 +268,7 @@ var AlgoliaSearch;
       });
       return html;
     };
-    
+
     /**
      * Generate metadata after a successful query
      * @param data : (object) the raw search response data
@@ -303,7 +303,7 @@ var AlgoliaSearch;
         self.dom.btn_prev.hide();
       }
     };
-    
+
     /**
      * Send a GET request
      * @param queryText : (string) the query text
@@ -319,7 +319,7 @@ var AlgoliaSearch;
         "x-algolia-api-key": self.config.apiKey
       }, function(data, status) {
         if (status === 'success' && data.hits && data.hits.length > 0) {
-          var results = self.buildResultList(data.hits); 
+          var results = self.buildResultList(data.hits);
           self.dom.modal_results.html(results);
         }
         else {
@@ -331,7 +331,7 @@ var AlgoliaSearch;
         }
       });
     };
-    
+
     return self;
   };
 
@@ -351,7 +351,7 @@ var AzureSearch;
     var endpoint = "https://" +self.config.serviceName+ ".search.windows.net/indexes/" +self.config.indexName+ "/docs?api-version=2015-02-28";
     self.nav.current = 1;
     self.addLogo('azure');
-    
+
     /**
      * Generate result list html
      * @param data : (array) result items
@@ -369,7 +369,7 @@ var AzureSearch;
       });
       return html;
     };
-    
+
     /**
      * Generate metadata after a successful query
      * @param data : (object) the raw response data
@@ -405,7 +405,7 @@ var AzureSearch;
         self.dom.btn_prev.hide();
       }
     };
-    
+
     /**
      * Send a GET request
      * @param queryText : (string) the query text
@@ -476,7 +476,7 @@ var BaiduSearch;
       });
       return html;
     };
-    
+
     /**
      * Generate metadata after a successful query
      * @param data : (object) the raw google custom search response data
@@ -537,7 +537,7 @@ var BaiduSearch;
     };
 
     self.loadScript();
-    
+
     return self;
   };
 
@@ -546,7 +546,7 @@ var GoogleCustomSearch = "";
 
 (function($) {
   'use strict';
-  
+
   /**
    * Search by Google Custom Search Engine JSON API
    * @param options : (object)
@@ -571,7 +571,7 @@ var GoogleCustomSearch = "";
       });
       return html;
     };
-    
+
     /**
      * Generate metadata after a successful query
      * @param data : (object) the raw google custom search response data
@@ -605,7 +605,7 @@ var GoogleCustomSearch = "";
         self.dom.btn_prev.hide();
       }
     };
-    
+
     /**
      * Send a GET request
      * @param queryText : (string) the query text
@@ -621,8 +621,8 @@ var GoogleCustomSearch = "";
         num: self.config.per_page
       }, function(data, status) {
         if (status === 'success' && data.items && data.items.length > 0) {
-          var results = self.buildResultList(data.items); 
-          self.dom.modal_results.html(results);       
+          var results = self.buildResultList(data.items);
+          self.dom.modal_results.html(results);
         }
         else {
           self.onQueryError(queryText, status);
@@ -633,7 +633,7 @@ var GoogleCustomSearch = "";
         }
       });
     };
-    
+
     return self;
   };
 })(jQuery);
@@ -641,7 +641,7 @@ var HexoSearch;
 
 (function($) {
   'use strict';
-  
+
   /**
   * Search by Hexo generator json content
   * @param options : (object)
@@ -652,7 +652,7 @@ var HexoSearch;
     self.config.endpoint = ROOT + ((options||{}).endpoint || "content.json");
     self.config.endpoint = self.config.endpoint.replace("//","/"); //make sure the url is correct
     self.cache = "";
-    
+
     /**
      * Search queryText in title and content of a post
      * Credit to: http://hahack.com/codes/local-search-engine-for-hexo/
@@ -705,7 +705,7 @@ var HexoSearch;
       }
       return foundMatch;
     };
-    
+
     /**
      * Generate result list html
      * @param data : (array) result items
@@ -719,7 +719,7 @@ var HexoSearch;
       });
       return html;
     };
-    
+
     /**
      * Generate metadata after a successful query
      * @param data : (object) the raw google custom search response data
@@ -727,7 +727,7 @@ var HexoSearch;
     self.buildMetadata = function(data) {
       self.dom.modal_footer.hide();
     };
-    
+
     /**
      * Send a GET request
      * @param queryText : (string) the query text
@@ -743,16 +743,16 @@ var HexoSearch;
           start: startIndex,
           num: self.config.per_page
         }, function(data, status) {
-          if (status !== 'success' || 
-              !data || 
-              (!data.posts && !data.pages) || 
+          if (status !== 'success' ||
+              !data ||
+              (!data.posts && !data.pages) ||
               (data.posts.length < 1 && data.pages.length < 1)
             ) {
             self.onQueryError(queryText, status);
           }
           else {
             self.cache = data;
-            var results = ""; 
+            var results = "";
             results += self.buildResultList(data.pages, queryText);
             results += self.buildResultList(data.posts, queryText);
             self.dom.modal_results.html(results);
@@ -764,7 +764,7 @@ var HexoSearch;
         });
       }
       else {
-        var results = ""; 
+        var results = "";
         results += self.buildResultList(self.cache.pages, queryText);
         results += self.buildResultList(self.cache.posts, queryText);
         self.dom.modal_results.html(results);
@@ -774,8 +774,8 @@ var HexoSearch;
         }
       }
     };
-    
+
     return self;
   };
 
-})(jQuery);
\ No newline at end of file
+})(jQuery);
diff --git a/source/less/_header.less b/source/less/_header.less
index 94e1d22..166e8f8 100755
--- a/source/less/_header.less
+++ b/source/less/_header.less
@@ -228,14 +228,14 @@
     position: fixed;
     top: @height_navbar + 2*@gap;
     right: 0;
-    width: 100% - 0.5*@gap;
+    width: ~"calc(100% - 2*@{gap})";
     z-index:9999 + 1;
     line-height: 2 * @gap;
     background: white;
     border-right: 0;
     box-shadow: @boxshadow_card_raised;
     border-radius: @border_radius;
-    transform: translate3d(100%, -0, 0);
+    transform: translate3d(~"calc(100% + 2*@{gap})", -0, 0);
     .enable-trans();
     &:hover {
         box-shadow: @boxshadow_card_raised;