Customize footnotes

[dgnicholson]

This adds styling to footnotes so that they better match the theme and also includes enhancements their readability.

Footnote styling

Styles both the footnote numeral ([1]) and the footnote return icon (↩︎). Both now use the $primary color (_vars.scss) and implement a background on hover using lightened $primary—this a similar style that tags use. The blockquote footnote now matches this new style. Footnotes automatically add an <hr> above the footnotes area at the bottom of the post. Previously this provided no margin from the content and was unstyled. Both issues are corrected and <hr> now uses $grey (_vars.scss).

Footnote highlighting

Adds highlighting to the footnotes in a similar way to what Wikipedia does. When a user clicks on a footnote and the footnotes area is shown, the footnote in question is highlighted using $primary (_vars.scss) as a background with a quick gradient animation. This animation will end with a very light background highlighting the footnote. This background can improve readability when navigating posts that have a large number of footnotes.

I'm not sold on using $primary, so if another color (or a separate var) is better suited it can easily be changed.

Notes and known issues

Hugo changed from Blackfriday to Goldmark for Markdown. While this adds lots of improvements, it has limited how you can customize various syntax elements—including footnotes.

• Footnotes break if multiple posts use footnotes on the same page. This happens because each post's footnote ID starts at fn:1 which causes clashes with other lists from other posts. While Blackfriday had the option to use a reference id (see plainIDAnchors = false), this does not appear to be the case for Goldmark.
• The return icon can't be changed (see footnoteReturnLinkContents in Blackfriday).