Frontend: Basic framework

tubio-frontend-nuxt-app/components/Layout/Background.vue

@@ -0,0 +1,70 @@
+<template>
+  <div>
+    <div class="bgdrop"></div>
+    <div class="bggatter__wrapper">
+      <div class="bggatter" ref="bggatter" :style="cssVars"></div>
+    </div>
+    <div class="bgmask"></div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      offsetX: { type: Number, default: 0 },
+    };
+  },
+  computed: {
+    cssVars() {
+      return "transform: translateY(-" + this.offsetX / 2 + "px);";
+    }
+  },
+  methods: {
+    handleScroll: function(e) {
+      this.offsetX = window.scrollY;
+    }
+  },
+  beforeMount() {
+    window.addEventListener("scroll", this.handleScroll);
+  },
+  destroyed() {
+      window.removeEventListener("scroll", this.handleScroll);
+    },
+};
+</script>
+
+<style lang="scss" scoped>
+.bgdrop {
+  width: 100vw;
+  height: 100vh;
+  position: fixed;
+  z-index: -10;
+  background-color: theme("colors.purple-0");
+}
+
+.bggatter {
+  width: 100%;
+  height: 1000000px;
+  position: absolute;
+  z-index: -9;
+  mask-image: url("/images/tiles/grid.png");
+  background-color: theme("colors.purple-1");
+
+  &__wrapper {
+    width: 100vw;
+    height: 100vh;
+    position: fixed;
+    overflow: hidden;
+    z-index: -9;
+  }
+}
+
+.bgmask {
+  width: 100vw;
+  height: 100vh;
+  position: fixed;
+  z-index: -8;
+  background-image: linear-gradient(#0000 50%, theme("colors.purple-0"));
+}
+</style>

tubio-frontend-nuxt-app/components/Logo.vue

@@ -1,29 +1,9 @@
 <template>
-  <svg class="NuxtLogo" width="245" height="180" viewBox="0 0 452 342" xmlns="http://www.w3.org/2000/svg">
-    <path
-      d="M139 330l-1-2c-2-4-2-8-1-13H29L189 31l67 121 22-16-67-121c-1-2-9-14-22-14-6 0-15 2-22 15L5 303c-1 3-8 16-2 27 4 6 10 12 24 12h136c-14 0-21-6-24-12z"
-      fill="#00C58E"
-    />
-    <path
-      d="M447 304L317 70c-2-2-9-15-22-15-6 0-15 3-22 15l-17 28v54l39-67 129 230h-49a23 23 0 0 1-2 14l-1 1c-6 11-21 12-23 12h76c3 0 17-1 24-12 3-5 5-14-2-26z"
-      fill="#108775"
-    />
-    <path
-      d="M376 330v-1l1-2c1-4 2-8 1-12l-4-12-102-178-15-27h-1l-15 27-102 178-4 12a24 24 0 0 0 2 15c4 6 10 12 24 12h190c3 0 18-1 25-12zM256 152l93 163H163l93-163z"
-      fill="#2F495E"
-    />
-  </svg>
+  <div></div>
 </template>
 
 <style>
-.NuxtLogo {
-  animation: 1s appear;
-  margin: auto;
-}
-
-@keyframes appear {
-  0% {
-    opacity: 0;
-  }
+.testclas {
+  color: theme("colors.black");
 }
 </style>