From c5072e85a47e1c30385ebd82e2664322cbfb2a00 Mon Sep 17 00:00:00 2001
From: Helen Chong <119173961+helenclx@users.noreply.github.com>
Date: Sat, 6 Jul 2024 21:04:30 +0800
Subject: [PATCH] Replace back to top lnk arrow icon

---
 src/_includes/global/top-btn.njk | 25 +++++++++++++------------
 1 file changed, 13 insertions(+), 12 deletions(-)

diff --git a/src/_includes/global/top-btn.njk b/src/_includes/global/top-btn.njk
index 2196bf50..7b2e5c7c 100644
--- a/src/_includes/global/top-btn.njk
+++ b/src/_includes/global/top-btn.njk
@@ -1,4 +1,9 @@
-<a href="#top" class="top-btn">Back to Top</a>
+<a href="#top" class="top-btn">
+    <svg class="top-btn__arrow" focusable="false" aria-hidden="true" viewBox="0 0 26 28">
+        <path d="M25.172 15.172c0 0.531-0.219 1.031-0.578 1.406l-1.172 1.172c-0.375 0.375-0.891 0.594-1.422 0.594s-1.047-0.219-1.406-0.594l-4.594-4.578v11c0 1.125-0.938 1.828-2 1.828h-2c-1.062 0-2-0.703-2-1.828v-11l-4.594 4.578c-0.359 0.375-0.875 0.594-1.406 0.594s-1.047-0.219-1.406-0.594l-1.172-1.172c-0.375-0.375-0.594-0.875-0.594-1.406s0.219-1.047 0.594-1.422l10.172-10.172c0.359-0.375 0.875-0.578 1.406-0.578s1.047 0.203 1.422 0.578l10.172 10.172c0.359 0.375 0.578 0.891 0.578 1.422z"></path>
+    </svg>
+    Back to Top
+</a>
 
 <style>
     .top-btn,
@@ -15,10 +20,10 @@
 
         background-color: var(--clr-top-btn-bg);
         display: flex;
-        justify-content: center;
         align-items: center;
         border-radius: 50em;
         padding: 0.3em 0.5em;
+        gap: 0.2em;
     }
 
     .top-btn:focus {
@@ -26,16 +31,12 @@
         outline-offset: 0.15em;
     }
 
-    .top-btn::before {
-        --arrow-margin: 0.3em;
-        content: "";
+    .top-btn__arrow {
         display: inline-block;
-        border-bottom: 0.6rem solid currentColor;
-        border-left: 0.4rem solid transparent;
-        border-right: 0.4rem solid transparent;
-    }
-
-    .top-btn::before {
-        margin: 0 var(--arrow-margin) 0 0;
+        width: 1em;
+        aspect-ratio: 1 / 1;
+        stroke-width: 0;
+        stroke: currentColor;
+        fill: currentColor;
     }
 </style>
\ No newline at end of file