From 502c87d36ccac4f336ff8b13707cb9b56c372683 Mon Sep 17 00:00:00 2001 From: Kazhnuz Date: Sat, 11 Apr 2020 18:18:36 +0200 Subject: [PATCH] feat: add pagination styling --- dist/blog/archives/index.html | 2 +- dist/blog/archives/page/2/index.html | 2 +- dist/blog/index.html | 2 +- dist/blog/page/2/index.html | 2 +- dist/style.css | 63 +++++++++++++++++++ .../themes/blog/layout/_partial/archive.ejs | 2 +- src/scss/_drawing.scss | 14 +++++ 7 files changed, 82 insertions(+), 5 deletions(-) diff --git a/dist/blog/archives/index.html b/dist/blog/archives/index.html index a3d6d1b..ea7916b 100644 --- a/dist/blog/archives/index.html +++ b/dist/blog/archives/index.html @@ -549,7 +549,7 @@ diff --git a/dist/blog/archives/page/2/index.html b/dist/blog/archives/page/2/index.html index 0b154a9..be2c03a 100644 --- a/dist/blog/archives/page/2/index.html +++ b/dist/blog/archives/page/2/index.html @@ -499,7 +499,7 @@ diff --git a/dist/blog/index.html b/dist/blog/index.html index 1c59082..38b1c1e 100644 --- a/dist/blog/index.html +++ b/dist/blog/index.html @@ -497,7 +497,7 @@ diff --git a/dist/blog/page/2/index.html b/dist/blog/page/2/index.html index bbc547c..d42f501 100644 --- a/dist/blog/page/2/index.html +++ b/dist/blog/page/2/index.html @@ -439,7 +439,7 @@ diff --git a/dist/style.css b/dist/style.css index d9a773d..7d792fa 100644 --- a/dist/style.css +++ b/dist/style.css @@ -2098,3 +2098,66 @@ a.article-nav-link-wrap { .pigimg { padding-bottom: 1.5rem; } + +#page-nav { + padding-bottom: 1.5rem; } + #page-nav .page-number, #page-nav .next, #page-nav .prev { + padding: 0.375rem; + padding-top: 0.125rem; + padding-bottom: 0.125rem; + margin: 0.1875rem; + margin-top: 0.125rem; + margin-bottom: 1.5rem; + line-height: 1.5rem; + height: auto; + border: 0px solid rgba(0, 0, 0, 0.3); + border-radius: 0px 0px 0px 0px; + font-weight: 400; + background-color: transparent; + position: relative; + z-index: 1; + overflow: visible; + padding-left: 0.375rem; + padding-right: 0.375rem; + color: #002b36; } + #page-nav .page-number:hover, #page-nav .page-number:active, #page-nav .page-number:focus, a:hover > #page-nav .page-number, a:active > #page-nav .page-number, a:focus > #page-nav .page-number, #page-nav .next:hover, #page-nav .next:active, #page-nav .next:focus, a:hover > #page-nav .next, a:active > #page-nav .next, a:focus > #page-nav .next, #page-nav .prev:hover, #page-nav .prev:active, #page-nav .prev:focus, a:hover > #page-nav .prev, a:active > #page-nav .prev, a:focus > #page-nav .prev { + text-decoration: none; + background-color: transparent; } + #page-nav .page-number:focus, #page-nav .next:focus, #page-nav .prev:focus { + outline: none; + box-shadow: 0px 2px 6px rgba(0, 0, 0, 0), inset 0px -2px 0px rgba(0, 0, 0, 0), 0px 0px 0px 2px rgba(0, 0, 0, 0); } + #page-nav .page-number:focus:before, #page-nav .next:focus:before, #page-nav .prev:focus:before { + box-shadow: 0px 2px 6px rgba(0, 0, 0, 0), inset 0px -2px 0px rgba(0, 0, 0, 0), 0px 0px 0px 2px rgba(0, 0, 0, 0.3); + outline: none; } + #page-nav .page-number:before, #page-nav .next:before, #page-nav .prev:before { + content: " "; + position: absolute; + top: 0; + left: -0.1875rem; + right: -0.1875rem; + bottom: 0; + z-index: -1; + transform: skewX(-15deg); + transition: background-color 0.3s; } + #page-nav .page-number:before, #page-nav .next:before, #page-nav .prev:before { + background-color: #eee8d5; } + #page-nav .page-number:visited, #page-nav .next:visited, #page-nav .prev:visited { + color: #002b36; } + #page-nav .page-number:visited:before, #page-nav .next:visited:before, #page-nav .prev:visited:before { + background-color: #eee8d5; } + #page-nav .page-number:hover, #page-nav .page-number:active, #page-nav .page-number:focus, a:hover > #page-nav .page-number, a:active > #page-nav .page-number, a:focus > #page-nav .page-number, #page-nav .page-number:visited:hover, #page-nav .page-number:visited:active, #page-nav .page-number:visited:focus, a:hover > #page-nav .page-number:visited, a:active > #page-nav .page-number:visited, a:focus > #page-nav .page-number:visited, #page-nav .page-number:not(.disabled):not(:disabled):hover, #page-nav .page-number:not(.disabled):not(:disabled):active, #page-nav .page-number:not(.disabled):not(:disabled):focus, a:hover > #page-nav .page-number:not(.disabled):not(:disabled), a:active > #page-nav .page-number:not(.disabled):not(:disabled), a:focus > #page-nav .page-number:not(.disabled):not(:disabled), #page-nav .next:hover, #page-nav .next:active, #page-nav .next:focus, a:hover > #page-nav .next, a:active > #page-nav .next, a:focus > #page-nav .next, #page-nav .next:visited:hover, #page-nav .next:visited:active, #page-nav .next:visited:focus, a:hover > #page-nav .next:visited, a:active > #page-nav .next:visited, a:focus > #page-nav .next:visited, #page-nav .next:not(.disabled):not(:disabled):hover, #page-nav .next:not(.disabled):not(:disabled):active, #page-nav .next:not(.disabled):not(:disabled):focus, a:hover > #page-nav .next:not(.disabled):not(:disabled), a:active > #page-nav .next:not(.disabled):not(:disabled), a:focus > #page-nav .next:not(.disabled):not(:disabled), #page-nav .prev:hover, #page-nav .prev:active, #page-nav .prev:focus, a:hover > #page-nav .prev, a:active > #page-nav .prev, a:focus > #page-nav .prev, #page-nav .prev:visited:hover, #page-nav .prev:visited:active, #page-nav .prev:visited:focus, a:hover > #page-nav .prev:visited, a:active > #page-nav .prev:visited, a:focus > #page-nav .prev:visited, #page-nav .prev:not(.disabled):not(:disabled):hover, #page-nav .prev:not(.disabled):not(:disabled):active, #page-nav .prev:not(.disabled):not(:disabled):focus, a:hover > #page-nav .prev:not(.disabled):not(:disabled), a:active > #page-nav .prev:not(.disabled):not(:disabled), a:focus > #page-nav .prev:not(.disabled):not(:disabled) { + color: #003f50; } + #page-nav .page-number:hover:before, #page-nav .page-number:active:before, #page-nav .page-number:focus:before, a:hover > #page-nav .page-number:before, a:active > #page-nav .page-number:before, a:focus > #page-nav .page-number:before, #page-nav .page-number:visited:hover:before, #page-nav .page-number:visited:active:before, #page-nav .page-number:visited:focus:before, a:hover > #page-nav .page-number:visited:before, a:active > #page-nav .page-number:visited:before, a:focus > #page-nav .page-number:visited:before, #page-nav .page-number:not(.disabled):not(:disabled):hover:before, #page-nav .page-number:not(.disabled):not(:disabled):active:before, #page-nav .page-number:not(.disabled):not(:disabled):focus:before, a:hover > #page-nav .page-number:not(.disabled):not(:disabled):before, a:active > #page-nav .page-number:not(.disabled):not(:disabled):before, a:focus > #page-nav .page-number:not(.disabled):not(:disabled):before, #page-nav .next:hover:before, #page-nav .next:active:before, #page-nav .next:focus:before, a:hover > #page-nav .next:before, a:active > #page-nav .next:before, a:focus > #page-nav .next:before, #page-nav .next:visited:hover:before, #page-nav .next:visited:active:before, #page-nav .next:visited:focus:before, a:hover > #page-nav .next:visited:before, a:active > #page-nav .next:visited:before, a:focus > #page-nav .next:visited:before, #page-nav .next:not(.disabled):not(:disabled):hover:before, #page-nav .next:not(.disabled):not(:disabled):active:before, #page-nav .next:not(.disabled):not(:disabled):focus:before, a:hover > #page-nav .next:not(.disabled):not(:disabled):before, a:active > #page-nav .next:not(.disabled):not(:disabled):before, a:focus > #page-nav .next:not(.disabled):not(:disabled):before, #page-nav .prev:hover:before, #page-nav .prev:active:before, #page-nav .prev:focus:before, a:hover > #page-nav .prev:before, a:active > #page-nav .prev:before, a:focus > #page-nav .prev:before, #page-nav .prev:visited:hover:before, #page-nav .prev:visited:active:before, #page-nav .prev:visited:focus:before, a:hover > #page-nav .prev:visited:before, a:active > #page-nav .prev:visited:before, a:focus > #page-nav .prev:visited:before, #page-nav .prev:not(.disabled):not(:disabled):hover:before, #page-nav .prev:not(.disabled):not(:disabled):active:before, #page-nav .prev:not(.disabled):not(:disabled):focus:before, a:hover > #page-nav .prev:not(.disabled):not(:disabled):before, a:active > #page-nav .prev:not(.disabled):not(:disabled):before, a:focus > #page-nav .prev:not(.disabled):not(:disabled):before { + background-color: #e3d9ba; } + #page-nav .page-number.current, #page-nav .next.current, #page-nav .prev.current { + color: #fdf6e3; } + #page-nav .page-number.current:before, #page-nav .next.current:before, #page-nav .prev.current:before { + background-color: #2aa198; } + #page-nav .page-number.current:visited, #page-nav .next.current:visited, #page-nav .prev.current:visited { + color: #fdf6e3; } + #page-nav .page-number.current:visited:before, #page-nav .next.current:visited:before, #page-nav .prev.current:visited:before { + background-color: #2aa198; } + #page-nav .page-number.current:hover, #page-nav .page-number.current:active, #page-nav .page-number.current:focus, a:hover > #page-nav .page-number.current, a:active > #page-nav .page-number.current, a:focus > #page-nav .page-number.current, #page-nav .page-number.current:visited:hover, #page-nav .page-number.current:visited:active, #page-nav .page-number.current:visited:focus, a:hover > #page-nav .page-number.current:visited, a:active > #page-nav .page-number.current:visited, a:focus > #page-nav .page-number.current:visited, #page-nav .page-number.current:not(.disabled):not(:disabled):hover, #page-nav .page-number.current:not(.disabled):not(:disabled):active, #page-nav .page-number.current:not(.disabled):not(:disabled):focus, a:hover > #page-nav .page-number.current:not(.disabled):not(:disabled), a:active > #page-nav .page-number.current:not(.disabled):not(:disabled), a:focus > #page-nav .page-number.current:not(.disabled):not(:disabled), #page-nav .next.current:hover, #page-nav .next.current:active, #page-nav .next.current:focus, a:hover > #page-nav .next.current, a:active > #page-nav .next.current, a:focus > #page-nav .next.current, #page-nav .next.current:visited:hover, #page-nav .next.current:visited:active, #page-nav .next.current:visited:focus, a:hover > #page-nav .next.current:visited, a:active > #page-nav .next.current:visited, a:focus > #page-nav .next.current:visited, #page-nav .next.current:not(.disabled):not(:disabled):hover, #page-nav .next.current:not(.disabled):not(:disabled):active, #page-nav .next.current:not(.disabled):not(:disabled):focus, a:hover > #page-nav .next.current:not(.disabled):not(:disabled), a:active > #page-nav .next.current:not(.disabled):not(:disabled), a:focus > #page-nav .next.current:not(.disabled):not(:disabled), #page-nav .prev.current:hover, #page-nav .prev.current:active, #page-nav .prev.current:focus, a:hover > #page-nav .prev.current, a:active > #page-nav .prev.current, a:focus > #page-nav .prev.current, #page-nav .prev.current:visited:hover, #page-nav .prev.current:visited:active, #page-nav .prev.current:visited:focus, a:hover > #page-nav .prev.current:visited, a:active > #page-nav .prev.current:visited, a:focus > #page-nav .prev.current:visited, #page-nav .prev.current:not(.disabled):not(:disabled):hover, #page-nav .prev.current:not(.disabled):not(:disabled):active, #page-nav .prev.current:not(.disabled):not(:disabled):focus, a:hover > #page-nav .prev.current:not(.disabled):not(:disabled), a:active > #page-nav .prev.current:not(.disabled):not(:disabled), a:focus > #page-nav .prev.current:not(.disabled):not(:disabled) { + color: #fffefb; } + #page-nav .page-number.current:hover:before, #page-nav .page-number.current:active:before, #page-nav .page-number.current:focus:before, a:hover > #page-nav .page-number.current:before, a:active > #page-nav .page-number.current:before, a:focus > #page-nav .page-number.current:before, #page-nav .page-number.current:visited:hover:before, #page-nav .page-number.current:visited:active:before, #page-nav .page-number.current:visited:focus:before, a:hover > #page-nav .page-number.current:visited:before, a:active > #page-nav .page-number.current:visited:before, a:focus > #page-nav .page-number.current:visited:before, #page-nav .page-number.current:not(.disabled):not(:disabled):hover:before, #page-nav .page-number.current:not(.disabled):not(:disabled):active:before, #page-nav .page-number.current:not(.disabled):not(:disabled):focus:before, a:hover > #page-nav .page-number.current:not(.disabled):not(:disabled):before, a:active > #page-nav .page-number.current:not(.disabled):not(:disabled):before, a:focus > #page-nav .page-number.current:not(.disabled):not(:disabled):before, #page-nav .next.current:hover:before, #page-nav .next.current:active:before, #page-nav .next.current:focus:before, a:hover > #page-nav .next.current:before, a:active > #page-nav .next.current:before, a:focus > #page-nav .next.current:before, #page-nav .next.current:visited:hover:before, #page-nav .next.current:visited:active:before, #page-nav .next.current:visited:focus:before, a:hover > #page-nav .next.current:visited:before, a:active > #page-nav .next.current:visited:before, a:focus > #page-nav .next.current:visited:before, #page-nav .next.current:not(.disabled):not(:disabled):hover:before, #page-nav .next.current:not(.disabled):not(:disabled):active:before, #page-nav .next.current:not(.disabled):not(:disabled):focus:before, a:hover > #page-nav .next.current:not(.disabled):not(:disabled):before, a:active > #page-nav .next.current:not(.disabled):not(:disabled):before, a:focus > #page-nav .next.current:not(.disabled):not(:disabled):before, #page-nav .prev.current:hover:before, #page-nav .prev.current:active:before, #page-nav .prev.current:focus:before, a:hover > #page-nav .prev.current:before, a:active > #page-nav .prev.current:before, a:focus > #page-nav .prev.current:before, #page-nav .prev.current:visited:hover:before, #page-nav .prev.current:visited:active:before, #page-nav .prev.current:visited:focus:before, a:hover > #page-nav .prev.current:visited:before, a:active > #page-nav .prev.current:visited:before, a:focus > #page-nav .prev.current:visited:before, #page-nav .prev.current:not(.disabled):not(:disabled):hover:before, #page-nav .prev.current:not(.disabled):not(:disabled):active:before, #page-nav .prev.current:not(.disabled):not(:disabled):focus:before, a:hover > #page-nav .prev.current:not(.disabled):not(:disabled):before, a:active > #page-nav .prev.current:not(.disabled):not(:disabled):before, a:focus > #page-nav .prev.current:not(.disabled):not(:disabled):before { + background-color: #22837b; } diff --git a/src/blog/themes/blog/layout/_partial/archive.ejs b/src/blog/themes/blog/layout/_partial/archive.ejs index d51e0fd..f6cd056 100644 --- a/src/blog/themes/blog/layout/_partial/archive.ejs +++ b/src/blog/themes/blog/layout/_partial/archive.ejs @@ -25,7 +25,7 @@ <% } %> <% if (page.total > 1){ %>