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"> <div class="pl-1 pr-1 pl-sm-2 pr-sm-2 pl-md-4 pr-md-4">
{% include related-posts.html %} {% 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 %} {% 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> <p>{{ page.previous.title }}</p>
@ -104,7 +104,7 @@ layout: default
<p>-</p> <p>-</p>
{% endif %} {% endif %}
</a> </a>
</div> <!-- div.post-pager --> </div> <!-- div.post-navigation -->
{% if site.disqus.comments and page.comments %} {% if site.disqus.comments and page.comments %}
{% include disqus.html %} {% include disqus.html %}

59
assets/css/post.scss
View file

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