adding latest

package.json

@@ -8,11 +8,14 @@
     "lint": "vue-cli-service lint"
   },
   "dependencies": {
+    "aos": "^3.0.0-beta.6",
     "core-js": "^3.6.4",
     "mime-types": "^2.1.26",
     "vue": "^2.6.11",
+    "vue-page-transition": "^0.2.2",
     "vue-responsive-video-background-player": "^1.0.8",
     "vue-router": "^3.1.5",
+    "vue-stripe-menu": "^1.2.8",
     "vuetify": "^2.2.11",
     "vuex": "^3.1.2"
   },

src/App.vue

@@ -1,14 +1,11 @@
 <template>
   <div>
-    <v-app
-      :style="{ background: $vuetify.theme.themes.light.background }"
-      class="fontColor"
-    >
+    <v-app :style="{ background: $vuetify.theme.themes.light.background }">
       <v-content>
         <Appbar></Appbar>
-        <transition name="slide">
+        <vue-page-transition name="fade">
           <router-view></router-view>
-        </transition>
+        </vue-page-transition>
         <v-row> </v-row>
       </v-content>
     </v-app>
@@ -17,26 +14,44 @@
 
 <script>
 import Appbar from "@/components/Appbar";
+import Welcome from "./views/stripe-appbar/Welcome";
+import WelcomeSecondary from "./views/stripe-appbar/WelcomeSecondary";
+import Random from "./views/stripe-appbar/Random"
+
 export default {
   name: "App",
-
   components: { Appbar },
-
-  data: () => ({
-    video: require("./assets/videos/optical.mp4")
-  })
+  data() {
+    return {
+      menu: [
+        {
+          title: "Welcome",
+          dropdown: "welcome",
+          content: Welcome,
+          secondary: WelcomeSecondary,
+          element: "span"
+        },
+        {
+          title: "Random",
+          dropdown: "random",
+          content: Random
+        }
+      ]
+    };
+  }
 };
 </script>
 
 <style lang="scss">
 #app {
-  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;
+.content {
+  padding: 20px;
+}
+.content--secondary {
+  padding: 20px;
 }
 </style>

src/components/Appbar.vue

@@ -1,59 +1,121 @@
 <template>
   <div>
-    <!-- <v-app-bar flat color="indigo" app class="hidden-md-and-up">
-      <v-row>
-        <v-col cols="8" class="d-flex justify-start">
-          <v-toolbar-title>
-            Savvy Firebase
-          </v-toolbar-title>
-        </v-col>
-        <v-col cols="4" class="d-flex justify-end">
-          <v-btn color="white">
-            Sign In
-          </v-btn>
-        </v-col>
-      </v-row>
-    </v-app-bar> -->
-    <!-- <v-app-bar flat app class="hidden-sm-and-down" color="#EEEEEE"> -->
     <v-app-bar
       flat
       app
-      class="hidden-sm-and-down"
-      color="#EEEEEE"
+      hide-on-scroll
+      color="rgba(93.3%, 93.3%, 93.3%, 0.5)"
       v-if="!this.$store.getters.fullScreen"
+      style="z-index: 15;"
+      width="100%"
     >
-      <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>
-        </v-col>
-        <v-col cols="4" class="d-flex justify-end align-self-center">
-          <router-link :to="{ name: 'Login' }" class="routerLink">
-            <span class="mr-3">Sign In</span>
+      <v-row class="hidden-sm-and-down">
+        <v-spacer></v-spacer>
+        <v-col
+          cols="4"
+          class="d-flex justify-start align-center align-content-center"
+        >
+          <router-link :to="{ name: 'Home' }" class="routerLink">
+            <v-toolbar-title class="title">
+              <p class="mb-0">Savvy Firebase Tutorial</p>
+            </v-toolbar-title>
           </router-link>
-          <span class="mr-3">Register</span>
         </v-col>
-        <v-col cols="2"></v-col>
+        <v-col cols="4" class="d-flex justify-end align-center">
+          <vsm-menu
+            ref="header"
+            :menu="menu"
+            :screen-offset="25"
+            :base-width="380"
+            :base-height="400"
+          >
+            <template #default="data">
+              <component :is="data.item.content" class="content" />
+              <component :is="data.item.secondary" class="content--secondary" />
+            </template>
+            <template #title="menu" class="ma-0 pa-0">
+              <router-link
+                :to="menu.item.routerLink"
+                v-if="menu.item.routerLink"
+                style="padding-bottom: -20px;"
+              >
+                <p class="ma-0 pa-0 underline routerLink">
+                  {{ menu.item.title }}
+                </p>
+              </router-link>
+            </template>
+          </vsm-menu>
+        </v-col>
+        <v-spacer></v-spacer>
+      </v-row>
+      <v-row class="hidden-md-and-up">
+        <v-app-bar-nav-icon class="d-flex"></v-app-bar-nav-icon>
+        <v-spacer></v-spacer>
+        <v-toolbar-title class="title d-flex justify-end align-center">
+          <p class="mb-0">Savvy Firebase Tutorial</p>
+        </v-toolbar-title>
       </v-row>
     </v-app-bar>
   </div>
 </template>
 
 <script>
+import Welcome from "../views/stripe-appbar/Welcome";
+import WelcomeSecondary from "../views/stripe-appbar/WelcomeSecondary";
+import Random from "../views/stripe-appbar/Random";
+
 export default {
-  name: "Appbar"
+  name: "Appbar",
+  data() {
+    return {
+      menu: [
+        {
+          title: "Welcome",
+          dropdown: "welcome",
+          content: Welcome,
+          secondary: WelcomeSecondary
+        },
+        {
+          title: "Random",
+          dropdown: "random",
+          content: Random
+        },
+        {
+          title: "Triangle",
+          routerLink: { name: "Triangle" }
+        },
+        {
+          title: "Playground",
+          routerLink: { name: "Playground" }
+        }
+      ]
+    };
+  }
 };
 </script>
 
 <style lang="scss" scoped>
-.appTitle {
-  font-family: $gilroy-bold;
-}
-
 .routerLink {
   text-decoration: none;
-  color: $mainColor
+  color: $mainColor;
+}
+.underline {
+  position: relative;
+}
+.underline::after {
+  position: absolute;
+  content: "";
+  height: 0.1em;
+  top: 100%;
+  background: currentColor;
+  z-index: -1;
+  left: 0;
+  right: 0;
+  transform: scaleX(0);
+  transition: transform 0.5s cubic-bezier(0.95, 0.05, 0.795, 0.035) 50ms;
+}
+.underline:hover::after {
+  transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
+  transform: scaleX(1);
 }
 </style>

src/components/AppbarOld.vue

