split App.vue inline scss into separate scss files, fix settings menu icon flex-end issues in Chrome

src/App.vue

@@ -1,8 +1,9 @@
 <template>
     <div id="app">
-        <div class="columns is-justify-content-end pt-2">
+        <div class="columns is-justify-content-flex-end pt-2">
             <div class="column is-1 mr-2">
-                <b-icon @click.native="isSettingsMenuActive = true" id="settingsCog" pack="fas" icon="cog" custom-size="3x"></b-icon>
+                <b-icon @click.native="isSettingsMenuActive = true" class="is-clickable is-pulled-right" pack="fas" icon="cog"
+                        custom-size="3x"></b-icon>
                 <b-modal
                     v-model="isSettingsMenuActive"
                     has-modal-card
@@ -31,81 +32,7 @@
 </template>
 
 <style lang="scss">
-@import "./src/scss/shake.scss";
+@import "./src/scss/main.scss";
-
-html, body, #app {
-    height: 100%;
-    min-height: 100%;
-    max-height: 100%;
-}
-
-html {
-    scrollbar-width: none; /* For Firefox */
-    -ms-overflow-style: none; /* For Internet Explorer and Edge */
-}
-
-html::-webkit-scrollbar {
-    width: 0px; /* For Chrome, Safari, and Opera */
-}
-
-#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;
-
-        // Remove weird white box shadow
-        &, &:active, &:focus {
-            box-shadow: none;
-        }
-    }
-}
-
-a, p, span {
-    color: hsl(0, 0%, 91%);
-    #expression {
-        text-shadow: hsl(0, 0%, 5%) 5px 5px;
-    }
-}
-
-#question-text {
-    font-family: "Computer Modern", serif;
-}
-
-#expression {
-    width: 75%;
-    margin: 0 auto;
-    padding-bottom: 2em;
-    text-align: center;
-
-    .katex {
-        font-size: 16em !important;
-        white-space: nowrap;
-        user-select: none;
-    }
-}
-
-#settingsCog {
-    cursor: pointer;
-    float: right;
-}
-
-.notices .toast {
-    padding: 0.6em 1.35em !important;
-}
 </style>
 
 <script>
@@ -212,9 +139,6 @@ export default {
         },
         unlockInput() {
             this.allowInputSubmit = true;
-        },
-        openSettings() {
-
         }
     }
 }

src/scss/buefy.scss

@@ -7,8 +7,8 @@
 $background: hsl(0, 0%, 13%);
 $scheme-main: hsl(0, 0%, 6%);
 $scheme-invert: $white;
-$text: hsl(0, 0%, 90%);
+$text: hsl(0, 0%, 91%);
-$text-strong: hsl(0, 0%, 95%);
+$text-strong: hsl(0, 0%, 97%);
 $modal-background-background-color: bulmaRgba($scheme-main, 0.6);
 $modal-card-body-background-color: darken($background, 4%);
 $border: darken($modal-background-background-color, 30%);

src/scss/latex.scss

@@ -0,0 +1,44 @@
+#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;
+
+        // Remove weird white box shadow
+        &, &:active, &:focus {
+            box-shadow: none;
+        }
+    }
+}
+
+.latex {
+    font-family: "Computer Modern", serif;
+}
+
+#expression {
+    width: 75%;
+    margin: 0 auto;
+    padding-bottom: 2em;
+    text-align: center;
+    text-shadow: hsl(0, 0%, 5%) 5px 5px;
+
+    // Adjust font & wrapping of KaTeX expression
+    .katex {
+        font-size: 16em !important;
+        white-space: nowrap;
+        user-select: none; // Ensure users can't copy and paste text easily
+    }
+}

src/scss/main.scss

@@ -0,0 +1,23 @@
+// Ensure the app area always expands to 100% of the screen
+html, body, #app {
+    height: 100%;
+    min-height: 100%;
+    max-height: 100%;
+}
+
+// Disable scrollbar
+html {
+    scrollbar-width: none; /* For Firefox */
+    -ms-overflow-style: none; /* For Internet Explorer and Edge */
+    &::-webkit-scrollbar {
+        width: 0px; /* For Chrome, Safari, and Opera */
+    }
+}
+
+// Make toast notifications smaller
+.notices .toast {
+    padding: 0.6em 1.35em !important;
+}
+
+@import "./latex.scss";
+@import "./shake.scss";