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

12
_includes/related-posts.html
View File

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

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

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