Style footnotes and fix hr spacing

Modified to support jakewies#159.

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

assets/scss/pages/post.scss

@@ -288,3 +288,50 @@ p {
 mark {
   background-color: #ffee58;
 }
+
+/* footnote customization */ 
+
+// Footnote ([1])
+a[href^="#fn:"] {
+  text-decoration: none;
+  color: $primary;
+  font-family: 'monospace';
+  border-radius: 3px;
+  font-size: .75rem;
+  margin-left: 0.2rem;
+  &:hover {
+    background: lighten($primary, 38%);
+  }
+  &::before {
+    content: "[";
+  }
+  &::after {
+    content: "]";
+  }
+}
+
+// Return to footnote (↩︎)
+a[href^="#fnref:"] {
+  text-decoration: none;
+  color: $primary;
+  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;
+  }
+}