From 8ed65e7c2d777a72e3766504207dfc6f256b4587 Mon Sep 17 00:00:00 2001
From: Xevion <xevioni@yandex.com>
Date: Mon, 14 Sep 2020 18:04:08 -0500
Subject: [PATCH] copy Character breadcrumb skeleton, apply font to card title

---
 client/src/components/Character.vue | 18 +++++++++++++++++-
 client/src/components/Episode.vue   |  4 ++--
 2 files changed, 19 insertions(+), 3 deletions(-)

diff --git a/client/src/components/Character.vue b/client/src/components/Character.vue
index 55f66ff..12dc3c4 100644
--- a/client/src/components/Character.vue
+++ b/client/src/components/Character.vue
@@ -1,6 +1,9 @@
 <template>
     <div>
-        <b-breadcrumb :items="breadcrumbs"></b-breadcrumb>
+        <b-breadcrumb v-if="ready" :items="breadcrumbs"></b-breadcrumb>
+        <b-card v-else class="breadcrumb-skeleton mb-3">
+            <Skeleton style="width: 40%;"></Skeleton>
+        </b-card>
         <b-card>
             <h4 v-if="character">{{ this.$route.params.character }}</h4>
             <Skeleton v-else style="max-width: 30%"></Skeleton>
@@ -8,6 +11,19 @@
     </div>
 </template>
 
+<style lang="scss" scoped>
+.breadcrumb-skeleton {
+    background-color: $grey-3;
+    height: 48px;
+
+    & > .card-body {
+        padding: 0 0 0 1em;
+        display: flex;
+        align-items: center;
+    }
+}
+</style>
+
 <script>
 import Skeleton from './Skeleton.vue';
 
diff --git a/client/src/components/Episode.vue b/client/src/components/Episode.vue
index 4838b62..99d9ea1 100644
--- a/client/src/components/Episode.vue
+++ b/client/src/components/Episode.vue
@@ -6,7 +6,7 @@
         </b-card>
         <b-card class="mb-4">
             <template v-if="ready">
-                <h3>"{{ episode.title }}"</h3>
+                <h3 class="card-title">"{{ episode.title }}"</h3>
                 <span>{{ episode.description }}</span>
                 <CharacterList v-if="episode && episode.characters" :characters="episode.characters"></CharacterList>
             </template>
@@ -48,7 +48,7 @@
 <style lang="scss">
 .card-title {
     font-family: "Montserrat", sans-serif;
-    font-weight: 600;
+    font-weight: 500;
 }
 
 .deleted-scene {