fix(footnotes): adjust styling for multiline footnotes; resolves #24

Author: micahkepe

content/markdown-demo.md

@@ -77,6 +77,8 @@ Footnote example[^1]
 
 Some other footnote that is inline[^2]. As you can see, it just blends right in!
 
+See below for an example of a footnote with multiple paragraphs and code[^3].
+
 ## Lists
 
 ### Unordered List
@@ -130,3 +132,15 @@ wrapping the text in square brackets and the URL in parentheses.
     occaecat voluptate
 
 [^2]: Wikipedia article on a cool topic: [https://en.wikipedia.org/wiki/Isometric_projection](https://en.wikipedia.org/wiki/Isometric_projection)
+
+[^3]:
+    Here's one with multiple paragraphs and code. This is the first paragraph
+    of the footnote.
+
+    Indent paragraphs to include them in the footnote.
+
+    ```python
+    print("Hello word")
+    ```
+
+    Add as many paragraphs as you like.

sass/_theme.scss

@@ -224,33 +224,38 @@ article [itemprop="summary"] p {
 
 
 .footnote-definition {
-  flex-wrap: nowrap;
-  display: flex;
-  flex-direction: row;
-  align-items: start;
-  gap: 10px;
+  display: block;
   max-width: 100%;
+  margin-bottom: 10px;
+  overflow: hidden;
   overflow-x: auto;
-  margin: 5px 0;
+  margin: 20px 0;
   padding-block-end: 5px;
 
   sup {
+    display: inline-block;
+    margin-right: 0.5em;
     color: #ff2e88;
     font-size: inherit;
     font-weight: bold;
     vertical-align: baseline;
-  }
 
-  sup::before {
-    content: "["
+    &::before {
+      content: "[";
+    }
+
+    &::after {
+      content: "]";
+    }
   }
 
-  sup::after {
-    content: "]"
+  p:first-of-type {
+    display: inline;
   }
 
-  p {
-    margin: 0;
+  // Add top margin to subsequent p elements
+  p:not(:first-of-type) {
+    margin-top: 0.5em;
   }
 }
 

static/js/reference-return.js

@@ -27,9 +27,13 @@ document.addEventListener("DOMContentLoaded", function () {
     returnLink.setAttribute("role", "link");
     returnLink.setAttribute("tabindex", "0");
 
-    // Append to the p tag
-    const p = fn.querySelector("p");
-    if (!p) return;
-    p.appendChild(returnLink);
+    // Append to the last p tag
+    const lastParagraph = fn.querySelector("p:last-of-type");
+    if (lastParagraph) {
+      lastParagraph.appendChild(returnLink);
+    } else {
+      // If no paragraph, append to the footnote definition directly
+      fn.appendChild(returnLink);
+    }
   });
 });