<template>
  <prose>
    <welcome>
      <template #main>Sebin Nyshkim</template>
      <template #sub>Character Reference Page</template>
    </welcome>

    <h3>Welcome to Sebin's Ref Page</h3>
    <p>
      Want to learn more about this handsome dragon? You've come to the right
      place!
    </p>

    <p>
      Or if you just want to download the complete ref sheet you can do so here:
    </p>

    <div class="btn-group flex flex--row flex--wrap">
      <btn href="/sebin-ref-full-SFW-hires.jpg">
        Download SFW Refsheet (10 MB) ⬇️
      </btn>
      <btn href="/sebin-ref-full-NSFW-hires.jpg">
        Download NSFW Refsheet (10,2 MB) ⬇️
      </btn>
    </div>
  </prose>
</template>

<script>
import Prose from "@/components/Prose.vue";
import Welcome from "@/components/Welcome.vue";
import btn from "@/components/Button.vue";

export default {
  name: "Home",
  components: { Prose, Welcome, btn },
};
</script>

<style lang="scss">
@import "@/scss/_mixins.scss";

.btn-group {
  justify-content: space-evenly;

  .btn {
    flex: 1 0 100%;

    margin: 1em 0;

    @include mq-desktop {
      flex: 0 0 auto;
    }
  }
}
</style>
