fix blob for mobile

assets/scss/utility.scss

@@ -43,6 +43,10 @@
   opacity: 0.5;
 }
 
+.is-heavily-dimmed {
+  opacity: 0.2;
+}
+
 .has-header-top {
   padding-top: 75px;
 }
@@ -100,3 +104,9 @@
     flex-direction: column-reverse;
   }
 }
+
+.is-justify-content-start-tablet {
+  @include tablet {
+    justify-content: flex-start;
+  }
+}

components/AnimatedMesh.vue

@@ -62,7 +62,7 @@ const blobState: AnimatedObjectState = {
 const brainState: AnimatedObjectState = {
   properties: {
     rotation: new Vector3(0, -0.3, 0),
-    position: new Vector3(5, 0, 0),
+    position: new Vector3(6, 0, 0),
     scale: new Vector3(1, 1, 1),
   },
   uniforms: {

components/EcosystemStatisticsBlock.vue

@@ -1,6 +1,11 @@
 <template>
-  <div class="columns is-centered is-size-1 is-vcentered is-6">
-    <div class="column is-one-third" v-for="statistic in statistics">
+  <div
+    class="columns is-centered is-size-1 is-vcentered is-6 is-mobile is-multiline"
+  >
+    <div
+      class="column is-two-third is-one-third-tablet"
+      v-for="statistic in statistics"
+    >
       <div class="has-text-weight-bold" style="font-size: 2.5rem">
         <ClientOnly>
           <div class="is-flex is-capitalized">

components/HeroSection.vue

@@ -3,7 +3,11 @@
     <section class="section">
       <div class="container mt-5">
         <div class="columns is-vcentered">
-          <div class="column is-half" data-aos="fade-in" data-aos-delay="0">
+          <div
+            class="column is-full-mobile is-three-fifths-tablet is-half-widescreen"
+            data-aos="fade-in"
+            data-aos-delay="0"
+          >
             <h1 v-if="title" class="title is-spaced is-auto-phrase is-in-front">
               <span class="has-text-primary is-block is-in-front">{{
                 title
@@ -17,9 +21,6 @@
             <slot name="subtitle"></slot>
             <slot name="footer"></slot>
           </div>
-          <div class="column is-half is-vcentered">
-            <slot name="side"></slot>
-          </div>
         </div>
       </div>
     </section>
@@ -59,13 +60,5 @@ const props = defineProps({
       font-size: 54px;
     }
   }
-  .three-canvas {
-    position: absolute;
-    top: 0;
-    left: 0;
-    z-index: 0;
-    width: 100%;
-    height: 100%;
-  }
 }
 </style>

layouts/top.vue

@@ -14,11 +14,16 @@
 
     <div class="is-relative">
       <div
+        :class="{ 'is-earth': route.name == 'ecosystem' }"
         class="three-canvas is-absolute is-fullwidth has-background-smoke"
         style="height: 750px"
       >
         <TresCanvas preset="realistic" ref="canvas" :alpha="true">
-          <TresPerspectiveCamera ref="camera" visible :position="[0, -1, 15]" />
+          <TresPerspectiveCamera
+            ref="camera"
+            visible
+            :position="[posX, -1, 15]"
+          />
 
           <TresAmbientLight :color="'#101D56'" :intensity="2" />
 
@@ -45,8 +50,42 @@
 
 <script setup lang="ts">
 const showNotification = ref(true);
+const route = useRoute();
+
+const WIDESCREEN = 1408;
+const MOBILE = 768;
+
+const screenSize = useWindowSize().width;
+const posX = computed(() => {
+  if (screenSize.value <= MOBILE) {
+    return 6;
+  } else if (screenSize.value >= WIDESCREEN) {
+    return 0;
+  } else {
+    return 6 - ((screenSize.value - MOBILE) / (WIDESCREEN - MOBILE)) * 8;
+  }
+});
+//create a value of 0-6 that when the screen size is 300 (mobile) the number is 0 but when the screenSize is 1400+ the number is 6 and stays there
 
 const close = () => {
   showNotification.value = false;
 };
 </script>
+
+<style lang="scss">
+.three-canvas {
+  overflow: hidden;
+  display: flex;
+  justify-content: center;
+
+  opacity: 0.2;
+
+  @include desktop {
+    opacity: 0.5;
+  }
+
+  @include widescreen {
+    opacity: 1;
+  }
+}
+</style>

pages/ecosystem/index.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <HeroSection style="height: 550px">
+    <HeroSection style="height: 650px" class="">
       <template #title>
         <h1 class="has-text-primary title mb-5">
           Be Part of the <br />

pages/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div class="is-clipped">
     <HeroSection style="min-height: 750px">
       <template #title>
         <h1 class="title is-spaced has-text-primary is-auto-phrase is-in-front">