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

<section>
  <h1><b title="Sludge">S</b>&amp;<b title="Friends">F</b></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="https://plotters.sludge.link"><h2>Plotters</h2></a>
      <p>
        This is a game we slapped together to see if we can agree on things. Its
        definitely not the same as some of those other games
      </p>
    </div>
  </div>
</section>

<style lang="scss">
  section {
    max-width: 60rem;
    margin: 1rem auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    div {
      display: flex;
      flex-direction: column;
      gap: 1rem;
      a:hover {
        color: var(--primary-3);
      }
      div {
        background: var(--primary-8);
        padding: 2rem 1.5rem;
        border-radius: var(--br);
        max-width: 40rem;
      }
    }
    h1 {
      line-height: 5rem;
      font-size: 1.5rem;
      text-align: center;
      text-justify: center;
      b {
        font-family: Initials;
        font-weight: 500;
        font-size: 3.5rem;
        padding: 0.5rem;
      }
    }
    h3 {
      // color: oklch(from var(--primary-4) calc(l + 0.2) c h);
      color: var(--primary-9);
      font-size: 0.75rem;
    }
    h2 {
      // line-height: 2rem;
      font-size: 1.5rem;
      color: inherit;
    }
  }
</style>
