chess board

src/routes/+layout.svelte

@@ -6,5 +6,6 @@
 </script>
 
 <svelte:head><link rel="icon" href={favicon} /></svelte:head>
-
+<div class="flex justify-center items-center min-h-full">
-{@render children()}
+  {@render children()}
+</div>

src/routes/+page.svelte

@@ -1,2 +1,13 @@
-<h1>Welcome to SvelteKit</h1>
+<script lang="ts">
-<p>Visit <a href="https://svelte.dev/docs/kit">svelte.dev/docs/kit</a> to read the documentation</p>
+  const board = new Array(8**2);
+</script>
+
+<div class="grid grid-cols-8 gap-0 border-2">
+  {#each board as info, index}
+    <div class="h-20 aspect-square flex justify-center items-center
+      {index % 2 === Math.floor(index / 8) % 2 ? 'bg-stone-200 text-stone-800' : 'bg-stone-800 text-stone-200'}
+    ">
+      {index}
+    </div>
+  {/each}
+</div>

src/routes/layout.css

@@ -1 +1,4 @@
 @import 'tailwindcss';
+
+html, body { @apply h-full; }
+body { @apply bg-gray-900 text-gray-100; }