Add backlinks to footnotes on page

* Added JavaScript written by @NieDzejkob from Zola issue
  getzola/zola/issues/1285
* Changed styling for footnotes
* Updated index template to include site.js

sass/_base.scss

@@ -27,7 +27,7 @@ a {
   color: $link-color;
   text-decoration: none;
   cursor: pointer;
-  border-bottom: 1px solid $link-color;
+  // border-bottom: 1px solid $link-color;
 
   &:visited {
     color: $link-color;
@@ -62,3 +62,37 @@ blockquote {
   font-style: italic;
   font-weight: bold;
 }
+
+.footnote-definition {
+  border-left: 2px solid $header-footer-bg;
+  margin-bottom: 1rem;
+  padding-right: 10px;
+
+  sup {
+    font-weight: bold;
+    padding-left: 5px;
+  }
+
+  p {
+    margin: 0 1rem;
+    font-size: 0.9rem;
+  }
+}
+
+.footnote-reference {
+  font-weight: bold;
+  margin-left: 1px;
+
+  // &:before { content: "[" }
+  // &:after  { content: "]" }
+}
+
+.contributor-info {
+  p {
+    margin: 0;
+
+    &:before {
+      content: "• ";
+    }
+  }
+}

static/site.js

@@ -0,0 +1,23 @@
+// This adds links back to where a footnote is originally referenced.
+const addBackLinks = () => {
+  for (const ref of document.getElementsByClassName('footnote-reference')) {
+    const hash = ref.children[0].hash.substring(1);
+    const refhash = 'ref:' + hash;
+    ref.id = refhash;
+  }
+
+  for (const footnote of document.getElementsByClassName('footnote-definition')) {
+    const hash = footnote.id;
+    const refhash = 'ref:' + hash;
+    const backlink = document.createElement('a');
+
+    backlink.href = '#' + refhash;
+    backlink.className = 'footnote-backlink';
+    backlink.innerText = '^';
+
+    sup = footnote.children[0];
+    sup.appendChild(backlink);
+  }
+}
+
+window.addEventListener('load', addBackLinks);

templates/index.html

@@ -62,5 +62,6 @@
   <script type="text/javascript" src="{{ get_url(path="elasticlunr.min.js") }}"></script>
   <script type="text/javascript" src="{{ get_url(path="search_index.en.js") }}"></script>
   <script type="text/javascript" src="{{ get_url(path="search.js") }}"></script>
+  <script type="text/javascript" src="{{ get_url(path="site.js") }}"></script>
 </body>
 </html>