@@ -0,0 +1,86 @@
+<template>
+  <div>
+    <v-app-bar
+      flat
+      app
+      hide-on-scroll
+      color="rgba(93.3%, 93.3%, 93.3%, 0.5)"
+      v-if="!this.$store.getters.fullScreen"
+    >
+      <v-row>
+        <v-spacer></v-spacer>
+        <v-col cols="4" class="d-flex justify-start align-content-center">
+          <router-link :to="{ name: 'Home' }" class="routerLink">
+            <v-toolbar-title class="title">
+              <p class="mb-0">Savvy Firebase Tutorial</p>
+            </v-toolbar-title>
+          </router-link>
+        </v-col>
+        <v-col cols="4" class="d-flex justify-end align-self-center">
+          <router-link
+            :to="{ name: 'Playground' }"
+            class="routerLink ma-0 pr-2"
+          >
+            <p class="mb-0 underline">
+              Playground
+            </p>
+          </router-link>
+          <router-link
+            :to="{ name: 'Backgrounds' }"
+            class="routerLink ma-0 pr-2"
+          >
+            <p class="mb-0 underline">
+              Backgrounds
+            </p>
+          </router-link>
+          <router-link :to="{ name: 'Triangle' }" class="routerLink ma-0 pr-2">
+            <p class="mb-0 underline">
+              Triangle
+            </p>
+          </router-link>
+          <router-link :to="{ name: 'Login' }" class="routerLink ma-0 pr-2">
+            <p class=" mb-0 underline">
+              Sign In
+            </p>
+          </router-link>
+          <router-link :to="{ name: 'Login' }" class="routerLink ma-0">
+            <p class="mb-0 underline">Register</p>
+          </router-link>
+        </v-col>
+        <v-spacer></v-spacer>
+      </v-row>
+    </v-app-bar>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "Appbar"
+};
+</script>
+
+<style lang="scss" scoped>
+.routerLink {
+  text-decoration: none;
+  color: $mainColor;
+}
+.underline {
+  position: relative;
+}
+.underline::after {
+  position: absolute;
+  content: "";
+  height: 0.1em;
+  top: 100%;
+  background: currentColor;
+  z-index: -1;
+  left: 0;
+  right: 0;
+  transform: scaleX(0);
+  transition: transform 0.5s cubic-bezier(0.95, 0.05, 0.795, 0.035) 50ms;
+}
+.underline:hover::after {
+  transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
+  transform: scaleX(1);
+}
+</style>

src/components/HelloWorld.vue

@@ -1,151 +0,0 @@
-<template>
-  <v-container>
-    <v-row class="text-center">
-      <v-col cols="12">
-        <v-img
-          :src="require('../assets/logo.svg')"
-          class="my-3"
-          contain
-          height="200"
-        />
-      </v-col>
-
-      <v-col class="mb-4">
-        <h1 class="display-2 font-weight-bold mb-3">
-          Welcome to Vuetify
-        </h1>
-
-        <p class="subheading font-weight-regular">
-          For help and collaboration with other Vuetify developers,
-          <br>please join our online
-          <a
-            href="https://community.vuetifyjs.com"
-            target="_blank"
-          >Discord Community</a>
-        </p>
-      </v-col>
-
-      <v-col
-        class="mb-5"
-        cols="12"
-      >
-        <h2 class="headline font-weight-bold mb-3">
-          What's next?
-        </h2>
-
-        <v-row justify="center">
-          <a
-            v-for="(next, i) in whatsNext"
-            :key="i"
-            :href="next.href"
-            class="subheading mx-3"
-            target="_blank"
-          >
-            {{ next.text }}
-          </a>
-        </v-row>
-      </v-col>
-
-      <v-col
-        class="mb-5"
-        cols="12"
-      >
-        <h2 class="headline font-weight-bold mb-3">
-          Important Links
-        </h2>
-
-        <v-row justify="center">
-          <a
-            v-for="(link, i) in importantLinks"
-            :key="i"
-            :href="link.href"
-            class="subheading mx-3"
-            target="_blank"
-          >
-            {{ link.text }}
-          </a>
-        </v-row>
-      </v-col>
-
-      <v-col
-        class="mb-5"
-        cols="12"
-      >
-        <h2 class="headline font-weight-bold mb-3">
-          Ecosystem
-        </h2>
-
-        <v-row justify="center">
-          <a
-            v-for="(eco, i) in ecosystem"
-            :key="i"
-            :href="eco.href"
-            class="subheading mx-3"
-            target="_blank"
-          >
-            {{ eco.text }}
-          </a>
-        </v-row>
-      </v-col>
-    </v-row>
-  </v-container>
-</template>
-
-<script>
-  export default {
-    name: 'HelloWorld',
-
-    data: () => ({
-      ecosystem: [
-        {
-          text: 'vuetify-loader',
-          href: 'https://github.com/vuetifyjs/vuetify-loader',
-        },
-        {
-          text: 'github',
-          href: 'https://github.com/vuetifyjs/vuetify',
-        },
-        {
-          text: 'awesome-vuetify',
-          href: 'https://github.com/vuetifyjs/awesome-vuetify',
-        },
-      ],
-      importantLinks: [
-        {
-          text: 'Documentation',
-          href: 'https://vuetifyjs.com',
-        },
-        {
-          text: 'Chat',
-          href: 'https://community.vuetifyjs.com',
-        },
-        {
-          text: 'Made with Vuetify',
-          href: 'https://madewithvuejs.com/vuetify',
-        },
-        {
-          text: 'Twitter',
-          href: 'https://twitter.com/vuetifyjs',
-        },
-        {
-          text: 'Articles',
-          href: 'https://medium.com/vuetify',
-        },
-      ],
-      whatsNext: [
-        {
-          text: 'Explore components',
-          href: 'https://vuetifyjs.com/components/api-explorer',
-        },
-        {
-          text: 'Select a layout',
-          href: 'https://vuetifyjs.com/layout/pre-defined',
-        },
-        {
-          text: 'Frequently Asked Questions',
-          href: 'https://vuetifyjs.com/getting-started/frequently-asked-questions',
-        },
-      ],
-    }),
-  }
-</script>

src/components/LoginFull.vue

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

src/components/StripeAppbar.vue

@@ -0,0 +1,15 @@
+<template>
+    <div>
+
+    </div>
+</template>
+
+<script>
+    export default {
+
+    }
+</script>
+
+<style lang="scss" scoped>
+
+</style>

src/main.js

@@ -3,12 +3,28 @@ import App from "./App.vue";
 import router from "./router";
 import store from "./store";
 import vuetify from "./plugins/vuetify";
+// Video Background
 import VideoBackground from "vue-responsive-video-background-player";
+// Page Transitions
+import VuePageTransition from "vue-page-transition";
+// Animations
+import AOS from "aos";
+import "aos/dist/aos.css";
+// Stripe Appbar Menu
+import VueStripeMenu from "vue-stripe-menu";
+// import "vue-stripe-menu/dist/vue-stripe-menu.css";
+import "./scss/appbar.scss"
 
 Vue.config.productionTip = false;
 Vue.component("video-background", VideoBackground);
 
+Vue.use(VuePageTransition);
+Vue.use(VueStripeMenu);
+
 new Vue({
+  created() {
+    AOS.init();
+  },
   router,
   store,
   vuetify,

src/plugins/vuetify.js

@@ -11,7 +11,10 @@ export default new Vuetify({
   theme: {
     themes: {
       light: {
-        background: "#fff"
+        primary: "#051937",
+        secondary: "#374366",
+        accent: "#d4a418",
+        background: "#e8e8e8"
       }
     }
   }

src/router/index.js

@@ -24,6 +24,30 @@ const routes = [
     name: "Login",
     component: () =>
       import(/* webpackChunkName: "login" */ "../components/LoginFull.vue")
+  },
+  {
+    path: "/hello",
+    name: "Hello",
+    component: () =>
+      import(/* webpackChunkName: "hello" */ "../components/HelloWorld.vue")
+  },
+  {
+    path: "/triangle",
+    name: "Triangle",
+    component: () =>
+      import(/* webpackChunkName: "triangle" */ "../views/Triangle.vue")
+  },
+  {
+    path: "/backgrounds",
+    name: "Backgrounds",
+    component: () =>
+      import(/* webpackChunkName: "backgrounds" */ "../views/Backgrounds.vue")
+  },
+  {
+    path: "/playground",
+    name: "Playground",
+    component: () =>
+      import(/* webpackChunkName: "playground" */ "../views/Playground.vue")
   }
 ];
 

src/scss/_variables.scss

@@ -1,27 +1,143 @@
+// 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");
+}
 
-@import "../../node_modules/vuetify/src/styles/styles.sass";
-$body-font-family: $gilroy;
-$heading-font-family: $gilroy;
+@font-face {
+  font-family: "Gilroy-Italic";
+  src: url("~@/assets/fonts/Gilroy-RegularItalic.otf") format("opentype");
+}
 
-@import "~vuetify/src/styles/settings/variables";
-$body-font-family: $gilroy;
-$heading-font-family: $gilroy;
+@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-Regular;
+// $heading-font-family: $Gilroy-Regular;
+
+// @import "~vuetify/src/styles/settings/variables";
+// $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;
+  }
+}
+
+$body-font-family: $Gilroy-Regular !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/scss/appbar.scss

