From a57a277e819d05e607c957efa25dca96ed853835 Mon Sep 17 00:00:00 2001
From: Thomas Dehaeze <dehaeze.thomas@gmail.com>
Date: Thu, 26 Nov 2020 13:40:49 +0100
Subject: [PATCH] Better footnotes

---
 scss/partials/_base.scss      | 21 +++---------
 scss/partials/_footnotes.scss | 62 +++++++++++++++++++++++++++++++++++
 scss/style.scss               |  1 +
 3 files changed, 67 insertions(+), 17 deletions(-)
 create mode 100644 scss/partials/_footnotes.scss

diff --git a/scss/partials/_base.scss b/scss/partials/_base.scss
index 9dc9d03..538c737 100644
--- a/scss/partials/_base.scss
+++ b/scss/partials/_base.scss
@@ -152,21 +152,16 @@ small{
     font-size:85%;
 }
 
-sub,sup{
-    font-size:75%;
+// Links to Footnotes
+sub{
+    font-size:0.5em;
     line-height:0;
     position:relative;
     vertical-align:baseline;
-}
-
-sup{
-    top:-0.5em;
-}
-
-sub{
     bottom:-0.25em;
 }
 
+
 img{
     -ms-interpolation-mode:bicubic;
     vertical-align:middle;
@@ -337,14 +332,6 @@ span[id*='MathJax-Span']{
     text-align:center;
 }
 
-#footnotes{
-    border-top:1px solid #e1e4e5;
-    padding-top: 36px;
-}
-
-h2.footnotes{
-    display:none;
-}
 
 .footnum, .footref{
     color: #2980b9;
diff --git a/scss/partials/_footnotes.scss b/scss/partials/_footnotes.scss
new file mode 100644
index 0000000..e709f15
--- /dev/null
+++ b/scss/partials/_footnotes.scss
@@ -0,0 +1,62 @@
+// Links to Footnotes
+sup{
+    font-size:0.5em;
+    line-height:0;
+    position:relative;
+    vertical-align:baseline;
+    top:-0.5em;
+}
+
+.footnum, .footref{
+    color: #2980b9;
+    font-size: 170%;
+    font-family:"Lato","proxima-nova","Helvetica Neue",Arial,sans-serif;
+}
+
+.footnum:before, .footref:before{
+    content:"[";
+}
+
+.footnum:after, .footref:after{
+    content:"]";
+}
+
+
+// Footer
+#footnotes{
+    border-top:1px solid #e1e4e5;
+    padding-top: 36px;
+
+    // Individual Foot Div
+    div.footdef {
+        display: flex;
+
+        // Foot Number
+        sup {
+            line-height: 1;
+            padding: 8px;
+            top: 0;
+        }
+
+        // Foot Text Div
+        div.footpara {
+            margin: 0;
+            padding: 0;
+
+            // Foot Text
+            p {
+                color: #999;
+                font-size: 90%;
+                font-family:"Lato","proxima-nova","Helvetica Neue",Arial,sans-serif;
+                padding: 8px;
+                line-height: 1.25em;
+                margin: 0;
+            }
+        }
+    }
+}
+
+// Do not display the footnote Heading
+h2.footnotes{
+    display:none;
+}
diff --git a/scss/style.scss b/scss/style.scss
index 2343b30..32f3413 100644
--- a/scss/style.scss
+++ b/scss/style.scss
@@ -7,6 +7,7 @@
 @import 'partials/_postamble.scss';
 @import 'partials/_print.scss';
 
+@import 'partials/_footnotes.scss';
 @import 'partials/_lists.scss';
 @import 'partials/_boxes.scss';
 @import 'partials/_codes.scss';