add responsive, disable animations

css/0-general.css

@@ -2,6 +2,7 @@
 body {
   background: #020225;
   padding-bottom: 50vh;
+	overflow-x: hidden;
 }
 
 main section {

css/4-content.css

@@ -47,6 +47,11 @@
   font-size: 100px !important;
   letter-spacing: -0.04em;
   line-height: 90px;
+	text-shadow: 0 0 1rem #333;
+}
+#content_all .text,
+.text-title {
+	text-shadow: 0 0 1rem #333;
 }
 
 #content_all .columns > .column:nth-of-type(1) {

css/7-responsive.css

@@ -0,0 +1,107 @@
+@media screen and (max-width: 900px) {
+	#main_title_container h2 {
+		margin-top: 15vh;
+	}
+
+	#main_title {
+		top: 15rem;
+	}
+
+
+	#cover .button {
+		top: 7vh;
+	}
+
+	#content_all h2,
+	#welcome h2 {
+		font-size: 6em;
+		line-height: 1em;
+		text-align: left;
+	}
+
+	#content_all .columns{
+		top: -145vh;
+		width: 55vw;
+	}
+	.columns{
+		display:block  !important;
+	}
+	.column {
+		width: 100% !important;
+	}
+
+	#open {
+		top: 80vh;
+	}
+	/**
+	flipping part
+	 */
+	#flipping_zone {
+		margin-top: -120vh;
+		position: static;
+	}
+	.flip-container{
+		position: relative;
+	}
+
+
+
+	.flip-container + .flip-container{
+		margin-top: -5vh;
+	}
+	.flip-container .container-text{
+		z-index: 1;
+		left:33vw;
+	}
+	.flip-container .text-title{
+		margin-top:0;
+	}
+
+	.flip-container .phone-container{
+		left: 42vw;
+		top: 5vh;
+	}
+	.flip-container.flip-from-left .container-text{
+		left: 33vw;
+		top: 5vh;
+	}
+	.flip-container.flip-from-left .phone-container{
+		left: 25vw;
+		top: 10vh;
+	}
+
+	#content-4{
+		margin-top: 25vh;
+	}
+	#content-5
+	{
+		margin-top: 15vh;
+	}
+
+	#popover{
+		margin-top: 100vh;
+	}
+	/**
+	exemples sliders
+	 */
+	.slider-screen .text-title{
+		margin-top:1em;
+	}
+	.slider-screen .text,
+	.slider-screen .phone-container {
+		position: relative;
+		width: 412px;
+		left: 25vw;
+		top: 5vh;
+	}
+	.bullets{
+		top: 28em;
+	}
+	.arrow-left,
+	.arrow-right{
+		top: 60vh;
+	}
+	.slider-screen{
+		min-height:100vh;
+	}
+}

css/main.css

@@ -18,3 +18,4 @@ custom
 @import "4-content.css";
 @import "5-popover.css";
 @import "6-portfolio.css";
+@import "7-responsive.css";

index.html

@@ -38,7 +38,7 @@
         <div class="title-container">
 
           <h2 class="container-text margin-auto">
-            We focus on online
 conversion to help brands sell better and more.
+            We focus on online conversion to help brands sell better and more.
           </h2>
           <a href="#open" class="button margin-auto">Scroll</a>
         </div>
@@ -56,7 +56,7 @@
       <h2 class="margin-auto container-text-lg">
         We come from
         <span class="color-emphasis">
-            the
 most immersive e-commerce market
+            the most immersive e-commerce market
             </span>
         in the world.
       </h2>

js/main.js

@@ -2,11 +2,14 @@
  * gsap lib https://greensock.com/get-started-2#controllingYourAnimations
  */
 let development_debug = false
+let enable_animations = false
 
