sebin-reference/src/views/General.vue

<template>
  <nsfw-warning v-show="$root.isWarn">
    <template #heading>
      ⚠️⚠️⚠️<br />
      Whoa, Nelly!
    </template>

    <template #message>
      By enabling NSFW mode you confirm that you are of legal age to view adult
      content.
    </template>

    <template #yes>Yes, show me the goods 👀</template>
    <template #no>NO, STAHP 😱</template>
  </nsfw-warning>

  <prose>
    <h2>General</h2>

    <data-table :dataset="getSebinData.generic" />

    <h3>Personality</h3>

    <quick-facts>
      <ul class="col-2">
        <li>warm-hearted</li>
        <li>caring</li>
        <li>quick to offer help</li>
        <li>devestated when not being able to help</li>
        <li>sociable</li>
        <li>goofball who likes to laugh</li>
        <li>open and honest about his feelings</li>
        <li>confrontative and foul-mouthed when provoked</li>
      </ul>
    </quick-facts>

    <p>
      Sebin is a warm-hearted guy who cares a lot about the well-being of his
      loved ones. Bad vibes rarely escape him and he offers his help without
      hesitation. He also won't avoid difficult conversations in the process.
      Not being able to help a friend in need is synonymous with failing them, a
      realization that can leave him feeling uneasy long after the fact.
    </p>

    <p>
      At the same time, he is very open and honest about his feelings. He does
      not mince words and finds clear words when speaking his mind.
      Unfortunately, Sebin sometimes forgets his good manners in the heat of the
      moment, once he gets invested into a quarrel — especially when it comes to
      topics that are near and dear to his heart. Anyone looking to have a bad
      time can try their luck at pissing him off even once. This includes an
      equally vulgar vocabulary. It is not uncommon to hear him swear.
    </p>

    <p>
      Nevertheless, Sebin strives to put his best foot forward at all times. He
      is of the sociable type and likes to laugh a lot, as he is easily amused.
      Sometimes to a degree where it can become very childish and immature very
      quickly.
    </p>

    <p>
      Physical strength is not the only thing that plays a big role for Sebin.
      He is of a firm believe that a healthy body must also have a healthy mind
      in order to find a balance. But he only came to this realization at the
      end of a rocky road. While a setback in the past could easily throw him
      off track, today he stands much more firmly in life. Not only for his own
      sake, but also to be a kind of anchor for others. He always keeps his
      cool, so he can be a tower of strenth for others.
    </p>

    <h3>Hobbies</h3>

    <quick-facts>
      <ul class="col-4">
        <li v-for="(hobby, idx) in hobbies" :key="idx">
          {{ hobby }}
        </li>
      </ul>
    </quick-facts>

    <p>
      Sebin is passionate about his hobbies. If he notices even the smallest
      spark of interest in his hobbies you should bring a lot of time, as he
      will chew your ear off first. Patience is known to be a virtue — one
      unknown to this dragon.
    </p>

    <p>
      When he indulges in his hobbies, he does so with devotion. Every move has
      to be right and everything has to be in perfect harmony. Once he is in his
      flow, he must not be disturbed, otherwise he can sometimes become quite
      eccentric in expressing his dismay of being disrupted, possibly losing a
      very important train of thought.
    </p>

    <h3>Food &amp; Drink</h3>

    <quick-facts>
      <ul class="col-4">
        <li>sweets</li>
        <li>savory food</li>
        <li>spicy food</li>
        <li>coffee</li>
        <li>beer</li>
        <li>cocktails</li>
        <li>cheese</li>
        <li>sausage</li>
        <li>pancakes</li>
        <li>chicken</li>
        <li>beef</li>
        <li>spaghetti/pasta</li>
      </ul>
    </quick-facts>

    <p>
      Sebin's day starts with a strong cup of black coffee and sandwiches. He's
      also a massive sweet tooth which sounds like a big detriment to his
      fitness routine. That's because it is and it's often very hard for him to
      resist.
    </p>

    <p>
      Besides snacking, Sebin also likes to eat hearty and savory things. He
      doesn't disdain a cheese platter with a wide selection, nor a medium-rare
      steak.
    </p>

    <p>
      Sebin rarely says no to a good beer with friends, just as he rarely says
      no to a bar tour to try new and interesting cocktails.
    </p>

    <template v-if="$root.nsfw">
      <h3>Sexual Preferences</h3>

      <data-table :dataset="getSebinData.preferences" />

      <quick-facts>
        <ul class="col-2">
          <li>Supremely horny</li>
          <li>Confident, knows what he's got</li>
          <li>Dominant lover, likes it rough but is no brute</li>
          <li>Service top</li>
          <li>Depending on partner also bottoms</li>
          <li>Likes to wear bottomless undies, esp. jockstraps</li>
          <li>Enjoys the attention from flaunting</li>
        </ul>
      </quick-facts>

      <p>
        But above all Sebin is a very naughty hornball. He knows what he's got
        and he's not afraid to flaunt it. He is a generally dominant lover who
        likes to have it rough. But he is not lacking in tenderness. He
        considers himself somewhat of a "service top", who doesn't only have his
        own fun in mind. His job is only done if he's benn able to satisfy.
        However, that doesn't mean that he doesn't let others have their fun
        with him too from time to time. It always depends on his playmates,
        which makes him effectively a switch. He loves to wear bottomless
        jockstraps and boxer briefs to direct the attention of onlookers exactly
        where he wants it. After all he is well endowed enough to peddle it
        around.
      </p>
    </template>

    <template v-else>
      <h3>But, wait! There's more...</h3>

      <p>
        Let's... get... <strong><em>scandalous!</em></strong>
      </p>

      <p>
        <nsfw-switch
          id="nsfw-switch-kinky"
          v-model="$root.nsfw"
          @change="$root.showWarning()"
        />
      </p>
    </template>
  </prose>
</template>

<script>
import Prose from "@/components/Prose.vue";
import DataTable from "@/components/DataTable.vue";
import QuickFacts from "@/components/QuickFacts.vue";
import NsfwSwitch from "@/components/NsfwSwitch.vue";
import NsfwWarning from "@/components/NsfwWarning.vue";

import Sebin from "@/mixins/Sebin.js";
import Helper from "@/mixins/Helper.js";

export default {
  components: { Prose, DataTable, QuickFacts, NsfwSwitch, NsfwWarning },
  mixins: [Sebin, Helper],
};
</script>

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

ul {
  @include mq-desktop {
    &.col-2 {
      columns: 2 auto;
    }

    &.col-3 {
      columns: 3 auto;
    }

    &.col-4 {
      columns: 4 auto;
    }
  }
}
</style>