From a5a2d684bf81521eaeb1a96c937b5a47a170f60a Mon Sep 17 00:00:00 2001
From: XPoet <i@xpoet.cn>
Date: Thu, 19 Mar 2020 23:08:51 +0800
Subject: [PATCH] Update: home page css

---
 layout/common/home-post.ejs      | 61 ++++++++++++++++++--------------
 source/css/common/home-post.styl | 16 +++++----
 2 files changed, 43 insertions(+), 34 deletions(-)

diff --git a/layout/common/home-post.ejs b/layout/common/home-post.ejs
index affdad7..7dc67f6 100644
--- a/layout/common/home-post.ejs
+++ b/layout/common/home-post.ejs
@@ -15,35 +15,42 @@
                         <%- truncate(strip_html(post.content), {length: 80}) %>
                     </div>
 
-                    <div class="article-post-meta">
+                    <!-- date -->
+                    <div class="article-meta">
+                        <span class="article-date article-item">
+                            <i class="fa fa-calendar-o"></i>
+                            <%= date(post.date, 'YYYY-MM-DD HH:MM:SS') %>
+                        </span>
 
-                        <span class="article-date">
-                                <i class="fa fa-calendar"></i>
-                                <%= date(post.date, 'YYYY-MM-DD HH:MM:SS') %>
-                            </span>
-
-                        <span class="article-tags">
-                                <i class="fa fa-tags"></i>
-                                <ul>
-                                    <% post.tags.forEach(tag => { %>
-                                        <li>
-                                            <a href="<%- url_for(tag.path) %>" rel="tag"><%= tag.name %></a>
-                                        </li>
-                                    <% }); %>
-                                </ul>
-                            </span>
-
-                        <span class="article-categories">
-                                <i class="fa fa-table"></i>
-                                <ul>
-                                    <% post.categories.forEach(category => { %>
-                                        <li>
-                                            <a href="<%- url_for(category.path) %>" rel="tag"><%= category.name %></a>
-                                        </li>
-                                    <% }); %>
-                                </ul>
-                            </span>
+                        <!-- categories -->
+                        <% if (post.categories.length) { %>
+                            <span class="article-categories article-item">
+                            <i class="fa fa-bookmark"></i>
+                            <ul>
+                                <% post.categories.forEach((category, i) => { %>
+                                    <li>
+                                        <%= i === 0 ? '' : '| ' %><a href="<%- url_for(category.path) %>"
+                                                                     rel="tag"><%= category.name %></a>
+                                    </li>
+                                <% }); %>
+                            </ul>
+                        </span>
+                        <% } %>
 
+                        <!-- tags -->
+                        <% if (post.tags.length) { %>
+                            <span class="article-tags article-item">
+                            <i class="fa fa-tags"></i>
+                            <ul>
+                                <% post.tags.forEach((tag, i) => { %>
+                                    <li>
+                                      <%= i === 0 ? '' : '| ' %><a href="<%- url_for(tag.path) %>"
+                                                                   rel="tag"><%= tag.name %></a>
+                                    </li>
+                                <% }); %>
+                            </ul>
+                        </span>
+                        <% } %>
                     </div>
                 </li>
             <% }) %>
diff --git a/source/css/common/home-post.styl b/source/css/common/home-post.styl
index 9e951a2..0dd7659 100644
--- a/source/css/common/home-post.styl
+++ b/source/css/common/home-post.styl
@@ -50,6 +50,7 @@
 
       .article-post-content {
         padding 15px 0
+
         a {
           text-decoration: none;
           letter-spacing: 1px;
@@ -73,25 +74,26 @@
       }
 
 
-      .article-post-meta {
-        padding-bottom: 30px;
+      .article-meta {
+        padding-bottom: 20px;
         border-bottom: 1px solid #f2f2f2;
         color: #bbbbbb;
         font-size: 12px;
+        position relative
 
-        .article-date, .article-tags, .article-categories {
+        .article-item {
           margin-right: 15px;
         }
 
         .article-tags, .article-categories {
           display: inline;
 
-          ul {
+          ul, li {
             display: inline;
+          }
+
+          li {
 
-            li {
-              display: inline;
-            }
           }
 
           a {