From 3c1afafefa9f19cc77fd355aaaae48fc35e9f90d Mon Sep 17 00:00:00 2001
From: Sebin Nyshkim <sebin.nyshkim@icloud.com>
Date: Thu, 25 Mar 2021 01:33:32 +0100
Subject: [PATCH] refactor: :recycle: reorder attacks for clarity

---
 src/App.vue | 233 ++++++++++++++++++++++++++++++++--------------------
 1 file changed, 144 insertions(+), 89 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 228dbfa..9960c82 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -471,7 +471,46 @@
           </p>
         </div>
 
-        <h3>Overdrive Form</h3>
+        <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
+                engulf his body in flames while spinning to become a fire
+                tornado that singes opponents.
+              </td>
+            </tr>
+          </table>
+        </div>
+
+        <h2>Overdrive Form</h2>
         <ref-figure>
           <template #img>
             <div>
@@ -526,94 +565,85 @@
           </p>
         </div>
 
-        <h2>Attacks</h2>
-        <h3>Normal Form</h3>
+        <h3>Attacks</h3>
         <div class="prose">
-          <p>
-            <strong>Fire Breath:</strong> Either a long breath of fire or short
-            bursts fired directly from Sebin's mouth.
-          </p>
-
-          <p>
-            <strong>Flame Toss:</strong> 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.
-          </p>
-
-          <p>
-            <strong>Kindled Fist:</strong> Besides throwing fireballs Sebin can
-            also greatly increase the speed of the projectiles by a strong punch
-            or kick.
-          </p>
-
-          <p>
-            <strong>Burning Twister:</strong> An attack for aerial combat, Sebin
-            can use his fire breath to engulf his body in flames while spinning
-            to become a fire tornado that singes opponents.
-          </p>
-        </div>
-
-        <h3>Attacks in Overdrive Form</h3>
-        <div class="prose">
-          <p>
-            <strong>Fire Breath:</strong> The reach of Sebin's Fire Breath
-            increases as well as the frequency at which he can fire shots from
-            his mouth.
-          </p>
-
-          <p>
-            <strong>Flame Toss:</strong> Overdrive Form eliminates the need for
-            Sebin to spit fire into his palms. It instead enables him to fire
-            the shots directly from the palm of his hands, as the firey veins
-            crossing his arms act as an orifice to do so. The explosion radius
-            of the burning projectiles that explode on impact is greatly
-            increased.
-          </p>
-
-          <p>
-            <strong>Searing Discus:</strong> Overdrive allows Sebin to form
-            rings of fire by igniting flames from his fingertips and swirling
-            them in a circle motion. He can use them for both close quarters or
-            ranged combat.
-          </p>
-
-          <p>
-            <strong>Combustion Flare:</strong> A devastating firestorm by
-            combining the power of both hands from his fire-infused arms. The
-            impact of the two carbon-like palms against each other is like the
-            clash of two flints, used to ignite the attack. A secure foothold is
-            needed to prevent Sebin from being thrown back by the recoil of the
-            attack. Using this technique in the air is therefore highly risky.
-          </p>
-
-          <p>
-            <strong>Blazing Pandemonium:</strong> A heavy impact into the ground
-            from a great height with both fists, tearing deep cracks in the
-            ground around the impact crater. Combined with
-            <em>Burning Twister</em>, the flames that previously surrounded
-            Sebin's body are forced through the newly created furrows,
-            transforming the scene into an inferno.
-          </p>
-
-          <p>
-            <strong>Scorching Edge:</strong> A fiery blade towering several
-            meters into the air that Sebin sends careening towards his enemies
-            from his fire-infused legs with a backflip kick, leaving a swath of
-            destruction in its wake. Upon impact the force of the attack is
-            distributed sideways.
-          </p>
-
-          <p>
-            <strong>Circling Fire Shield:</strong> A rather defensive technique.
-            By spinning around with stretched out arms Sebin creates fire balls,
-            which he usually hurls towards enemies, that circle around his body
-            diagonally. They act as a shield while he can still move his arms
-            relatively freely. Enemies would be well advised to keep their
-            distance to this spinning shield, as the fire balls will still
-            explode on contact.
-          </p>
+          <table class="attacks">
+            <tr>
+              <td><strong>Fire Breath</strong> (improved)</td>
+              <td>
+                The reach of Sebin's Fire Breath increases as well as the
+                frequency at which he can fire shots from his mouth.
+              </td>
+            </tr>
+            <tr>
+              <td><strong>Flame Toss</strong> (improved)</td>
+              <td>
+                Overdrive Form eliminates the need for Sebin to spit fire into
+                his palms. It instead enables him to fire the shots directly
+                from the palm of his hands, as the firey veins crossing his arms
+                act as an orifice to do so. The explosion radius of the burning
+                projectiles that explode on impact is greatly increased.
+              </td>
+            </tr>
+            <tr>
+              <td><strong>Kindled Fist</strong> (improved)</td>
+              <td>
+                As his arms and legs are infused with fire his punches and kicks
+                exert trails of flames while doing so. Landing a punch or kick
+                sears enemies.
+              </td>
+            </tr>
+            <!-- <tr>
+              <td><strong>Searing Discus</strong></td>
+              <td>
+                Overdrive allows Sebin to form rings of fire by igniting flames
+                from his fingertips and swirling them in a circle motion. He can
+                use them for both close quarters or ranged combat.
+              </td>
+            </tr> -->
+            <tr>
+              <td><strong>Combustion Flare</strong></td>
+              <td>
+                Clinking both of his wrists against each other like flints
+                unleashes a devestating fire blast from both of his fire-infused
+                hands. A secure foothold is needed to prevent Sebin from being
+                thrown back by the recoil of the attack. Using this technique in
+                the air is therefore highly risky.
+              </td>
+            </tr>
+            <tr>
+              <td><strong>Blazing Pandemonium</strong></td>
+              <td>
+                A heavy impact into the ground from a great height with both
+                fists, tearing deep cracks in the ground around the impact
+                crater. Combined with <strong><em>Kindled Fist</em></strong>
+                the heat in Sebin's arms are forced through the newly created
+                furrows, transforming the scene into an inferno.
+              </td>
+            </tr>
+            <tr>
+              <td><strong>Scorching Edge</strong></td>
+              <td>
+                A fiery blade towering several meters into the air that Sebin
+                sends careening towards his enemies from his fire-infused legs
+                with a backflip kick, leaving a swath of destruction in its
+                wake. Upon impact the force of the attack is distributed
+                sideways.
+              </td>
+            </tr>
+            <tr>
+              <td><strong>Circling Fire Shield</strong></td>
+              <td>
+                A rather defensive technique. By spinning around with stretched
+                out arms Sebin creates fire balls, which he usually hurls
+                towards enemies, that circle around his body diagonally. They
+                act as a shield while he can still move his arms relatively
+                freely. Enemies would be well advised to keep their distance to
+                this spinning shield, as the fire balls will still explode on
+                contact.
+              </td>
+            </tr>
+          </table>
         </div>
       </section>
     </main>
@@ -717,7 +747,8 @@ main {
     h2,
     h3,
     p,
-    .quickfacts {
+    .quickfacts,
+    .attacks {
       margin-left: 1rem;
       margin-right: 1rem;
     }
@@ -733,4 +764,28 @@ section {
     border-bottom: 0.125em $copy-color dotted;
   }
 }
+
+.attacks {
+  tr {
+    display: flex;
+    flex-flow: row wrap;
+    align-items: center;
+
+    padding: 0.375em 0;
+
+    @include mq-desktop {
+      flex-flow: row nowrap;
+    }
+
+    td {
+      flex: 1 1 auto;
+
+      &:first-child {
+        @include mq-desktop {
+          flex: 0 0 8em;
+        }
+      }
+    }
+  }
+}
 </style>