---
layout: base.webc
---

<popup-modal id="nsfw-warning" :open="isOpen">
  <template webc:nokeep slot="heading"> 🔞 Whoa, Nelly! 🔞 </template>
  <template webc:nokeep slot="message">
    <p>Entering the kinky zone!</p>
    <p>You confirm that you are of legal age to view adult content!</p>
  </template>
</popup-modal>

<icon-sprite></icon-sprite>

<main :class="firstName.toLowerCase()">
  <profile>
    <eleventy-image
      slot="avatar"
      :src="`src/img/${firstName.toLowerCase()}/avatar.png`"
      :alt="firstName + ' Avatar'"
      :width="[100, 200, 300, 400, 500, 600]"
      sizes="(min-width: 120em) 250px, (min-width: 64em) 200px, 100px"
    ></eleventy-image>
    <template webc:nokeep slot="credit">
      &copy; <a :href="$data.avatar.href" target="_blank" @text="$data.avatar.artist"></a>
    </template>
    <template webc:nokeep slot="name" @text="fullName"></template>
    <template webc:nokeep slot="species" @text="species"></template>
    <traits :@traits="$data.getTraits()"></traits>
  </profile>

  <page-content :@char="$data.firstName.toLowerCase()">
    <h1 @text="$data.title || $data.eleventyNavigation.key"></h1>
    <template @raw="content" webc:nokeep></template>
  </page-content>

  <page-footer></page-footer>
</main>

<style>
  main {
    --inbox-spacing: 1rem;

    display: grid;
    justify-content: center;
    justify-items: center;
    align-items: start;
    gap: 1em;
    grid-auto-columns: 100%;
    grid-template-areas:
      'info'
      'content'
      'footer';

    margin-block: var(--container-spacing-top-safe) var(--container-spacing-bottom-safe);
    margin-inline: var(--container-spacing-left-safe) var(--container-spacing-right-safe);

    margin-block: var(--page-spacing);

    @media (min-width: 64em) {
      --inbox-spacing: 1.5rem;

      grid-auto-columns: revert;
      grid-template-columns: 18em minmax(0, 65ch);
      grid-template-areas:
        'info content'
        '. footer';
    }
  }

  h1 {
    margin-inline: var(--inbox-spacing);
  }

  footer {
    --columns: 1fr;

    grid-area: footer;
    display: grid;
    grid-template-columns: var(--columns);
    gap: 1em;
    width: 100%;
    max-width: 65ch;
    padding-inline: var(--inbox-spacing);

    @media (min-width: 35em) {
      --columns: repeat(2, 1fr);
    }
  }

  footer p {
    --text-align: center;

    margin: 0;
    text-align: var(--text-align);

    @media (min-width: 35em) {
      margin: revert;
    }
  }

  footer p:first-child {
    text-align: var(--text-align);

    @media (min-width: 35em) {
      --text-align: start;
    }
  }

  footer p:last-child {
    text-align: var(--text-align);

    @media (min-width: 35em) {
      --text-align: end;
    }
  }
</style>