From bd51538b13f5afa1ee5a24c75a4743b5b09a7d64 Mon Sep 17 00:00:00 2001
From: Arthur DANJOU <arthurdanjou@outlook.fr>
Date: Sun, 10 Sep 2023 16:59:50 +0200
Subject: [PATCH] Fix writing main page

---
 src/pages/writing/index.vue | 64 ++++++++++++++++++-------------------
 1 file changed, 32 insertions(+), 32 deletions(-)

diff --git a/src/pages/writing/index.vue b/src/pages/writing/index.vue
index 3e764df..8e9601c 100644
--- a/src/pages/writing/index.vue
+++ b/src/pages/writing/index.vue
@@ -20,40 +20,40 @@ const { data: posts } = await usePosts()
           All my thoughts on programming, mathematics, artificial intelligence design, etc., are put together in chronological order. I also write about my projects, my discoveries, and my thoughts. <s>It is sometimes updated.</s>
         </p>
       </div>
-      <div class="mt-16 md:mt-20">
-        <div class="md:border-l md:border-zinc-100 md:pl-6 md:dark:border-zinc-700/40">
-          <div class="flex max-w-3xl flex-col space-y-16">
-            <article v-for="post in posts" :key="post.slug" class="group md:grid md:grid-cols-4 md:items-baseline">
-              <div class="md:col-span-3 group relative flex flex-col items-start">
-                <h2 class="text-base font-semibold tracking-tight text-zinc-800 dark:text-zinc-100">
-                  <div class="absolute -inset-y-6 -inset-x-4 z-0 scale-95 bg-zinc-50 opacity-0 transition group-hover:scale-100 group-hover:opacity-100 dark:bg-zinc-800/50 sm:-inset-x-6 sm:rounded-2xl" />
-                  <NuxtLink :to="post._path">
-                    <span class="absolute -inset-y-6 -inset-x-4 z-20 sm:-inset-x-6 sm:rounded-2xl" />
-                    <span class="relative z-10">
-                      {{ post.title }}
-                    </span>
-                  </NuxtLink>
-                </h2>
-                <time class="md:hidden relative z-10 order-first mb-3 flex items-center text-sm text-zinc-400 dark:text-zinc-500 pl-3.5">
-                  <span class="absolute inset-y-0 left-0 flex items-center">
-                    <span class="h-4 w-0.5 rounded-full bg-zinc-200 dark:bg-zinc-500" />
+    </div>
+    <div class="mt-16 md:mt-20">
+      <div class="md:border-l md:border-zinc-100 md:pl-6 md:dark:border-zinc-700/40">
+        <div class="flex max-w-3xl flex-col space-y-16">
+          <article v-for="post in posts" :key="post.slug" class="px-6 md:grid md:grid-cols-4 md:items-baseline">
+            <div class="group md:col-span-3 group relative flex flex-col items-start">
+              <h2 class="text-base font-semibold tracking-tight text-zinc-800 dark:text-zinc-100">
+                <div class="absolute -inset-y-6 -inset-x-4 z-0 scale-95 bg-zinc-50 opacity-0 transition group-hover:scale-100 group-hover:opacity-100 dark:bg-zinc-800/50 sm:-inset-x-6 md:rounded-2xl" />
+                <NuxtLink :to="post._path">
+                  <span class="absolute -inset-y-6 -inset-x-4 z-20 sm:-inset-x-6 sm:rounded-2xl" />
+                  <span class="relative z-10">
+                    {{ post.title }}
                   </span>
-                  {{ post.publishedAt }}
-                </time>
-                <p class="relative z-10 mt-2 text-sm text-zinc-600 dark:text-zinc-400">
-                  {{ post.description }}
-                </p>
-                <div class="relative z-10 mt-4 flex items-center gap-2 justify-center text-sm font-medium" :class="getColor">
-                  <p>Read article</p>
-                  <UIcon name="i-ph-arrow-circle-right-bold" class="duration-300 group-hover:ml-2" />
-                </div>
-              </div>
-              <time class="mt-1 md:block relative z-10 order-first mb-3 hidden text-sm text-zinc-400 dark:text-zinc-500">
-                <p>{{ post.publishedAt }}</p>
-                <p>{{ post.readingMins }} min.</p>
+                </NuxtLink>
+              </h2>
+              <time class="md:hidden relative z-10 order-first mb-3 flex items-center text-sm text-zinc-400 dark:text-zinc-500 pl-3.5">
+                <span class="absolute inset-y-0 left-0 flex items-center">
+                  <span class="h-4 w-0.5 rounded-full bg-zinc-200 dark:bg-zinc-500" />
+                </span>
+                {{ post.publishedAt }}
               </time>
-            </article>
-          </div>
+              <p class="relative z-10 mt-2 text-sm text-zinc-600 dark:text-zinc-400">
+                {{ post.description }}
+              </p>
+              <div class="relative z-10 mt-4 flex items-center gap-2 justify-center text-sm font-medium" :class="getColor">
+                <p>Read article</p>
+                <UIcon name="i-ph-arrow-circle-right-bold" class="duration-300 group-hover:ml-2" />
+              </div>
+            </div>
+            <time class="mt-1 md:block relative z-10 order-first mb-3 hidden text-sm text-zinc-400 dark:text-zinc-500">
+              <p>{{ post.publishedAt }}</p>
+              <p>{{ post.readingMins }} min.</p>
+            </time>
+          </article>
         </div>
       </div>
     </div>