blog-index: some extra styling for pagination links

[Fishrock123]

1. Add some space around the links so the highlighting works better.
2. Add a divider for when both links are displayed.

May be better done in CSS, but I'm not exactly sure where the relevant CSS is if it exists?

Screenshots:

[fhemberger]

-1 on the   spacing.

We have a css rule that can be adapted (see layouts/css/base.styl):

+nav.pagination,
p
    a
        padded-link(2px)

otherwise LGTM.

[phillipj]

In addition to using the padded-link helper, you could replace the JS/template logic for the separator with CSS aswell by adding this to the bottom of layouts/css/page-modules/_blog-index.styl:

nav.pagination
    a
        padded-link(2px)

    a + a:before
        content " | "
        color $black

The adjacent sibling selectors a + a makes the and-logic you've got in a handlebars helper, a problem the browser fixes for you instead.

Only bummer I can see is the separator gets the same background colour as the "Older" link when hovering, looks kinda strange, but I would say it does the trick considering it simplifies the code a lot.

[fhemberger]

Fixed this in a slightly different manner as @phillipj described it.