feat: warped torus background is in own layout

Author: tikagan

components/site-footer.vue

@@ -1,5 +1,5 @@
 <template>
-  <footer id="site-footer" :class="{ 'no-background-image': pageSignup }">
+  <footer id="site-footer" :class="{ 'no-background-image': noBackgroundImage }">
 
     <div class="content">
       <div class="grid-bottom-noBottom-noGutter">
@@ -52,10 +52,18 @@
 <script setup>
 // ======================================================================== Data
 const generalStore = useGeneralStore()
-const route = useRoute()
+
+// ======================================================================= Props
+const props = defineProps({
+  noBackgroundImage: {
+    type: Boolean,
+    required: false,
+    default: false
+  }
+})
 
 // ==================================================================== Computed
-const pageSignup = computed(() => { return route.name === 'signup' })
+const noBackgroundImage = computed(() => { return props.noBackgroundImage })
 
 const authors = computed(() => {
   return generalStore.siteContent.general?.footer.authors

layouts/warped-torus-background.vue

@@ -0,0 +1,49 @@
+<template>
+  <div class="layout warped-torus-background" tabindex="-1">
+
+    <SiteHeader />
+
+    <slot />
+
+    <SiteFooter :no-background-image="true" />
+
+  </div>
+</template>
+
+<style lang="scss" scoped>
+// ///////////////////////////////////////////////////////////////////// General
+.layout {
+  display: flex;
+  flex-direction: column;
+  &:before {
+    content: '';
+    position: absolute;
+    display: block;
+    z-index: -1;
+    overflow: visible;
+    top: 0;
+    left: 0;
+    height: 100%;
+    width: 100%;
+    background-image: url('/images/warped-torus-made-of-segments.jpg');
+    background-size: auto vw(1800px);
+    background-origin: border-box;
+    background-position: center 75%;
+    background-repeat: no-repeat;
+    @include medium {
+      background-position: center 45%;
+    }
+    @include small {
+      background-position: center 30%;
+    }
+    @include mini {
+      background-size: auto vw(1100px, 640px);
+      background-position: center bottom 18rem;
+    }
+    @include tiny {
+      background-size: auto vw(1200px, 415px);
+      background-position: center top -30%;
+    }
+  }
+}
+</style>

pages/signup.vue

@@ -25,7 +25,9 @@
 </template>
 
 <script setup>
-
+definePageMeta({
+  layout: 'warped-torus-background'
+})
 // ======================================================================== Data
 const generalStore = useGeneralStore()
 const { $GetSeo, $CompileSeo } = useNuxtApp()
@@ -59,47 +61,6 @@ const content = computed(() => {
     position: relative;
     margin-top: 4.875rem;
   }
-  &:before {
-    content: '';
-    position: absolute;
-    display: block;
-    z-index: -1;
-    overflow: visible;
-    top: 0;
-    left: -8vw;
-    width: 120vw;
-    height: calc(100% + toRem(365));
-    background-image: url('/images/warped-torus-made-of-segments.jpg');
-    background-size: vw(2200px);
-    background-origin: border-box;
-    background-position: center 64%;
-    background-repeat: no-repeat;
-    @include gridMaxMQ {
-      height: calc(100% + toRem(430));
-      background-position: center 54%;
-    }
-    @include large {
-      background-size: clamp(toRem(1700), vw(2200px), toRem(1833));
-      background-position: center 44%;
-    }
-
-    @include medium {
-      height: calc(100% + toRem(480));
-    }
-    @include customMaxMQ(toRem(983)) {
-      background-position: center bottom;
-      top: 2rem;
-    }
-    @include small {
-      height: 100%;
-    }
-    @include mini {
-      background-size: vw(1030px, 375px);
-      height: calc(100% + toRem(200));
-      top: unset;
-      bottom: -2rem;
-    }
-  }
 }
 
 .back-home-button {