<script lang="ts">
  let { data, form } = $props<{ html: string }>();
</script>

<svelte:head>
  <title>Sludge and Link</title>
  <meta name="description" content="Sludge's internet facing spot" />
</svelte:head>

<section>
  <h1><b>S</b>ludge and <b>F</b>riends</h1>
  <h3>Here we make friends and mistakes</h3>
  <div>
    <div>
      <a href="/fest"><h2>Sludge Fest</h2></a>
      <p>
        Sludge Fest is a homegrown music festival of friends and fuckery; come
        join us for a fun weekend out and make some memories
      </p>
    </div>
    <div>
      <a href="/pork"><h2>Pork</h2></a>
      <p>
        I made the mistake of getting hogs that are better at their job than I
        am so please take some of it off my hands
      </p>
    </div>
    <div>
      <a href="/blag"><h2>Blag</h2></a>
      <p>
        There is nothing of value here, I like misspelling things and also for
        some reason building my own versions of things that other people have
        perfected
      </p>
    </div>
  </div>
</section>

<style lang="scss">
  @use "/src/app.scss" as *;
  @use "sass:color";

  section {
    max-width: 60rem;
    margin: 1rem auto 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    h1 {
      font-size: 1.5rem;
      b {
        font-family: Initials;
        font-weight: 500;
        font-size: 4.5rem;
      }
    }
    h3 {
      color: color.scale($yellow, $alpha: -35%);
      font-size: 0.75rem;
    }
  }
</style>
