+ <% if (post.excerpt) { %>
+ <%- post.excerpt %>
+ <% } else { %>
+ <%- truncate(strip_html(post.content), {length: 150}) %>
+ <% } %>
<% }) %>
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;
}