adding latest

src/App.vue

@@ -22,21 +22,18 @@ export default {
 
   components: { Appbar },
 
-  data: () => ({
-    video: require("./assets/videos/optical.mp4")
-  })
+  // data: () => {
+  //   video: require("./assets/videos/optical.mp4")
+  // }
 };
 </script>
 
 <style lang="scss">
 #app {
-  font-family: $gilroy, sans-serif, Arial, Helvetica;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
+  // font-family: $gilroy, sans-serif, Arial, Helvetica;
+  // -webkit-font-smoothing: antialiased;
+  // -moz-osx-font-smoothing: grayscale;
 }
 
-.fontColor, .theme--light.v-application, .theme--light.v-sheet {
-  // color: $mainColor !important;
-  color: $mainColor !important;
-}
+
 </style>

src/components/Appbar.vue

@@ -25,9 +25,11 @@
       <v-row>
         <v-col cols="2"></v-col>
         <v-col cols="4" class="d-flex justify-start">
-          <v-toolbar-title class="appTitle">
-            Savvy Firebase Tutorial
-          </v-toolbar-title>
+          <router-link :to="{ name: 'Home' }" class="routerLink">
+            <v-toolbar-title class="font-weight-bold">
+              Savvy Firebase Tutorial
+            </v-toolbar-title>
+          </router-link>
         </v-col>
         <v-col cols="4" class="d-flex justify-end align-self-center">
           <router-link :to="{ name: 'Login' }" class="routerLink">
@@ -48,12 +50,12 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.appTitle {
-  font-family: $gilroy-bold;
-}
+// .appTitle {
+//   // font-family: $gilroy-bold;
+// }
 
 .routerLink {
   text-decoration: none;
-  color: $mainColor
+  color: $mainColor;
 }
 </style>

src/components/LoginFull.vue

@@ -2,13 +2,18 @@
   <video-background
     :src="video"
     style=" height: 100vh;"
-    overlay="linear-gradient(45deg,#2a4ae430,#fb949e6b)"
+    overlay="linear-gradient(to right, #05193799, #10183d90, #1e164090, #2b114290, #39094190)"
   >
+  <LoginForm></LoginForm>
   </video-background>
 </template>
 
 <script>
