diff --git a/src/App.vue b/src/App.vue index 9960c82..1f8f764 100644 --- a/src/App.vue +++ b/src/App.vue @@ -473,41 +473,81 @@

Attacks

-
- - - - - - - - - - - - - - - - - -
Fire Breath - Either a long breath of fire or short bursts fired directly from - Sebin's mouth. -
Flame Toss - 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. -
Kindled Fist - Besides throwing fireballs Sebin can also greatly increase the - speed of the projectiles by a strong punch or kick. -
Burning Twister - An attack for aerial combat, Sebin can use his fire breath to +
+
+
+ Sebin Fire Breath +
+
+

Fire Breath

+

+ 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. +

+
+
+ +
+
+ Sebin Flame Toss +
+
+

Flame Toss

+

+ 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. +

+
+
+ +
+
+ Sebin Kindled Fist +
+
+

Kindled Fist

+

+ 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. +

+
+
+ +
+
+ Sebin Burning Twister +
+
+

Burning Twister

+

+ 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. -

+

+
+

Overdrive Form

@@ -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; + } + } + } } diff --git a/src/assets/img/attacks/sebin-burning_twister-hires.png b/src/assets/img/attacks/sebin-burning_twister-hires.png new file mode 100644 index 0000000..eef3296 Binary files /dev/null and b/src/assets/img/attacks/sebin-burning_twister-hires.png differ diff --git a/src/assets/img/attacks/sebin-fire_breath-hires.png b/src/assets/img/attacks/sebin-fire_breath-hires.png new file mode 100644 index 0000000..633515d Binary files /dev/null and b/src/assets/img/attacks/sebin-fire_breath-hires.png differ diff --git a/src/assets/img/attacks/sebin-flame_toss-hires.png b/src/assets/img/attacks/sebin-flame_toss-hires.png new file mode 100644 index 0000000..0b467e8 Binary files /dev/null and b/src/assets/img/attacks/sebin-flame_toss-hires.png differ diff --git a/src/assets/img/attacks/sebin-kindled_fist-hires.png b/src/assets/img/attacks/sebin-kindled_fist-hires.png new file mode 100644 index 0000000..d7c6083 Binary files /dev/null and b/src/assets/img/attacks/sebin-kindled_fist-hires.png differ