passive listener and some mobile fixes

dist/jos.js

@@ -15,8 +15,8 @@ let jos_default_animation = "fade"; // fade, slide, zoom, rotate
 let jos_default_timingFunction = "ease-in-out"; // ease-in-out, ease-in, ease-out, linear
 let jos_default_threshold = 0; // 0-1  | higher value for mobile and lower for desktop
 let jos_default_duration = 0.4;
-let jos_rootMargin_top = "-10%";
-let jos_rootMargin_bottom = "-50%";
+let jos_rootMargin_top = "-10%"; //recommended value 10% to -30%
+let jos_rootMargin_bottom = "-40%"; //recommended value -10% to -60%
 let jos_default_type = "linear";
 
 let jos_default_intersectionRatio = intersectionRatio_set(); //0-0.99

style.css

@@ -43,7 +43,8 @@ footer {
   flex-direction: column;
   justify-content: center;
   align-items: center;
-  padding: 2vw;
+  margin-top: 8vw;
+  padding: 6vw;
 }
 
 .demo-container {
@@ -100,7 +101,7 @@ footer {
   width: 0;
   opacity: 0;
   display: flex;
-  width: fit-content;
+  width: 0;
   flex-direction: column;
   align-content: center;
   justify-content: center;
@@ -124,13 +125,14 @@ pre {
 @media screen and (max-width: 1000px) {
   .demo-container {
     flex-direction: column;
-    margin: 4vw;
+    margin: 2em;
   }
   .demo-name {
     flex-direction: column;
   }
   .demo-text {
     margin-left: 0;
+    /* font-size: 1.5em; */
   }
   .demo-code {
     margin-left: 0;
@@ -152,4 +154,7 @@ pre {
     overflow-y: scroll;
     width: auto;
   }
+  .demo-code::-webkit-scrollbar {
+    width: 0.5em;
+  }
 }