Added clothing

src/App.vue

@@ -15,14 +15,18 @@
 
     <section class="prose">
       <h2>Anatomy</h2>
-      <img-p imgPos="left" imgSrc="/img/fullbody-ref.jpg"
-        >Sebin is a bipedal plantigrade. His body is mostly covered by red
+      <p>
+        <img
+          class="float left"
+          src="/img/fullbody-ref.jpg"
+          alt="Full Body Reference"
+        />Sebin is a bipedal plantigrade. His body is mostly covered by red
         scales with yellow chest plates running from below his chin over his
         torso all the way down between his legs and underside of his tail. His
         physique is athletic to muscular. His fingers and toes are equipped
         sharp black claws. Brown spikes run along his spine down to the tip of
-        his tail. His tail is about one meter in length.</img-p
-      >
+        his tail. His tail is about one meter in length.
+      </p>
       <p>
         His wing span is around 3-4 meters. He has them closed when on the
         ground. His wings function like a second pair of arms, at which ends are
@@ -42,16 +46,20 @@
         throat are glands that produce a mixture that allows him to breathe
         fire. His tongue has a pointy tip.</img-p
       >
-      <img-p imgPos="right" imgSrc="/img/penis-erect-ref.jpg"
-        >Despite his majorly reptilian appearance he has nipples, a feature of
+      <p>
+        <img
+          class="float right"
+          src="/img/penis-erect-ref.jpg"
+          alt="Penis Reference (Erect)"
+        />Despite his majorly reptilian appearance he has nipples, a feature of
         the human side of his family, which also shows with his external
         testicles. Rather than a slit which houses his penis he has a pouch-like
         sheath, with the tip slightly peeking out of it. His penis is mainly
         humanoid in shape but is surrounded by several ridges. He can take it
         out of its pouch while it's still soft (e.g. for passing water). When
         erect his charcoal black shaft protrudes from the pouch, its base girded
-        by the sheath like a ring.</img-p
-      >
+        by the sheath like a ring.
+      </p>
     </section>
 
     <section class="prose">
@@ -92,6 +100,16 @@
         bottomless briefs. He is vers, with a preference to top.
       </p>
     </section>
+
+    <section class="prose">
+      <h2>Clothing Styles</h2>
+      <template v-for="(style, index) in clothingStyles">
+        <h3 :key="style.name">{{ style.name }}</h3>
+        <ul :key="index">
+          <li v-for="(part, index) in style.clothes" :key="index">{{ part }}</li>
+        </ul>
+      </template>
+    </section>
   </div>
 </template>
 
@@ -120,7 +138,7 @@ export default {
 </script>
 
 <style lang="scss">
-@import url("https://fonts.googleapis.com/css?family=Open+Sans&display=swap");
+@import url('https://fonts.googleapis.com/css?family=Open+Sans:400,700&display=swap');
 
 :root {
   font-family: "Open Sans", sans-serif;
@@ -143,4 +161,18 @@ header {
 .prose {
   text-align: justify;
 }
+
+.float {
+  max-width: 15em;
+
+  &.left {
+    float: left;
+    margin: 0 1em 1em 0;
+  }
+
+  &.right {
+    float: right;
+    margin: 0 0 1em 1em;
+  }
+}
 </style>