From d9c4685b648f184f1883623fb74110a8c19c64a3 Mon Sep 17 00:00:00 2001
From: Raymonzut <40148684+Raymonzut@users.noreply.github.com>
Date: Fri, 27 Mar 2020 18:18:58 +0000
Subject: [PATCH 1/4] Add question component; italic text div

---
 src/components/question.vue | 20 ++++++++++++++++++++
 1 file changed, 20 insertions(+)
 create mode 100755 src/components/question.vue

diff --git a/src/components/question.vue b/src/components/question.vue
new file mode 100755
index 0000000..67741f0
--- /dev/null
+++ b/src/components/question.vue
@@ -0,0 +1,20 @@
+<template>
+  <div id='question_box'>
+    {{ q }}
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'question',
+  props: {
+    q: String
+  }
+}
+</script>
+
+<style scoped>
+#question_box {
+  font-style: italic;
+}
+</style>

From afc5dea5896e77952350016a44fca0020363096b Mon Sep 17 00:00:00 2001
From: Raymonzut <40148684+Raymonzut@users.noreply.github.com>
Date: Fri, 27 Mar 2020 19:46:04 +0000
Subject: [PATCH 2/4] Add margin (top and bottom) to question component

---
 src/components/question.vue | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/src/components/question.vue b/src/components/question.vue
index 67741f0..7507d2b 100755
--- a/src/components/question.vue
+++ b/src/components/question.vue
@@ -15,6 +15,10 @@ export default {
 
 <style scoped>
 #question_box {
+  --text-spacing: 0.75em;
+
   font-style: italic;
+  margin-top: var(--text-spacing);
+  margin-bottom: var(--text-spacing);
 }
 </style>

From c4d1b02c2eb9a8dc54d9e2aabcbbe1cd41cd549e Mon Sep 17 00:00:00 2001
From: Raymonzut <40148684+Raymonzut@users.noreply.github.com>
Date: Fri, 27 Mar 2020 19:48:09 +0000
Subject: [PATCH 3/4] Add answer component; text div

---
 src/components/answer.vue | 15 +++++++++++++++
 1 file changed, 15 insertions(+)
 create mode 100755 src/components/answer.vue

diff --git a/src/components/answer.vue b/src/components/answer.vue
new file mode 100755
index 0000000..b188f80
--- /dev/null
+++ b/src/components/answer.vue
@@ -0,0 +1,15 @@
+<template>
+  <div>
+    {{ a }}
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'answer',
+  props: {
+    a: String
+  }
+}
+</script>
+

From 66b1874a02e4c0a9085be41ca203ba0b12b10f92 Mon Sep 17 00:00:00 2001
From: Raymonzut <40148684+Raymonzut@users.noreply.github.com>
Date: Fri, 27 Mar 2020 20:29:20 +0000
Subject: [PATCH 4/4] Add qa component: makes block of question and answer
 component

---
 src/components/qa.vue | 32 ++++++++++++++++++++++++++++++++
 1 file changed, 32 insertions(+)
 create mode 100755 src/components/qa.vue

diff --git a/src/components/qa.vue b/src/components/qa.vue
new file mode 100755
index 0000000..57d8f5b
--- /dev/null
+++ b/src/components/qa.vue
@@ -0,0 +1,32 @@
+<template>
+  <div id='qa'>
+    <question :q='q'/>
+    <answer :a='a'/>
+  </div>
+</template>
+
+<script>
+import question from './question.vue'
+import answer from './answer.vue'
+
+export default {
+  name: 'qa',
+  components: {
+    question,
+    answer,
+  },
+  props: {
+    q: String,
+    a: String
+  }
+}
+</script>
+
+<style scoped>
+#qa{
+  --block-spacing: 7.5em;
+
+  margin-top: var(--block-spacing);
+  margin-bottom: var(--block-spacing);
+}
+</style>