SebinNyshkim/sebin-reference
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat: ♻️ refactor ALL THE THINGS!!! (again)

Browse source 
Update to Vue 3 and employ Vue Router, additional design changes and navigation changes
This commit is contained in:
sebin.nyshkim@icloud.com 2022-01-04 00:39:02 +01:00
parent e9f29b655d
commit ae5d4d2633
59 changed files with 2768 additions and 1381 deletions
Download patch file Download diff file Expand all files Collapse all files

180
src/views/Abilities.vue Normal file
View file

@ -0,0 +1,180 @@
<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="row">
<div class="col">
<img
src="@/assets/refs/attacks/sebin-fire_breath-hires.png"
alt="Sebin Fire Breath"
/>
</div>
<div class="col">
<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="row">
<div class="col">
<img
src="@/assets/refs/attacks/sebin-flame_toss-hires.png"
alt="Sebin Flame Toss"
/>
</div>
<div class="col">
<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="row">
<div class="col">
<img
src="@/assets/refs/attacks/sebin-kindled_fist-hires.png"
alt="Sebin Kindled Fist"
/>
</div>
<div class="col">
<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="row">
<div class="col">
<img
src="@/assets/refs/attacks/sebin-burning_twister-hires.png"
alt="Sebin Burning Twister"
/>
</div>
<div class="col">
<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>
</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;
}
.row {
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;
.col {
&:first-child {
order: 1;
}
}
}
}
@media (min-width: 70em) {
text-align: left;
flex: 0 1 50%;
&:nth-child(even) {
text-align: left;
.col {
&:first-child {
order: 0;
}
}
}
}
}
.col {
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>