fix: adjust animations

Author: gabaldon

assets/styles/tailwind.css

@@ -98,13 +98,13 @@
 
   /* Button */
   .btn {
-    @apply w-full py-sm px-md-alt cursor-pointer border-2 border-black-950 hover:shadow-none hover:translate-x-xs hover:translate-y-xs ease-[cubic-bezier(0.25,0.4,0.55,1.4)] duration-100;
+    @apply w-full py-sm px-md-alt cursor-pointer border-2 border-black-950;
   }
   .btn-primary {
-    @apply font-semibold rounded-full bg-wit-blue-500 hover:bg-wit-blue-400 text-black-950 focus:outline-none focus:ring focus:ring-wit-blue-500 focus:ring-opacity-80 shadow-[3px_7px_0px] shadow-black-950;
+    @apply font-semibold rounded-full bg-wit-blue-500 hover:bg-wit-blue-400 text-black-950 focus:outline-none focus:ring focus:ring-wit-blue-500 focus:ring-opacity-80 shadow-[3px_7px_0px] shadow-black-950 hover:shadow-none hover:translate-x-xs hover:translate-y-xs ease-[cubic-bezier(0.25,0.4,0.55,1.4)] duration-75;
   }
   .btn-dark {
-    @apply font-semibold rounded-full bg-white-50 hover:bg-white-100 text-black-950 focus:outline-none focus:ring focus:ring-wit-blue-500 focus:ring-opacity-80 shadow-[3px_7px_0px] shadow-wit-blue-500;
+    @apply font-semibold rounded-full bg-white-50 hover:bg-white-100 text-black-950 focus:outline-none focus:ring focus:ring-wit-blue-500 focus:ring-opacity-80 shadow-[3px_7px_0px] shadow-wit-blue-500 hover:shadow-none hover:translate-x-xs hover:translate-y-xs ease-[cubic-bezier(0.25,0.4,0.55,1.4)] duration-75;
   }
   .btn-secondary {
     @apply font-semibold rounded-full bg-black-950 hover:bg-black-900 text-white-50 focus:outline-none focus:ring focus:ring-black-500 focus:ring-opacity-80 border-2 shadow-[3px_7px_0px] shadow-black-950;

components/sections/HeroSection.vue

@@ -4,7 +4,7 @@
     :center-left-content="false"
     :content-classes="'p-[24px_100px] sm:p-[0px_32px] xs:p-[0px_16px]'"
     :section-animation="false"
-    :height="'h-lg-y-screen max-h-[900px]'"
+    :height="'h-lg-y-screen max-h-[900px] md:max-h-[100vh]'"
   >
     <template #content>
       <div
@@ -14,41 +14,41 @@
         @mouseout="stopMoveAnimation"
       >
         <DottedBg
-          class="absolute z-0 h-2-md-y-screen max-h-[700px] overflow-hidden"
+          class="absolute z-0 h-2-md-y-screen max-h-[700px] md:max-h-full overflow-hidden"
         />
         <div
           ref="plusIcon"
-          class="animation1 absolute left-xl top-[450px] z-10 overflow-hidden sm:hidden lg:top-[280px] md:top-[550px] md:right-lg"
+          class="animation1 absolute h-max w-max left-xl top-[450px] z-10 overflow-hidden sm:hidden lg:top-[280px] md:bottom-[30vh] md:top-auto md:right-md"
         >
           <Plus />
         </div>
         <div
           ref="zigzagIcon"
-          class="animation1 absolute left-xl bottom-xl z-10 overflow-hidden sm:hidden md:bottom-sm"
+          class="animation1 absolute left-xl bottom-xl z-10 overflow-hidden sm:hidden md:bottom-[15vh] md:left-[3vw]"
         >
           <Zigzag />
         </div>
         <div
           ref="squareIcon"
-          class="animation1 absolute left-xl top-xl z-10 sm:hidden md:top-sm"
+          class="animation1 absolute left-xl top-xl z-10 sm:hidden md:top-[8vh] md:left-[3vw]"
         >
           <SquareDots />
         </div>
         <div
           ref="plusIcon2"
-          class="animation1 absolute right-xl top-[300px] z-10 overflow-hidden rotate-90 sm:hidden md:top-sm"
+          class="animation1 absolute right-xl top-[300px] z-10 overflow-hidden rotate-90 sm:hidden md:top-[25vh] md:right-[3vw]"
         >
           <Plus />
         </div>
         <div
           ref="zigzagIcon2"
-          class="animation1 absolute right-xl top-xl z-10 overflow-hidden rotate-90 sm:hidden md:top-sm"
+          class="animation1 absolute right-xl top-xl z-10 overflow-hidden rotate-90 sm:hidden md:top-[8vh] md:right-[3vw]"
         >
           <Zigzag />
         </div>
         <div
           ref="squareIcon2"
-          class="animation1 absolute right-xl bottom-xl z-10 sm:hidden md:bottom-sm"
+          class="animation1 absolute right-xl bottom-xl z-10 sm:hidden md:bottom-[15vh]"
         >
           <SquareDots />
         </div>

components/sections/NewsletterSection.vue

@@ -22,7 +22,7 @@
         <RotateOnScroll
           section-id="newsletter"
           start-position="-=100% top"
-          end-position="+=190%"
+          end-position="+=100%"
         >
           <BlackStarIcon ref="blackStar" class="sm:hidden w-[460px] h-auto" />
         </RotateOnScroll>

layouts/default.vue

@@ -19,10 +19,13 @@
             @mouseover="activateLink(link)"
             @mouseleave="clearActiveLinks"
           >
-            <NavigationCursor
-              v-if="link.active"
-              class="w-sm h-auto absolute top-[16px] left-[4px]"
-            /><span /><span class="slash text-wit-blue-500">/</span
+            <Transition name="fade">
+              <NavigationCursor
+                v-if="link.active"
+                class="w-sm h-auto absolute top-[16px] left-[4px]"
+              />
+            </Transition>
+            <span /><span class="slash text-wit-blue-500">/</span
             >{{ t(link.locale) }}
           </InnerLink>
         </template>
@@ -84,6 +87,13 @@ function clearActiveLinks() {
 </script>
 
 <style lang="scss">
+.fade-enter-active {
+  transition: opacity 0.3s;
+}
+.fade-enter-from {
+  opacity: 0;
+}
+
 .logo-link {
   a {
     text-decoration: none;

layouts/section.vue

@@ -1,6 +1,6 @@
 <template>
   <div :class="`relative overflow-hidden`">
-    <div id="animation-container" :class="`w-full ${frameClasses}`">
+    <div id="animation-container" :class="`w-full h-full ${frameClasses}`">
       <div
         ref="content"
         :class="`content p-[100px] m-[0_auto] max-w-[1100px] w-full sm:p-[70px_32px] xs:p-[70px_16px] z-50 ${height} ${contentClasses}`"