arthur/website
1
0
Fork 0
mirror of https://github.com/ArthurDanjou/website.git synced 2026-01-14 20:19:35 +01:00
Code Issues Packages Projects Releases Wiki Activity

Fix writing main page

Browse Source
This commit is contained in:
Arthur Danjou
2023-09-10 16:59:50 +02:00
parent 7cc75c99d6
commit bd51538b13
1 changed files with 32 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files

64
src/pages/writing/index.vue
View File

@@ -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>