feat: signup page background image

Author: tikagan

components/site-footer.vue

@@ -1,5 +1,5 @@
 <template>
-  <footer id="site-footer">
+  <footer id="site-footer" :class="{ 'no-background-image': pageSignup }">
 
     <div class="content">
       <div class="grid-bottom-noBottom-noGutter">
@@ -52,8 +52,11 @@
 <script setup>
 // ======================================================================== Data
 const generalStore = useGeneralStore()
+const route = useRoute()
 
 // ==================================================================== Computed
+const pageSignup = computed(() => { return route.name === 'signup' })
+
 const authors = computed(() => {
   return generalStore.siteContent.general?.footer.authors
 })
@@ -87,6 +90,11 @@ const scrollToTop = async () => {
     padding-top: toRem(72);
     height: unset;
   }
+  &.no-background-image {
+    &::before {
+      display: none;
+    }
+  }
   &:before {
     content: '';
     position: absolute;

pages/signup.vue

@@ -49,15 +49,51 @@ const content = computed(() => {
 
 <style lang="scss" scoped>
 // ///////////////////////////////////////////////////////////////////// General
-.page {
+.page-signup {
   flex: 1;
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   @include small{
+    position: relative;
     margin-top: 4.875rem;
   }
+  &:before {
+    content: '';
+    position: absolute;
+    display: block;
+    overflow: visible;
+    top: 0;
+    left: -8vw;
+    width: 120vw;
+    height: calc(100% + toRem(234) + toRem(100));
+    background-image: url('/images/warped-torus-made-of-segments.png');
+    background-size: toRem(2040);
+    background-origin: border-box;
+    background-position: center 64%;
+    background-repeat: no-repeat;
+    @include gridMaxMQ {
+      height: calc(100% + toRem(355));
+    }
+
+    @include medium {
+      height: calc(100% + toRem(425));
+    }
+    @include customMaxMQ(toRem(983)) {
+      background-position: center bottom;
+
+    }
+    @include small {
+      height: calc(100% + toRem(234));
+    }
+    @include tiny {
+      background-size: 820px;
+      height: calc(100% + toRem(234));
+      top: unset;
+      bottom: -15%;
+    }
+  }
 }
 
 .back-home-button {
@@ -88,4 +124,11 @@ const content = computed(() => {
     }
   }
 }
+
+// //////////////////////////////////////////////////////////////////// Sections
+#section-signup {
+  width: 100%;
+
+}
+
 </style>