jaron/folio
1
0
Fork 0
mirror of https://github.com/jaronpate/folio.git synced 2026-10-19 01:07:39 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: improve back link UI with arrow transition and styling updates

Browse Source
This commit is contained in:
Jaron
2026-04-29 23:32:41 -05:00
parent 9a42d0c5a6
commit 7bca60b674
1 changed files with 18 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/pages/writing/[...slug].vue
+18 -5
View File
@@ -26,7 +26,10 @@ definePageMeta({
> >
<template #header-upper> <template #header-upper>
<div class="header-upper-inner"> <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> </div>
</template> </template>
<ContentRenderer class="writing__content" v-if="page" :value="page" /> <ContentRenderer class="writing__content" v-if="page" :value="page" />
@@ -37,16 +40,26 @@ definePageMeta({
.header-upper-inner { .header-upper-inner {
display: flex; display: flex;
align-items: center; align-items: center;
gap: 1rem;
height: 100%; height: 100%;
padding: 0 2rem; padding: 0 2rem;
} }
.header-upper-inner a { .back-link {
display: flex;
align-items: center;
gap: 0.5rem;
font-size: small; font-size: small;
color: var(--text); color: var(--text);
text-decoration: underline; text-decoration: none;
text-underline-offset: 4px; transition: opacity 0.2s ease;
}
.back-link .arrow {
transition: transform 0.2s ease;
}
.back-link:hover .arrow {
transform: translateX(-4px);
} }
.writing__content { .writing__content {