Style footnotes and fix hr spacing

Modified to support jakewies#159
and jakewies#160.

Co-authored-by: Diab Neiroukh <[email protected]>

Author: 2 people

assets/scss/pages/post.scss

@@ -288,3 +288,87 @@ main {
 mark {
   background-color: #ffee58;
 }
+
+/* footnote customization */
+
+// Footnote ([1])
+.footnote-ref {
+  text-decoration: none;
+  color: $primary !important;
+  font-family: "monospace";
+  border-radius: 3px;
+  font-size: 0.75rem;
+  margin-left: 0.2rem;
+  &:hover {
+    background: lighten($primary, 38%);
+  }
+  &::before {
+    content: "[";
+  }
+  &::after {
+    content: "]";
+  }
+}
+
+// Return to footnote (↩︎)
+.footnote-backref {
+  text-decoration: none;
+  color: $primary !important;
+  border-radius: 3px;
+  padding: 0rem 0.2rem 0rem 0.2rem;
+  font-size: 0.85rem;
+  margin-left: 0.2rem;
+  &:hover {
+    background: lighten($primary, 38%);
+  }
+}
+
+// Line separating post content from the footnotes at the bottom
+
+.footnotes {
+  > hr {
+    color: $darkGrey;
+    @media (prefers-color-scheme: dark) {
+      color: $lightGrey;
+    }
+    border-top: 1px;
+    margin: 1rem 0;
+  }
+}
+
+// Footnote highlighting
+
+@keyframes footnote_highlight {
+  0% {
+    opacity: 0.55;
+  }
+  100% {
+    opacity: 0.05;
+  }
+}
+
+.footnotes li,
+.footnote-backref {
+  position: relative;
+
+  &::after {
+    position: absolute;
+    z-index: -1;
+    content: "";
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: $primary;
+    opacity: 0;
+    border-radius: 0px;
+  }
+
+  &:target,
+  &:focus {
+    &::after {
+      animation: footnote_highlight ease 2s;
+      opacity: 0.05;
+    }
+  }
+}

exampleSite/content/blog/markdown-syntax.md

@@ -46,6 +46,15 @@ The blockquote element represents content that is quoted from another source, op
 
 [^1]: The above quote is often attributed to Leonardo da Vinci but there is no concrete evidence to support this.
 
+## Footnotes
+
+Both simple footnotes[^2] and longer footnotes[^longnote] are supported. 
+
+[^2]: This is a simple footnote.
+
+[^longnote]: This is a longer footnote with multiple paragraphs. 
+
+    Include paragraphs into the footnote by indenting them. Include as many paragraphs as are needed.  
 
 ## Tables