PlexSheep
/
krata
1
1
Fork 0
Code Issues 2 Pull Requests Packages Projects Releases Wiki Activity

Beautified the relate-posts card.

This commit is contained in:
Cotes Chung 2019-10-26 13:21:58 +08:00
parent d585d66fc5
commit 94cb59fc27
2 changed files with 21 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
_includes/related-posts.html
View File

@ -37,7 +37,7 @@
{% assign post_index = post_index | plus: 1 %}
{% endfor %}
{% unless score_list.size == 0 %}
{% if score_list.size > 0 %}
{% assign score_list = score_list | sort | reverse %}
{% assign count = 0 %}
<div id="related-posts" class="mt-4 mb-4 pb-3">
@ -47,16 +47,16 @@
{% assign data = score_item | split: ":" %}
{% assign index = data[1] | plus: 0 %}
{% assign post = site.posts[index] %}
<div class="card btn-box-shadow">
<div class="card">
<a href="{{ post.url }}">
<div class="card-body">
<span class="timeago text-muted small">
<span class="timeago small">
{{ post.date | date: POST_DATE }}
<i class="hidden">{{ page.date | date_to_xmlschema }}</i>
</span>
<h3 class="pt-0 mt-2 mb-3" data-toc-skip>{{ post.title }}</h3>
<div class="text-muted small">
<p>{{ post.content | markdownify | strip_html | truncate: 100 }}</p>
<p>{{ post.content | markdownify | strip_html | truncate: 200 }}</p>
</div>
</div>
</a>
@ -68,4 +68,4 @@
{% endfor %}
</div> <!-- .card-deck -->
</div>
{% endunless %}
{% endif %}

24
assets/css/_src/main.scss
View File

@ -383,7 +383,7 @@ footer .license a {
position: sticky;
top: 2rem;
transition: top 0.2s ease-in-out;
padding-right: 1.5rem;
margin-right: 1.5rem;
margin-top: 3rem;
margin-bottom: 6rem;
color: #6c757d;
@ -859,16 +859,26 @@ table tbody td {
}
#related-posts .card {
border: none;
-webkit-transition: all .5s ease-in-out;;
-moz-transition: all .5s ease-in-out;;
transition: all .5s ease-in-out;
border: 1px solid #f1f1f1;
box-shadow: 0 0 5px 0 rgba(234, 234, 234, 0.7686274509803922);
-webkit-transition: all .3s ease-in-out;;
-moz-transition: all .3s ease-in-out;;
transition: all .3s ease-in-out;
}
#related-posts .card:hover {
-webkit-transform: translate3d(0, -8px, 0);
transform: translate3d(0, -8px, 0);
}
#related-posts .card h3 {
color: #353a3d;
}
#related-posts .timeago {
color: rgba(30,55,70,.4);
}
#related-posts p {
font-size: .9rem;
margin-bottom: .5rem;
@ -883,10 +893,6 @@ table tbody td {
text-decoration: none;
}
#related-posts .card:hover {
transform: scale(1.05);
}
#related-posts ul {
list-style-type: none;
padding-inline-start: 1.5rem;