Add some sass

public/src/app.vue

@@ -22,56 +22,86 @@
   </div>
 </template>
 
-<style>
+<style lang="scss">
 @import url('https://fonts.googleapis.com/css?family=Comfortaa');
+
+@import "bulma/sass/utilities/initial-variables.sass";
+@import "bulma/sass/utilities/functions.sass";
+@import "scss/_variables";
+@import "bulma/sass/utilities/derived-variables.sass";
+@import "bulma/sass/utilities/mixins.sass";
+@import "bulma/sass/utilities/controls.sass";
+@import "bulma/sass/base/_all.sass";
+@import "bulma/sass/elements/title.sass";
+@import "bulma/sass/elements/button.sass";
+@import "bulma/sass/elements/form.sass";
+@import "bulma/sass/elements/container.sass";
+@import "bulma/sass/elements/notification.sass";
+@import "bulma/sass/elements/other.sass";
+@import "bulma/sass/grid/_all.sass";
+
+
 html {
   position: relative;
   min-height: 100%;
 }
+
 body {
-  color: #445470;
+  color: $grey;
   background: #fff;
   margin: 0 0 160px;
 }
+
 .header {
-  font-family: 'Comfortaa', cursive;
+  font-family: $family-title;
   letter-spacing: -2px;
-  background: #FE4365;
+  background: $primary;
 }
+
 .header img {
   height: 64px;
 }
+
 h1 {
   text-align: center;
   padding: 10px 0;
 }
+
 h1 a {
   color: #fff;
 }
+
 h1 a:hover {
   color: #ffacc5;
 }
+
 .share {
   margin-bottom: 40px;
 }
+
 .share h1 {
   text-align: left;
   font-size: 1.5em;
   line-height: 36px;
   padding: 5px 0;
 }
+
 .share h1 img {
   height: 40px;
 }
+
 .title a:hover {
   border-bottom: none;
 }
+
 h1 .lighter {
   color: #ffacc5;
 }
+
 .footer-break {
   height: 1px;
 }
+
 .footer {
   position: absolute;
   left: 0;
@@ -79,4 +109,18 @@ h1 .lighter {
   width: 100%;
   padding: 40px 24px 40px 24px;
 }
+
+.artwork {
+  position: relative;
+  width: 100%;
+  height: 0;
+  padding-bottom: 100%;
+  background-repeat: no-repeat;
+  background-size: cover;
+  border-radius: 5px;
+}
+
+.artwork-youtube {
+  background-position: 50% 0%;
+}
 </style>

public/src/components/search.vue

@@ -48,22 +48,7 @@ export default {
 }
 </script>
 
-<style>
-.button.is-primary {
-  background-color: #FE4365;
-}
-.button.is-primary:hover {
-  background-color: #E52A4C;
-}
-.button.is-primary:focus {
-  background-color: #E52A4C;
-}
-.input:active {
-  border-color: #FE4365;
-}
-.input:focus {
-  border-color: #FE4365;
-}
+<style lang="scss">
 .search {
   margin-bottom: 25vh;
 }

public/src/components/social.vue

@@ -48,7 +48,7 @@ export default {
 }
 </script>
 
-<style>
+<style lang="scss">
 .social {
   text-align: center;
   font-weight: 300;

public/src/entry-client.js

@@ -1,4 +1,4 @@
-import { style } from 'bulma/css/bulma.css';
+// import { style } from 'bulma/css/bulma.css';
 import { sync } from 'vuex-router-sync';
 import { app, store, router } from './app';
 

public/src/scss/_variables.scss

@@ -0,0 +1,6 @@
+$family-title: 'Comfortaa';
+$primary: #FE4365;
+$link: $primary;
+$button-color: $primary;
+$input-focus-border-color: $primary;
+$grey: #445470;

public/src/views/index.vue

@@ -102,7 +102,7 @@ export default {
 };
 
 </script>
-<style>
+<style lang="scss">
 .blurb {
   margin-bottom: 50px;
 }
@@ -125,13 +125,4 @@ p {
 .recent .artwork {
     margin-bottom: 30px;
 }
-.artwork {
-    position: relative;
-    width: 100%;
-    height: 0;
-    padding-bottom: 100%;
-    background-repeat: no-repeat;
-    background-size: cover;
-    border-radius: 5px;
-}
 </style>

public/src/views/share.vue

@@ -84,7 +84,7 @@ export default {
 }
 </script>
 
-<style>
+<style lang="scss">
 .content ul {
   margin-left: 0;
 }
@@ -98,18 +98,6 @@ export default {
   color: #445470;
   font-weight: 700;
 }
-.artwork {
-  position: relative;
-  width: 100%;
-  height: 0;
-  padding-bottom: 100%;
-  background-repeat: no-repeat;
-  background-size: cover;
-  border-radius: 5px;
-}
-.artwork-youtube {
-  background-position: 50% 0%;
-}
 .service {
   position: relative;
   margin-bottom: 10px;