Change older posts and newer posts navigation from buttons to links and fix older page navigation appearing on the left

This commit is contained in:
Joe Hutchinson
2018-12-13 14:04:45 -05:00
parent 1827035623
commit 832811615c
2 changed files with 8 additions and 5 deletions

View File

@@ -14,8 +14,8 @@
</main> </main>
{{ if or (.Paginator.HasPrev) (.Paginator.HasNext) }} {{ if or (.Paginator.HasPrev) (.Paginator.HasNext) }}
<nav class="pagination-nav side-padding"> <nav class="pagination-nav side-padding">
{{ if .Paginator.HasPrev }}<a href="{{ .Paginator.Prev.URL }}" class="button">Newer Posts</a>{{ end }} {{ if .Paginator.HasPrev }}<a href="{{ .Paginator.Prev.URL }}" class="pagination-newer">&lt; Newer Posts</a>{{ end }}
{{ if .Paginator.HasNext }}<a href="{{ .Paginator.Next.URL }}" class="button">Older Posts</a>{{ end }} {{ if .Paginator.HasNext }}<a href="{{ .Paginator.Next.URL }}" class="pagination-older">Older Posts &gt;</a>{{ end }}
</nav> </nav>
{{ end }} {{ end }}
{{ partial "scripts.html" . }} {{ partial "scripts.html" . }}

View File

@@ -243,12 +243,15 @@ input:checked ~ .hamburger-menu-overlay {
} }
.pagination-nav { .pagination-nav {
margin: 2em 0; margin: 2em 0;
display: flex;
align-items: center;
justify-content: space-between;
width: 100%; width: 100%;
max-width: 47rem; max-width: 47rem;
} }
.pagination-newer {
float:left;
}
.pagination-older {
float: right;
}
.button { .button {
padding: 0.5em 0.6em; padding: 0.5em 0.6em;
background-color: #FFF; background-color: #FFF;