@@ -0,0 +1,10 @@
+@import "../scss/_variables.scss";
+
+$vsm-menu-link-height: 35px !default;
+$vsm-color: $mainColor !default;
+$vsm-color-hover: $mainColor !default;
+$vsm-media: 768px !default;
+$vsm-menu-border-radius: 15px !default;
+$vsm-menu-transform-content: 150px !default;
+
+@import "~vue-stripe-menu/src/scss/index";

src/views/Backgrounds.vue

@@ -0,0 +1,162 @@
+<template>
+  <div>
+    <v-container>
+      <v-row>
+        <v-col>
+          <h1>Backgrounds</h1>
+        </v-col>
+      </v-row>
+      <v-row>
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          viewBox="0 0 1440 320"
+          style="width: 500px;"
+        >
+          <path
+            fill="#0099ff"
+            fill-opacity="1"
+            d="M0,0L48,42.7C96,85,192,171,288,176C384,181,480,107,576,101.3C672,96,768,160,864,154.7C960,149,1056,75,1152,85.3C1248,96,1344,192,1392,240L1440,288L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z"
+          ></path>
+        </svg>
+      </v-row>
+      <v-row class="mt-4">
+        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320">
+          <path
+            fill="#0099ff"
+            fill-opacity="0.5"
+            d="M0,0L48,42.7C96,85,192,171,288,176C384,181,480,107,576,101.3C672,96,768,160,864,154.7C960,149,1056,75,1152,85.3C1248,96,1344,192,1392,240L1440,288L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z"
+            transform="rotate(-10 50 100)"
+          ></path>
+          <path
+            fill="#0099ff"
+            fill-opacity="0.6"
+            d="M0,0L48,42.7C96,85,192,171,288,176C384,181,480,107,576,101.3C672,96,768,160,864,154.7C960,149,1056,75,1152,85.3C1248,96,1344,192,1392,240L1440,288L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z"
+            transform="rotate(10 50 100)"
+          ></path>
+        </svg>
+      </v-row>
+    </v-container>
+    <v-container>
+      <v-row>
+        <v-col>
+          <svg
+            width="200"
+            height="200"
+            viewBox="0 0 600 600"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <g transform="translate(300,300)">
+              <path
+                d="M154.5,-209.4C196.2,-182.4,223.2,-131.8,227.9,-82.3C232.7,-32.8,215.3,15.8,199.3,64.8C183.4,113.8,169,163.3,136,199.9C103.1,236.5,51.5,260.3,3.5,255.4C-44.5,250.5,-89,217.1,-129.7,183C-170.4,148.9,-207.4,114.2,-226.4,70.2C-245.4,26.2,-246.3,-27.1,-228.4,-71.7C-210.5,-116.4,-173.7,-152.4,-132.5,-179.6C-91.3,-206.7,-45.7,-224.8,5.4,-232.2C56.4,-239.7,112.9,-236.3,154.5,-209.4Z"
+                fill="#FFB4BC"
+              />
+            </g>
+          </svg>
+        </v-col>
+      </v-row>
+    </v-container>
+    <v-container>
+      <v-row>
+        <v-img src="https://cdn.vuetifyjs.com/images/cards/server-room.jpg">
+          <v-col class="fill-height d-flex align-center justify-center">
+            <h1 class="display-4 black--text">Text</h1>
+          </v-col>
+        </v-img>
+      </v-row>
+    </v-container>
+    <v-container fluid class="newtriangle">
+      <v-row class="fill-height d-flex align-center">
+        <v-col class="">
+          <h1 class="display-2 white--text">
+            CSS polygon background with clip-path.
+          </h1>
+        </v-col>
+      </v-row>
+    </v-container>
+    <v-container>
+      <v-row>
+        <v-col class="fill-height d-flex justify-center">
+          <svg
+            width="120"
+            height="120"
+            version="1.1"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <defs>
+              <radialGradient
+                id="Gradient"
+                cx="0.5"
+                cy="0.5"
+                r="0.5"
+                fx="0.25"
+                fy="0.25"
+              >
+                <stop offset="0%" stop-color="red" />
+                <stop offset="100%" stop-color="blue" />
+              </radialGradient>
+            </defs>
+
+            <rect
+              x="10"
+              y="10"
+              rx="15"
+              ry="15"
+              width="100"
+              height="100"
+              fill="url(#Gradient)"
+              stroke="black"
+              stroke-width="2"
+            />
+
+            <circle
+              cx="60"
+              cy="60"
+              r="50"
+              fill="transparent"
+              stroke="white"
+              stroke-width="2"
+            />
+            <circle cx="35" cy="35" r="2" fill="white" stroke="white" />
+            <circle cx="60" cy="60" r="2" fill="white" stroke="white" />
+            <text
+              x="38"
+              y="40"
+              fill="white"
+              font-family="sans-serif"
+              font-size="10pt"
+            >
+              (fx,fy)
+            </text>
+            <text
+              x="63"
+              y="63"
+              fill="white"
+              font-family="sans-serif"
+              font-size="10pt"
+            >
+              (cx,cy)
+            </text>
+          </svg>
+        </v-col>
+      </v-row>
+    </v-container>
+  </div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style lang="scss" scoped>
+.newtriangle {
+  width: 105vw;
+  height: 50vh;
+  background-image: radial-gradient(
+    circle farthest-corner at 7.5% 54.1%,
+    rgba(0, 0, 0, 1) 0%,
+    rgba(39, 0, 89, 1) 74.9%
+  );
+  -webkit-clip-path: polygon(0 0, 100% 35%, 100% 65%, 0% 100%);
+  clip-path: polygon(0 0, 100% 35%, 100% 65%, 0% 100%);
+}
+</style>

src/views/Home.vue

@@ -1,11 +1,15 @@
 <template>
-    <v-container>
-      <v-row>
-        <v-col>
-          Hello
-        </v-col>
-      </v-row>
-    </v-container>
+  <v-container>
+    <v-row>
+      <v-col>
+        Hello
+      </v-col>
+    </v-row>
+    <v-row>
+      <v-btn color="primary">Hello</v-btn>
+      <v-btn color="secondary">Hello</v-btn>
+    </v-row>
+  </v-container>
 </template>
 
 <script>

src/views/Playground.vue

