github/hugo-geekblog
0
0
Fork 0
mirror of https://github.com/thegeeklab/hugo-geekblog.git synced 2024-11-29 00:00:36 +00:00
Code Issues Projects Releases Wiki Activity

fix width of the page navigation

Browse Source
This commit is contained in:
Robert Kaussow 2020-07-17 19:19:03 +02:00
parent 3d256a054c
commit 0cde8afd34
No known key found for this signature in database
GPG Key ID: 65362AE74AF98B61
6 changed files with 46 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
layouts/_default/list.html
View File

@ -16,7 +16,7 @@
</section> </section>
<div class="gblog-post__readmore"> <div class="gblog-post__readmore">
{{ if .Truncated }} {{ if .Truncated }}
<a class="flex-inline align-center" title="Read full post" href="{{ .RelPermalink }}">Read full post</a> <a class="flex-inline align-center fake-link" title="Read full post" href="{{ .RelPermalink }}">Read full post</a>
{{ end }} {{ end }}
</div> </div>

10
layouts/partials/pagination.html
View File

@ -1,15 +1,15 @@
{{ $pag := $.Paginator }} {{ $pag := $.Paginator }}
<nav class="gblog-paging flex justify-between align-center " role="navigation"> <nav class="gblog-paging flex flex-even align-center " role="navigation">
<div class="gblog-paging__button is-next"> <div class="gblog-paging__item gblog-paging__item--next">
{{ if $pag.HasPrev }} {{ if $pag.HasPrev }}
<a class="gblog-paging__link" href="{{ $pag.Prev.URL }}">&larr; Newer posts</a> <a class="flex-inline align-center fake-link" href="{{ $pag.Prev.URL }}">Newer posts</a>
{{ end }} {{ end }}
</div> </div>
<div class="gblog-paging__state">Page {{ $pag.PageNumber }} of {{ $pag.TotalPages }}</div> <div class="gblog-paging__state">Page {{ $pag.PageNumber }} of {{ $pag.TotalPages }}</div>
<div class="gblog-paging__button is-prev"> <div class="gblog-paging__item gblog-paging__item--prev">
{{ if $pag.HasNext }} {{ if $pag.HasNext }}
<a class="gblog-paging__link" href="{{ $pag.Next.URL }}">Older posts &rarr;</a> <a class="flex-inline align-center fake-link" href="{{ $pag.Next.URL }}">Older posts</a>
{{ end }} {{ end }}
</div> </div>
</nav> </nav>

2
layouts/partials/svg-icon-symbols.html
View File

File diff suppressed because one or more lines are too long
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 9.8 KiB

After

Width:  |  Height:  |  Size: 9.9 KiB

1
src/iconfont/uEA16-arrow_left.svg Normal file
View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="34" height="34" viewBox="-6.67 -6.67 45.33 45.33"><path d="M7.954 17.965v5.988L.001 16l7.953-7.953v5.988H32v3.93H7.954z"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 175 B

5
src/icons/arrow_left.svg Normal file
View File

@ -0,0 +1,5 @@
<!-- Generated by IcoMoon.io -->
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
<title>arrow_left</title>
<path d="M7.954 17.965v5.988l-7.953-7.953 7.953-7.953v5.988h24.046v3.93h-24.046z"></path>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 254 B

40
src/sass/_base.scss
View File

@ -67,6 +67,14 @@ img {
vertical-align: middle; vertical-align: middle;
} }
.fake-link {
background-image: linear-gradient($color-link, $color-link);
background-position: 0 100%;
background-size: 100% 1px;
background-repeat: no-repeat;
text-decoration: none;
}
.wrapper { .wrapper {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@ -209,19 +217,11 @@ img {
&__readmore { &__readmore {
margin: 1.5rem 0 $padding-32 0; margin: 1.5rem 0 $padding-32 0;
a { a:after {
background-image: linear-gradient($color-link, $color-link);
background-position: 0 100%;
background-size: 100% 1px;
background-repeat: no-repeat;
text-decoration: none;
&:after {
font-family: GeekblogIcons; font-family: GeekblogIcons;
content: "\ea02"; content: "\ea02";
} }
} }
}
&__tag { &__tag {
margin: $padding-4 0 !important; margin: $padding-4 0 !important;
@ -296,6 +296,28 @@ img {
.gblog-paging { .gblog-paging {
padding: $padding-16 0; padding: $padding-16 0;
&__item {
flex: 1 1 0;
&--prev {
text-align: right;
a:after {
font-family: GeekblogIcons;
content: "\ea02";
}
}
&--next {
text-align: left;
a::before {
font-family: GeekblogIcons;
content: "\ea16";
}
}
}
} }
.gblog-error { .gblog-error {