m/blog
1
0
Fork 0
mirror of https://github.com/kremalicious/blog.git synced 2025-01-18 16:47:06 +01:00
Code

new pagination style

Browse Source
This commit is contained in:
Matthias Kretschmann 2016-04-29 00:42:43 +02:00
parent 37c0747e34
commit 8f859dfd80
Signed by: m
GPG Key ID: BD3C1F3EDD7831FC
4 changed files with 45 additions and 48 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
_config.yml
View File

@ -60,7 +60,7 @@ gems:
- jekyll-picture-tag
- jekyll-paginate
- jekyll-archives
# jekyll-archives
# --------------------

29
_src/_assets/styl/_kremalicious/navigation.styl
View File

@ -75,25 +75,30 @@
/////////////////////////////////////
.paginator
@extend .textcenter
padding-top: ($spacer*2)
padding-bottom: ($spacer*2)
.icon
margin-bottom: -3px
p
margin-bottom: 0;
margin-bottom: -5px
.paginator-next
text-align: right
.paginator__link
width: 2rem
height: 2rem
line-height: 1.7
display: inline-block
border-radius: 50%
.paginator-pages
@extend .textcenter, .dimmed
font-size: $font-size-small
&:hover,
&:focus
background: rgba(255,255,255,.3)
.paginator-number
font-size: $font-size-base
color: $text-color-light
padding: 0 2px
&.active
color: $text-color-dimmed
cursor: default
pointer-events: none
background: rgba(255,255,255,.3)
.paginator-title
@extend .page-title
margin-top: -($spacer*2)

59
_src/_includes/paginator.html
View File

@ -1,52 +1,43 @@
{% if paginator.total_pages > 1 %}
<nav class="paginator grid">
<p class="paginator-previous grid__col">
{% if paginator.previous_page %}
<a
{% if page.category %}
{% if paginator.previous_page == 1 %}
href="/{{ page.category }}/"
{% else %}
href="/{{ page.category }}/page/{{ paginator.previous_page }}/"
{% endif %}
<nav class="paginator">
{% if paginator.previous_page %}
<a class="paginator__link"
{% if paginator.previous_page == 1 %}
href="/">
{% else %}
{% if paginator.previous_page == 1 %}
href="/"
{% else %}
href="/page/{{ paginator.previous_page }}/"
{% endif %}
href="/page/{{paginator.previous_page}}">
{% endif %}
rel="prev">
<svg class="icon icon-entypo icon-entypo-chevron-left">
<use xlink:href="/assets/img/sprite.svg#entypo-chevron-left"></use>
</svg>
Previous
</a>
{% endif %}
<a
{% if paginator.page == 1 %}
href="#" class="paginator__link active"
{% else %}
href="/" class="paginator__link"
{% endif %}
</p>
>1</a>
<p class="paginator-pages grid__col">
<span class="paginator-number">{{ paginator.page }}</span> of <span class="paginator-number">{{ paginator.total_pages }}</span>
</p>
{% for count in (2..paginator.total_pages) %}
{% if count == paginator.page %}
<a href="#" class="paginator__link active">{{count}}</a>
{% else %}
<a class="paginator__link" href="/page/{{count}}">{{count}}</a>
{% endif %}
{% endfor %}
<p class="paginator-next grid__col">
{% if paginator.next_page %}
<a
{% if page.category %}
href="/{{ page.category }}/page/{{ paginator.next_page }}/"
{% else %}
href="/page/{{ paginator.next_page }}/"
{% endif %}
rel="next">Next
{% if paginator.next_page %}
<a class="paginator__link" href="/page/{{paginator.next_page}}">
<svg class="icon icon-entypo icon-entypo-chevron-right">
<use xlink:href="/assets/img/sprite.svg#entypo-chevron-right"></use>
</svg>
</a>
{% endif %}
</p>
{% endif %}
</nav>
{% endif %}

3
gulpfile.js
View File

@ -178,6 +178,7 @@ gulp.task('css', function() {
.pipe($.if(isProduction, $.header(BANNER, { pkg: pkg })))
.pipe($.rename({ suffix: '.min' }))
.pipe(gulp.dest(DIST + '/assets/css/'))
.pipe(browser.stream())
});
@ -313,7 +314,7 @@ gulp.task('server', ['build'], function() {
// Build site, run server, and watch for file changes
//
gulp.task('default', ['build', 'server'], function() {
gulp.watch([SRC + '/_assets/styl/**/*.styl'], ['css', browser.reload]);
gulp.watch([SRC + '/_assets/styl/**/*.styl'], ['css']);
gulp.watch([SRC + '/_assets/js/*.js'], ['js', browser.reload]);
gulp.watch([SRC + '/_assets/img/**/*.{png,jpg,jpeg,gif}'], ['images', browser.reload]);
gulp.watch([SRC + '/_assets/img/**/*.{svg}'], ['icons', browser.reload]);