From 8611f00cf40b10aae4994097a3779c8823e10f6e Mon Sep 17 00:00:00 2001
From: Cell <1024@lruihao.cn>
Date: Mon, 9 Oct 2023 18:00:26 +0800
Subject: [PATCH] :lipstick: Style: update footnote and footnote-ref style

---
 CHANGELOG.md                  |  1 +
 assets/css/_mixin/_link.scss  | 10 +++++++--
 assets/css/_page/_single.scss | 41 +++++++++++++++++++++++++++++------
 3 files changed, 43 insertions(+), 9 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 81b1dd0f3..2446922f8 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -8,6 +8,7 @@ All notable changes to this project will be documented in this file.
 - :sparkles: Feat: add code block attributes support ([#330](https://github.com/hugo-fixit/FixIt/issues/330))
 - :bug: Fix: use dateFormat function to render localized dates (@stefanoginobili [#355](https://github.com/hugo-fixit/FixIt/pull/355))
 - :lipstick: Style: update define list style
+- :lipstick: Style: update footnote and footnote-ref style
 
 ## v0.2.18 [2023.3.31]
 
diff --git a/assets/css/_mixin/_link.scss b/assets/css/_mixin/_link.scss
index e2b9b7d86..c7314abad 100644
--- a/assets/css/_mixin/_link.scss
+++ b/assets/css/_mixin/_link.scss
@@ -1,8 +1,14 @@
-@mixin link($light, $dark) {
+/**
+ * Link mixin
+ * @param {Boolean} $light use global link color
+ * @param {Boolean} $dark use global link color dark
+ * @param {String} $decoration text-decoration, default none
+ */
+@mixin link($light, $dark, $decoration: none) {
   a,
   a::before,
   a::after {
-    text-decoration: none;
+    text-decoration: $decoration;
 
     @if $light {
       color: $global-link-color;
diff --git a/assets/css/_page/_single.scss b/assets/css/_page/_single.scss
index 0e52a181d..eea5442dd 100644
--- a/assets/css/_page/_single.scss
+++ b/assets/css/_page/_single.scss
@@ -348,11 +348,40 @@
       @include link(false, true);
     }
 
+    sup[id^='fnref:']:has(.footnote-ref) {
+      padding: 2px 4px;
+      background-color: rgba(238, 238, 238, 0.7);
+      color: #555555;
+      border-radius: 4px;
+      cursor: pointer;
+
+      [data-theme='dark'] & {
+        background-color: rgba(56, 139, 253, 0.1);
+        color: #58a6ff;
+      }
+
+      @include link(true, false);
+    }
+
     .footnotes {
-      color: $global-font-secondary-color;
+      font-size: 0.75rem;
+      white-space: normal;
+      color: darken($global-font-secondary-color, 5%);
+
+      ol {
+        margin-block: 1em;
+        padding-left: 1rem;
+      }
+
+      a:not(.footnote-backref) {
+        color: inherit;
+        text-decoration: underline;
+      }
+
+      @include link(false, true);
 
       [data-theme='dark'] & {
-        color: $global-font-secondary-color-dark;
+        color: lighten($global-font-secondary-color-dark, 5%);
       }
 
       p {
@@ -364,13 +393,13 @@
     @import '../_shortcodes';
 
     hr {
-      margin: 1rem 0;
+      margin-block: 1em;
       position: relative;
-      border-top: 1px dashed $global-border-color;
+      border-top: 1px dashed darken($global-border-color, 5%);
       border-bottom: none;
 
       [data-theme='dark'] & {
-        border-top: 1px dashed $global-border-color-dark;
+        border-top: 1px dashed lighten($global-border-color-dark, 5%);
       }
     }
 
@@ -379,7 +408,6 @@
       padding: 0 0.25rem;
       background-color: $global-background-color;
       border: 1px solid $global-border-color;
-      border-bottom-color: $global-border-color;
       font-size: 0.8rem;
       font-family: $code-font-family;
       color: $code-color;
@@ -389,7 +417,6 @@
       [data-theme='dark'] & {
         background-color: $global-background-color-dark;
         border: 1px solid $global-border-color-dark;
-        border-bottom-color: $global-border-color-dark;
         color: $code-color-dark;
         @include box-shadow(inset 0 -1px 0 $global-border-color-dark);
       }