adding latest

src/views/Playground.vue

@@ -0,0 +1,119 @@
+<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 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>
+@import "~vuetify/src/styles/styles.sass";
+$background-width: 795px;
+
+.full-screen {
+  height: calc(100vh - 64px);
+}
+
+img.new-background-image {
+  height: calc(100vh);
+  width: calc(100vw);
+  position: absolute;
+  @media screen and (min-width: $background-width) {
+    object-fit: scale-down;
+    object-position: right;
+  }
+  @media screen and (max-width: $background-width) {
+    object-fit: cover;
+    object-position: left;
+  }
+  @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>