style: optimize mobile adaptation css

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

@@ -15,6 +15,11 @@ $article-date-font-size = 0.8em;
     .archive-item-header {
       .archive-year {
         font-size: $archive-year-font-size;
+
+        +ils-tablet() {
+          font-size: $archive-year-font-size - 0.2em;
+        }
+
         color: var(--second-text-color);
         font-weight: 600;
         margin-right: 20px;

source/css/layout/_partial/header.styl

@@ -30,6 +30,15 @@
     .logo-title {
       font-size: 2.2em;
       font-weight: bold;
+
+      +ils-tablet() {
+        font-size: 2.0em;
+      }
+
+      +ils-mobile() {
+        font-size: 1.8em;
+      }
+
       letter-spacing: 1px;
       color: var(--first-text-color);
       transition();
@@ -242,7 +251,6 @@
     }
 
     .menu-list {
-
       .menu-item {
         a:hover {
           &::after {
@@ -277,7 +285,14 @@
   }
 
   .header-content {
-    width: $main-content-width * 1.2 !important;
+    width: 80% !important;
+  }
+
+}
+
+@media screen and (max-width: $media-max-width-mobile) {
+  .header-content {
+    width: 90% !important;
   }
 
 }

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

@@ -23,8 +23,16 @@ $icon-size = 1.2em;
   position: fixed;
   top: 10%;
   width: 70%;
-  z-index: $z-index-6;
 
+  +ils-tablet() {
+    width: 80%;
+  }
+
+  +ils-mobile() {
+    width: 90%;
+  }
+
+  z-index: $z-index-6;
 
   .search-icon, .popup-btn-close {
     color: var(--normal-text-color);
@@ -94,9 +102,6 @@ input.search-input {
   p.search-result {
     margin 0
     padding 0
-    // border-bottom: 1px solid var(--border-color);
-    // padding-bottom: 10px;
-    // margin-bottom: 20px;
   }
 
   a.search-result-title {
@@ -120,11 +125,4 @@ input.search-input {
     color: var(--third-text-color);
     margin: auto;
   }
-}
-
-@media screen and (max-width: $media-max-width) {
-  .search-popup {
-    width: 80%;
-  }
-
 }

source/css/layout/about.styl

@@ -6,6 +6,10 @@
 
   magic-container(1.005, 1.01, 30px);
 
+  +ils-tablet() {
+    magic-container(1.001, 1.005, 20px);
+  }
+
   .about-content {
 
     h1, h2, h3, h4, h5, h6 {
@@ -17,5 +21,9 @@
     }
 
     margin-bottom: 30px;
+
+    +ils-tablet() {
+      margin-bottom: 20px;
+    }
   }
 }

source/css/layout/archive-content.styl

@@ -3,6 +3,10 @@
 .archive-container {
   background: var(--background-color);
   magic-container(1.005, 1.01, 30px);
+
+  +ils-tablet() {
+    magic-container(1.001, 1.005, 20px);
+  }
 }
 
 

source/css/layout/article-content.styl

@@ -15,6 +15,15 @@
     h3 {
       font-weight: 600;
       font-size: 1.8em;
+
+      +ils-tablet() {
+        font-size: 1.5em;
+      }
+
+      +ils-mobile() {
+        font-size: 1.2em;
+      }
+
       margin: 0;
     }
 
@@ -24,12 +33,10 @@
 
   }
 
-
   .meta-info {
     margin: 10px 0 30px 0;
   }
 
-
   .article-content {
     text-align: justify;
     padding-bottom: 30px;
@@ -59,6 +66,10 @@ if ((hexo-config('magic.enable') && !hexo-config('magic.sidebar.enable') && hexo
     position: fixed;
     top: $header-height + $component-interspace;
 
+    +ils-tablet() {
+      display: none;
+    }
+
     if (hexo-config('side_tools.position') == left) {
       right: 30px;
     } else {

source/css/layout/category-content.styl

@@ -6,11 +6,24 @@
 
   if (hexo-config('magic.enable')) {
     magic-container(1.02, 1.02, 30px);
+
+    +ils-tablet() {
+      magic-container(1.01, 1.01, 20px);
+    }
   }
 
   .category-name {
     color: var(--second-text-color);
     font-size: 1.6em;
+
+    +ils-tablet() {
+      font-size: 1.5em;
+    }
+
+    +ils-mobile() {
+      font-size: 1.4em;
+    }
+
     font-weight: 600;
     padding-bottom: 20px;
     margin-bottom: $component-interspace;

source/css/layout/common/variables.styl

@@ -13,19 +13,28 @@ if (hexo-config('magic.enable')) {
 
 if (hexo-config('magic.enable') && hexo-config('magic.sidebar.enable')) {
   $main-content-width = 80%;
-  $sidebar-width = 280px;       // 侧边栏宽度
+  $sidebar-width = 280px; // 侧边栏宽度
 } else {
   $main-content-width = 60%;
 }
 
 $header-shrink-height = 60px; // 头部收缩高度
-$tool-button-width = 36px;    // 方形工具按钮宽度
+$tool-button-width = 36px; // 方形工具按钮宽度
-$component-interspace = 30px;  // 组件/模块的间隔值（px）
+$component-interspace = 30px; // 组件/模块的间隔值（px）
 
 // ===================================
 // 媒体查询
 // ===================================
-$media-max-width = 760px;     // 媒体查询最大宽度
+$media-max-width = 760px; // 媒体查询最大宽度
+$media-max-width-mobile = 480px; // 媒体查询最大宽度
+
+ils-tablet()
+  @media (max-width: $media-max-width)
+    {block}
+
+ils-mobile()
+  @media (max-width: $media-max-width-mobile)
+    {block}
 
 
 // ===================================
@@ -43,16 +52,16 @@ $z-index-6 = 1006;
 // color
 // ===================================
 // normal mode color
-$primary-color = #225eea;  // 主题颜色
+$primary-color = #225eea; // 主题颜色
-$background-color = #fff;  // 背景颜色
+$background-color = #fff; // 背景颜色
 $magic-background-color = #f5f5f5; // MAGIC 主题背景颜色
-$normal-text-color = #43404d;      // 通用文本颜色（默认字体颜色）
+$normal-text-color = #43404d; // 通用文本颜色（默认字体颜色）
-$first-text-color = darken($normal-text-color, 8%);   // 第一文本颜色
+$first-text-color = darken($normal-text-color, 8%); // 第一文本颜色
-$second-text-color = darken($normal-text-color, 4%);   // 第二文本颜色
+$second-text-color = darken($normal-text-color, 4%); // 第二文本颜色
-$third-text-color = lighten($normal-text-color, 40%);  // 第三文本颜色
+$third-text-color = lighten($normal-text-color, 40%); // 第三文本颜色
-$fourth-text-color = #eee;                             // 第四文本颜色
+$fourth-text-color = #eee; // 第四文本颜色
-$border-color = darken($background-color, 30%);        // 边框颜色
+$border-color = darken($background-color, 30%); // 边框颜色
-$selection-color = lighten($primary-color, 20%);       // 文字选中的颜色
+$selection-color = lighten($primary-color, 20%); // 文字选中的颜色
 
 // dark mode color
 $dark-primary-color = $primary-color;

source/css/layout/home-content.styl

@@ -14,6 +14,11 @@
         magic-container(1.02, 1.02, 30px);
         margin-bottom: $component-interspace;
 
+        +ils-tablet() {
+          magic-container(1.01, 1.01, 20px);
+          margin-bottom: $component-interspace - 10px;
+        }
+
       } else {
         margin-bottom: 70px;
       }
@@ -23,6 +28,15 @@
         font-weight: 600;
         color: var(--second-text-color);
         font-size: 1.5em;
+
+        +ils-tablet() {
+          font-size: 1.3em;
+        }
+
+        +ils-mobile() {
+          font-size: 1.2em;
+        }
+
         margin: 0;
 
         if (hexo-config('magic.enable') == true) {
@@ -48,6 +62,7 @@
         line-height: 2em;
       }
 
+
       .home-article-meta-info {
         display: flex;
         justify-content: space-between;

source/css/layout/links.styl

@@ -6,6 +6,10 @@
 
   magic-container(1.005, 1.01, 30px);
 
+  +ils-tablet() {
+    magic-container(1.001, 1.005, 20px);
+  }
+
   .links-content {
 
     h1, h2, h3, h4, h5, h6 {
@@ -17,5 +21,9 @@
     }
 
     margin-bottom: 30px;
+
+    +ils-tablet() {
+      margin-bottom: 20px;
+    }
   }
 }

source/css/layout/page.styl

@@ -120,6 +120,7 @@
   }
 }
 
+
 .page-top-shrink {
   transition();
   padding-top: $header-shrink-height;
@@ -134,9 +135,19 @@
 
 }
 
+
 @media screen and (max-width: $media-max-width) {
+
+  .page-template {
+    padding-top: $header-height - 10px !important;
+  }
+
+  .page-top {
+    height: $header-height - 10px !important;
+  }
+
   .main-content {
-    width: $main-content-width * 1.2 !important;
+    width: 80% !important;
   }
 
   .sidebar-tools {
@@ -150,9 +161,6 @@
     transform: scale(0.8);
   }
 
-  //.sidebar-toc {
-  //  right: 2% !important;
-  //}
   .scroll-to-top {
     if (hexo-config('back2top.position') == left) {
       left: 2% !important;
@@ -164,4 +172,19 @@
     transform: scale(0.8);
   }
 
+}
+
+
+@media screen and (max-width: $media-max-width-mobile) {
+  .page-template {
+    padding-top: $header-height - 20px !important;
+  }
+
+  .page-top {
+    height: $header-height - 20px !important;
+  }
+
+  .main-content {
+    width: 90% !important;
+  }
 }

source/css/layout/tag-content.styl

@@ -7,11 +7,24 @@
 
   if (hexo-config('magic.enable')) {
     magic-container(1.02, 1.02, 30px);
+
+    +ils-tablet() {
+      magic-container(1.01, 1.01, 20px);
+    }
   }
 
   .tag-name {
     color: var(--second-text-color);
     font-size: 1.6em;
+
+    +ils-tablet() {
+      font-size: 1.5em;
+    }
+
+    +ils-mobile() {
+      font-size: 1.4em;
+    }
+
     font-weight: 600;
     padding-bottom: 20px;
     margin-bottom: $component-interspace;