From cf0371205f7e8657d62c4456789ba40f22656e47 Mon Sep 17 00:00:00 2001
From: XPoet <i@xpoet.cn>
Date: Wed, 1 Apr 2020 16:41:30 +0800
Subject: [PATCH] =?UTF-8?q?modified:=20=E4=BC=98=E5=8C=96=20home=20?=
 =?UTF-8?q?=E6=96=87=E7=AB=A0=E6=98=BE=E7=A4=BA=E6=A0=B7=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 layout/home-content.ejs             | 23 ++++++++-----
 source/css/layout/common/basic.styl |  2 +-
 source/css/layout/home-content.styl | 52 ++++++++++++++++++++++++-----
 source/css/layout/page.styl         |  2 +-
 4 files changed, 61 insertions(+), 18 deletions(-)

diff --git a/layout/home-content.ejs b/layout/home-content.ejs
index bae478c..c3ceccd 100644
--- a/layout/home-content.ejs
+++ b/layout/home-content.ejs
@@ -1,20 +1,27 @@
 <div class="home-content-container">
 
     <ul class="home-article-list">
+
         <% page.posts.forEach(post => { %>
             <li class="home-article-item">
-                <div class="home-article-title">
-                    <h3>
-                        <a class="article-title-hover-animation" href="<%- url_for(post.path) %>"><%= post.title %></a>
-                    </h3>
-                </div>
+                <h3 class="home-article-title">
+                    <a class="article-title-hover-animation" href="<%- url_for(post.path) %>"><%= post.title %></a>
+                </h3>
 
-                <div class="home-article-content">
-                    <%- truncate(strip_html(post.content), {length: 150}) %>
+                <div class="home-article-content markdown">
+                    <% if (post.excerpt) { %>
+                        <%- post.excerpt %>
+                    <% } else { %>
+                        <%- truncate(strip_html(post.content), {length: 150}) %>
+                    <% } %>
                 </div>
 
                 <div class="home-article-meta-info">
-                    <%- partial('_partial/article-meta-info', {articleObject: post, index: true}) %>
+                    <span class="article-date">
+                        <i class="fa fa-calendar-o"></i> <%= date(post.date, 'YYYY-MM-DD') %>
+                    </span>
+                    <hr>
+                    <a href="<%- url_for(post.path) %>">阅读全文</a>
                 </div>
             </li>
         <% }) %>
diff --git a/source/css/layout/common/basic.styl b/source/css/layout/common/basic.styl
index 260d813..ab418c9 100644
--- a/source/css/layout/common/basic.styl
+++ b/source/css/layout/common/basic.styl
@@ -72,7 +72,7 @@ a:hover, a:active {
     position: absolute;
     width: 100%;
     height: 2px;
-    bottom: -2px;
+    bottom: -4px;
     left: 0;
     background-color: $article-title-color;
     visibility: hidden;
diff --git a/source/css/layout/home-content.styl b/source/css/layout/home-content.styl
index 91a1d0a..2ba34e8 100644
--- a/source/css/layout/home-content.styl
+++ b/source/css/layout/home-content.styl
@@ -6,29 +6,65 @@
 
     .home-article-item {
 
-      margin-bottom: 30px;
+      margin-bottom: 60px;
       padding-bottom: 30px;
-      border-bottom: 1px solid $border-color;
 
       .home-article-title {
+        position: relative;
 
-        h3 {
-          font-weight: 600;
-          color: $article-title-color;
-          font-size: 22px;
-          margin: 0;
+        &::before {
+          content: '';
+          position: absolute;
+          top: 50%;
+          transform: translateY(-50%);
+          left: -16px;
+          width: 2px;
+          height: 20px;
+          background: $a-hover-color;
+          transition: all 0.5s ease;
         }
 
+
+        &:hover {
+          &::before {
+            opacity: 0;
+          }
+        }
+
+
+        font-weight: 600;
+        color: $article-title-color;
+        font-size: 22px;
+        margin: 0;
+
         a {
           color: $article-title-color;
         }
       }
 
       .home-article-content {
-        padding: 15px 0;
+        margin: 45px 0;
         line-height: 2em;
       }
 
+      .home-article-meta-info {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+
+        span {
+          letter-spacing: 1px;
+        }
+
+        hr {
+          border: none;
+          flex: 1;
+          height: 1px;
+          background: $border-color;
+          margin: 0 10px;
+        }
+      }
+
     }
   }
 
diff --git a/source/css/layout/page.styl b/source/css/layout/page.styl
index d75aa45..0808e8f 100644
--- a/source/css/layout/page.styl
+++ b/source/css/layout/page.styl
@@ -22,7 +22,7 @@
       width: 80%;
       height: 100%;
       position: relative;
-      padding: 20px 0;
+      padding: 40px 0;
     }