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

feat: ✨ update attack descriptions and illustrations

Browse source
This commit is contained in:
Sebin Nyshkim 2021-04-26 01:58:10 +02:00
parent ba9288b818
commit 81d27f6849
5 changed files with 136 additions and 41 deletions
Download patch file Download diff file Expand all files Collapse all files

177
src/App.vue
View file

@ -473,41 +473,81 @@
<h3>Attacks</h3>
<div class="prose">
<table class="attacks">
<tr>
<td><strong>Fire Breath</strong></td>
<td>
Either a long breath of fire or short bursts fired directly from
Sebin's mouth.
</td>
</tr>
<tr>
<td><strong>Flame Toss</strong></td>
<td>
Sebin spits fireballs into his hands to throw them at his
opponents. His scales are fireproof and can withstand the high
temperatures. On impact these fireballs explode into a bigger
fire bursts with a diameter of 1-2 meters. He can also combine
two fireballs into a bigger one for bigger impact.
</td>
</tr>
<tr>
<td><strong>Kindled Fist</strong></td>
<td>
Besides throwing fireballs Sebin can also greatly increase the
speed of the projectiles by a strong punch or kick.
</td>
</tr>
<tr>
<td><strong>Burning Twister</strong></td>
<td>
An attack for aerial combat, Sebin can use his fire breath to
<div class="attacks">
<div class="row">
<div class="col">
<img
src="@img/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="@img/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="@img/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="@img/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.
</td>
</tr>
</table>
</p>
</div>
</div>
</div>
<h2>Overdrive Form</h2>
@ -747,8 +787,7 @@ main {
h2,
h3,
p,
.quickfacts,
.attacks {
.quickfacts {
margin-left: 1rem;
margin-right: 1rem;
}
@ -766,7 +805,24 @@ section {
}
.attacks {
tr {
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;
@ -775,17 +831,56 @@ section {
@include mq-desktop {
flex-flow: row nowrap;
&:nth-child(even) {
text-align: right;
.col {
&:first-child {
order: 1;
}
}
}
}
td {
flex: 1 1 auto;
@media (min-width: 70em) {
text-align: left;
flex: 0 1 50%;
&:first-child {
@include mq-desktop {
flex: 0 0 8em;
&: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>