feat: add photo gallery to index and update navigation and styling throughout app

app/pages/writing/index.vue

@@ -8,7 +8,7 @@ const { data: pages } = await useAsyncData('writing-pages', () =>
     <NuxtLayout
         name="main"
         title="Writing"
-        description="Some thoughts I've had over the years. Not all of them are good, but here we are."
+        description="Thoughts I've had here and there. Maybe you'll find something helpful or interesting here."
     >
         <template #header-upper>
             <div class="header-upper-inner">
@@ -19,9 +19,17 @@ const { data: pages } = await useAsyncData('writing-pages', () =>
             </div>
         </template>
         <section>
-            <a v-for="page in pages" :href="page.path" :key="page.path">
-                {{ page.title }}
-            </a>
+            <div class="section__content">
+                <a
+                    v-for="page in pages"
+                    :href="page.path"
+                    :key="page.path"
+                    class="article"
+                >
+                    <h3 class="article__title">{{ page.title }}</h3>
+                    <p class="article__description">{{ page.description }}</p>
+                </a>
+            </div>
         </section>
     </NuxtLayout>
 </template>
@@ -33,4 +41,48 @@ const { data: pages } = await useAsyncData('writing-pages', () =>
     height: 100%;
     padding: 0 2rem;
 }
+
+section > .section__content {
+    padding: 0 2rem;
+}
+
+.article {
+    border-bottom: 1px solid var(--muted);
+    padding: 1rem 0;
+    display: block;
+    text-decoration: none;
+    color: inherit;
+}
+
+.article:first-of-type {
+    padding-top: 0;
+}
+
+.article:last-of-type {
+    padding-bottom: 0;
+}
+
+.article:last-child {
+    border-bottom: none;
+}
+
+.article:hover > .article__title {
+    text-decoration: underline;
+    text-underline-offset: 4px;
+    font-style: italic;
+    font-family: var(--font-hover);
+}
+
+.article__title {
+    margin: 0;
+    font-weight: 400;
+}
+
+.article__description {
+    margin: 0;
+    font-size: small;
+    font-weight: 400;
+    font-style: italic;
+    color: var(--muted);
+}
 </style>