<script lang="ts">
  export let data;
</script>

<svelte:head>
  <title>Блог о программировании и около | Анатолий Копыл</title>
</svelte:head>

<section class="px-2 md:px-8 mb-16 mx-auto">
  <h2 class="text-4xl mb-10 md:text-5xl">
    Статьи
  </h2>

  <div class="flex flex-col gap-8">
    {#each data.posts as post}
      <a
        href={post.href}
        class="card bg-slate-800 p-6 rounded-xl hover:bg-slate-700"
      >
        <div class="text-sm">{post.date}</div>
        <h4 class="text-2xl md:text-3xl">{@html post.title}</h4>
      </a>
    {/each}
  </div>
</section>

<style lang="postcss">
  .card {
    text-decoration: none;
  }
</style>
