From a316c983a6e3118a5278b0522381217f31c7b47c Mon Sep 17 00:00:00 2001
From: Reorx <novoreorx@gmail.com>
Date: Tue, 6 Sep 2022 00:32:41 +0800
Subject: [PATCH] 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 | 54 +++++++++++++++++++++++++++++++
 assets/css/core/theme-vars.css    |  2 ++
 2 files changed, 56 insertions(+)

diff --git a/assets/css/common/post-single.css b/assets/css/common/post-single.css
index b6d2c9f..432e0d1 100644
--- a/assets/css/common/post-single.css
+++ b/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;
+}
diff --git a/assets/css/core/theme-vars.css b/assets/css/core/theme-vars.css
index 2535b99..7980b48 100644
--- a/assets/css/core/theme-vars.css
+++ b/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);