~repos /website

---
import { getCollection } from "astro:content";
import FormattedDate from "../../components/FormattedDate.astro";
import Layout from "@/layouts/BaseLayout.astro";

const posts = (await getCollection("content")).sort(
  (a, b) => b.data.pubDate.valueOf() - a.data.pubDate.valueOf()
);
---

<Layout title="Posts" description="Posts">
  <h1>Posts</h1>
  <div class="container">
    <ul>
      {
        posts.map((post) => (
          <li>
            <div class="content">
              <a href={`/posts/${post.id}`}>{post.data.title}</a>
              <span class="description">{post.data.description}</span>
            </div>
            <span class="date-wrapper">
              <FormattedDate date={post.data.pubDate} />
            </span>
          </li>
        ))
      }
    </ul>
  </div>
</Layout>
<style>
  h1 {
    display: flex;
    align-items: flex-start;
    font-weight: 800;
    font-size: 2rem;
  }

  .container {
    display: flex;
    float: left;
  }

  ul {
    display: flex;
    flex-direction: column;

    li {
      display: grid;
      grid-template-columns: repeat(1, minmax(0, 1fr));
      gap: 0.4rem;
      justify-items: start;
      align-items: end;
      margin-top: 1.25rem;
      line-height: 1.5rem;

      @media (min-width: 640px) {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.75rem;
      }

      a {
        font-size: 1.1rem;
        color: var(--color-post-link);
        text-decoration-line: underline;
        text-underline-offset: 4px;
      }

      time {
        font-size: 1.1rem;
      }

      .content {
        display: flex;
        flex-direction: column;
      }

      .description {
        font-size: 13pt;

        &:hover {
          cursor: default;
        }
      }

      .date-wrapper {
        display: flex;
        flex: 1;
        justify-content: flex-end;
        font-size: 1rem;
        line-height: 1.5rem;
        @media (min-width: 640px) {
          margin-left: 1rem;
        }
      }
    }
  }
</style>