-gsap.fromTo('#main_title', {
+if (enable_animations) {
+
+	gsap.fromTo('#main_title', {
 		opacity: 0,
 		top: 200
-}, {
+	}, {
 		opacity: 1,
 		top: 100,
 		scale: 0.8,
@@ -17,9 +20,9 @@ gsap.fromTo('#main_title', {
 			scrub: 1,
 			markers: development_debug,
 		}
-})
+	})
 
-gsap.to('#hand', {
+	gsap.to('#hand', {
 		top: 300,
 		duration: 1,
 		scrollTrigger: {
@@ -27,18 +30,19 @@ gsap.to('#hand', {
 			scrub: 1,
 			markers: development_debug,
 		}
-})
+	})
-gsap.to('#main_title', {
+	gsap.to('#main_title', {
 		top: 150,
+
 		duration: 1,
 		scrollTrigger: {
 			trigger: '#main_title',
 			scrub: 1,
 			markers: development_debug,
 		}
-})
+	})
 
-gsap.to('#phone-watches-1',
+	gsap.to('#phone-watches-1',
 		{
 			left: 500,
 			top: (531 - 400),
@@ -51,7 +55,7 @@ gsap.to('#phone-watches-1',
 				markers: development_debug,
 			}
 		})
-gsap.to('#phone-watches-2',
+	gsap.to('#phone-watches-2',
 		{
 			left: '50vw',
 			top: 100,
@@ -64,7 +68,7 @@ gsap.to('#phone-watches-2',
 				markers: development_debug,
 			}
 		})
-gsap.to('#phone-watches-3',
+	gsap.to('#phone-watches-3',
 		{
 			left: '50vw',
 			top: 0,
@@ -77,7 +81,7 @@ gsap.to('#phone-watches-3',
 				markers: development_debug,
 			}
 		})
-gsap.to('#phone-watches-4',
+	gsap.to('#phone-watches-4',
 		{
 			left: '50vw',
 			top: -10,
@@ -91,7 +95,7 @@ gsap.to('#phone-watches-4',
 			}
 		})
 
-gsap.to('#phone-watches-4',
+	gsap.to('#phone-watches-4',
 		{
 			left: '50vw',
 			top: -10,
@@ -105,7 +109,7 @@ gsap.to('#phone-watches-4',
 			}
 		})
 
-gsap.to('#content_first',
+	gsap.to('#content_first',
 		{
 			left: -20,
 			top: -50,
@@ -120,7 +124,7 @@ gsap.to('#content_first',
 			}
 		})
 
-gsap.to('#content_second',
+	gsap.to('#content_second',
 		{
 			left: -40,
 			top: -50,
@@ -136,7 +140,7 @@ gsap.to('#content_second',
 		})
 
 // le background coloré grandit légèrement
-gsap.fromTo('#content_all_img',
+	gsap.fromTo('#content_all_img',
 		{
 			scale: 0.8,
 			left: -100
@@ -153,7 +157,7 @@ gsap.fromTo('#content_all_img',
 		})
 
 // TODO faire devenir fixe le background une fois que l'on est passé
-gsap.fromTo('#open img',
+	gsap.fromTo('#open img',
 		{
 			opacity: 0.5,
 			bottom: '-100vh'
@@ -170,10 +174,10 @@ gsap.fromTo('#open img',
 			}
 		})
 
-let rotateYCard = '180deg'
+	let rotateYCard = '180deg'
-let offsetCard = '-100px'
+	let offsetCard = '-100px'
 // flip from right
-gsap.fromTo('#content-2', {
+	gsap.fromTo('#content-2', {
 			rotateY: rotateYCard,
 			right: offsetCard,
 		},
@@ -189,7 +193,7 @@ gsap.fromTo('#content-2', {
 			}
 		})
 
-function animateCard (id, side) {
+	function animateCard (id, side) {
 
 		let fromObject = {
 			rotateY: rotateYCard,
@@ -210,9 +214,10 @@ function animateCard (id, side) {
 
 		gsap.fromTo('#content-' + id, fromObject,
 			toObject)
-}
+	}
 
-animateCard(2, 'right')
+	animateCard(2, 'right')
-animateCard(3, 'left')
+	animateCard(3, 'left')
-animateCard(4, 'right')
+	animateCard(4, 'right')
-animateCard(5, 'left')
+	animateCard(5, 'left')
+}

package-lock.json

@@ -7,11 +7,15 @@
     "": {
       "name": " ",
       "version": "0.0.1",
+      "license": "AGPLv3+",
       "dependencies": {
         "serve": "~14.2.0"
       },
       "devDependencies": {
         "parcel-bundler": "^1.8.1"
+      },
+      "engines": {
+        "node": ">=16.0.0"
       }
     },
     "node_modules/@ampproject/remapping": {

package.json

@@ -5,6 +5,9 @@
   "keywords": "sesame",
   "license": "AGPLv3+",
   "author": "B. Lemoine contact@cipherbliss.com",
+	"engines": {
+		"node": ">=16.0.0"
+	},
   "scripts": {
     "start": "serve ."
   },

sesame-vitejs/sesame/src/components/CoverSection.vue

@@ -20,7 +20,7 @@ const count = ref(0)
         <div class="title-container">
 
           <h2 class="container-text margin-auto">
-            We focus on online
 conversion to help brands sell better and more.
+            We focus on online conversion to help brands sell better and more.
           </h2>
           <a href="#open" class="button margin-auto">Scroll</a>
         </div>