From 3981fe5cd465443189a671075f2b7e568e706ad4 Mon Sep 17 00:00:00 2001
From: Sebin Nyshkim <sebin.nyshkim@icloud.com>
Date: Wed, 6 Nov 2019 00:09:54 +0100
Subject: [PATCH] Added clothing

---
 src/App.vue         | 50 +++++++++++++++++++++++++++++++++++++--------
 src/mixins/Sebin.js | 39 ++++++++++++++++++++++++++++++++++-
 2 files changed, 79 insertions(+), 10 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 07d2f27..7796a07 100644
--- a/src/App.vue
+++ b/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>
diff --git a/src/mixins/Sebin.js b/src/mixins/Sebin.js
index 1079cbf..731f256 100644
--- a/src/mixins/Sebin.js
+++ b/src/mixins/Sebin.js
@@ -28,7 +28,44 @@ export default {
         special: "ridged",
         size: 20, // cm
         girth: 5 // cm
-      }
+      },
+      clothingStyles: [
+        {
+          name: "Warm Weather",
+          clothes: [
+            "Loose Tank Top",
+            "Short shorts (knee-long) with dangling bands",
+            "Sweater/Hoodie tied around waist",
+            "Sneakers (Air Jordan style)"
+          ]
+        },
+        {
+          name: "Cold Weather",
+          clothes: [
+            "lorem ipsum dolor sit amet",
+            "lorem ipsum dolor sit amet",
+            "lorem ipsum dolor sit amet",
+            "lorem ipsum dolor sit amet"
+          ]
+        },
+        {
+          name: "Workout",
+          clothes: [
+            "Tight Tank Top",
+            "Fingerless Gloves",
+            "Short Shorts",
+            "(barefoot)"
+          ]
+        },
+        {
+          name: "Lazy Boy Style",
+          clothes: [
+            "(topless)",
+            "tracksuit pants (optional)",
+            "Undies (jockstrap/boxer briefs)"
+          ]
+        }
+      ]
     };
   },