<script lang="ts">
  import Link from "./Link.svelte";
  import SectionTitle from "./SectionTitle.svelte";
</script>

<SectionTitle title="attributions"
  >credits and sources for the content in this page</SectionTitle
>

<div
  class="grid grid-cols-1 md:grid-cols-3 w-full gap-4
  place-items-stretch place-content-stretch"
>
  <fieldset
    class="fieldset bg-base-200 border-neutral
	rounded-box border-2 p-4"
  >
    <legend class="text-xl md:text-2xl">stack</legend>
    <ul class="text-md md:text-lg">
      <li><Link href="https://svelte.dev">Svelte</Link></li>
      <li>
        <Link href="https://daisyui.com">daisyUI</Link>
      </li>
      <li><Link href="https://tailwindcss.com">tailwindcss</Link></li>
    </ul>
  </fieldset>
  <fieldset
    class="fieldset bg-base-200 border-neutral
	rounded-box border-2 p-4"
  >
    <legend class="text-xl md:text-2xl">fonts</legend>
    <ul class="text-md md:text-lg">
      <li><Link href="https://www.departuremono.com">DEPARTURE MONO</Link></li>
      <li>
        <Link href="https://www.jetbrains.com/lp/mono">JetBrains Mono</Link>
      </li>
      <li><Link href="https://github.com/IBM/plex">IBM Plex Mono</Link></li>
    </ul>
  </fieldset>
  <fieldset
    class="fieldset bg-base-200 border-neutral
	rounded-box border-2 p-4"
  >
    <legend class="text-xl md:text-2xl">assets</legend>
    <ul class="text-md md:text-lg">
      <li>
        <Link href="https://www.emoji.family/api/emojis/1f431/noto/svg"
          >Noto cat emoji</Link
        >
      </li>
      <li>
        <Link href="https://iconify.design">iconify</Link>
      </li>
    </ul>
  </fieldset>
</div>
