updating latest

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'
+```