Beautified the relate-posts card.
This commit is contained in:
parent
d585d66fc5
commit
94cb59fc27
2 changed files with 21 additions and 15 deletions
|
@ -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>
|
||||
|
@ -66,6 +66,6 @@
|
|||
{% break %}
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
</div><!-- .card-deck -->
|
||||
</div> <!-- .card-deck -->
|
||||
</div>
|
||||
{% endunless %}
|
||||
{% endif %}
|
|
@ -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;
|
||||
|
|
Loading…
Reference in a new issue