| Samuel Shuert | 86826b8 | 2024-04-27 16:14:20 -0400 | [diff] [blame] | 1 | --- |
| 2 | import BaseHead from '../components/BaseHead.astro'; |
| Samuel Shuert | 86826b8 | 2024-04-27 16:14:20 -0400 | [diff] [blame] | 3 | import Footer from '../components/Footer.astro'; |
| 4 | import { SITE_TITLE, SITE_DESCRIPTION } from '../consts'; |
| Samuel Shuert | 3963283 | 2024-04-29 20:54:19 -0400 | [diff] [blame^] | 5 | import { getCollection } from 'astro:content'; |
| 6 | import FormattedDate from '../components/FormattedDate.astro'; |
| 7 | |
| 8 | const posts = (await getCollection('blog')).sort( |
| 9 | (a, b) => a.data.pubDate.valueOf() - b.data.pubDate.valueOf() |
| 10 | ); |
| Samuel Shuert | 86826b8 | 2024-04-27 16:14:20 -0400 | [diff] [blame] | 11 | --- |
| 12 | |
| 13 | <!doctype html> |
| 14 | <html lang="en"> |
| 15 | <head> |
| 16 | <BaseHead title={SITE_TITLE} description={SITE_DESCRIPTION} /> |
| 17 | </head> |
| Samuel Shuert | 3963283 | 2024-04-29 20:54:19 -0400 | [diff] [blame^] | 18 | <body class="bg-mantle px-72 min-h-dvh flex flex-col max-md:px-4 transition-all"> |
| 19 | <div class="w-full min-h-[90vh]"> |
| 20 | <nav class="bg-mantle flex justify-center py-2 h-12"> |
| 21 | <div class="flex flex-col items-center group"> |
| 22 | <a href="/" class="text-text cursor-pointer hover:bg-surface0 rounded px-4 transition-colors"> |
| 23 | Home |
| 24 | </a> |
| 25 | <div class="bg-text h-[2px] w-8 -mt-1 rounded-full group-hover:w-10 transition-all" /> |
| 26 | </div> |
| 27 | </nav> |
| 28 | <main class="w-full bg-mantle mt-6 h-full"> |
| 29 | <section id="posts" class="flex justify-center rounded-2xl min-h-full"> |
| 30 | <div class="flex flex-wrap gap-4 m-0 p-0 w-full min-h-full"> |
| 31 | { |
| 32 | posts.map((post) => ( |
| 33 | <a href={`/blog/${post.slug}/`} class=" |
| 34 | min-w-72 |
| 35 | w-[calc(25%-0.75rem)] text-lg bg-base p-4 rounded-2xl |
| 36 | first:w-[calc(50%-0.5rem)] first:text-center first:text-2xl |
| 37 | first:max-md:text-lg first:max-md:text-left first:max-md:w-full first:max-md:h-auto |
| 38 | hover:bg-surface0 hover:-translate-y-2 transition-all |
| 39 | max-md:w-full"> |
| 40 | <h4 class="text-text">{post.data.title}</h4> |
| 41 | <p class="text-subtext0"> |
| 42 | <FormattedDate date={post.data.pubDate} /> |
| 43 | </p> |
| 44 | </a> |
| 45 | )) |
| 46 | } |
| 47 | </div> |
| 48 | </section> |
| 49 | </main> |
| 50 | </div> |
| Samuel Shuert | 86826b8 | 2024-04-27 16:14:20 -0400 | [diff] [blame] | 51 | <Footer /> |
| 52 | </body> |
| 53 | </html> |