@@ -0,0 +1,118 @@
+<template>
+  <div>
+    <v-container fluid class="ma-0 pa-0 full-screen d-flex">
+        <img
+          src="../assets/images/pipebackground_1.svg"
+          style=""
+          class="d-flex align-end ma-0 pa-0 justify-end new-background-image"
+        />
+      <v-container
+        fill-height
+        class="d-flex align-center"
+        style="position: static; z-index: 10;"
+      >
+        <v-row>
+          <v-col class="d-flex justify-center">
+            <h1 class="display-2">Playground</h1>
+          </v-col>
+        </v-row>
+        <v-row>
+          <v-col>
+            <h1 class="display-2">Playground</h1>
+          </v-col>
+        </v-row>
+        <v-row>
+          <v-col>
+            <h1 class="display-2">{{ viewportHeight - 64 }}</h1>
+          </v-col>
+          <v-col>
+            <h1 class="display-2">{{ viewportWidth }}</h1>
+          </v-col>
+          <v-col>
+            <h1 class="display-2">{{ backgroundWidth }}</h1>
+          </v-col>
+        </v-row>
+      </v-container>
+    </v-container>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      viewportHeight: window.innerHeight,
+      viewportWidth: window.innerWidth,
+      backgroundWidth: ""
+    };
+  },
+  created() {
+    window.addEventListener("resize", this.updateHeight);
+    window.addEventListener("resize", this.updateWidth);
+    this.querySelectorsPlayground();
+  },
+  destroyed() {
+    window.removeEventListener("resize", this.updateHeight);
+    window.addEventListener("resize", this.updateWidth);
+  },
+  mounted() {
+    // this.getBackgroundWidth();
+  },
+  methods: {
+    updateHeight() {
+      this.viewportHeight = window.innerHeight;
+    },
+    updateWidth() {
+      this.viewportWidth = window.innerWidth;
+    },
+    getBackgroundWidth() {
+      var background = document.querySelector("#backgroundsvg");
+      this.backgroundWidth = background.clientWidth;
+    },
+    querySelectorsPlayground() {
+      console.log(document.images);
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+$background-width: 795px;
+
+.full-screen {
+  height: calc(100vh - 64px);
+}
+
+img.new-background-image {
+  height: calc(100vh);
+  position: absolute;
+  object-fit: cover;
+  // object-position: left;
+  // width: 100%;
+  // max-width: 100%;
+  right: 0;
+  // overflow: hidden;
+  @media screen and (max-width: $background-width) {
+    left: 0px;
+  }
+  @media #{map-get($display-breakpoints, 'md-and-up')} {
+    top: -64px;
+  }
+  @media #{map-get($display-breakpoints, 'sm-and-down')} {
+    top: -56px;
+  }
+}
+
+.background-image {
+  position: absolute;
+  height: calc(100vh - 64px);
+  // width: 100%;
+  max-width: 1115px;
+  right: 0;
+  z-index: 1;
+  border-style: dashed;
+  object-fit: cover;
+  object-position: right top;
+  overflow: hidden;
+}
+</style>

src/views/Triangle.vue

@@ -0,0 +1,145 @@
+<template>
+  <div>
+    <v-container fluid class="pa-0">
+      <v-row class="d-flex newtriangle" style="position: absolute; z-index: 1;">
+        <v-col
+          class="d-flex align-center pt-0 ml-8"
+          style="position: relative; z-index: 10;"
+        >
+          <v-card flat color="rgb(0, 0, 0, 0)">
+            <h1 class="display" style="position: relative;">
+              Welcome to Savvy Firebox Tutorial
+            </h1>
+            <v-btn
+              x-large
+              color="primary"
+              style="position: relative; z-index: 10;"
+              class="lighten-1"
+              >Click Here</v-btn
+            >
+          </v-card>
+        </v-col>
+      </v-row>
+    </v-container>
+    <v-container>
+      <v-row class="d-flex" style="position: relative; height: 50vh;"> </v-row>
+      <v-row class="d-flex justify-space-around">
+        <v-col class="d-flex justify-center" md="6" xs="12">
+          <v-card
+            flat
+            color="rgb(0, 0, 0, 0)"
+            class="d-flex align-center justify-center flex-column pa-6"
+            data-aos="zoom-in"
+            data-aos-duration="3000"
+          >
+            <v-card-title>
+              <span class="display-2 font-weight-bold">Learn more</span>
+            </v-card-title>
+            <v-card-text class="d-flex justify-center flex-column align-center">
+              <transition name="bounce">
+                <v-img
+                  src="@/assets/images/11-Casino chip.png"
+                  max-height="150px"
+                  max-width="150px"
+                  class="mb-5"
+                ></v-img>
+              </transition>
+              <span
+                class="d-flex justify-center display body-1"
+                style="color: black;"
+              >
+                More information about what we do and why.
+              </span>
+            </v-card-text>
+            <v-card-actions>
+              <v-btn color="secondary" medium>Click here</v-btn>
+            </v-card-actions>
+          </v-card>
+        </v-col>
+        <v-col class="d-flex justify-center" md="6" xs="12">
+          <v-card
+            flat
+            color="rgb(0, 0, 0, 0)"
+            class="d-flex align-center justify-center flex-column pa-6"
+            data-aos="test-roll"
+            data-aos-duration="3000"
+            data-aos-easing="new-easing"
+          >
+            <v-card-title>
+              <span class="display-2 font-weight-bold">See more</span>
+            </v-card-title>
+            <v-card-text class="d-flex flex-column justify-center align-center">
+              <v-img
+                src="@/assets/images/12-Casino chip.png"
+                max-height="150px"
+                max-width="150px"
+                class="mb-5"
+              ></v-img>
+              <span
+                class="d-flex justify-center display body-1"
+                style="color: black;"
+              >
+                Additional things about what it is.
+              </span>
+            </v-card-text>
+            <v-card-actions>
+              <v-btn color="secondary" medium>Click here</v-btn>
+            </v-card-actions>
+          </v-card>
+        </v-col>
+        <!-- <v-col md="1" xs="0"></v-col> -->
+      </v-row>
+    </v-container>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      animate: false
+    };
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+.newtriangle {
+  width: 105vw;
+  height: 50vh;
+  background-image: radial-gradient(
+    circle farthest-corner at 7.5% 54.1%,
+    rgba(0, 0, 0, 1) 0%,
+    rgba(39, 0, 89, 1) 74.9%
+  );
+  -webkit-clip-path: polygon(0 0, 100% 35%, 100% 65%, 0% 100%);
+  clip-path: polygon(0 0, 100% 35%, 100% 65%, 0% 100%);
+}
+
+h1 {
+  color: white;
+}
+
+[data-aos="test-roll"] {
+  -webkit-transform: translateX(-1000px) rotate(-720deg);
+  transform: translateX(-1000px) rotate(-720deg);
+  -webkit-filter: blur(50px);
+  filter: blur(50px);
+  opacity: 0;
+  transition-property: transform, opacity, filter;
+  &.aos-animate {
+    -webkit-transform: translateX(0) rotate(0deg);
+    transform: translateX(0) rotate(0deg);
+    -webkit-filter: blur(0);
+    filter: blur(0);
+    opacity: 1;
+  }
+}
+
+[data-aos] {
+  body[data-aos-easing="new-easing"] &,
+  &[data-aos][data-aos-easing="new-easing"] {
+    transition-timing-function: cubic-bezier(0.25, 1, 0.57, 0.55);
+  }
+}
+</style>

src/views/forms/LoginForm.vue

