feat: add pagination styling
This commit is contained in:
parent
ab09d53972
commit
502c87d36c
7 changed files with 82 additions and 5 deletions
2
dist/blog/archives/index.html
vendored
2
dist/blog/archives/index.html
vendored
|
@ -549,7 +549,7 @@
|
|||
|
||||
<nav id="page-nav">
|
||||
|
||||
<span class="page-number current">1</span><a class="page-number" href="/blog/archives/page/2/">2</a><a class="extend next" rel="next" href="/blog/archives/page/2/">Suivant &raquo;</a>
|
||||
<span class="page-number current">1</span><a class="page-number" href="/blog/archives/page/2/">2</a><a class="extend next" rel="next" href="/blog/archives/page/2/">Suivant ></a>
|
||||
</nav>
|
||||
|
||||
</section>
|
||||
|
|
2
dist/blog/archives/page/2/index.html
vendored
2
dist/blog/archives/page/2/index.html
vendored
|
@ -499,7 +499,7 @@
|
|||
|
||||
<nav id="page-nav">
|
||||
|
||||
<a class="extend prev" rel="prev" href="/blog/archives/">&laquo; Précédent</a><a class="page-number" href="/blog/archives/">1</a><span class="page-number current">2</span>
|
||||
<a class="extend prev" rel="prev" href="/blog/archives/">< Précédent</a><a class="page-number" href="/blog/archives/">1</a><span class="page-number current">2</span>
|
||||
</nav>
|
||||
|
||||
</section>
|
||||
|
|
2
dist/blog/index.html
vendored
2
dist/blog/index.html
vendored
|
@ -497,7 +497,7 @@
|
|||
|
||||
<nav id="page-nav">
|
||||
|
||||
<span class="page-number current">1</span><a class="page-number" href="/blog/page/2/">2</a><a class="extend next" rel="next" href="/blog/page/2/">Suivant &raquo;</a>
|
||||
<span class="page-number current">1</span><a class="page-number" href="/blog/page/2/">2</a><a class="extend next" rel="next" href="/blog/page/2/">Suivant ></a>
|
||||
</nav>
|
||||
|
||||
</section>
|
||||
|
|
2
dist/blog/page/2/index.html
vendored
2
dist/blog/page/2/index.html
vendored
|
@ -439,7 +439,7 @@
|
|||
|
||||
<nav id="page-nav">
|
||||
|
||||
<a class="extend prev" rel="prev" href="/blog/">&laquo; Précédent</a><a class="page-number" href="/blog/">1</a><span class="page-number current">2</span>
|
||||
<a class="extend prev" rel="prev" href="/blog/">< Précédent</a><a class="page-number" href="/blog/">1</a><span class="page-number current">2</span>
|
||||
</nav>
|
||||
|
||||
</section>
|
||||
|
|
63
dist/style.css
vendored
63
dist/style.css
vendored
|
@ -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; }
|
||||
|
|
|
@ -25,7 +25,7 @@
|
|||
<% } %>
|
||||
<% if (page.total > 1){ %>
|
||||
<nav id="page-nav">
|
||||
<% var prev_text = "« " + __('prev');var next_text = __('next') + " »"%>
|
||||
<% var prev_text = "< " + __('prev');var next_text = __('next') + " >"%>
|
||||
<%- paginator({
|
||||
prev_text: prev_text,
|
||||
next_text: next_text
|
||||
|
|
|
@ -65,3 +65,17 @@ a.article-nav-link-wrap {
|
|||
.pigimg {
|
||||
padding-bottom:1.5rem;
|
||||
}
|
||||
|
||||
#page-nav {
|
||||
padding-bottom:1.5rem;
|
||||
.page-number, .next, .prev {
|
||||
@include button($button_small);
|
||||
padding-left: $button_small;
|
||||
padding-right: $button_small;
|
||||
@include button-color($color-light2, $color-button-dark);
|
||||
|
||||
&.current {
|
||||
@include button-color($color-info, $color-button-light);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
Reference in a new issue