sebin-reference/src/views/Abilities.vue

<template>
  <prose>
    <h2>Abilities</h2>

    <p>
      Since Sebin is a fire dragon there's a myriad of abilities he has at his
      disposal to defend himself.
    </p>

    <h3>Attacks</h3>

    <div class="attacks">
      <div class="attack">
        <div class="attack__illustration">
          <img
            src="@/assets/refs/attacks/sebin-fire_breath-hires.png"
            alt="Sebin Fire Breath"
          />
        </div>
        <div class="attack__description">
          <p><strong>Fire Breath</strong></p>
          <p>
            Like most fire dragons, Sebin can breathe fire. In order to do this,
            he takes a deep breath to enrich the oxygen in his lungs with gases,
            which, together with special glands in his mouth, produce a
            combustible mixture. The resulting jet of fire, reaching several
            hundred degrees Celsius, spreads out on its way to its target,
            scorching everything in its path.
          </p>
        </div>
      </div>

      <div class="attack">
        <div class="attack__illustration">
          <img
            src="@/assets/refs/attacks/sebin-flame_toss-hires.png"
            alt="Sebin Flame Toss"
          />
        </div>
        <div class="attack__description">
          <p><strong>Flame Toss</strong></p>
          <p>
            By spitting fire into his hands, Sebin can form it into a ball and
            use it as a projectile. His scales are fireproof and can withstand
            the high temperatures. Due to their high concentration, the
            projectiles explode upon impact. By combining two fireballs the
            explosion radius increases dramatically.
          </p>
        </div>
      </div>

      <div class="attack">
        <div class="attack__illustration">
          <img
            src="@/assets/refs/attacks/sebin-kindled_fist-hires.png"
            alt="Sebin Kindled Fist"
          />
        </div>
        <div class="attack__description">
          <p><strong>Kindled Fist</strong></p>
          <p>
            Apart from throwing projectiles, Sebin can also use the fireballs to
            wrap his fists in fire. This allows him to inflict severe burns on
            his opponent with each blow. In addition, he can release the fire
            from his fists with aimed blows and hurl it at his opponents.
          </p>
        </div>
      </div>

      <div class="attack">
        <div class="attack__illustration">
          <img
            src="@/assets/refs/attacks/sebin-burning_twister-hires.png"
            alt="Sebin Burning Twister"
          />
        </div>
        <div class="attack__description">
          <p><strong>Burning Twister</strong></p>
          <p>
            A technique used in aerial combat, Sebin uses his fire breath to
            engulf his body in flames while spinning to become a fire tornado
            that singes opponents.
          </p>
        </div>
      </div>
    </div>

    <p>
      Image Credit:
      <a href="https://twitter.com/GafreitasArt">Gabriel Freitas</a>
    </p>
  </prose>
</template>

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

export default {
  components: { Prose },
};
</script>

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

.attacks {
  display: flex;
  flex-flow: row wrap;
  align-items: center;

  width: 100%;
  margin: auto;

  @include mq-desktop {
    max-width: 45rem;
  }

  @media (min-width: 70em) {
    max-width: 70em;
  }

  .attack {
    flex: 0 1 100%;

    display: flex;
    flex-flow: row wrap;
    align-items: center;

    padding: 0.375em 0;

    @include mq-desktop {
      flex-flow: row nowrap;

      &:nth-child(even) {
        text-align: right;

        .attack__illustration,
        .attack__description {
          &:first-child {
            order: 1;
          }
        }
      }
    }

    @media (min-width: 70em) {
      text-align: left;
      flex: 0 1 50%;

      &:nth-child(even) {
        text-align: left;

        .attack__illustration,
        .attack__description {
          &:first-child {
            order: 0;
          }
        }
      }
    }

    &__illustration,
    &__description {
      flex: 1 1 auto;

      &:first-child {
        text-align: center;

        img {
          max-width: 100%;
          max-height: 100%;
        }

        @include mq-desktop {
          flex: 0 0 15em;
          height: 15em;
        }
      }

      &:last-child {
        @include mq-desktop {
          padding: 0 1rem;
        }
      }
    }
  }
}
</style>