@@ -0,0 +1,218 @@
+<template>
+  <v-container fluid fill-height class="d-flex align-center justify-center">
+    <v-row>
+      <v-col
+        sm="6"
+        cols="12"
+        align-self="stretch"
+        class="d-flex justify-sm-end justify-center pb-10 pb-sm-0 pr-sm-10"
+      >
+        <div class="d-flex flex-column align-end justify-space-around">
+          <v-card
+            color="rgb(0, 0, 0, 0)"
+            flat
+            class="d-flex align-center justify-center flex-column"
+            width="100%"
+          >
+            <div
+              class="d-flex flex-column align-sm-end align-center justify-center"
+              :class="alignOnViewport"
+            >
+              <h1 class="whiteText title">
+                Savvy Firebase Tutorial
+              </h1>
+              <p class="whiteText mb-0 mt-2">Log in or create an account.</p>
+            </div>
+          </v-card>
+          <v-card color="rgb(0, 0, 0, 0)" flat width="100%">
+            <div
+              class="text-align-right d-flex flex-column align-sm-end align-center justify-center"
+            >
+              <p class="whiteText mb-0">Don't have an account? Create one.</p>
+            </div>
+          </v-card>
+        </div>
+      </v-col>
+      <v-col
+        cols="12"
+        sm="6"
+        class="d-flex justify-sm-start justify-center pl-sm-10"
+      >
+        <v-card
+          color="rgb(0, 0, 0, 0)"
+          flat
+          class="d-flex align-center flex-column"
+        >
+          <v-icon color="white" size="3em" class="pb-4"
+            >mdi-account-circle</v-icon
+          >
+          <v-form
+            v-model="valid"
+            ref="form"
+            class="pt-4 d-flex flex-column align-center justify-start"
+          >
+            <v-text-field
+              v-for="field in formFields"
+              :key="field.name"
+              outlined
+              rounded
+              required
+              :type="field.password ? 'password' : 'text'"
+              background-color="rgb(100%, 100%, 100%, 10%)"
+              color="rgb(100%, 100%, 100%, 20%)"
+              class="white-placeholder full-width"
+              v-model="field.value"
+              :rules="field.rules"
+              :label="field.placeholder"
+              :success="!!field.value"
+              @click:append="field.showIconData = !field.showIconData"
+            >
+              <template #prepend-inner>
+                <v-icon color="white" class="pr-3">
+                  {{ field.prependIcon }}
+                </v-icon>
+              </template>
+              <template #append>
+                <div class="innerIcon">
+                  <v-btn
+                    v-if="field.appendIconShow"
+                    icon
+                    text
+                    x-small
+                    @click="
+                      () => {
+                        field.showIconData = !field.showIconData;
+                        field.password = !field.password;
+                      }
+                    "
+                  >
+                    <v-icon color="white">
+                      {{
+                        field.showIconData
+                          ? field.appendIconShow
+                          : field.appendIconHide
+                      }}
+                    </v-icon>
+                  </v-btn>
+                </div>
+              </template>
+            </v-text-field>
+            <v-btn
+              depressed
+              large
+              color="primary"
+              class="lighten-3"
+              :loading="load"
+              @click="submit"
+              >Submit</v-btn
+            >
+          </v-form>
+          <p class="whiteText mb-0 pt-5">Forgot password?</p>
+        </v-card>
+      </v-col>
+    </v-row>
+  </v-container>
+</template>
+
+<script>
+export default {
+  name: "LoginForm",
+  data() {
+    return {
+      valid: false,
+      load: false,
+      formFields: [
+        {
+          name: "Email",
+          rules: [
+            v => !!v || "You must enter an email address.",
+            v => /.+@.+/.test(v) || "Email is not valid."
+          ],
+          placeholder: "Email",
+          successmessage: "Email is valid.",
+          prependIcon: "mdi-at",
+          value: ""
+        },
+        {
+          name: "Password",
+          rules: [
+            v => !!v || "You must enter a password.",
+            v => (v && v.length >= 8) || "Minimum 8 characters."
+          ],
+          placeholder: "Password",
+          successmessage: "Password is valid.",
+          prependIcon: "mdi-lock",
+          appendIconShow: "mdi-eye",
+          appendIconHide: "mdi-eye-off",
+          showIconData: false,
+          value: "",
+          password: true
+        }
+      ]
+    };
+  },
+  methods: {
+    async submit() {
+      this.load = !this.load;
+      console.log("loading");
+      if (this.$refs.form.validate()) {
+        console.log(`Email: ${this.formFields[0].value}`);
+        console.log(`Password: ${this.formFields[1].value}`);
+      } else {
+        console.log("Not valid");
+        this.load = !this.load;
+      }
+    }
+  },
+  computed: {
+    alignOnViewport() {
+      return this.$vuetify.breakpoint.xsOnly
+        ? "text-align-center"
+        : "text-align-right";
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+// @import "../../scss/_variables.scss";
+
+.whiteText {
+  color: white;
+}
+
+.red-text {
+  color: red;
+}
+
+.full-width {
+  width: 100%;
+}
+
+.text-align-right {
+  text-align: right;
+}
+
+.text-align-center {
+  text-align: center;
+}
+
+.title {
+  font-size: 2rem !important;
+}
+
+.white-placeholder ::v-deep input::placeholder {
+  color: white !important;
+  opacity: 1;
+}
+
+.white-placeholder ::v-deep input {
+  color: white !important;
+  opacity: 1;
+}
+
+.white-placeholder ::v-deep .v-label {
+  color: white !important;
+  opacity: 1;
+}
+</style>

src/views/stripe-appbar/Random.vue

@@ -0,0 +1,28 @@
+<template>
+  <v-container style="width: 300px; height: 300px;">
+    <v-row>
+      <v-col>
+        <v-card flat>
+          <p class="ma-0 pa-0 headline">Random Content</p>
+          Random content that doesn't fit.
+        </v-card>
+      </v-col>
+    </v-row>
+    <v-row>
+      <v-col>
+        <v-card flat>
+          <ul>
+            <li>Item one</li>
+            <li>Item two</li>
+          </ul>
+        </v-card>
+      </v-col>
+    </v-row>
+  </v-container>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style lang="scss" scoped></style>

src/views/stripe-appbar/Welcome.vue

@@ -0,0 +1,21 @@
+<template>
+  <v-container>
+    <v-row>
+      <v-col>
+        <v-card flat class="ma-0 pa-0">
+          <p class="headline">Welcome Pages</p>
+        </v-card>
+      </v-col>
+    </v-row>
+  </v-container>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style lang="scss" scoped>
+.centre-text {
+  text-align: center;
+}
+</style>

src/views/stripe-appbar/WelcomeSecondary.vue

@@ -0,0 +1,19 @@
+<template>
+<v-container>
+    <v-row>
+        <v-col style="width: 300px;">
+            Welcome Secondary Content
+        </v-col>
+    </v-row>
+</v-container>
+</template>
+
+<script>
+    export default {
+
+    }
+</script>
+
+<style lang="scss" scoped>
+
+</style>

temp.md

@@ -0,0 +1,653 @@
+# Temp notes
+
+## React to height change
+
+### Get current height of page
+
+To create content based on viewport height change you should use an event listener: `window.addEventListener`.
+
+A list of all events you can listen for is here: <https://developer.mozilla.org/en-US/docs/Web/Events>
+
+The current height can be obtained from `window.innerHeight`.
+
+You should add `created` and `destroyed` to the script, and create a method to do something on the trigger:
+
+```javascript
+export default {
+  data() {
+    return {
+      viewportHeight: window.innerHeight
+    };
+  },
+  created() {
+    window.addEventListener("resize", this.updateHeight);
+  },
+  destroyed() {
+    window.removeEventListener("resize", this.updateHeight);
+  },
+  methods: {
+    updateHeight() {
+      this.viewportHeight = window.innerHeight;
+    }
+  }
+};
+```
+
+This can be useful if you need to pass the current height to a prop for an image component that you might want to fill the page:
+
+```html
+<v-img
+  src="../assets/images/newbackground.png"
+  :height="this.viewportHeight - 64"
+  width="auto"
+  contain
+  position="bottom 0px right 0px"
+  class="ma-0 pa-0"
+  id="backgroundsvg"
+></v-img>
+```
+
+You can also get the height in the css. This way you can have an image set its own width or height as css parameters.
+
+```css
+.full-screen {
+  height: calc(100vh - 64px);
+}
+```
+
+You might also want to add browser compatibility options:
+
+Opera:
+`height: -o-calc(100% - 65px);`
+
+Google/Safari:
+`height: -webkit-calc(100% - 65px);`
+
+### Get current height of an object
+
+Simiarly, you can add a watcher to get the width of any element. You should add a css class to the object you want to get the width of. Then you can use a `querySelector` to get it:
+
+```javascript
+getBackgroundWidth() {
+    var background = document.querySelector("#backgroundsvg");
+    this.backgroundWidth = background.clientWidth;
+}
+```
+
+Documentation for `querySelector`: <https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector>
+
+You can see all the methods and properties for document here:
+<https://developer.mozilla.org/en-US/docs/Web/API/Document>
+
+## Using `<v-content>` to fill the page
+
+`fill-height` is useful for child components if you want them to fill to the height of the parent.
+
+To make a fullscreen element use fluid with 0 margins, and set the height to 100vh. Then any children `<v-component>` can use the `fill-height` prop.
+
+## v-for for n times repetition
+
+You can repeat things n times using a `v-for`:
+
+```html
+<v-container v-for="index in 10" :key="index"></v-container>
+```
+
+Use `<v-container fill-height class="d-flex justify-center align-content-center">`
+to get content like - screenshot of central content with pipe background
+
+-webkit-background-size: cover;
+-moz-background-size: cover;
+-o-background-size: cover;
+background-size: cover;
+
+## Images as backgrounds
+
+You can use `background-size: cover;` in the css to dynamically have a background image adjust to the viewport.
+<https://www.webfx.com/blog/web-design/responsive-background-image/>
+
+Demo: <https://www.webfx.com/blog/images/assets/cdn.sixrevisions.com/0431-01_responsive_background_image_demo/responsive-full-background-image-demo.html>
+
+You can use aditional controls to set how the image should scale itself:
+<https://css-tricks.com/perfect-full-page-background-image/>
+
+Cropping images with `object-fit: cover;`
+<https://alligator.io/css/cropping-images-object-fit/>
+
+### SVG elements as a background
+
+You can use an svg (from envato) as a fullscreen background image. To do this you should decide if you need a transparent appbar or not.
+
+If you do not need a transparent appbar:
+
+- Set an image
+  - with `position: absolute;`
+  - with `height: calc(100vh - 64px)`
+
+## Images that autoscale (zoom)
+
+This is a good example on how you can dynamically zoom in/out of an image:
+<https://css-tricks.com/crop-top/>
+
+Quick method:
+
+To set an image to auto scale (zoom style)
+
+Use `max-width` to the value you want the image to be
+Use `width: 100%;`
+Use `height: auto;`
+Use `max-height` to the value you want the image to be
+
+## Using envato EPS
+
+Open the EPS file in Graphic. Hide and delete all the layers you don't need. When finished, create a new canvas and copy and paste the images to it. Position it accordingly and resize everything. Export as svg and edit the svg to remove the height and width.
+
+## Transparent appbar
+
+You can have the appbar be transparent to have a background image fullscreen. To do this you should:
+
+- Set an image
+  - with `position: absolute;`
+  -
+
+## To Do
+
+Image looks good on `left: 50%;`
+
+Organise these notes!
+
+Set dynamic navbar content (cols)
+
+Get image cropping from more than one direction
+
+Document all up and move into firebase.md
+
+Do stripe menu
+
+Do waves/headers with backgrounds
+Do a fullscreen blob landing page
+Do Tailwind layout (moveable side content)
+Do <https://elements.envato.com/masty-business-html-landing-page-template-WQGEWXK> (using clippath on an image with an overlay colour?)
+Do Liquidlight (using big headers)
+Do <https://elements.envato.com/appstorm-app-startup-template-L74LLT> (use 100vh on background image as in playground with transparent appbar)
+
+Position a triangle top right as in <https://elements.envato.com/set-of-medical-web-page-design-templates-5RRCL9>
+
+And position random blobs as in <https://elements.envato.com/set-of-web-page-design-templates-EHNRLP>
+
+More images: <https://elements.envato.com/set-of-medical-web-page-design-templates-VYMDPA>
+
+Do buttons: <https://www.gatsbyjs.org>
+
+Mention using media query to unset the right position when the breakpoint is met (find the breakpoint in vuetify)
+<https://www.w3schools.com/css/css_rwd_mediaqueries.asp>
+
+Can use dynamic classes with vuetify.
+
+Navbar gets slightly smaller on smaller breakpoints - can we dynamically set the hight on this?
+
+56 on small breakpoint
+64 on medium and up
+
+List of breakpoints:
+<https://vuetifyjs.com/en/customization/breakpoints/#breakpoints>
+
+Small: `600px >< 960px`
+Medium: `960px >< 1264px`
+
+When at width of image background, can set to right:0 to crop from left, and left:0 to crop from right.
+
+Doc setting an image as background without transparent appbar
+Should show how to dynamically change height and left/right based on viewport (shorter appbar on small)
+
+Doc setting an image with transparent appbar
+Rather than change height you need to set top to negative
+
+Have examples of both of these to refer back to^
+
+## Stripe appbar menu
+
+## React to height change
+
+### Get current height of page
+
+To create content based on viewport height change you should use an event listener: `window.addEventListener`.
+
+A list of all events you can listen for is here: <https://developer.mozilla.org/en-US/docs/Web/Events>
+
+The current height can be obtained from `window.innerHeight`.
+
+You should add `created` and `destroyed` to the script, and create a method to do something on the trigger:
+
+```javascript
+export default {
+  data() {
+    return {
+      viewportHeight: window.innerHeight
+    };
+  },
+  created() {
+    window.addEventListener("resize", this.updateHeight);
+  },
+  destroyed() {
+    window.removeEventListener("resize", this.updateHeight);
+  },
+  methods: {
+    updateHeight() {
+      this.viewportHeight = window.innerHeight;
+    }
+  }
+};
+```
+
+This can be useful if you need to pass the current height to a prop for an image component that you might want to fill the page:
+
+```html
+<v-img
+  src="../assets/images/newbackground.png"
+  :height="this.viewportHeight - 64"
+  width="auto"
+  contain
+  position="bottom 0px right 0px"
+  class="ma-0 pa-0"
+  id="backgroundsvg"
+></v-img>
+```
+
+You can also get the height in the css. This way you can have an image set its own width or height as css parameters.
+
+```css
+.full-screen {
+  height: calc(100vh - 64px);
+}
+```
+
+You might also want to add browser compatibility options:
+
+Opera:
+`height: -o-calc(100% - 65px);`
+
+Google/Safari:
+`height: -webkit-calc(100% - 65px);`
+
+### Get current height of an object
+
+Simiarly, you can add a watcher to get the width of any element. You should add a css class to the object you want to get the width of. Then you can use a `querySelector` to get it:
+
+```javascript
+getBackgroundWidth() {
+    var background = document.querySelector("#backgroundsvg");
+    this.backgroundWidth = background.clientWidth;
+}
+```
+
+Documentation for `querySelector`: <https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector>
+
+You can see all the methods and properties for document here:
+<https://developer.mozilla.org/en-US/docs/Web/API/Document>
+
+## Using `<v-content>` to fill the page
+
+`fill-height` is useful for child components if you want them to fill to the height of the parent.
+
+To make a fullscreen element use fluid with 0 margins, and set the height to 100vh. Then any children `<v-component>` can use the `fill-height` prop.
+
+## v-for for n times repetition
+
+You can repeat things n times using a `v-for`:
+
+```html
+<v-container v-for="index in 10" :key="index"></v-container>
+```
+
+Use `<v-container fill-height class="d-flex justify-center align-content-center">`
+to get content like - screenshot of central content with pipe background
+
+-webkit-background-size: cover;
+-moz-background-size: cover;
+-o-background-size: cover;
+background-size: cover;
+
+## Images as backgrounds
+
+You can use `background-size: cover;` in the css to dynamically have a background image adjust to the viewport.
+<https://www.webfx.com/blog/web-design/responsive-background-image/>
+
+Demo: <https://www.webfx.com/blog/images/assets/cdn.sixrevisions.com/0431-01_responsive_background_image_demo/responsive-full-background-image-demo.html>
+
+You can use aditional controls to set how the image should scale itself:
+<https://css-tricks.com/perfect-full-page-background-image/>
+
+Cropping images with `object-fit: cover;`
+<https://alligator.io/css/cropping-images-object-fit/>
+
+### SVG elements as a background
+
+You can use an svg (from envato) as a fullscreen background image. To do this you should decide if you need a transparent appbar or not.
+
+If you do not need a transparent appbar:
+
+- Set an image
+  - with `position: absolute;`
+  - with `height: calc(100vh - 64px)`
+
+## Images that autoscale (zoom)
+
+This is a good example on how you can dynamically zoom in/out of an image:
+<https://css-tricks.com/crop-top/>
+
+Quick method:
+
+To set an image to auto scale (zoom style)
+
+Use `max-width` to the value you want the image to be
+Use `width: 100%;`
+Use `height: auto;`
+Use `max-height` to the value you want the image to be
+
+## Using envato EPS
+
+Open the EPS file in Graphic. Hide and delete all the layers you don't need. When finished, create a new canvas and copy and paste the images to it. Position it accordingly and resize everything. Export as svg and edit the svg to remove the height and width.
+
+## Fullscreen image as a background
+
+### Transparent appbar
+
+You can have the appbar be transparent to have a background image fullscreen.
+
+```html
+<v-app-bar
+  flat
+  app
+  hide-on-scroll
+  color="rgba(93.3%, 93.3%, 93.3%, 0.5)"
+  v-if="!this.$store.getters.fullScreen"
+  style="z-index: 15;"
+></v-app-bar>
+```
+
+### Adjust image height to match that of dynamic appbar
+
+### Using CSS media queries for dynamic classes
+
+The appbar will adjust its own height based on the viewport.
+
+On medium and above it will be 64px, on small and below it will be 56px.
+
+On the image itself you should adjust the `top` css property to account for this:
+
+```scss
+img.new-background-image {
+  height: calc(100vh);
+  position: absolute;
+  right: 0;
+  @media screen and (max-width: $background-width) {
+    left: 0px;
+  }
+  @media #{map-get($display-breakpoints, 'md-and-up')} {
+    top: -64px;
+  }
+  @media #{map-get($display-breakpoints, 'sm-and-down')} {
+    top: -56px;
+  }
+}
+```
+
+## Stripe appbar menu
+
+Example: <https://git.panaetius.co.uk/web-development/savvy-firebase/src/branch/base-template/src/components/Appbar.vue>
+
+Install with yarn:
+`yarn add vue-stripe-menu`
+
+Add to `main.js`:
+
+```javascript
+import Vue from "Vue";
+import VueStripeMenu from "vue-stripe-menu";
+Vue.use(VueStripeMenu);
+// Import build styles
+import "vue-stripe-menu/dist/vue-stripe-menu.css";
+```
+
+You should create Vue components for the content you want to display on hover.
+
+To use these in the appbar component, import the components:
+
+```javascript
+import Welcome from "./views/stripe-appbar/Welcome";
+import WelcomeSecondary from "./views/stripe-appbar/WelcomeSecondary";
+```
+
+Then you should create a menu object in `data`:
+
+```javascript
+data() {
+return {
+    menu: [
+    {
+        title: "Welcome",
+        dropdown: "welcome",
+        content: Welcome,
+        secondary: WelcomeSecondary,
+        element: "span"
+    },
+    {
+        title: "Welcome",
+        dropdown: "welcome",
+        content: Welcome,
+        secondary: WelcomeSecondary
+    }
+    ]
+};
+}
+```
+
+Then in the html you should create the appbar layout you need:
+
+```html
+<vsm-menu ref="header" :menu="menu" :screen-offset="25">
+  <template #default="data">
+    <component :is="data.item.content" class="content" />
+    <component :is="data.item.secondary" class="content--secondary" />
+  </template>
+</vsm-menu>
+```
+
+The `ref` is so you can refer to the menu object in javascript using `this.$header` later on. The menu prop should point to the list which contains the objects for each component you want to render.
+
+You can use css to control how the components should be rendered:
+
+```css
+.content {
+  padding: 20px;
+}
+.content--secondary {
+  padding: 20px;
+}
+```
+
+To control the width, you should set the `width` in the css in the components themsevles:
+
+```html
+<v-container>
+  <v-row>
+    <v-col style="width: 300px;">
+      Welcome Secondary Content
+    </v-col>
+  </v-row>
+</v-container>
+```
+
+To have two menu content sections top and bottom: use `content` and `secondary`.
+To have two menu content sections side by side: create the full layout in the Vue component.
+
+If you just want a link and no component as a dropdown, you should reference a `routerLink` object inside the list's object.
+
+```javascript
+{
+    title: "Playground",
+    routerLink: { name: "Playground" }
+}
+```
+
+Then you can use a `<router-link>` component with a `v-if="data.item.routerLink"`:
+
+```html
+<template #default="data">
+  <component :is="data.item.content" class="content" />
+  <component :is="data.item.secondary" class="content--secondary" />
+</template>
+<template #title="menu" class="ma-0 pa-0">
+  <router-link
+    :to="menu.item.routerLink"
+    v-if="menu.item.routerLink"
+    style="padding-bottom: -20px;"
+  >
+    <p class="ma-0 pa-0 underline routerLink">
+      {{ menu.item.title }}
+    </p>
+  </router-link>
+</template>
+```
+
+Using the title prop controls what text should be rendered for each object's title. We can use an if with a router-link to control whether it should be a link or not.
+
+To control the scss variables you should create an appbar.scss file in the `./scss/` folder. This file should override the default scss variables of the component.
+
+<https://github.com/Alexeykhr/vue-stripe-menu/blob/master/src/scss/_variables.scss>
+
+```scss
+@import "../scss/_variables.scss";
+
+$vsm-menu-link-height: 35px !default;
+$vsm-color: $mainColor !default;
+$vsm-color-hover: $mainColor !default;
+$vsm-media: 768px !default;
+$vsm-menu-border-radius: 15px !default;
+$vsm-menu-transform-content: 150px !default;
+
+@import "~vue-stripe-menu/src/scss/index";
+```
+
+We can import the default `_variables.scss` to use the font colour variable. Once we have overwritten the variables we should import the default scss file. Then in your `main.js` file you should import this scss file instead:
+
+```javascript
+import "./scss/appbar.scss";
+```
+
+You can use this file to set the breakpoint width that Vuetify uses. If your appbar changes on sm and below, you can set the `$vsm-media` variable to this pixel viewport.
+
+To allow the appbar to function in a Vuetify appbar component, you should set the `z-index` in the css of the element:
+
+```html
+<v-app-bar
+  flat
+  app
+  hide-on-scroll
+  color="rgba(93.3%, 93.3%, 93.3%, 0.5)"
+  v-if="!this.$store.getters.fullScreen"
+  style="z-index: 15;"
+></v-app-bar>
+```
+
+## Getting sass to talk to javascript
+
+<https://css-tricks.com/making-sass-talk-to-javascript-with-json/>
+
+## Using Vuetify Sass variables for dynamic css
+
+## Using SASS variables for viewport
+
+Vuetify has SASS variables that you can use in your css blocks.
+
+<https://vuetifyjs.com/en/customization/sass-variables/>
+
+To control CSS based on the viewport, you can either set the class dynamically, or you can use SCSS itself.
+
+You can use `$display-breakpoints` with a `map-get` in the sass to set a css property dynamically (check the documentation for the options that `$display-breakpoints` offers).
+
+For example, you can apply css to a class based on whether or not the viewport is met:
+
+```scss
+img.new-background-image {
+  height: calc(100vh);
+  position: absolute;
+  right: 0;
+  top: -64px;
+  @media #{map-get($display-breakpoints, 'sm-and-down')} {
+    left: 0px;
+  }
+}
+```
+
+If you want to break on a specific width (say when the background image width is met to align it), you can use a scss variable:
+
+```scss
+$background-width: 795px;
+
+img.new-background-image {
+  height: calc(100vh);
+  position: absolute;
+  right: 0;
+  top: -64px;
+  @media screen and (max-width: $background-width) {
+    left: 0px;
+  }
+}
+```
+
+## To Do
+
+Image looks good on `left: 50%;`
+
+Organise these notes!
+
+Set dynamic navbar content (cols)
+
+Get image cropping from more than one direction
+
+Document all up and move into firebase.md
+
+Do stripe menu
+
+Do waves/headers with backgrounds
+Do a fullscreen blob landing page
+Do Tailwind layout (moveable side content)
+Do <https://elements.envato.com/masty-business-html-landing-page-template-WQGEWXK> (using clippath on an image with an overlay colour?)
+Do Liquidlight (using big headers)
+Do <https://elements.envato.com/appstorm-app-startup-template-L74LLT> (use 100vh on background image as in playground with transparent appbar)
+
+Position a triangle top right as in <https://elements.envato.com/set-of-medical-web-page-design-templates-5RRCL9>
+
+And position random blobs as in <https://elements.envato.com/set-of-web-page-design-templates-EHNRLP>
+
+More images: <https://elements.envato.com/set-of-medical-web-page-design-templates-VYMDPA>
+
+Do buttons: <https://www.gatsbyjs.org>
+
+Mention using media query to unset the right position when the breakpoint is met (find the breakpoint in vuetify)
+<https://www.w3schools.com/css/css_rwd_mediaqueries.asp>
+
+Can use dynamic classes with vuetify.
+
+Navbar gets slightly smaller on smaller breakpoints - can we dynamically set the hight on this?
+
+56 on small breakpoint
+64 on medium and up
+
+List of breakpoints:
+<https://vuetifyjs.com/en/customization/breakpoints/#breakpoints>
+
+Small: `600px >< 960px`
+Medium: `960px >< 1264px`
+
+When at width of image background, can set to right:0 to crop from left, and left:0 to crop from right.
+
+Doc setting an image as background without transparent appbar
+Should show how to dynamically change height and left/right based on viewport (shorter appbar on small)
+
+Doc setting an image with transparent appbar
+Rather than change height you need to set top to negative
+
+Have examples of both of these to refer back to^

vue.config.js

@@ -1,11 +1,11 @@
 module.exports = {
   css: {
     loaderOptions: {
-      scss: {
-        prependData: `
-          @import "@/scss/_variables.scss";
-        `
-      }
+      // scss: {
+      //   prependData: `
+      //     @import "@/scss/_variables.scss";
+      //   `
+      // }
     }
   },
   transpileDependencies: ["vuetify"]

yarn.lock

@@ -1445,6 +1445,15 @@ anymatch@~3.1.1:
     normalize-path "^3.0.0"
     picomatch "^2.0.4"
 
+aos@^3.0.0-beta.6:
+  version "3.0.0-beta.6"
+  resolved "https://registry.yarnpkg.com/aos/-/aos-3.0.0-beta.6.tgz#75148e3be4bb1add53f5a1828623bf82b67691e9"
+  integrity sha512-VLWrpq8bfAWcetynVHMMrqdC+89Qq/Ym6UBJbHB4crIwp3RR8uq1dNGgsFzoDl03S43rlVMK+na3r5+oUCZsYw==
+  dependencies:
+    classlist-polyfill "^1.2.0"
+    lodash.debounce "^4.0.8"
+    lodash.throttle "^4.1.1"
+
 aproba@^1.1.1:
   version "1.2.0"
   resolved "https://registry.npm.taobao.org/aproba/download/aproba-1.2.0.tgz#6802e6264efd18c790a1b0d517f0f2627bf2c94a"
@@ -2133,6 +2142,11 @@ class-utils@^0.3.5:
     isobject "^3.0.0"
     static-extend "^0.1.1"
 
+classlist-polyfill@^1.2.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/classlist-polyfill/-/classlist-polyfill-1.2.0.tgz#935bc2dfd9458a876b279617514638bcaa964a2e"
+  integrity sha1-k1vC39lFiodrJ5YXUUY4vKqWSi4=
+
 clean-css@4.2.x:
   version "4.2.3"
   resolved "https://registry.npm.taobao.org/clean-css/download/clean-css-4.2.3.tgz#507b5de7d97b48ee53d84adb0160ff6216380f78"
@@ -4914,6 +4928,11 @@ locate-path@^5.0.0:
   dependencies:
     p-locate "^4.1.0"
 
+lodash.debounce@^4.0.8:
+  version "4.0.8"
+  resolved "https://registry.yarnpkg.com/lodash.debounce/-/lodash.debounce-4.0.8.tgz#82d79bff30a67c4005ffd5e2515300ad9ca4d7af"
+  integrity sha1-gteb/zCmfEAF/9XiUVMArZyk168=
+
 lodash.defaultsdeep@^4.6.1:
   version "4.6.1"
   resolved "https://registry.npm.taobao.org/lodash.defaultsdeep/download/lodash.defaultsdeep-4.6.1.tgz#512e9bd721d272d94e3d3a63653fa17516741ca6"
@@ -4934,6 +4953,11 @@ lodash.memoize@^4.1.2:
   resolved "https://registry.npm.taobao.org/lodash.memoize/download/lodash.memoize-4.1.2.tgz#bcc6c49a42a2840ed997f323eada5ecd182e0bfe"
   integrity sha1-vMbEmkKihA7Zl/Mj6tpezRguC/4=
 
+lodash.throttle@^4.1.1:
+  version "4.1.1"
+  resolved "https://registry.yarnpkg.com/lodash.throttle/-/lodash.throttle-4.1.1.tgz#c23e91b710242ac70c37f1e1cda9274cc39bf2f4"
+  integrity sha1-wj6RtxAkKscMN/HhzaknTMOb8vQ=
+
 lodash.transform@^4.6.0:
   version "4.6.0"
   resolved "https://registry.npm.taobao.org/lodash.transform/download/lodash.transform-4.6.0.tgz#12306422f63324aed8483d3f38332b5f670547a0"
@@ -8020,6 +8044,11 @@ vue-loader@^15.8.3:
     vue-hot-reload-api "^2.3.0"
     vue-style-loader "^4.1.0"
 
+vue-page-transition@^0.2.2:
+  version "0.2.2"
+  resolved "https://registry.yarnpkg.com/vue-page-transition/-/vue-page-transition-0.2.2.tgz#a7c607ccc8dc67e7c05e66a5a9d54bd27d252d56"
+  integrity sha512-qOx+llJ28XX0VwJNJ4GVaeNBPRmPMZac2QQgrIHVUhpXyJx2CQ2XvoQOpGD1ge7QMY3PjZ6fwTbdBwZkA3I9qA==
+
 vue-responsive-video-background-player@^1.0.8:
   version "1.0.8"
   resolved "https://registry.yarnpkg.com/vue-responsive-video-background-player/-/vue-responsive-video-background-player-1.0.8.tgz#c0c95b82aa48a13e92f72c6051cc7ec8ff44058d"
@@ -8030,6 +8059,14 @@ vue-router@^3.1.5:
   resolved "https://registry.npm.taobao.org/vue-router/download/vue-router-3.1.6.tgz?cache=0&sync_timestamp=1584203224109&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fvue-router%2Fdownload%2Fvue-router-3.1.6.tgz#45f5a3a3843e31702c061dd829393554e4328f89"
   integrity sha1-RfWjo4Q+MXAsBh3YKTk1VOQyj4k=
 
+vue-stripe-menu@^1.2.8:
+  version "1.2.8"
+  resolved "https://registry.yarnpkg.com/vue-stripe-menu/-/vue-stripe-menu-1.2.8.tgz#435b992fc4dd519f5711c0d882b32ed7bf883151"
+  integrity sha512-4btZ1/s8+fFGQexcgCMVGoIW6zxUg1jJ+sYgM/gcCYPtrWVMvcHQ2Hx2gBcAQaCat9WD/Hy/ddx2pgzXvljBNg==
+  dependencies:
+    core-js "^3.6.4"
+    vue "^2.6.11"
+
 vue-style-loader@^4.1.0, vue-style-loader@^4.1.2:
   version "4.1.2"
   resolved "https://registry.npm.taobao.org/vue-style-loader/download/vue-style-loader-4.1.2.tgz#dedf349806f25ceb4e64f3ad7c0a44fba735fcf8"