From 012a833831fb8f0b2f3c88c09ddd52df99f99ab9 Mon Sep 17 00:00:00 2001
From: Aravind Balla <bsaaravind@gmail.com>
Date: Tue, 17 Dec 2019 15:23:04 +0530
Subject: [PATCH] style event talk and QnA

---
 .vuepress/components/EventPage.vue     |  6 +++
 .vuepress/components/EventQuestion.vue | 25 ++++++++---
 .vuepress/components/EventTalk.vue     | 62 +++++++++++++++++++++-----
 3 files changed, 75 insertions(+), 18 deletions(-)

diff --git a/.vuepress/components/EventPage.vue b/.vuepress/components/EventPage.vue
index 5bd2ba4..0b71b98 100644
--- a/.vuepress/components/EventPage.vue
+++ b/.vuepress/components/EventPage.vue
@@ -74,6 +74,12 @@ export default {
   display: inline-block;
   margin-right: 1rem;
 }
+main.agenda ul {
+  list-style-type: none;
+}
+main.agenda ul li {
+  margin-bottom: 1em;
+}
 </style>
 
 
diff --git a/.vuepress/components/EventQuestion.vue b/.vuepress/components/EventQuestion.vue
index 364173d..4ab25f5 100644
--- a/.vuepress/components/EventQuestion.vue
+++ b/.vuepress/components/EventQuestion.vue
@@ -1,5 +1,6 @@
 <template>
   <section class="talk">
+    <div class="type">Q&A</div>
     <h3 class="title">{{ title }}</h3>
     <EventSpeaker :speaker="speaker" />
   </section>
@@ -19,13 +20,25 @@ export default {
 <style scoped>
 .talk {
   position: relative;
+  border: 1px solid rgba(0, 0, 0, 0.05);
+  border-radius: 1rem;
+  padding: 1rem;
+  box-shadow: 0 4px 10px -4px rgba(0, 0, 0, 0.5);
 }
-.title::before {
-  content: "Q & A";
-  font-size: .5rem;
-  position: absolute;
-  top: -.6em;
-  opacity: .75;
+.talk:hover {
+  transition: all 200ms ease-in-out 0s;
+  box-shadow: 0 4px 10px -4px rgba(0, 0, 0, 0);
+  border-color: rgba(0, 0, 0, 0.1);
+}
+.type {
+  font-size: 1rem;
+  background-color: #3eaf7c;
+  display: inline;
+  padding: 4px 8px;
+  border-radius: 4px;
+  color: white;
+  text-transform: uppercase;
+  font-size: 0.8rem;
 }
 </style>
 
diff --git a/.vuepress/components/EventTalk.vue b/.vuepress/components/EventTalk.vue
index 81e3126..2315d9d 100644
--- a/.vuepress/components/EventTalk.vue
+++ b/.vuepress/components/EventTalk.vue
@@ -1,41 +1,79 @@
 <template>
   <section class="talk">
-    <h3 class="title"><u>Talk</u>: {{ title }}</h3>
+    <div class="type">Talk</div>
+    <h3 class="title">{{ title }}</h3>
     <div class="recording" v-if="recording">
-      <iframe :src="recording" width="100%" height="100%" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen />
+      <iframe
+        :src="recording"
+        width="100%"
+        height="100%"
+        frameborder="0"
+        allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
+        allowfullscreen
+      />
     </div>
     <div v-if="description" v-html="description"></div>
     <ItemRow v-if="feedbacks">
-      <FeedbackGallery :feedbacks="feedbacks" />
+      <FeedbackGallery :feedbacks="feedbacks"/>
     </ItemRow>
-    <EventSpeaker :speaker="speaker" :bio="bio" />
+    <EventSpeaker :speaker="speaker" :bio="bio"/>
     <ItemRow v-if="deck">
-      <Icon name="deck" slot="icon" />
+      <Icon name="deck" slot="icon"/>
       <a :href="deck" target="_blank">Speaker Deck</a>
     </ItemRow>
     <ItemRow v-if="issue">
-      <Icon name="github" slot="icon" />
-      <a :href="issue" target="_blank">{{ issue | filename }} </a>
+      <Icon name="github" slot="icon"/>
+      <a :href="issue" target="_blank">{{ issue | filename }}</a>
     </ItemRow>
   </section>
 </template>
 
 <script>
 export default {
-  props: ['title', 'description', 'speaker', 'bio', 'deck', 'issue', 'recording', 'feedbacks'],
+  props: [
+    "title",
+    "description",
+    "speaker",
+    "bio",
+    "deck",
+    "issue",
+    "recording",
+    "feedbacks"
+  ],
   filters: {
-    filename (value) {
-      return value.split('/').pop()
+    filename(value) {
+      return value.split("/").pop();
     }
   }
-}
+};
 </script>
 
 <style scoped>
 .talk {
   position: relative;
+  border: 1px solid rgba(0, 0, 0, 0.05);
+  border-radius: 1rem;
+  padding: 1rem;
+  box-shadow: 0 4px 10px -4px rgba(0, 0, 0, 0.5);
+}
+.talk:hover {
+  transition: all 200ms ease-in-out 0s;
+  box-shadow: 0 4px 10px -4px rgba(0, 0, 0, 0);
+  border-color: rgba(0, 0, 0, 0.1);
+}
+.type {
+  font-size: 1rem;
+  background-color: #3eaf7c;
+  display: inline;
+  padding: 4px 8px;
+  border-radius: 4px;
+  color: white;
+  text-transform: uppercase;
+  font-size: 0.8rem;
+}
+.title {
+  margin-top: 10px;
 }
-
 .recording {
   width: 100%;
   padding-top: 56.29%;