From 4955756ce79ef2837e5088da107b0e7309c29d08 Mon Sep 17 00:00:00 2001
From: Sebin Nyshkim <sebin.nyshkim@icloud.com>
Date: Sun, 3 Nov 2019 20:45:09 +0100
Subject: [PATCH] Added Image Paragraph Component

---
 src/components/ImageParagraph.vue | 95 +++++++++++++++++++++++++++++++
 1 file changed, 95 insertions(+)
 create mode 100644 src/components/ImageParagraph.vue

diff --git a/src/components/ImageParagraph.vue b/src/components/ImageParagraph.vue
new file mode 100644
index 0000000..a2adb46
--- /dev/null
+++ b/src/components/ImageParagraph.vue
@@ -0,0 +1,95 @@
+<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;
+
+  &.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: 0 1 50%;
+      }
+    }
+
+    .text {
+      flex: 0 1 100%;
+    }
+  }
+
+  &.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;
+    }
+  }
+
+  img {
+    max-width: 100%;
+  }
+}
+</style>
\ No newline at end of file