added error/not-found page, cleaned scss variables

src/App.vue

@@ -29,8 +29,8 @@ export default defineComponent({
 
     /**
      * In case of some testing happening:
-     * Reroute to the proper component path route assuming all is properly set.
-     * Otherwise, make sure we are on homepage on load.
+     * - Reroute to the proper component path route assuming all is properly set.
+     * - Otherwise, make sure we are on homepage on load.
      */
     if (testingType && testingType === 'components' && testingComponentName) {
       router.push({ path: `/componentTesting/${testingComponentName}` })

src/css/globals/quasarComponentsAdjustments.scss

@@ -3,3 +3,11 @@
     max-height: calc(100vh - 50px);
     overflow: auto;
 }
+
+.q-card{
+  border-radius: $qCard-border-radius;
+  box-shadow: none;
+  border: $qCard-border-size solid $qCard-border-color;
+  background-color: $qCard-background;
+  color: $qCard-text;
+}

src/css/quasar.variables.scss

@@ -7,28 +7,19 @@ $secondary : #f75746;
 $accent    : #dde4e4;
 
 $dark      : #18303a;
-// TODO - add color
-$dark-page : #121212;
+$dark-page : #303742;
 
 $positive  : #35a14e;
 $negative  : #c10015;
 $info      : lighten(#d7ac47, 35);
 $warning   : #f2c037;
 
-$custom-gunmetal: #18303a;
-$custom-gunmetal-light: lighten(#18303a, 7.5);
-$custom-gunmetal-lighter: lighten(#18303a, 12.5);
-$custom-gunmetal-medium: lighten(#18303a, 20);
-$custom-gunmetal-bright: lighten(#18303a, 50);
-$custom-gunmetal-shine: lighten(#18303a, 60);
-$custom-ruby-red: #f75746;
-$custom-satin-sheen-gold: #e8bb50;
-$custom-satin-sheen-gold-dark: darken(#e8bb50, 12.5);
-$custom-satin-sheen-gold-darker: darken(#e8bb50, 17.5);
-$custom-satin-sheen-gold-light: lighten(#e8bb50, 7.5);
-$custom-satin-sheen-gold-bright: lighten(#e8bb50, 15);
-$custom-gainsboro: #dde4e4;
-$custom-cultured: #f5f5f5;
+// QUASAR COMPONENT - Q-CARD
+$qCard-background: #f7eeda;
+$qCard-text: $dark;
+$qCard-border-color: $dark;
+$qCard-border-size: 2px;
+$qCard-border-radius: 5px;
 
 // COMPONENT - GLOBAL WINDOW BUTTONS
 $globalWindowButtons_height: 35px;

src/i18n/en-US/index.ts

@@ -4,6 +4,14 @@ export default {
     name: 'FA - but in english!'
   },
 
+  // PAGE - ERROR NOT FOUND
+  ErrorNotFound: {
+    title: 'ERROR/NOT FOUND',
+    subTitleFirst: 'Something broke horribly somewhere',
+    subTitleSecond: 'Fantasia is trying her best to fix it!',
+    ctaText: 'Return to app start screen'
+  },
+
   // COMPONENT - GLOBAL WINDOW BUTTONS
   GlobalWindowButtons: {
     minimizeButton: 'Minimize',

src/pages/ErrorNotFound.vue

@@ -1,34 +1,40 @@
 <template>
-  <div class="fullscreen bg-blue text-white text-center q-pa-md flex flex-center">
+  <div class="fullscreen bg-dark text-primary text-center q-pa-md flex column flex-center">
+    <GlobalWindowButtons />
+    <q-card
+      class="q-pl-xl q-pr-xl q-pb-xl"
+    >
+      <q-card-section>
+        <h2 class="text-negative">
+          {{ $t('ErrorNotFound.title') }}
+        </h2>
+        <h6>
+          {{ $t('ErrorNotFound.subTitleFirst') }}
+          <br>
+          {{ $t('ErrorNotFound.subTitleSecond') }}
+        </h6>
+        <FantasiaMascotImage
+          fantasia-image="error"
+          width="300px"
+        />
+      </q-card-section>
+    </q-card>
+
     <div>
-      <div style="font-size: 30vh">
-        404
-      </div>
-
-      <div
-        class="text-h2"
-        style="opacity:.4"
-      >
-        Oops. Nothing here...
-      </div>
-
       <q-btn
         class="q-mt-xl"
-        color="white"
-        text-color="blue"
-        unelevated
+        color="primary"
+        outline
+        size="xl"
         to="/"
-        label="Go Home"
-        no-caps
-      />
+      >
+        {{ $t('ErrorNotFound.ctaText') }}
+      </q-btn>
     </div>
   </div>
 </template>
 
-<script lang="ts">
-import { defineComponent } from 'vue'
-
-export default defineComponent({
-  name: 'ErrorNotFound'
-})
+<script lang="ts" setup>
+import GlobalWindowButtons from 'src/components/GlobalWindowButtons/GlobalWindowButtons.vue'
+import FantasiaMascotImage from 'src/components/FantasiaMascotImage/FantasiaMascotImage.vue'
 </script>

src/pages/IndexPage.vue

@@ -1,6 +1,6 @@
 <template>
   <q-page class="row">
-    <FantasiaMascotImage />
+    <FantasiaMascotImage width="400px" />
     <div>
       <div
         v-for="n in 1000"