style: em -> rem in css file

layout/_partial/header.ejs

@@ -25,7 +25,7 @@
     <div class="header-drawer">
         <ul class="drawer-menu-list">
             <% for (let i in theme.menu) { %>
-                <li class="drawer-menu-item">
+                <li class="drawer-menu-item flex-center">
                     <a class="<%- isInHomePaging(page.path, theme.menu[i]) ? 'active' : is_current(theme.menu[i]) ? 'active' : '' %>"
                        href="<%- url_for(theme.menu[i]) %>"><%= __(i.toLowerCase()).toUpperCase() %></a>
                 </li>

source/css/layout/_partial/archive-list.styl

@@ -1,7 +1,7 @@
-$archive-year-font-size = 1.8em;
-$archive-year-count-font-size = 1.2em;
-$article-title-font-size = 1.2em;
-$article-date-font-size = 1em;
+$archive-year-font-size = 1.8rem;
+$archive-year-count-font-size = 1.2rem;
+$article-title-font-size = 1.2rem;
+$article-date-font-size = 1rem;
 
 .archive-list-container {
 
@@ -19,7 +19,7 @@ $article-date-font-size = 1em;
         font-size: $archive-year-font-size;
 
         +keep-tablet() {
-          font-size: $archive-year-font-size - 0.2em;
+          font-size: $archive-year-font-size - 0.2rem;
         }
 
         color: var(--second-text-color);
@@ -27,11 +27,12 @@ $article-date-font-size = 1em;
         margin-right: 6px;
       }
 
+
       .archive-year-post-count {
         font-size: $archive-year-count-font-size;
 
         +keep-tablet() {
-          font-size: $archive-year-count-font-size - 0.1em;
+          font-size: $archive-year-count-font-size * 0.9;
         }
 
         color: var(--second-text-color);
@@ -50,6 +51,7 @@ $article-date-font-size = 1em;
       }
 
       .article-item {
+        font-size: 1rem;
         margin-top: 18px;
 
         +keep-tablet() {

source/css/layout/_partial/article-copyright-info.styl

@@ -4,7 +4,7 @@
   box-sizing: border-box;
   background: var(--second-background-color);
   padding: 10px 6px;
-  font-size: 1em;
+  font-size: 1rem;
 
   &::after {
     position: absolute;
@@ -16,6 +16,7 @@
     background: var(--copyright-info-color);
   }
 
+
   ul {
 
     margin-left: 10px;

source/css/layout/_partial/article-meta-info.styl

@@ -1,7 +1,6 @@
 .article-meta-info {
-
   color: var(--third-text-color);
-  font-size: 0.8em;
+  font-size: 0.8rem;
 
   .article-meta-item {
     margin-right: 10px;

source/css/layout/_partial/comment/valine.styl

@@ -67,7 +67,6 @@
     .vcard {
 
       // author
-
       &.author {
         .vnick {
           font-weight: bold;

source/css/layout/_partial/empty-page.styl

@@ -68,7 +68,7 @@ $friend-link-item-border-radius = 6px;
               display: flex;
               justify-content: center;
               align-items: center;
-              font-size: 2em;
+              font-size: 2rem;
               background: var(--second-background-color);
               color: var(--second-text-color);
 
@@ -94,13 +94,13 @@ $friend-link-item-border-radius = 6px;
               .name {
                 width: 100%;
                 height: 60%;
-                font-size: 1.28em;
+                font-size: 1.28rem;
               }
 
               .description {
                 width: 100%;
                 height: 40%;
-                font-size: 1em;
+                font-size: 1rem;
                 color: var(--third-text-color);
                 overflow: hidden;
                 text-overflow: ellipsis;

source/css/layout/_partial/first-screen.styl

@@ -13,15 +13,15 @@
 
     .description {
       font-weight: bold;
-      font-size: 2em;
-      line-height: 2em;
+      font-size: 2rem;
+      line-height: 2rem;
       text-align: center;
     }
 
     .s-icon-list {
       position: absolute;
       bottom: $component-interspace;
-      font-size: 1.6em;
+      font-size: 1.6rem;
       left: 50%;
       transform: translateX(-50%);
 
@@ -29,7 +29,7 @@
         float: left;
         margin-right: 25px;
         cursor: pointer;
-        line-height: 2em;
+        line-height: 2rem;
 
         &:last-child {
           margin-right: 0;

source/css/layout/_partial/footer.styl

@@ -1,4 +1,5 @@
 .footer {
+  font-size: 1rem;
   color: var(--third-text-color);
 
   a {

source/css/layout/_partial/header.styl

@@ -1,4 +1,5 @@
 $header-progress-height = 2.8px;
+$logo-title-font-size = 2.2rem;
 
 .header-wrapper {
   width: 100%;
@@ -23,31 +24,29 @@ $header-progress-height = 2.8px;
     align-items: center;
     z-index: $z-index-5;
 
-    transition();
-
     +keep-tablet() {
-      width: $main-content-width-tablet !important;
+      width: $main-content-width-tablet;
     }
 
+
     +keep-mobile() {
-      width: $main-content-width-mobile !important;
+      width: $main-content-width-mobile;
     }
 
+
     .logo-title {
-      font-size: 2.2em;
+      font-size: $logo-title-font-size;
       font-weight: bold;
+      letter-spacing: 1px;
+      color: var(--first-text-color);
 
       +keep-tablet() {
-        font-size: 2.0em;
+        font-size: $logo-title-font-size * 0.9;
       }
 
       +keep-mobile() {
-        font-size: 1.8em;
+        font-size: $logo-title-font-size * 0.8;
       }
-
-      letter-spacing: 1px;
-      color: var(--first-text-color);
-      transition();
     }
 
 
@@ -57,10 +56,12 @@ $header-progress-height = 2.8px;
         display: none;
       }
 
+
       .menu-item {
         float: left;
         position: relative;
         margin-left: 30px;
+        font-size: 1rem;
 
         &:first-child {
           margin-left: 0;
@@ -81,7 +82,6 @@ $header-progress-height = 2.8px;
               height: 2px;
               transform: translateX(-50%);
               background: var(--primary-color);
-              transition();
             }
           }
 
@@ -90,8 +90,6 @@ $header-progress-height = 2.8px;
 
         .active {
           color: var(--second-text-color);
-          font-weight: bold;
-          transition();
 
           &::after {
             content: '';
@@ -102,7 +100,6 @@ $header-progress-height = 2.8px;
             height: 2px;
             transform: translateX(-50%);
             background: var(--primary-color)
-            transition();
           }
         }
       }
@@ -163,9 +160,10 @@ $header-progress-height = 2.8px;
     transform: scaleY(0);
     transform-origin: top;
     background: var(--background-color);
-    transition();
     z-index: $z-index-2;
 
+    transition();
+
     .drawer-menu-list {
       display: flex;
       flex-direction: column;
@@ -173,28 +171,28 @@ $header-progress-height = 2.8px;
       align-items: center;
 
       .drawer-menu-item {
+        font-size: 1rem;
+        margin: 6px 0;
+        height: 38px;
 
         a {
-          display: block;
-          margin: 8px auto;
-          padding: 0 20px;
+          padding: 6px 20px;
           border-radius: 20px;
-          text-align: center;
-          line-height: 34px;
           color: var(--default-text-color);
           transition();
 
           &:hover {
             color: var(--second-text-color);
-            font-weight: bold;
+            border: 1px solid var(--default-text-color);
+          }
+
+
+          &.active {
+            border: 1px solid var(--default-text-color);
+            color: var(--second-text-color);
           }
         }
 
-        .active {
-          border: 1px solid var(--default-text-color);
-          color: var(--second-text-color);
-          font-weight: bold;
-        }
 
       }
     }

source/css/layout/_partial/local-search.styl

@@ -1,4 +1,4 @@
-$icon-size = 1.2em;
+$icon-size = 1.2rem;
 
 .search-pop-overlay {
   display: none;
@@ -9,10 +9,9 @@ $icon-size = 1.2em;
   width: 100%;
   background: rgba(0, 0, 0, 0.4);
   z-index: $z-index-8;
-}
 
 
-.search-popup {
+  .search-popup {
     background: var(--background-color);
     border-radius: 2px;
     height: 80%;
@@ -21,6 +20,7 @@ $icon-size = 1.2em;
     position: fixed;
     top: 10%;
     width: 70%;
+    z-index: $z-index-6;
 
     +keep-tablet() {
       width: 80%;
@@ -30,16 +30,51 @@ $icon-size = 1.2em;
       width: 90%;
     }
 
-  z-index: $z-index-6;
+    .search-header {
+      background: var(--fourth-text-color);
+      border-top-left-radius: 2px;
+      border-top-right-radius: 2px;
+      display: flex;
+      padding: 10px;
 
       .search-icon, .popup-btn-close {
-    color: var(--default-text-color);
         font-size: $icon-size;
         padding: 0 10px;
         display: flex;
         align-items: center;
       }
 
+      .search-icon {
+        color: var(--third-text-color);
+      }
+
+      .popup-btn-close {
+        color: var(--default-text-color);
+      }
+
+
+      .search-input-container {
+
+        flex-grow: 1;
+        padding: 2px;
+
+        .search-input {
+          background: transparent;
+          border: 0;
+          outline: 0;
+          width: 100%;
+          font-size: 1.2rem;
+          color: var(--default-text-color);
+
+          &::-webkit-search-cancel-button {
+            display: none;
+          }
+        }
+
+
+      }
+
+
       .popup-btn-close {
         cursor: pointer;
 
@@ -48,63 +83,63 @@ $icon-size = 1.2em;
         }
       }
 
-  .search-header {
-    background: var(--fourth-text-color);
-    border-top-left-radius: 2px;
-    border-top-right-radius: 2px;
+    }
+
+
+    #search-result {
       display: flex;
-    padding: 10px;
-  }
-}
+      height: calc(100% - 55px);
+      overflow: auto;
+      padding: 5px 25px;
 
-
-input.search-input {
-  background: transparent;
-  border: 0;
-  outline: 0;
-  width: 100%;
-  font-size: 1.2em;
-  color: var(--default-text-color);
-
-  &::-webkit-search-cancel-button {
-    display: none;
-  }
-}
-
-
-.search-popup {
-
-  .search-input-container {
-    flex-grow: 1;
-    padding: 2px;
-  }
-
-  ul.search-result-list {
-    margin: 10px 5px;
+      .search-result-list {
         width: 100%;
+        height: 100%;
+        font-size: 1rem;
 
         li {
-      border-bottom: 1px solid var(--border-color);
-      margin-bottom: 20px;
-
-      a {
-        display: block;
-        margin-bottom: 16px;
-      }
+          border-bottom: 1px dashed var(--border-color);
+          padding: 10px 0;
+          margin: 10px 0;
+          box-sizing: border-box;
 
           &:last-child {
-        margin-bottom: 0;
-      }
-    }
+            border-bottom: none;
           }
 
-  p.search-result {
-    margin 0
-    padding 0
-  }
 
-  a.search-result-title {
+          .search-result-title {
+            position: relative;
             font-weight: bold;
+            margin-bottom: 10px;
+            padding-left: 16px;
+            display: flex;
+            align-items: center;
+
+            &::after {
+              content: '';
+              position: absolute;
+              width: 5px;
+              height: 5px;
+              border-radius: 50%;
+              top: 50%;
+              transform: translateY(-50%);
+              left: 0;
+              background: var(--default-text-color);
+            }
+          }
+
+
+          .search-result {
+            line-height: 2rem;
+            margin: 0;
+            padding-left: 16px;
+          }
+
+          a {
+            &:hover {
+              color: var(--default-text-color);
+            }
           }
 
           .search-keyword {
@@ -113,15 +148,16 @@ input.search-input {
             font-weight: bold;
           }
 
-  #search-result {
-    display: flex;
-    height: calc(100% - 55px);
-    overflow: auto;
-    padding: 5px 25px;
         }
+      }
+
 
       #no-result {
         color: var(--third-text-color);
         margin: auto;
       }
+
+    }
+  }
 }
+

source/css/layout/_partial/paginator.styl

@@ -1,5 +1,5 @@
 .paginator {
-
+  font-size: 1rem;
   margin-top: 30px;
 
   a.prev {

source/css/layout/_partial/side-tools-container.styl

@@ -1,4 +1,6 @@
 $tools-item-width = 32px;
+$tools-item-font-size = 1.1rem;
+
 
 .side-tools-container {
   position: relative;
@@ -7,7 +9,7 @@ $tools-item-width = 32px;
   .tools-item {
     width: $tools-item-width;
     height: $tools-item-width;
-    font-size: 1.1em;
+    font-size: $tools-item-font-size;
     margin-bottom: 3px;
     color: var(--second-text-color);
     background: var(--background-color);
@@ -26,15 +28,9 @@ $tools-item-width = 32px;
     +keep-tablet() {
       width: $tools-item-width * 0.9;
       height: $tools-item-width * 0.9;
-      font-size: 1.05em;
+      font-size: $tools-item-font-size * 0.9;
       margin-bottom: 2px;
     }
-
-    +keep-mobile() {
-      width: $tools-item-width * 0.8;
-      height: $tools-item-width * 0.8;
-      font-size: 1.0em;
-    }
   }
 
 

source/css/layout/_partial/tagcloud.styl

@@ -5,7 +5,7 @@
   .tagcloud-content {
 
     text-align: justify;
-    font-size: 1.2em;
+    font-size: 1.2rem;
 
     a {
       padding: 8px 6px;

source/css/layout/_partial/toc.styl

@@ -1,6 +1,6 @@
 .post-toc-wrap {
   width: 100%;
-  font-size: 0.92em;
+  font-size: 0.92rem;
   box-sizing: border-box;
 
   .post-toc {

source/css/layout/_partial/tools.styl

@@ -9,7 +9,7 @@ $li-margin-bottom = 12px;
       width: $circle-button-width;
       height: $circle-button-width;
       border-radius: 50%;
-      font-size: 1.2em;
+      font-size: 1.2rem;
       display: flex;
       align-items: center;
       justify-content: center;

source/css/layout/article-content.styl

@@ -1,6 +1,7 @@
 $avatarWidth = 46px;
 $arrow-icon-width = 16px;
 $post-nav-max-width = 220px;
+$article-title-font-size = 1.6rem;
 
 .article-content-container {
 
@@ -9,14 +10,14 @@ $post-nav-max-width = 220px;
   .article-title {
     color: var(--second-text-color);
     font-weight: 600;
-    font-size: 1.8em;
+    font-size: $article-title-font-size;
 
     +keep-tablet() {
-      font-size: 1.5em;
+      font-size: $article-title-font-size * 0.9;
     }
 
     +keep-mobile() {
-      font-size: 1.2em;
+      font-size: $article-title-font-size * 0.8;
     }
   }
 
@@ -60,14 +61,14 @@ $post-nav-max-width = 220px;
 
       .author {
         font-weight: 600;
-        font-size: 1.18em;
+        font-size: 1.18rem;
         display: flex;
         align-items: center;
 
         .level {
           margin-left: 10px;
           color: #fff;
-          font-size: 0.7em;
+          font-size: 0.8rem;
           font-weight: 500;
           background: var(--selection-color);
           padding: 0 4px;

source/css/layout/category-content.styl

@@ -1,17 +1,19 @@
+$category-name-font-size = 1.6rem;
+
 .category-container {
 
   keep-container(1.02, 1.02, 30px, 30px);
 
   .category-name {
     color: var(--second-text-color);
-    font-size: 1.6em;
+    font-size: $category-name-font-size;
 
     +keep-tablet() {
-      font-size: 1.5em;
+      font-size: $category-name-font-size * 0.9;
     }
 
     +keep-mobile() {
-      font-size: 1.4em;
+      font-size: $category-name-font-size * 0.8;
     }
 
     font-weight: 600;

source/css/layout/common/basic.styl

@@ -3,25 +3,6 @@
 @require 'keep-theme.styl'
 
 
-// ============================
-// scrollbar
-// ============================
-* {
-  &::-webkit-scrollbar {
-    width: 6px;
-    height: 6px;
-  }
-
-  &::-webkit-scrollbar-thumb {
-    background: var(--scroll-bar-color);
-  }
-
-  &::-webkit-scrollbar-track {
-    background: var(--scroll-bar-bg-color);
-  }
-}
-
-
 // ============================
 // html, body
 // ============================
@@ -48,6 +29,25 @@ html, body {
 }
 
 
+// ============================
+// scrollbar
+// ============================
+* {
+  &::-webkit-scrollbar {
+    width: 6px;
+    height: 6px;
+  }
+
+  &::-webkit-scrollbar-thumb {
+    background: var(--scroll-bar-color);
+  }
+
+  &::-webkit-scrollbar-track {
+    background: var(--scroll-bar-bg-color);
+  }
+}
+
+
 // ============================
 // selection
 // ============================
@@ -66,6 +66,7 @@ ul, ol, li {
   list-style: none;
 }
 
+
 // ============================
 // a
 // ============================
@@ -80,6 +81,7 @@ a {
 
 }
 
+
 // ============================
 // button
 // ============================
@@ -99,7 +101,7 @@ button {
   cursor: pointer;
   white-space: nowrap;
   border-radius: 5px;
-  padding: 0.5em 1em;
+  padding: 8px 16px;
   background: var(--background-color);
   hover-style(1.1, 1.1);
 
@@ -120,6 +122,7 @@ button {
   align-items: center;
 }
 
+
 // ============================
 // clear float
 // ============================

source/css/layout/common/codeblock/copy-code.styl

@@ -18,14 +18,14 @@ disable-user-select() {
   cursor: pointer;
   display: inline-block;
   font-weight: bold;
-  line-height: 1.6;
+  line-height: 1.8;
   opacity: 0;
   outline: 0;
   padding: 2px 6px;
   position: absolute;
   vertical-align: middle;
   white-space: nowrap;
-  font-size: 1.1em;
+  font-size: 1.08rem;
   disable-user-select();
   the-transition();
 

source/css/layout/common/codeblock/highlight.styl

@@ -4,10 +4,10 @@ $code-block {
   overflow: auto;
   margin: 20px 0;
   padding: 0;
-  font-size 0.95em;
+  font-size 0.96rem;
   color: var(--highlight-foreground);
   background: var(--highlight-background);
-  line-height: 1.5em;
+  line-height: 1.5rem;
   transition: all 0.5s ease;
 }
 
@@ -62,10 +62,10 @@ pre {
   }
 
   figcaption {
-    font-size: 1em;
+    font-size: 1rem;
     color: var(--highlight-foreground);
-    line-height: 1em;
-    margin-bottom: 1em;
+    line-height: 1rem;
+    margin-bottom: 1rem;
 
     a {
       float: right;

source/css/layout/common/markdown.styl

@@ -1,4 +1,5 @@
 .markdown-body {
+  font-size: 1rem;
 
   blockquote {
 
@@ -13,10 +14,12 @@
     background: var(--second-background-color);
   }
 
+
   p {
-    line-height: 2em;
+    line-height: 2rem;
   }
 
+
   a {
     position: relative;
     outline: 0;
@@ -52,7 +55,7 @@
 
   ul > li, ol > li {
     margin-left: 16px;
-    line-height: 2em;
+    line-height: 2rem;
   }
 
   ul {
@@ -102,70 +105,70 @@
   }
 
   h1 {
-    font-size: 1.8em;
+    font-size: 1.8rem;
     font-weight: 600;
-    line-height: 1.2em;
+    line-height: 1.2rem;
 
     +keep-tablet() {
-      font-size: 1.7em;
-      line-height: 1.1em;
+      font-size: 1.7rem;
+      line-height: 1.1rem;
     }
   }
 
 
   h2 {
-    font-size: 1.7em;
+    font-size: 1.7rem;
     font-weight: 600;
-    line-height: 1.2em;
+    line-height: 1.2rem;
 
     +keep-tablet() {
-      font-size: 1.6em;
-      line-height: 1.1em;
+      font-size: 1.6rem;
+      line-height: 1.1rem;
     }
   }
 
   h3 {
-    font-size: 1.6em;
+    font-size: 1.6rem;
     font-weight: 550;
-    line-height: 1.16em;
+    line-height: 1.16rem;
 
     +keep-tablet() {
-      font-size: 1.5em;
-      line-height: 1.06em;
+      font-size: 1.5rem;
+      line-height: 1.06rem;
     }
   }
 
 
   h4 {
-    font-size: 1.5em;
+    font-size: 1.5rem;
     font-weight: 550;
-    line-height: 1.16em;
+    line-height: 1.16rem;
 
     +keep-tablet() {
-      font-size: 1.4em;
-      line-height: 1.06em;
+      font-size: 1.4rem;
+      line-height: 1.06rem;
     }
   }
 
   h5 {
-    font-size: 1.28em;
+    font-size: 1.28rem;
     font-weight: 500;
-    line-height: 1.12em;
+    line-height: 1.12rem;
 
     +keep-tablet() {
-      font-size: 1.18em;
-      line-height: 1.02em;
+      font-size: 1.18rem;
+      line-height: 1.02rem;
     }
   }
 
   h6 {
-    font-size: 1.2em;
+    font-size: 1.2rem;
     font-weight: 500;
-    line-height: 1.12em;
+    line-height: 1.12rem;
 
     +keep-tablet() {
-      font-size: 1.1em;
-      line-height: 1.02em;
+      font-size: 1.1rem;
+      line-height: 1.02rem;
     }
   }
 

source/css/layout/home-content.styl

@@ -1,3 +1,5 @@
+
+
 .home-content-container {
 
   .home-article-list {
@@ -11,12 +13,12 @@
         position: absolute;
         top: 10px;
         right: 12px;
-        font-size: 1.2em;
+        font-size: 1.2rem;
         transform: rotate(45deg);
         color: var(--third-text-color);
 
         +keep-tablet() {
-          font-size: 1.16em;
+          font-size: 1.16rem;
         }
       }
 
@@ -25,16 +27,16 @@
         position: relative;
         font-weight: 600;
         color: var(--second-text-color);
-        font-size: 1.5em;
-        line-height: 1.5em;
+        font-size: 1.5rem;
+        line-height: 1.5rem;
 
         +keep-tablet() {
-          font-size: 1.3em;
+          font-size: 1.3rem;
         }
 
 
         +keep-mobile() {
-          font-size: 1.2em;
+          font-size: 1.2rem;
         }
 
         margin: 0;
@@ -45,7 +47,7 @@
       .home-article-content {
         text-align: justify;
         margin: 20px 0;
-        line-height: 2em;
+        line-height: 2rem;
       }
 
 
@@ -54,7 +56,7 @@
         justify-content: space-between;
         align-items: center;
         color: var(--third-text-color);
-        font-size: 1em;
+        font-size: 1rem;
 
 
         .home-article-meta-info {

source/css/layout/page.styl

@@ -1,4 +1,4 @@
-$header-progress-height = 3px;
+$header-progress-height = 2.8px;
 $temp-width = hexo-config('style.left_side_width');
 $page-aside-width = $temp-width ? convert($temp-width) : 260px;
 

source/css/layout/tag-content.styl

@@ -1,17 +1,19 @@
+$tag-name-font-size = 1.6rem;
+
 .tag-container {
 
   keep-container(1.02, 1.02, 30px, 30px);
 
   .tag-name {
     color: var(--second-text-color);
-    font-size: 1.6em;
+    font-size: $tag-name-font-size;
 
     +keep-tablet() {
-      font-size: 1.5em;
+      font-size: $tag-name-font-size * 0.9;
     }
 
     +keep-mobile() {
-      font-size: 1.4em;
+      font-size: $tag-name-font-size * 0.8;
     }
 
     font-weight: 600;

source/js/utils.js

@@ -3,6 +3,7 @@ KEEP.utils = {
   headerProgress_dom: document.querySelector('.header-progress'),
   pageTop_dom: document.querySelector('.page-main-content-top'),
   firstScreen_dom: document.querySelector('.first-screen-container'),
+  html_root_dom: document.querySelector('html'),
 
   printThemeInfo() {
     const themeInfo = `${KEEP.themeInfo.name} v${KEEP.themeInfo.version}`;
@@ -67,7 +68,7 @@ KEEP.utils = {
     const fs = Number(initFontSize.substring(0, initFontSize.length - 2));
 
     const setFontSize = (defaultFontSize) => {
-      document.body.style.fontSize = `${fs * (1 + defaultFontSize * 0.06)}px`;
+      this.html_root_dom.style.fontSize = `${fs * (1 + defaultFontSize * 0.05)}px`;
     }
 
     document.querySelector('.tool-font-adjust-plus').addEventListener('click', () => {