Set Pagination buttons to show left and right arrows instead of text newer and older

[sschwetz]

This pull request updates _layout/home.html to replace the current paginator navigation buttons from words "newer" and "older" with font-awesome arrow icons. The image below shows the styling of an inactive button (left arrow) and one that has a mouse over (right arrow)

I was tossing up the idea of making the format of the icons the same as the others in the footer but decided on this format instead, as it makes them a little more obvious

[daattali]

The current left/right arrows do indeed look awkward. I think changing them to be fontawesome arrows would be a big improvement. But I would do it without the circle around the arrow. I'll merge a PR for that right now.

But I'm not sure that removing the text altogether is necessarily better. To me those two buttons don't look as appealing visually.

We could have the text configurable - that would involve adding 4 parameters: next_post_text, prev_post_text, next_page_text, prev_page_text. Then if you set the text to an empty string, it would essentially result in what you want. My only reservation here is that I try very hard not to add too many parameters because, as I said in other comments, I want this to be simple rather than all-powerful.

I'll make a poll, and if there's enough support for being able to change the text, we can add that feature soon.

[daattali]

#1222

[cyaris]

I've actually made this change manually on my Jekyll site. The arrows-only I did for mobile (small windows). Would love to see a change like that implemented.

[daattali]

That's an interesting idea, only removing the text on small screens. I would still like to change the right arrow from the ugly looking one that we currently have to the nicer fontawesome one.

@sschwetz what do you think about this?

[cyaris]

I'd be glad to submit a pull request with my own implementation, though I'm not sure my approach should be set in stone (made two elements, one for regular and one for mobile, then two media queries to hide one when the window size was greater/less than 700px I think).

[daattali]

I think the clean solution would be to wrap the text in an HTML tag and use CSS to hide that tag when the screen is small.

[daattali]

@sschwetz does this idea make sense to you? Changing the HTML entity arrows to fontawesome arrows, and on small screens removing the text

[sschwetz]

Yes that is a much better idea than my solution. I am happy for you to run with it, whilst I work on the authors, or I will look at it once I have authors finished

[daattali]

Done d8e099d