asandikci.com/web
1
0
Fork 0
Code Issues 5 Pull requests Projects Releases Packages Wiki Activity Actions

Beautified the navigation button in post.

Browse source
This commit is contained in:
Cotes Chung 2020-01-03 19:33:49 +08:00
parent 2ad4dc1b4e
commit a42a5bfab4
2 changed files with 40 additions and 23 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
_layouts/post.html
View file

@ -86,7 +86,7 @@ layout: default
<div class="pl-1 pr-1 pl-sm-2 pr-sm-2 pl-md-4 pr-md-4">
{% include related-posts.html %}
<div class="post-pager d-flex justify-content-between">
<div class="post-navigation d-flex justify-content-between">
{% if page.previous.url %}
<a href="{{ site.baseurl }}{{ page.previous.url }}" class="btn btn-outline-primary">
<p>{{ page.previous.title }}</p>
@ -104,7 +104,7 @@ layout: default
<p>-</p>
{% endif %}
</a>
</div> <!-- div.post-pager -->
</div> <!-- div.post-navigation -->
{% if site.disqus.comments and page.comments %}
{% include disqus.html %}

59
assets/css/post.scss
View file

@ -22,52 +22,69 @@
font-size: 0.85rem;
}
.post-pager {
border-top: 1px double #e9ecef;
border-bottom: 1px double #e9ecef;
.post-navigation {
padding: 1rem .2rem;
margin-bottom: 2rem;
}
.post-pager .btn,
.post-pager .btn.disabled {
width: calc(50% - .5rem);
.post-navigation .btn,
.post-navigation .btn.disabled {
width: 50%;
position: relative;
color: #2a408e;
border-color: #e9ecef;
}
.post-navigation .btn:hover {
background: #2a408e;
color: #fff;
border-color: #2a408e;
}
.post-pager .btn:hover {
background: #2a408e;
color: #fff;
}
.post-pager a.btn.disabled {
.post-navigation a.btn.disabled {
pointer-events: auto;
cursor: not-allowed;
background: none;
color: gray;
border-color: gray;
border-color: #e9ecef;
}
.post-pager a > p {
.post-navigation a.btn.btn-outline-primary.disabled:focus {
box-shadow: none;
}
.post-navigation a > p {
font-size: 1.1rem;
font-weight: 600;
line-height: 1.2rem;
margin-top: .3rem;
white-space: normal;
}
.post-pager a::before {
.post-navigation a:first-child {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
left: .5px;
}
.post-navigation a:last-child {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
right: .5px;
}
.post-navigation a::before {
color: gray;
font-size: .85rem;
font-size: .65rem;
text-transform: uppercase;
}
.post-pager a:first-child::before {
content: "previous";
.post-navigation a:first-child::before {
content: "Older";
}
.post-pager a:last-child::before {
content: "next";
.post-navigation a:last-child::before {
content: "Newer";
}
@keyframes fade-up {
@ -212,7 +229,7 @@
transform: translateX(-50%);
}
.post-pager {
.post-navigation {
padding-left: 0;
padding-right: 0;
}