Added roboto-slab-fontface-kit and adjusted MusicRow title

package-lock.json

@@ -14231,6 +14231,11 @@
         "inherits": "^2.0.1"
       }
     },
+    "roboto-slab-fontface-kit": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/roboto-slab-fontface-kit/-/roboto-slab-fontface-kit-1.0.2.tgz",
+      "integrity": "sha512-EdwkOvb6+D7ENrnjs1JzuHQHbeeEuQpddtbYqHzjl+c4dE2Vep0Jh5CHkpQkAhj+nELrXEUikzDayvIn2xzNNA=="
+    },
     "run-async": {
       "version": "2.3.0",
       "resolved": "https://registry.npmjs.org/run-async/-/run-async-2.3.0.tgz",

package.json

@@ -59,6 +59,7 @@
     "axios": "^0.18.0",
     "dominant-color": "0.0.1",
     "normalize-scss": "^7.0.1",
+    "roboto-slab-fontface-kit": "^1.0.2",
     "vue": "^2.5.16",
     "vue-carousel": "^0.18.0",
     "vue-custom-scrollbar": "^1.1.0",

src/renderer/App.vue

@@ -21,6 +21,8 @@ export default {
 <style lang="sass">
 @import 'normalize-scss'
 @import 'lato-font/scss/_public-api.scss'
+$FontPath: '/node_modules/roboto-slab-fontface-kit/fonts'
+@import 'roboto-slab-fontface-kit/roboto-slab.scss'
 @include normalize()
  
 $lato-font-path: '/node_modules/lato-font/fonts'

src/renderer/layouts/MusicRow.vue

@@ -1,6 +1,6 @@
 <template>
     <section>
-        <h1>Top music of the month</h1>
+        <legend>Top music of the month</legend>
         <Carousel class="carousel-custom" :paginationEnabled="false" :scrollPerPage="false" :perPageCustom="[[300, 2], [540, 3], [740, 4], [800, 3], [900, 4],  [1000, 4], [1200, 5] , [1300, 6]]">
           <Slide v-for="item in items" :key="item.id">
             <MusicBox  :item="item" />
@@ -20,7 +20,10 @@ export default {
 </script>
 
 <style scoped lang="sass">
+
 section
-    h1
+    legend
+        font-size: 2rem
+        font-family: 'Roboto Slab', serif        
         margin: 20px 0px
 </style>