adding latest

firebase.md

@@ -266,3 +266,99 @@ Then you can wrap the appbar in a `v-if`:
       v-if="!this.$store.getters.fullScreen"
     >
 ```
+
+## Change default font colour
+
+In `_variables.scss` create a variable with the colour you want:
+
+```scss
+$mainColor: #323947;
+```
+
+Then create a new class `fontColor` to apply to the router, and edit the default `theme--light` class for Vuetify to apply this colour:
+
+```scss
+.theme--light.v-application,
+.fontColor,
+.theme--light.v-sheet {
+  color: $mainColor !important;
+  // color: red !important;
+}
+```
+
+Then in `App.vue` apply the `fontColor` class to the `<v-app>`:
+
+```html
+    <v-app
+      :style="{ background: $vuetify.theme.themes.light.background }"
+      class="fontColor"
+    >
+```
+
+## Grids
+
+<https://vuetifyjs.com/en/components/grids/#row-and-column-breakpoints>
+
+In addition to using the flex classes you can use the grid system. The grid system allows you to create rows and columns and use props to control how the content should be displayed.
+
+This playground demonstrates what `align` and `justify` can do:
+<https://vuetifyjs.com/en/components/grids/#playground>
+
+The grid system applies to `<v-row>` and you can use the following props:
+
+- `align` controls the y-axis. You have `start`, `center`, `end`, `baseline` and `stretch`.
+- `justify` controls the x-axis. You have `start`, `center`, `end`, `space-around` and `space-between`.
+
+For `<v-col>` only `align-self` is available. To align content on a column, or any other element like a card, you should use the same classes as in the flex system. For example:
+
+```html
+<v-col cols="5" align-self="start" class="d-flex justify-end pr-0">
+```
+
+## Container filling whole page
+
+A container should be used whenever you want to use `<v-col>` and `<v-row>`. To make this container fill the whole page (and be able to use `align` props and flex classes) you should specify the following two props:
+
+- `fill-height`
+- `fluid`.
+
+## Helper classes
+
+### Spacing
+
+<https://vuetifyjs.com/en/styles/spacing/>
+
+You can use classes like `ma-2` and `pd-3` to control margin/padding in directions for any component.
+
+See the playground for a quick demonstration on what each one does:
+
+<https://vuetifyjs.com/en/styles/spacing/#playground>
+
+## Typography
+
+There are quite a few helper classes available to control font sizes and styles.
+
+<https://vuetifyjs.com/en/styles/typography/>
+
+There are two types of styles: Typography Display Classes and Style and Weight Classes.
+
+Examples include `.display-2` and `.font-weight-black`.
+
+### Replace Vuetify default font with own
+
+Fonts needed to replace the Roboto default:
+
+- Thin
+- Regular
+- Medium
+- Light
+- Condensed Light (Light)
+- Bold
+- Black
+- italic
+- Light italic
+- Medium italic
+- Bold italic
+
+If font styles dont exist then substitute them with the closest type.
+

src/App.vue

@@ -22,21 +22,18 @@ export default {
 
   components: { Appbar },
 
-  data: () => ({
+  // data: () => {
-    video: require("./assets/videos/optical.mp4")
+  //   video: require("./assets/videos/optical.mp4")
-  })
+  // }
 };
 </script>
 
 <style lang="scss">
 #app {
-  font-family: $gilroy, sans-serif, Arial, Helvetica;
+  // font-family: $gilroy, sans-serif, Arial, Helvetica;
-  -webkit-font-smoothing: antialiased;
+  // -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
+  // -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">
+          <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 {
+// .appTitle {
-  font-family: $gilroy-bold;
+//   // 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;
+@font-face {
-$gilroy-bold: "Gilroy-bold", sans-serif !default;
+  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;
+$body-font-family: $Gilroy-Regular;
-$heading-font-family: $gilroy;
+$heading-font-family: $Gilroy-Regular;
 
 @import "~vuetify/src/styles/settings/variables";
-$body-font-family: $gilroy;
+$body-font-family: $Gilroy-Regular;
-$heading-font-family: $gilroy;
+$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 {
+.theme--light.v-application,
-  // color: $mainColor !important;
+.fontColor,
-  color: red !important;
+.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>