From 517cf40105f0b79ebee92c90db10025f4978653e Mon Sep 17 00:00:00 2001
From: Leilukin <contact@leilukin.com>
Date: Tue, 11 Jun 2024 02:07:28 +0800
Subject: [PATCH] Add arrow decorations to footer's back to top link

---
 src/_includes/global/footer.njk | 20 +++++++++++++++++++-
 1 file changed, 19 insertions(+), 1 deletion(-)

diff --git a/src/_includes/global/footer.njk b/src/_includes/global/footer.njk
index b34859af..adbcbe6f 100644
--- a/src/_includes/global/footer.njk
+++ b/src/_includes/global/footer.njk
@@ -13,7 +13,7 @@
         </nav>
     {%- endif -%}
 
-    <p><a href="#page-top">Back to Top 🡱</a></p>
+    <p><a class="footer__top-link" href="#page-top">Back to Top</a></p>
     {%- include "global/top-btn.njk" %}
 </footer>
 
@@ -55,6 +55,24 @@
         justify-self: center;
     }
 
+    .footer__top-link::before,
+    .footer__top-link::after {
+        --arrow-margin: 0.3em;
+        content: "";
+        display: inline-block;
+        border-bottom: 0.6rem solid currentColor;
+        border-left: 0.4rem solid transparent;
+        border-right: 0.4rem solid transparent;
+    }
+
+    .footer__top-link::before {
+        margin: 0 var(--arrow-margin) 0 0;
+    }
+
+    .footer__top-link::after {
+        margin: 0 0 0 var(--arrow-margin);
+    }
+
     /* Screen sizes larger than mobile */
     @media only screen and (min-width: 30rem) {
         .footer {