Updated styles and use of components

src/App.vue

@@ -5,13 +5,13 @@
     </header>
 
     <h2>Quick info</h2>
-    <data-table :data="getSebinData.generic" :headers="['Key', 'Value']"></data-table>
+    <data-table :dataset="getSebinData.generic"></data-table>
 
     <h2>Colors</h2>
-    <data-table :data="getSebinData.colors" :headers="['Body Part', 'Color Value (hex)', 'Color']"></data-table>
+    <data-table :dataset="getSebinData.colors"></data-table>
 
     <h2>Penis</h2>
-    <data-table :data="getSebinData.penis" :headers="['Key', 'Value', 'Color']"></data-table>
+    <data-table :dataset="getSebinData.penis"></data-table>
 
     <h2>Anatomy</h2>
     <p>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.</p>
@@ -19,6 +19,24 @@
     <p>He has round pupils instead of the slit ones typical for reptilians. He has short yellow spikes above his eyes that resemble eyebrows, as well as spikes along the jawline of his cheeks. He has black horns growing out of his head which are mostly straight but slightly curve downwards. His hair is blue and he wears it in varying styles. He has long pointy ears which he can move to determine the origin of sounds around him. He also uses them to express emotion. His teeth are very sharp. In his throat are glands that produce a mixture that allows him to breathe fire. His tongue has a pointy tip.</p>
     <p>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.</p>
 
+    <h2>Musculature</h2>
+    <img-p
+      imgPos="left"
+      imgSrc="/img/iu-14.jpeg"
+    >Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam, nemo quaerat eaque in illum deserunt dolore suscipit eveniet atque sapiente soluta quia sint sed tempore minima omnis enim quos? Neque!</img-p>
+    <img-p
+      imgPos="right"
+      imgSrc="/img/iu-12.jpeg"
+    >Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam, nemo quaerat eaque in illum deserunt dolore suscipit eveniet atque sapiente soluta quia sint sed tempore minima omnis enim quos? Neque!</img-p>
+    <img-p
+      imgPos="top"
+      imgSrc="/img/iu-9.jpeg"
+    >Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam, nemo quaerat eaque in illum deserunt dolore suscipit eveniet atque sapiente soluta quia sint sed tempore minima omnis enim quos? Neque!</img-p>
+    <img-p
+      imgPos="bottom"
+      imgSrc="/img/iu-17.jpeg"
+    >Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam, nemo quaerat eaque in illum deserunt dolore suscipit eveniet atque sapiente soluta quia sint sed tempore minima omnis enim quos? Neque!</img-p>
+
     <h2>Personality</h2>
     <p>Sebin is an affectionate guy who cares immensely for his loved ones. If he notices someone having a hard time he always tries to lift them back up again. He will protect them no matter what. Not being able to help a friend in need equals to failing them for him and he will feel extremely guilty for it.</p>
     <p>He is honest and direct about his feelings and doesn't mince words, which some people might find brash.</p>
@@ -31,11 +49,13 @@
 
 <script>
 import DataTable from "./components/DataTable.vue";
+import ImgP from "./components/ImageParagraph.vue";
 
 export default {
   name: "app",
   components: {
-    DataTable
+    DataTable,
+    ImgP
   },
   data() {
     return {
@@ -83,39 +103,48 @@ export default {
       });
     },
     getSebinData() {
-      const generic = [
+      const generic = {
-        ["Full Name", this.fullName],
+        headers: ["Key", "Value"],
-        ["Date of Birth", this.birthdate],
+        data: [
-        ["Sex/Gender", this.gender],
+          ["Full Name", this.fullName],
-        ["Height", `${this.height} cm (${this.toImperial(this.height)})`],
+          ["Date of Birth", this.birthdate],
-        ["Weight", `${this.weight} kg (${this.toLbs(this.weight)} lbs)`],
+          ["Sex/Gender", this.gender],
-        [
+          ["Height", `${this.height} cm (${this.toImperial(this.height)})`],
-          "Wingspan",
+          ["Weight", `${this.weight} kg (${this.toLbs(this.weight)} lbs)`],
-          `${this.wingspan / 100} m (${this.toImperial(this.wingspan)})`
+          [
+            "Wingspan",
+            `${this.wingspan / 100} m (${this.toImperial(this.wingspan)})`
+          ]
         ]
-      ];
+      };
 
-      const colors = [
+      const colors = {
-        ["Primary Scale Color", this.colors.scalesPrimary],
+        headers: ["Body Part", "Color Value (hex)", "Color"],
-        ["Secondary Scale Color", this.colors.scalesSecondary],
+        data: [
-        ["Primary Hair Color", this.colors.hairPrimary],
+          ["Primary Scale Color", this.colors.scalesPrimary],
-        ["Secondary Hair Color", this.colors.hairSecondary],
+          ["Secondary Scale Color", this.colors.scalesSecondary],
-        ["Eyes", this.colors.eyes],
+          ["Primary Hair Color", this.colors.hairPrimary],
-        ["Eyebrows", this.colors.eyebrows],
+          ["Secondary Hair Color", this.colors.hairSecondary],
-        ["Horns", this.colors.horns],
+          ["Eyes", this.colors.eyes],
-        ["Claws", this.colors.claws],
+          ["Eyebrows", this.colors.eyebrows],
-        ["Nipples", this.colors.nipples],
+          ["Horns", this.colors.horns],
-        ["Tail Spikes", this.colors.tailspikes]
+          ["Claws", this.colors.claws],
-      ];
+          ["Nipples", this.colors.nipples],
+          ["Tail Spikes", this.colors.tailspikes]
+        ]
+      };
 
-      const penis = [
+      const penis = {
-        ["Shape", this.penis.shape],
+        headers: ["Key", "Value", "Color"],
-        ["Type", this.penis.type],
+        data: [
-        ["Special Traits", this.penis.special],
+          ["Shape", this.penis.shape],
-        ["Color", this.colors.penis],
+          ["Type", this.penis.type],
-        ["Length", `${this.penis.size} cm (${this.toInch(this.penis.size)})`],
+          ["Special Traits", this.penis.special],
-        ["Girth", `${this.penis.girth} cm (${this.toInch(this.penis.girth)})`]
+          ["Color", this.colors.penis],
-      ];
+          ["Length", `${this.penis.size} cm (${this.toInch(this.penis.size)})`],
+          ["Girth", `${this.penis.girth} cm (${this.toInch(this.penis.girth)})`]
+        ]
+      };
 
       return { generic, colors, penis };
     }
@@ -154,12 +183,21 @@ export default {
 </script>
 
 <style lang="scss">
-#app {
+:root {
   font-family: "Avenir", Helvetica, Arial, sans-serif;
+  font-size: 16px;
+  line-height: 1.2;
+}
+
+#app {
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
-  width: 60em;
+  width: 100%;
   margin: auto;
+
+  @media (min-width: 60em) {
+    width: 60em;
+  }
 }
 
 header {