refactor: extract back-link component, update scroll behavior, and implement writing index page layout

app/assets/css/main.css

@@ -46,7 +46,8 @@ body {
     margin: 0;
     padding: 0;
     background: var(--bg);
-    overscroll-behavior: none;
+    overscroll-behavior-y: none;
+    overscroll-behavior-x: auto;
 }
 
 body {
@@ -79,3 +80,20 @@ body {
     color: #000;
 }
 
+.back-link {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    font-size: small;
+    color: var(--text);
+    text-decoration: none;
+    transition: opacity 0.2s ease;
+}
+
+.back-link .arrow {
+    transition: transform 0.2s ease;
+}
+
+.back-link:hover .arrow {
+    transform: translateX(-4px);
+}

app/pages/writing/[...slug].vue

@@ -26,7 +26,11 @@ definePageMeta({
     >
         <template #header-upper>
             <div class="header-upper-inner">
-                <NuxtLink to="/writing" class="back-link" aria-label="Back to writing">
+                <NuxtLink
+                    to="/writing"
+                    class="back-link"
+                    aria-label="Back to writing"
+                >
                     <span class="arrow">←</span>
                     <span>Back</span>
                 </NuxtLink>
@@ -44,24 +48,6 @@ definePageMeta({
     padding: 0 2rem;
 }
 
-.back-link {
-    display: flex;
-    align-items: center;
-    gap: 0.5rem;
-    font-size: small;
-    color: var(--text);
-    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 {
     padding: 2rem;
 }

app/pages/writing/index.vue

@@ -5,5 +5,32 @@ const { data: pages } = await useAsyncData('writing-pages', () =>
 </script>
 
 <template>
-    <NuxtLayout name="main"> </NuxtLayout>
+    <NuxtLayout
+        name="main"
+        title="Writing"
+        description="Some thoughts I've had over the years. Not all of them are good, but here we are."
+    >
+        <template #header-upper>
+            <div class="header-upper-inner">
+                <NuxtLink to="/" class="back-link" aria-label="Back to Home">
+                    <span class="arrow">←</span>
+                    <span>Home</span>
+                </NuxtLink>
+            </div>
+        </template>
+        <section>
+            <a v-for="page in pages" :href="page.path" :key="page.path">
+                {{ page.title }}
+            </a>
+        </section>
+    </NuxtLayout>
 </template>
+
+<style scoped>
+.header-upper-inner {
+    display: flex;
+    align-items: center;
+    height: 100%;
+    padding: 0 2rem;
+}
+</style>