Improve Previous / Next button and alignment

[choldgraf]

Description

Currently, our Previous/Next buttons have typed-out chevrons like this >>. These are added via an :after CSS attribute with the content manually specified.

I think that we could improve it with a few minor tweaks:

1. Convert the text into an SVG or icon from FontAwesome like angle-left and angle-right
2. Put the icon in a standalone DOM element (e.g. <i ) that is next to the text.
3. Wrap the text/button for prev/next in a button element (<button ) that has a flexbox display and with align-items: center

Benefit

This would have a few improvements:

• SVG icons generally look more professional than >>

• Using the flexbox approach will allow us to make the icon center itself on the text, even if the text takes up multiple lines, so it would look like this:

  Some text
  and another  >
  line here
  

  instead of the current behavior

  Some text
  and another
  line here >>
  

• Converting the top level thing to a "button" would allow people with screen assistive technologies to more easily navigate to / use these previous/next links (@bollwyvl am I correct there?)

Implementation details

I think this would need a minor update to our layout.html template to add the extra DOM structure, as well as some CSS tweaking to get the display working properly.

Here's a PR that did something similar in the book theme, for inspiration: executablebooks/sphinx-book-theme#386