clean up scss to use buefy/bulma tools

src/App.vue

@@ -19,25 +19,29 @@
 html, body, #app {
     height: 100%;
     min-height: 100%;
-    background: hsl(0, 0%, 6%)
 }
 
 #input {
     input {
         text-align: center;
         background-color: transparent;
+
+        // Border fixing
         border-color: hsl(0, 0%, 20%);
         border-left-width: 0;
         border-right-width: 0;
         border-radius: 0;
         color: hsl(0, 0%, 80%);
+
+        // Input box font related manipulation
         font-family: 'KaTeX_Main', serif;
         padding: 0;
         height: 1.3em;
         line-height: 0;
         font-size: 8em;
 
-        &:active, &:focus {
+        // Remove weird white box shadow
+        &, &:active, &:focus {
             box-shadow: none;
         }
     }

src/main.js

@@ -3,7 +3,7 @@ import VueKatex from 'vue-katex';
 import { Input, Field } from 'buefy';
 import App from './App.vue'
 import 'katex/dist/katex.min.css';
-import 'buefy/dist/buefy.css';
+import './scss/buefy.scss';
 import 'animate.css/animate.min.css';
 
 

src/scss/buefy.scss

@@ -0,0 +1,10 @@
+// Import Bulma's core
+@import "~bulma/sass/utilities/_all";
+
+// Dark Mode
+$scheme-main: hsl(0, 0%, 6%);
+$scheme-invert: $white;
+
+// Import Bulma and Buefy styles
+@import "~bulma";
+@import "~buefy/src/scss/buefy";