From a42a5bfab4c49fb61cbd5ad2a58b5e4a60d70fc7 Mon Sep 17 00:00:00 2001 From: Cotes Chung <11371340+cotes2020@users.noreply.github.com> Date: Fri, 3 Jan 2020 19:33:49 +0800 Subject: [PATCH] Beautified the navigation button in post. --- _layouts/post.html | 4 +-- assets/css/post.scss | 59 ++++++++++++++++++++++++++++---------------- 2 files changed, 40 insertions(+), 23 deletions(-) diff --git a/_layouts/post.html b/_layouts/post.html index 464856d..643132e 100644 --- a/_layouts/post.html +++ b/_layouts/post.html @@ -86,7 +86,7 @@ layout: default
{% include related-posts.html %} -
+
{% if page.previous.url %}

{{ page.previous.title }}

@@ -104,7 +104,7 @@ layout: default

-

{% endif %}
-
+
{% if site.disqus.comments and page.comments %} {% include disqus.html %} diff --git a/assets/css/post.scss b/assets/css/post.scss index a82d587..1c34964 100644 --- a/assets/css/post.scss +++ b/assets/css/post.scss @@ -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; }