Add markdown-it-footnote plugin and update styles for footnotes (#77)

.eleventy.js

@@ -3,6 +3,7 @@ const pluginNavigation = require("@11ty/eleventy-navigation")
 const pluginSvgSprite = require("eleventy-plugin-svg-sprite")
 const pluginPageAssets = require("eleventy-plugin-page-assets")
 const markdownIt = require("markdown-it")
+const markdownItFootnote = require("markdown-it-footnote")
 
 const lodash = require("lodash")
 const filters = require("./utils/filters.js")
@@ -58,7 +59,7 @@ module.exports = function (config) {
 			breaks: true,
 			linkify: true,
 			typographer: true
-		})
+		}).use(markdownItFootnote)
 	)
 
 	// Layouts

package.json

@@ -42,6 +42,7 @@
 		"lodash": "^4.17.21",
 		"luxon": "^2.1.1",
 		"markdown-it": "^12.2.0",
+		"markdown-it-footnote": "^4.0.0",
 		"memfs": "^3.4.0",
 		"netlify-cli": "^17.23.1",
 		"node-fetch": "^3.3.1",

src/assets/styles/components/_content.scss

@@ -108,6 +108,31 @@
 			}
 		}
 
+		.footnotes-sep {
+			margin-top: 2.75rem;
+			margin-bottom: 2.75rem;
+		}
+
+		.footnotes {
+			ol {
+				font-size: 0.875rem;
+				line-height: 1.2rem;
+				font-weight: 520;
+				letter-spacing: -0.01rem;
+			}
+
+			.footnote-backref {
+				text-decoration: none;
+			}
+		}
+
+		.footnote-ref {
+			a {
+				text-decoration: none;
+				font-weight: 520;
+			}
+		}
+
 		code {
 			font-weight: 600;
 		}