The background noise makes the document look more like it's written on
paper.
The noise images are provided by the noisy-uris project:
https://github.com/markdurrant/noisy-uris
To avoid making another HTTP request, the images are base64 encoded, and
`@extend` is used to avoid duplicating the images.
Specifying `line-height: 1.3em` instead of simply `line-height: 1.3`
causes odd inheritance properties. In the case of the former, the
`line-height` is calculated from the `font-size` of the parent only. In
the case of the later, the `line-height` is calculated from the
`font-size` of the current child element.
This was causing odd spacing issues with footnotes, as the computed
`line-height` was far too large, since footnotes use a really small
`font-size`.
A new test is included for footnotes and additional tests are included
in the inline code-block test in order to test multiple font sizes.
If the `line-height` is too small inline `<code>` blocks would run into
each other. As Thomas suggested, a `line-height` of `1.3em` fixes this,
and improves document flow too.
Additional minor spacing tweaks were made to match the slightly taller
`line-height` (such as increasing inter-paragraph spacing).
Tests for `<code>` tags and for long document flow are now included.
Heavily nested lists and block quotes could result in *really* tiny font
sizes. We now use `font-size: inherit` on certain nesting combinations,
and there's an included test case for it.
- Really large screens get percent-based margins, a wider max-width, and
a slightly bigger font
- Really small screens get `overflow-x: auto` for code blocks
- Figures get centered on wide screens