Merge branch 'features/qa' into beta

- Add question component: italic text div with top and bottom margin
- Add answer component: text div
- Add qa component: makes block of question and answer component

src/components/answer.vue

@@ -0,0 +1,15 @@
+<template>
+  <div>
+    {{ a }}
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'answer',
+  props: {
+    a: String
+  }
+}
+</script>
+

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>

src/components/question.vue

@@ -0,0 +1,24 @@
+<template>
+  <div id='question_box'>
+    {{ q }}
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'question',
+  props: {
+    q: String
+  }
+}
+</script>
+
+<style scoped>
+#question_box {
+  --text-spacing: 0.75em;
+
+  font-style: italic;
+  margin-top: var(--text-spacing);
+  margin-bottom: var(--text-spacing);
+}
+</style>