updating latest

package.json

@@ -15,6 +15,7 @@
     "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/components/Appbar.vue

@@ -4,7 +4,7 @@
       flat
       app
       hide-on-scroll
-      color="#EEEEEE"
+      color="rgba(93.3%, 93.3%, 93.3%, 0.5)"
       v-if="!this.$store.getters.fullScreen"
     >
       <v-row>

src/main.js

@@ -3,15 +3,22 @@ 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";
 
 Vue.config.productionTip = false;
 Vue.component("video-background", VideoBackground);
 
 Vue.use(VuePageTransition);
+Vue.use(VueStripeMenu);
 
 new Vue({
   created() {

src/views/Playground.vue

@@ -2,8 +2,7 @@
   <div>
     <v-container fluid class="ma-0 pa-0 full-screen d-flex">
       <img
-        src="../assets/images/newbackground.png"
+        src="../assets/images/pipebackground_1.svg"
-        width="auto"
         style=""
         class="d-flex align-end ma-0 pa-0 justify-end new-background-image"
       />
@@ -79,16 +78,20 @@ export default {
 
 <style lang="scss" scoped>
 .full-screen {
+  // height: calc(100vh - 64px);
   height: calc(100vh - 64px);
 }
 
 img.new-background-image {
-  max-height: calc(100vh - 64px);
+  // height: calc(100vh - 64px);
+  height: calc(100vh);
   position: absolute;
-  height: 100%;
+  // height: 100%;
-  max-width: 1115px;
+  // width: 1115px;
-  // right: 0;
+  // left: 0;
-  left: 50%;
+  right: 0;
+  top: -64px;
+  // left: 50%;
 }
 
 .background-image {

temp.md

@@ -114,6 +114,16 @@ You can use aditional controls to set how the image should scale itself:
 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:
@@ -128,6 +138,19 @@ 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%;`
@@ -145,7 +168,15 @@ 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>
 
@@ -166,3 +197,31 @@ 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
+
+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'
+```

yarn.lock

@@ -8059,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"