| --- |
| import BaseHead from '../components/BaseHead.astro'; |
| import Footer from '../components/Footer.astro'; |
| import { SITE_TITLE, SITE_DESCRIPTION } from '../consts'; |
| import { getCollection } from 'astro:content'; |
| import FormattedDate from '../components/FormattedDate.astro'; |
| |
| const posts = (await getCollection('blog')).sort( |
| (a, b) => a.data.pubDate.valueOf() - b.data.pubDate.valueOf() |
| ); |
| --- |
| |
| <!doctype html> |
| <html lang="en"> |
| <head> |
| <BaseHead title={SITE_TITLE} description={SITE_DESCRIPTION} /> |
| </head> |
| <body class="bg-mantle px-72 min-h-dvh flex flex-col max-md:px-4 transition-all"> |
| <div class="w-full min-h-[90vh]"> |
| <nav class="bg-mantle flex justify-center py-2 h-12"> |
| <div class="flex flex-col items-center group"> |
| <a href="/" class="text-text cursor-pointer hover:bg-surface0 rounded px-4 transition-colors"> |
| Home |
| </a> |
| <div class="bg-text h-[2px] w-8 -mt-1 rounded-full group-hover:w-10 transition-all" /> |
| </div> |
| </nav> |
| <main class="w-full bg-mantle mt-6 h-full"> |
| <section id="posts" class="flex justify-center rounded-2xl min-h-full"> |
| <div class="flex flex-wrap gap-4 m-0 p-0 w-full min-h-full"> |
| { |
| posts.map((post) => ( |
| <a href={`/blog/${post.slug}/`} class=" |
| min-w-72 |
| w-[calc(25%-0.75rem)] text-lg bg-base p-4 rounded-2xl |
| first:w-[calc(50%-0.5rem)] first:text-center first:text-2xl |
| first:max-md:text-lg first:max-md:text-left first:max-md:w-full first:max-md:h-auto |
| hover:bg-surface0 hover:-translate-y-2 transition-all |
| max-md:w-full"> |
| <h4 class="text-text">{post.data.title}</h4> |
| <p class="text-subtext0"> |
| <FormattedDate date={post.data.pubDate} /> |
| </p> |
| </a> |
| )) |
| } |
| </div> |
| </section> |
| </main> |
| </div> |
| <Footer /> |
| </body> |
| </html> |