From 7bca60b674e65dce85b955a343da0a8ba0124f94 Mon Sep 17 00:00:00 2001
From: Jaron <jaron@ed.link>
Date: Wed, 29 Apr 2026 23:32:41 -0500
Subject: [PATCH] feat: improve back link UI with arrow transition and styling
 updates

---
 app/pages/writing/[...slug].vue | 23 ++++++++++++++++++-----
 1 file changed, 18 insertions(+), 5 deletions(-)

diff --git a/app/pages/writing/[...slug].vue b/app/pages/writing/[...slug].vue
index ad59b6a..a35f30a 100644
--- a/app/pages/writing/[...slug].vue
+++ b/app/pages/writing/[...slug].vue
@@ -26,7 +26,10 @@ definePageMeta({
     >
         <template #header-upper>
             <div class="header-upper-inner">
-                <NuxtLink href="/writing"><-- Back</NuxtLink>
+                <NuxtLink to="/writing" class="back-link" aria-label="Back to writing">
+                    <span class="arrow">←</span>
+                    <span>Back</span>
+                </NuxtLink>
             </div>
         </template>
         <ContentRenderer class="writing__content" v-if="page" :value="page" />
@@ -37,16 +40,26 @@ definePageMeta({
 .header-upper-inner {
     display: flex;
     align-items: center;
-    gap: 1rem;
     height: 100%;
     padding: 0 2rem;
 }
 
-.header-upper-inner a {
+.back-link {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
     font-size: small;
     color: var(--text);
-    text-decoration: underline;
-    text-underline-offset: 4px;
+    text-decoration: none;
+    transition: opacity 0.2s ease;
+}
+
+.back-link .arrow {
+    transition: transform 0.2s ease;
+}
+
+.back-link:hover .arrow {
+    transform: translateX(-4px);
 }
 
 .writing__content {