+import LoginForm from "../views/forms/LoginForm";
 export default {
+  components: {
+    LoginForm,
+  },
   data() {
     return {
       video: require("../assets/videos/optical.mp4")

src/scss/_variables.scss

@@ -1,27 +1,141 @@
+// Import custom fonts
+
 @font-face {
-  font-family: "Gilroy";
+  font-family: "Gilroy-Thin";
+  src: url("~@/assets/fonts/Gilroy-Thin.otf") format("opentype");
+}
+
+@font-face {
+  font-family: "Gilroy-Regular";
   src: url("~@/assets/fonts/Gilroy-Regular.otf") format("opentype");
 }
 
 @font-face {
-  font-family: "Gilroy-bold";
+  font-family: "Gilroy-Medium";
+  src: url("~@/assets/fonts/Gilroy-Medium.otf") format("opentype");
+}
+
+@font-face {
+  font-family: "Gilroy-Light";
+  src: url("~@/assets/fonts/Gilroy-Light.otf") format("opentype");
+}
+
+@font-face {
+  font-family: "Gilroy-Condensed-Light";
+  src: url("~@/assets/fonts/Gilroy-Light.otf") format("opentype");
+}
+
+@font-face {
+  font-family: "Gilroy-Bold";
   src: url("~@/assets/fonts/Gilroy-Bold.otf") format("opentype");
 }
 
-$gilroy: "Gilroy", sans-serif !default;
-$gilroy-bold: "Gilroy-bold", sans-serif !default;
+@font-face {
+  font-family: "Gilroy-Black";
+  src: url("~@/assets/fonts/Gilroy-Black.otf") format("opentype");
+}
+
+@font-face {
+  font-family: "Gilroy-Italic";
+  src: url("~@/assets/fonts/Gilroy-RegularItalic.otf") format("opentype");
+}
+
+@font-face {
+  font-family: "Gilroy-LightItalic";
+  src: url("~@/assets/fonts/Gilroy-LightItalic.otf") format("opentype");
+}
+
+@font-face {
+  font-family: "Gilroy-MediumItalic";
+  src: url("~@/assets/fonts/Gilroy-MediumItalic.otf") format("opentype");
+}
+
+@font-face {
+  font-family: "Gilroy-BoldItalic";
+  src: url("~@/assets/fonts/Gilroy-BoldItalic.otf") format("opentype");
+}
+
+// Set font variables
+
+$Gilroy-Thin: "Gilroy-Thin", sans-serif !default;
+$Gilroy-Regular: "Gilroy-Regular", sans-serif !default;
+$Gilroy-Medium: "Gilroy-Medium", sans-serif !default;
+$Gilroy-Light: "Gilroy-Light", sans-serif !default;
+$Gilroy-Condensed-Light: "Gilroy-Condensed-Light", sans-serif !default;
+$Gilroy-Bold: "Gilroy-Bold", sans-serif !default;
+$Gilroy-Black: "Gilroy-Black", sans-serif !default;
+$Gilroy-Italic: "Gilroy-Italic", sans-serif !default;
+$Gilroy-LightItalic: "Gilroy-LightItalic", sans-serif !default;
+$Gilroy-MediumItalic: "Gilroy-MediumItalic", sans-serif !default;
+$Gilroy-BoldItalic: "Gilroy-BoldItalic", sans-serif !default;
+
+// Replace default body fonts
 
 @import "../../node_modules/vuetify/src/styles/styles.sass";
-$body-font-family: $gilroy;
-$heading-font-family: $gilroy;
+$body-font-family: $Gilroy-Regular;
+$heading-font-family: $Gilroy-Regular;
 
 @import "~vuetify/src/styles/settings/variables";
-$body-font-family: $gilroy;
-$heading-font-family: $gilroy;
+$body-font-family: $Gilroy-Regular;
+$heading-font-family: $Gilroy-Regular;
+
+// Replace typography fonts
+
+.v-application {
+  font-family: $Gilroy-Regular !important;
+  .display-4,
+  .display-3 {
+    font-family: $Gilroy-Light !important;
+  }
+  .display-2,
+  .display-1,
+  .headline,
+  .subtitle-1,
+  .body-1,
+  .body-2,
+  .caption,
+  .overline,
+  .font-regular,
+  .font-weight-regular {
+    font-family: $Gilroy-Regular !important;
+  }
+  .title,
+  .subtitle-2,
+  .font-weight-medium {
+    font-family: $Gilroy-Medium !important;
+  }
+  .font-weight-light {
+    font-family: $Gilroy-Condensed-Light !important;
+  }
+  .font-weight-thin {
+    font-family: $Gilroy-Thin !important;
+  }
+  .font-weight-bold {
+    font-family: $Gilroy-Bold !important;
+  }
+  .font-weight-black {
+    font-family: $Gilroy-Black !important;
+  }
+  .font-italic {
+    font-family: $Gilroy-Italic !important;
+  }
+  .font-italic.font-weight-light {
+    font-family: $Gilroy-LightItalic !important;
+  }
+  .font-italic.font-weight-medium {
+    font-family: $Gilroy-MediumItalic !important;
+  }
+  .font-italic.font-weight-bold {
+    font-family: $Gilroy-BoldItalic !important;
+  }
+}
+
+// Change default font colour
 
 $mainColor: #323947;
 
-.fontColor, .theme--light.v-application, .theme--light.v-sheet {
-  // color: $mainColor !important;
-  color: red !important;
+.theme--light.v-application,
+.fontColor,
+.theme--light.v-sheet {
+  color: $mainColor !important;
 }

src/views/forms/LoginForm.vue

@@ -0,0 +1,42 @@
+<template>
+  <v-container fill-height fluid>
+    <!-- <v-form v-model="valid"> -->
+      <v-row >
+        <v-col cols="5" align-self="start" class="d-flex justify-end pr-0">
+          <v-card color="rgb(0, 0, 0, 0)" flat>
+            <h1 class="whiteText display-2 font-weight-bold">Savvy Firebase Tutorial</h1>
+            <span class="whiteText">Log in or create an account.</span>
+          </v-card>
+        </v-col>
+        <v-spacer></v-spacer>
+        <v-col cols="6" align-self="center" class="d-flex justify-start">
+          <v-card color="rgb(0, 0, 0, 0)" flat>
+            <h1 class="whiteText">Hello</h1>
+            <h1 class="whiteText">Hello</h1>
+            <h1 class="whiteText">Hello</h1>
+            <h1 class="whiteText">Hello</h1>
+            <h1 class="whiteText">Hello</h1>
+            <h1 class="whiteText">Hello</h1>
+          </v-card>
+        </v-col>
+      </v-row>
+    <!-- </v-form> -->
+  </v-container>
+</template>
+
+<script>
+export default {
+  name: "LoginForm",
+  data() {
+    return {
+      valid: false
+    };
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+.whiteText {
+  color: white;
+}
+</style>