index.astro

---
import ShoelaceLayout from "../layouts/ShoelaceLayout.astro";
import CardGrid from "../components/CardGrid.astro";
---

<ShoelaceLayout title="Signals">
  <header>
    <h1>Signals</h1>
  </header>
  <main>
    <CardGrid>
      <sl-card>
        <h2>Web App</h2>
         Minimal layout, with support for Shoelace components.
        <sl-button slot="footer" variant="primary" outline href="./webapp"
          >Demo</sl-button
        >
      </sl-card>
      <sl-card>
        <h2>Small Signals Demo</h2>
         Minimal layout, with support for Shoelace components.
        <sl-button slot="footer" variant="primary" outline href="./smalldemo"
          >Demo</sl-button
        >
      </sl-card>
    </CardGrid>
  </main>
</ShoelaceLayout>

<style>
  header,
  main {
    margin: auto;
    width: 1024px;
    padding: 1rem;
    max-width: calc(100% - 2rem);
  }
  h1 {
    font-size: 4rem;
    font-weight: 700;
    line-height: 1;
    text-align: left;
    margin: var(--sl-spacing-4x-large) 0 var(--sl-spacing-3x-large);
  }
</style>