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,6 +2,9 @@
  * gsap lib https://greensock.com/get-started-2#controllingYourAnimations
  */
 let development_debug = false
+let enable_animations = false
+
+if (enable_animations) {
 
 	gsap.fromTo('#main_title', {
 		opacity: 0,
@@ -30,6 +33,7 @@ gsap.to('#hand', {
 	})
 	gsap.to('#main_title', {
 		top: 150,
+
 		duration: 1,
 		scrollTrigger: {
 			trigger: '#main_title',
@@ -216,3 +220,4 @@ animateCard(2, 'right')
 	animateCard(3, 'left')
 	animateCard(4, 'right')
 	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>