modified: 优化 home 文章显示样式

This commit is contained in:
XPoet 2020-04-01 16:41:30 +08:00
parent 7078630641
commit cf0371205f
4 changed files with 61 additions and 18 deletions

View File

@ -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>
<h3 class="home-article-title">
<a class="article-title-hover-animation" href="<%- url_for(post.path) %>"><%= post.title %></a>
</h3>
</div>
<div class="home-article-content">
<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>
<% }) %>

View File

@ -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;

View File

@ -6,18 +6,36 @@
.home-article-item {
margin-bottom: 30px;
margin-bottom: 60px;
padding-bottom: 30px;
border-bottom: 1px solid $border-color;
.home-article-title {
position: relative;
&::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;
}
}
h3 {
font-weight: 600;
color: $article-title-color;
font-size: 22px;
margin: 0;
}
a {
color: $article-title-color;
@ -25,10 +43,28 @@
}
.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;
}
}
}
}

View File

@ -22,7 +22,7 @@
width: 80%;
height: 100%;
position: relative;
padding: 20px 0;
padding: 40px 0;
}