enhance footnotes and sup style

- smaller footnotes in a colored box
- highlight anchor of both footnote links and sups
- sups are surrounded with brackets, imitate wikipedia

assets/css/common/post-single.css

@@ -269,6 +269,24 @@ h6:hover .anchor {
 .post-content sup {
     line-height: 1;
 }
+.post-content sup a {
+    box-shadow: none;
+    font-family: Helvetica, Arial, sans-serif;
+    color: var(--link-hover-color);
+}
+.post-content sup a:hover {
+    box-shadow: none;
+    text-decoration: underline;
+}
+.post-content sup a:before {
+    content: "[";
+}
+.post-content sup a:after {
+    content: "]";
+}
+.post-content sup:target {
+    background-color: var(--link-background-color);
+}
 
 .post-content hr {
     margin: 30px 0;
@@ -573,3 +591,39 @@ h6:hover .anchor {
     font-weight: bold;
     vertical-align: super;
 }
+
+.footnotes {
+    font-size: .8em;
+    color: var(--primary-dim);
+    font-weight: 400;
+    padding: 1em;
+    background-color: var(--code-bg);
+}
+
+.footnotes a {
+    color: var(--primary-dim);
+    font-weight: 400;
+}
+
+.footnotes hr {
+    display: none;
+}
+.footnotes ol {
+    margin: 0;
+}
+.footnotes ol li {
+    margin: 0 0 6px 0;
+}
+.footnotes ol li p {
+    line-height: 1.5em;
+    margin: 0;
+}
+.footnotes ol li:target p {
+    background-color: var(--link-background-color);
+}
+.footnotes ol:before {
+    content: "Footnotes";
+    font-size: 1.5em;
+    margin-left: -1em;
+    font-weight: 200;
+}

assets/css/core/theme-vars.css

@@ -11,6 +11,7 @@
     --theme: rgb(255, 255, 255);
     --entry: rgb(255, 255, 255);
     --primary: rgb(30, 30, 30);
+    --primary-dim: rgb(60, 60, 60);
     --secondary: rgb(108, 108, 108);
     --tertiary: rgb(158, 158, 158);
     --tertiary-bg: rgb(214, 214, 214);
@@ -31,6 +32,7 @@
     --theme: rgb(29, 30, 32);
     --entry: rgb(46, 46, 51);
     --primary: rgb(218, 218, 219);
+    --primary-dim: rgb(186, 186, 186);
     --secondary: rgb(155, 156, 157);
     --tertiary: rgb(123, 124, 124);
     --tertiary-bg: rgb(65, 66, 68);