move breakpoint badge, add color styling from history-of-robotics, add computed breakpoint bool, change Character breadcrumb to CharacterList component, attempt at Season content column alignment

client/src/App.vue

@@ -3,6 +3,13 @@
         <b-navbar>
             <b-navbar-brand>
                 <router-link :to="{ name: 'Home' }" class="no-link">The Office Quotes</router-link>
+                <b-badge style="font-size: 0.80rem;" class="mx-2" v-if="showBreakpointMarker" variant="dark">
+                        <span id="marker-xs" class="d-sm-none">XS</span>
+                        <span id="marker-sm" class="d-none d-sm-block d-md-none">SM</span>
+                        <span id="marker-md" class="d-none d-md-block d-lg-none">MD</span>
+                        <span id="marker-lg" class="d-none d-lg-block d-xl-none">LG</span>
+                        <span id="marker-xl" class="d-none d-xl-block">XL</span>
+                    </b-badge>
             </b-navbar-brand>
             <b-collapse id="nav-collapse" is-nav>
                 <b-navbar-nav>
@@ -16,13 +23,6 @@
                             About
                         </router-link>
                     </b-nav-item>
-                    <b-badge variant="dark">
-                        <span id="marker-xs" class="d-sm-none">XS</span>
-                        <span id="marker-sm" class="d-none d-sm-block d-md-none">SM</span>
-                        <span id="marker-md" class="d-none d-md-block d-lg-none">MD</span>
-                        <span id="marker-lg" class="d-none d-lg-block d-xl-none">LG</span>
-                        <span id="marker-xl" class="d-none d-xl-block">XL</span>
-                    </b-badge>
                 </b-navbar-nav>
             </b-collapse>
         </b-navbar>
@@ -76,6 +76,26 @@
 .ais-SearchBox-input::placeholder {
     color: white;
 }
+
+#marker-xs {
+    color: #ff0000;
+}
+
+#marker-sm {
+    color: #f37506;
+}
+
+#marker-md {
+    color: #0090ff;
+}
+
+#marker-lg {
+    color: #05ff80;
+}
+
+#marker-xl {
+    color: #82f500;
+}
 </style>
 
 <script>
@@ -105,5 +125,10 @@ export default {
                 this.$router.push({name: "SearchResults"});
         },
     },
+    computed: {
+        showBreakpointMarker() {
+            return process.env.NODE_ENV === 'development';
+        }
+    }
 };
 </script>

client/src/components/Character.vue

@@ -45,7 +45,7 @@ export default {
                 },
                 {
                     text: 'Characters',
-                    to: {name: 'Home'},
+                    to: {name: 'CharacterList'},
                 },
                 {
                     text:

client/src/components/Season.vue

@@ -4,7 +4,7 @@
         <b-card>
             <b-list-group>
                 <b-list-group-item v-for="episode in season.episodes" :key="episode.episode_id">
-                    <b-row align-v="start">
+                    <b-row align-v="start" align-content="start">
                         <b-col cols="5" md="4" lg="4" xl="3">
                             <b-img-lazy fluid-grow class="px-2" src="https://via.placeholder.com/250"></b-img-lazy>
                         </b-col>