style: optimize mobile style

layout/_partial/article-meta-info.ejs

@@ -1,6 +1,8 @@
 <div class="article-meta-info">
     <span class="article-date article-meta-item">
-        <i class="fas fa-edit"></i>&nbsp;<%= date(articleObject.date, is_post() ? 'YYYY-MM-DD HH:mm:ss' : 'YYYY-MM-DD') %>
+        <i class="fas fa-edit"></i>&nbsp;
+        <span class="pc"><%= date(articleObject.date, is_post() ? 'YYYY-MM-DD HH:mm:ss' : 'YYYY-MM-DD') %></span>
+        <span class="mobile"><%= date(articleObject.date, is_post() ? 'YYYY-MM-DD HH:mm' : 'YYYY-MM-DD') %></span>
     </span>
     <% if (articleObject.categories.length) { %>
         <span class="article-categories article-meta-item">

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

@@ -10,6 +10,24 @@
     }
   }
 
+  .article-date {
+
+    .mobile {
+      display: none;
+    }
+
+    +keep-tablet() {
+      .pc {
+        display: none;
+      }
+
+      .mobile {
+        display: inline;
+      }
+    }
+
+  }
+
 
   .article-tags, .article-categories {
     display: inline;
@@ -27,13 +45,13 @@
     }
   }
 
-  .article-min2read, .article-tags {
+  .article-tags {
     +keep-tablet() {
       display: none;
     }
   }
 
-  .article-wordcount {
+  .article-min2read, .article-wordcount {
     +keep-mobile() {
       display: none;
     }

source/css/layout/article-content.styl

@@ -114,6 +114,12 @@ $article-title-font-size = 1.6rem;
       display: flex;
     }
 
+    +keep-mobile() {
+      margin-top: 1.2rem;
+      font-size: 1rem;
+    }
+
+
     .tag-item {
       margin: 0 0.25rem;
     }
@@ -122,6 +128,10 @@ $article-title-font-size = 1.6rem;
   .post-copyright-info {
     margin-top: $component-spacing-value;
     width: 100%;
+
+    +keep-tablet() {
+      margin-top: $component-spacing-value * 0.8;
+    }
   }