Define new variable for card header color

Removes the grid.css file of the grid example and makes use of utility classes

The outline button variant mixin should use the hover mixin, as does the non-outline version.

user-select has no effect on before/after pseudo elements

When gradients are enabled there is still a hover state on disabled
buttons since the hover rules apply to background-image and disabled
rules apply to background-color. This applies the logic already present
in dropdowns to buttons. This fix was originally proposed by @ysds.

Requires jekyll-toc v0.8.0.

* remove unused rules
* use Sass nesting in more places
* use the core mixins in more places
* use the color variables more

Firefox currently seems extremely fickle - with `pan-y` if fires pointercancel as soon as a touch strays even a pixel or so vertically.
While `touch-action: pan-y` would be ideal (allowing users to scroll the page even when their finger started the scroll on the carousel), this prevents a swipe that isn't perfectly/only horizontal to be recognised by Firefox.

in particular, no need to use originEvent, and preventDefault() only needed for touch events

these may also be the cause of weird behavior in Chrome/Surface, where scrolling vertically triggers slide advance

- my fault, my original advice of using `touch-action: pan-x` is exactly the value we *don't* want to have the browser handle...

Useful suggestion from Google in the Web App Manifest documentation.
https://developers.google.com/web/fundamentals/web-app-manifest/#start-url

In case we set `$body-bg` to a dark color, we have to keep table contrast relevant.