Display title in post's page button.

This commit is contained in:
Cotes Chung 2020-01-03 00:37:56 +08:00
parent 6ba47c931a
commit 2ad4dc1b4e
3 changed files with 40 additions and 14 deletions

View file

@ -42,7 +42,7 @@
{% 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">
<div id="related-posts" class="mt-4 mb-2 mb-sm-4 pb-2">
<h3 class="pt-2 mt-1 mb-4" data-toc-skip>Related Posts</h3>
<div class="card-deck mb-4">
{% for score_item in score_list %}

View file

@ -88,21 +88,21 @@ layout: default
<div class="post-pager d-flex justify-content-between">
{% if page.previous.url %}
<a href="{{ site.baseurl }}{{page.previous.url}}" class="btn btn-outline-primary">
<a href="{{ site.baseurl }}{{ page.previous.url }}" class="btn btn-outline-primary">
<p>{{ page.previous.title }}</p>
{% else %}
<a href="javascript:;" class="btn btn-outline-primary disabled">
<p>-</p>
{% endif %}
<i class="fas fa-angle-left mr-1"></i>
OLDER POST
</a>
{% if page.next.url %}
<a href="{{ site.baseurl }}{{page.next.url}}" class="btn btn-outline-primary">
<p>{{ page.next.title }}</p>
{% else %}
<a href="javascript:;" class="btn btn-outline-primary disabled">
<p>-</p>
{% endif %}
NEWER POST
<i class="fas fa-angle-right ml-1"></i>
</a>
</div> <!-- div.post-pager -->

View file

@ -23,11 +23,15 @@
}
.post-pager {
margin: 1rem 0 2rem;
border-top: 1px double #e9ecef;
border-bottom: 1px double #e9ecef;
padding: 1rem .2rem;
margin-bottom: 2rem;
}
.post-pager .btn,
.post-pager .btn.disabled {
width: calc(50% - .5rem);
color: #2a408e;
border-color: #2a408e;
}
@ -45,6 +49,27 @@
border-color: gray;
}
.post-pager a > p {
font-weight: 600;
line-height: 1.2rem;
margin-top: .3rem;
white-space: normal;
}
.post-pager a::before {
color: gray;
font-size: .85rem;
text-transform: uppercase;
}
.post-pager a:first-child::before {
content: "previous";
}
.post-pager a:last-child::before {
content: "next";
}
@keyframes fade-up {
from {
opacity: 0;
@ -84,11 +109,7 @@
/*--- Related Posts ---*/
#related-posts {
border-bottom: 1px double #e9ecef;
}
#related-posts>h3 {
#related-posts > h3 {
color: gray;
font-size: 1.1rem;
font-family: 'Oswald', sans-serif;
@ -135,7 +156,7 @@
padding-inline-start: 1.5rem;
}
#related-posts ul>li::before {
#related-posts ul > li::before {
background: #c2c9d4;
width: 5px;
height: 5px;
@ -159,7 +180,7 @@
}
@media all and (min-width: 768px) {
.post .post-meta>div:not(:first-child)::before {
.post .post-meta > div:not(:first-child)::before {
content: "\2022";
color: rgba(158, 158, 158, 0.8);
font-weight: bold;
@ -190,6 +211,11 @@
-ms-transform: translateX(-50%);
transform: translateX(-50%);
}
.post-pager {
padding-left: 0;
padding-right: 0;
}
}
/*