🎈 perf: 优化移动端间距

MaLuns · Oct 11, 2022 · 1610e5d · 1610e5d
1 parent d6f486c
commit 1610e5d
Show file tree

Hide file tree

Showing 13 changed files with 48 additions and 23 deletions.
diff --git a/package/hexo-theme-async/layout/_partial/main.ejs b/package/hexo-theme-async/layout/_partial/main.ejs
@@ -17,7 +17,7 @@
 
                     <%- content %>
 
-                    <div class="trm-divider trm-mb-40"></div>
+                    <div class="trm-divider footer-divider"></div>
 
                     <!-- footer -->
                     <%- partial('./footer') %>

diff --git a/package/hexo-theme-async/layout/_partial/page/about.ejs b/package/hexo-theme-async/layout/_partial/page/about.ejs
@@ -12,7 +12,7 @@
     <% if(theme.about.introduction) { %>
     <div class="row trm-mb-20 trm-scroll-animation" data-scroll data-scroll-offset="40">
         <div class="col-lg-12">
-            <h5 class="trm-mb-40 trm-title-with-divider">
+            <h5 class="trm-title-with-divider">
                 <%- __('title.author') %>
                 <span data-number="0<%- ++index %>"></span>
             </h5>
@@ -26,7 +26,7 @@
     <% if(theme.about.introduction) { %>
     <div class="row trm-mb-20 trm-scroll-animation" data-scroll data-scroll-offset="40">
         <div class="col-lg-12">
-            <h5 class="trm-mb-40 trm-title-with-divider">
+            <h5 class="trm-title-with-divider">
                 <%- __('title.blog') %>
                 <span data-number="0<%- ++index %>"></span>
             </h5>
@@ -40,7 +40,7 @@
     <% if(theme.about.introduction) { %>
     <div class="row trm-mb-20 trm-scroll-animation" data-scroll data-scroll-offset="40">
         <div class="col-lg-12">
-            <h5 class="trm-mb-40 trm-title-with-divider">
+            <h5 class="trm-title-with-divider">
                 <%- __('title.privacy') %>
                 <span data-number="0<%- ++index %>"></span>
             </h5>

diff --git a/package/hexo-theme-async/layout/_partial/page/archive.ejs b/package/hexo-theme-async/layout/_partial/page/archive.ejs
@@ -26,7 +26,7 @@
 <div class="row">
     <div class="col-lg-12">
         <!-- title -->
-        <h5 class="trm-mb-40 trm-title-with-divider">
+        <h5 class="trm-title-with-divider">
             <% if(page.archive){ %>
                 <%- page.year ? page.year : __('title.all_archives') %>
             <% } else if (is_category()){ %>

diff --git a/package/hexo-theme-async/layout/_partial/page/index.ejs b/package/hexo-theme-async/layout/_partial/page/index.ejs
@@ -29,7 +29,7 @@
 <div class="row">
     <div class="col-lg-12">
         <!-- title -->
-        <h5 class="trm-mb-40 trm-title-with-divider">
+        <h5 class="trm-title-with-divider">
             <%-__('title.new_publish')%> 
             <span data-number="01"></span>
         </h5>

diff --git a/package/hexo-theme-async/layout/_partial/page/links.ejs b/package/hexo-theme-async/layout/_partial/page/links.ejs
@@ -10,7 +10,7 @@
 
 <div class="row trm-mb-20">
     <div class="col-lg-12">
-        <h5 class="trm-mb-40 trm-title-with-divider"><%-__('site.title')%><span data-number="01"></span></h5>
+        <h5 class="trm-title-with-divider"><%-__('site.title')%><span data-number="01"></span></h5>
     </div>
     <div class="col-lg-12">
         <div class="trm-service-icon-box trm-scroll-animation trm-active-el" data-scroll="" data-scroll-offset="40">
@@ -27,7 +27,7 @@
 <% if(Array.isArray(theme.links)){ %>
 <div class="row trm-mb-20">
     <div class="col-lg-12">
-        <h5 class="trm-mb-40 trm-title-with-divider">
+        <h5 class="trm-title-with-divider">
             <%-__('title.links')%>
             <span data-number="02"></span>
         </h5>

diff --git a/package/hexo-theme-async/layout/_partial/page/project.ejs b/package/hexo-theme-async/layout/_partial/page/project.ejs
@@ -10,7 +10,7 @@
     <% theme.projects.forEach((item,index)=>{ %>
         <div class="row">
             <div class="col-lg-12">
-              <h5 class="trm-mb-40 trm-title-with-divider"><%- item.title %><span  data-number="<%- index+1 %>"></span></h5>
+              <h5 class="trm-title-with-divider"><%- item.title %><span  data-number="<%- index+1 %>"></span></h5>
             </div>
             <% item.children.forEach((project,index)=>{ %>
                 <div class="<%- !page.single_column ? 'col-lg-6':'col-lg-4' %>">

diff --git a/package/hexo-theme-async/layout/_partial/post/post-next-prev.ejs b/package/hexo-theme-async/layout/_partial/post/post-next-prev.ejs
@@ -1,7 +1,7 @@
 <div class="row">
     <div class="col-lg-12">
         <!-- title -->
-        <h5 class="trm-mb-40 trm-title-with-divider">
+        <h5 class="trm-title-with-divider">
             <%- __('title.other_articles') %>
             <span data-number="02"></span>
         </h5>

diff --git a/package/hexo-theme-async/layout/_widget/comment.ejs b/package/hexo-theme-async/layout/_widget/comment.ejs
@@ -8,7 +8,7 @@
         <% } else { %>
             <div class="row trm-scroll-animation comment-container" data-scroll data-scroll-offset="50">
                 <div class="col-lg-12">
-                    <h5 class="trm-mb-40 trm-title-with-divider">
+                    <h5 class="trm-title-with-divider">
                         <%-__('title.comment')%>
                         <span data-number="03"></span>
                     </h5>
@@ -29,7 +29,7 @@
         <% } else { %>
             <div class="row trm-scroll-animation comment-container" data-scroll data-scroll-offset="50">
                 <div class="col-lg-12">
-                    <h5 class="trm-mb-40 trm-title-with-divider">
+                    <h5 class="trm-title-with-divider">
                         <%-__('title.comment')%>
                         <span data-number="03"></span>
                     </h5>

diff --git a/package/hexo-theme-async/source/css/_components/app-frame.less b/package/hexo-theme-async/source/css/_components/app-frame.less
@@ -65,4 +65,12 @@
             padding   : 0 0 40px;
         }
     }
+}
+
+@media(max-width:768px) {
+    .trm-app-frame {
+        .trm-content {
+            margin-top: 20px;
+        }
+    }
 }
diff --git a/package/hexo-theme-async/source/css/_components/base.less b/package/hexo-theme-async/source/css/_components/base.less
@@ -207,12 +207,6 @@ html {
     margin-top: 40px
 }
 
-.trm-divider {
-    height       : 1px;
-    border-bottom: var(--border-dotted, dotted 2px rgba(225, 225, 235, 0.9));
-    width        : 100%
-}
-
 .trm-just-img {
     width        : 100%;
     border-radius: 5px

diff --git a/package/hexo-theme-async/source/css/_components/pagination.less b/package/hexo-theme-async/source/css/_components/pagination.less
@@ -3,7 +3,7 @@
     margin         : 0;
     display        : flex;
     justify-content: center;
-    margin-bottom  : 40px;
+    margin-bottom  : var(--card-bottom-card);
 
     &:first-child {
         margin-left: 0;

diff --git a/package/hexo-theme-async/source/css/_components/title-divider.less b/package/hexo-theme-async/source/css/_components/title-divider.less
@@ -1,7 +1,8 @@
 .trm-title-with-divider {
-    display    : flex;
-    align-items: center;
-    white-space: nowrap;
+    display      : flex;
+    align-items  : center;
+    white-space  : nowrap;
+    margin-bottom: var(--card-bottom-card);
 
     span {
         position     : relative;
@@ -27,4 +28,14 @@
             right        : -35px;
         }
     }
+}
+
+.trm-divider {
+    height       : 1px;
+    border-bottom: var(--border-dotted, dotted 2px rgba(225, 225, 235, 0.9));
+    width        : 100%;
+
+    &.footer-divider {
+        margin-bottom: var(--card-bottom-card);
+    }
 }
diff --git a/package/hexo-theme-async/source/css/_variables/index.less b/package/hexo-theme-async/source/css/_variables/index.less
@@ -66,4 +66,16 @@
     :root {
         .dark()
     }
-} */
+} */
+
+@media(max-width:768px) {
+    :root {
+        --card-padding      : 20px;
+        --card-bottom-card  : 20px;
+        --card-border-radius: 6px;
+
+        blockquote:before {
+            top: 0;
+        }
+    }
+}