<script>
  const { children } = $props()
</script>

<svelte:head>
  <title>Dithering Tool | thomaswilson.xyz</title>
</svelte:head>

<main class="page-dither">
  <h1 class="page-dither__title">Image Dither Tool</h1>
  <p class="page-dither__about">
    In-browser, privacy respecting image dithering tool.
  </p>
  {@render children()}
</main>

<style>
  .page-dither {
    display: flex;
    flex-direction: column;
    min-height: 100dvh;
    background: var(--gray-1000);
  }

  .page-dither__title {
    font-size: 3rem;
    font-family: sans-serif;
  }
</style>
