<script setup lang="ts">
import CharacterList from "@/components/CharacterList.vue";
import CharacterItem from "@/components/CharacterItem.vue";
</script>

<template>
  <main>
    <CharacterList>
      <CharacterItem class="viktor" href="/viktor/">
        <template #image>
          <img src="@/assets/viktor-portrait.png" alt="Viktor Portrait" />
        </template>

        <template #name>Viktor Kraastav</template>
        <template #species>Ankylosaurus</template>
      </CharacterItem>

      <CharacterItem class="sebin" href="/sebin/">
        <template #image>
          <img src="@/assets/sebin-portrait.png" alt="Sebin Portrait" />
        </template>

        <template #name>Sebin Nyshkim</template>
        <template #species>Anthro Dragon (main)</template>
      </CharacterItem>

      <CharacterItem class="jarek" href="/jarek/">
        <template #image>
          <img src="@/assets/jarek-portrait.png" alt="Jarek Portrait" />
        </template>

        <template #name>Jarek Vakhtang</template>
        <template #species>Krondir</template>
      </CharacterItem>
    </CharacterList>
  </main>
</template>

<style lang="scss">
.sebin {
  font-family: "Exo", sans-serif;
  font-style: italic;

  &:before {
    background: var(--background--sebin);
  }

  &:after {
    background: url(@/assets/subtle-prism.svg);
    mix-blend-mode: multiply;
  }
}

.viktor {
  font-family: "Secular One", serif;

  &:before {
    background: var(--background--viktor);
  }

  &:after {
    top: unset;

    background: var(--background-image--viktor) no-repeat center bottom;
    background-size: cover;

    height: var(--background-height-base--viktor);

    z-index: 0;
  }

  &:hover:after {
    height: var(--background-height-hover--viktor);
  }

  a {
    color: var(--color-text--viktor);
  }

  img {
    background: var(--image-background--viktor);
  }
}

.jarek {
  font-family: "Rubik Dirt", sans-serif;

  &:before {
    background: var(--background--jarek);
  }
}
</style>
