From f722de3f6c7a5dba908011c4504b85928434c4bb Mon Sep 17 00:00:00 2001
From: XPoet <i@xpoet.cn>
Date: Mon, 22 Nov 2021 21:25:07 +0800
Subject: [PATCH] style: optimize mobile style

---
 layout/_partial/article-meta-info.ejs         |  4 +++-
 .../layout/_partial/article-meta-info.styl    | 22 +++++++++++++++++--
 source/css/layout/article-content.styl        | 10 +++++++++
 3 files changed, 33 insertions(+), 3 deletions(-)

diff --git a/layout/_partial/article-meta-info.ejs b/layout/_partial/article-meta-info.ejs
index 97f8983..729168f 100644
--- a/layout/_partial/article-meta-info.ejs
+++ b/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">
diff --git a/source/css/layout/_partial/article-meta-info.styl b/source/css/layout/_partial/article-meta-info.styl
index 792dec8..9f7735c 100644
--- a/source/css/layout/_partial/article-meta-info.styl
+++ b/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;
     }
diff --git a/source/css/layout/article-content.styl b/source/css/layout/article-content.styl
index 5a5d344..0ef4e7f 100644
--- a/source/css/layout/article-content.styl
+++ b/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;
+    }
   }