Removed ImageParagraph component

src/App.vue

@@ -1,7 +1,7 @@
 <template>
   <div id="app">
     <header>
-      <h1>Sebin Nyshkim Character Reference Page</h1>
+      <h1>{{ appName }}</h1>
     </header>
 
     <h2>Quick info</h2>
@@ -15,14 +15,22 @@
 
     <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
-        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
-      >
+
+      <rich-figure
+        imgSrc="/img/fullbody-ref.jpg"
+        imgPos="left"
+        imgW="20em"
+        caption="Sebin Full Body reference"
+      ></rich-figure>
+
+      <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>
       <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
@@ -31,8 +39,10 @@
         fly short distances. Longer distances become difficult due to fatigue of
         having to carry his own weight with his wings alone.
       </p>
-      <img-p imgPos="top" imgSrc="/img/head-ref.jpg"
-        >He has round pupils instead of the slit ones typical for reptilians. He
+
+      <rich-figure imgSrc="/img/head-ref.jpg" caption="Sebin's Expressions"></rich-figure>
+
+      <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.
@@ -40,18 +50,18 @@
         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.</img-p
-      >
-      <img-p imgPos="right" imgSrc="/img/penis-erect-ref.jpg"
-        >Despite his majorly reptilian appearance he has nipples, a feature of
+        fire. His tongue has a pointy tip.</p>
+
+      <rich-figure imgSrc="/img/penis-erect-ref.jpg" imgPos="right" caption="Sebin's manly parts"></rich-figure>
+
+      <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.</img-p
-      >
+        by the sheath like a ring.</p>
     </section>
 
     <section class="prose">
@@ -97,8 +107,8 @@
 
 <script>
 import DataTable from "./components/DataTable.vue";
-import ImgP from "./components/ImageParagraph.vue";
 import Gallery from "./components/Gallery.vue";
+import RichFigure from "./components/RichFigure.vue";
 
 import Sebin from "./mixins/Sebin.js";
 import Helper from "./mixins/Helper.js";
@@ -107,12 +117,14 @@ export default {
   name: "app",
   components: {
     DataTable,
-    ImgP,
-    Gallery
+    Gallery,
+    RichFigure
   },
   data() {
     return {
-      muscleRefs: this.getMuscleRefPics(17)
+      appName: "Sebin Nyshkim Character Reference Page",
+      muscleRefs: this.getMuscleRefPics(17),
+      kittens: this.getKittens(17)
     };
   },
   mixins: [Sebin, Helper]

src/components/ImageParagraph.vue

@@ -1,104 +0,0 @@
-<template>
-  <div class="image-paragraph" :class="imgPos">
-    <div class="image">
-      <img :src="imgSrc" alt="Image" />
-    </div>
-    <div class="text">
-      <slot></slot>
-    </div>
-  </div>
-</template>
-
-<script>
-export default {
-  name: "ImageParagraph",
-  props: {
-    imgSrc: String,
-    imgPos: String
-  }
-};
-</script>
-
-<style lang="scss" scoped>
-.image-paragraph {
-  margin: 1em 0;
-
-  display: flex;
-  flex-flow: row;
-
-  &.right div,
-  &.left div {
-    align-self: center;
-  }
-
-  &.left .text {
-    @media (min-width: 35em) {
-      padding-left: 1em;
-    }
-  }
-
-  &.right .text {
-    @media (min-width: 35em) {
-      padding-right: 1em;
-    }
-  }
-
-  &.left,
-  &.right {
-    flex-wrap: wrap;
-
-    @media (min-width: 35em) {
-      flex-wrap: nowrap;
-    }
-
-    .image {
-      flex: 0 1 100%;
-
-      @media (min-width: 35em) {
-        flex: 1;
-      }
-    }
-
-    .text {
-      flex: 1;
-    }
-  }
-
-  &.top,
-  &.bottom {
-    flex-wrap: wrap;
-    justify-content: center;
-
-    .image {
-      flex: 0 1 auto;
-    }
-
-    .text {
-      flex: 0 1 100%;
-    }
-  }
-
-  &.top .text {
-    margin-top: 1em;
-  }
-
-  &.bottom .text {
-    margin-bottom: 1em;
-  }
-
-  @media (min-width: 35em) {
-    &.bottom .image,
-    &.right .image {
-      order: 2;
-    }
-  }
-
-  .image {
-    text-align: center;
-
-    img {
-      max-width: 100%;
-    }
-  }
-}
-</style>