feat: ✨ update attack descriptions and illustrations

src/App.vue

@@ -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>