wip #5941 @2:30 correctifs css

diff --git a/app.css b/app.css
index 1eeaddb42ffec5a0009c9f2b45f95972356edb72..d375a79adf57b08321f0585421a2158ca365b7b8 100644 (file)
--- a/app.css
+++ b/app.css
@@ -160,10 +160,10 @@ a {
 
 @keyframes line-first {
   0% {
-    width: 0px;
+    width: 0;
   }
   100% {
-    width: 493px;
+    width: 100%;
   }
 }
 @keyframes line-second {
@@ -190,19 +190,27 @@ body {
   overflow-x: hidden;
 }
 
+.bg-blue {
+  background-color: #0A7DFF;
+}
+
+.color-blue {
+  color: #0A7DFF;
+}
+
 .container {
   width: 80%;
   margin: 0 auto;
 }
-@media screen and (min-width: 1024px) {
+@media screen and (max-width: 1680px) {
   .container {
-    width: 90%;
-    max-width: 1680px;
+    width: 100%;
   }
 }
 @media screen and (min-width: 1680px) {
   .container {
     width: 100%;
+    max-width: 1680px;
   }
 }
 .container:not(.full) {
@@ -210,14 +218,6 @@ body {
   box-sizing: border-box;
 }
 
-.bg-blue {
-  background-color: #0A7DFF;
-}
-
-.color-blue {
-  color: #0A7DFF;
-}
-
 .grid {
   display: grid;
   gap: 32px;
@@ -230,6 +230,16 @@ body {
 .grid .grid {
   grid-template-columns: repeat(2, 278px);
 }
+@media screen and (max-width: 1344px) {
+  .grid .grid {
+    grid-template-columns: repeat(1, 358px);
+  }
+}
+@media screen and (max-width: 1024px) {
+  .grid .grid {
+    grid-template-columns: repeat(1, 1fr);
+  }
+}
 .grid-item {
   overflow: hidden;
 }
@@ -323,8 +333,10 @@ b {
   font-weight: bold;
 }
 
-.max-content {
-  width: max-content;
+@media screen and (min-width: 1024px) {
+  .max-content {
+    width: max-content;
+  }
 }
 
 .relative {
@@ -335,8 +347,49 @@ b {
   padding-top: var(--space-l-3xl);
   padding-bottom: 100px;
 }
+@media screen and (max-width: 1024px) {
+  .app-header {
+    padding-bottom: 288px;
+  }
+}
+.app-header .logo {
+  position: relative;
+  z-index: 1;
+  max-width: 100px;
+  display: inline-block;
+}
+@media screen and (min-width: 1024px) {
+  .app-header .logo {
+    max-width: 160px;
+  }
+}
+.app-header .logo img {
+  width: 100%;
+}
+.app-header .video-container-mobile {
+  width: 288px;
+  height: 288px;
+  position: absolute;
+  top: 0;
+  right: 0;
+}
+@media screen and (min-width: 1024px) {
+  .app-header .video-container-mobile {
+    display: none;
+  }
+}
+.app-header .video-container-mobile video,
+.app-header .video-container-mobile svg {
+  position: absolute;
+  width: 100%;
+}
+.app-header .video-container-mobile video {
+  height: 100%;
+  object-fit: cover;
+}
 .app-banner {
   overflow: hidden;
+  padding-bottom: 169px;
 }
 .app-banner p {
   font-size: var(--step-10);
@@ -345,11 +398,26 @@ b {
 .app-banner p.first {
   padding-left: var(--space-custom-title-1);
 }
-.app-banner p.third {
-  padding-left: var(--space-custom-title-3);
+@media screen and (min-width: 768px) {
+  .app-banner p.third {
+    padding-left: var(--space-custom-title-3);
+  }
+}
+@media screen and (max-width: 768px) {
+  .app-banner .last-phrase {
+    flex-direction: column-reverse;
+    padding-left: var(--space-custom-title-3);
+  }
 }
 .app-banner span {
   font-size: var(--step-3);
+  transform: translateY(25%);
+}
+@media screen and (max-width: 1024px) {
+  .app-banner span {
+    width: 100%;
+    max-width: 200px;
+  }
 }
 .app-banner .video-container {
   height: 0;
@@ -359,6 +427,11 @@ b {
   top: 2.2vw;
   right: var(--space-l-3xl);
 }
+@media screen and (max-width: 1024px) {
+  .app-banner .video-container {
+    display: none;
+  }
+}
 @media screen and (min-width: 1680px) {
   .app-banner .video-container {
     right: 145px;
@@ -374,20 +447,20 @@ b {
 }
 .app-banner .video-container:before {
   width: 93%;
-  left: -100%;
+  left: -17%;
+  transform: translateX(-100%);
 }
 @media screen and (min-width: 1024px) {
   .app-banner .video-container:before {
     animation-name: line-first;
     animation-timing-function: cubic-bezier(0.82, 0, 0.65, 0.93);
     animation-fill-mode: forwards;
-    animation-duration: 1s;
+    animation-duration: 0.8s;
   }
 }
 @media screen and (min-width: 1680px) {
   .app-banner .video-container:before {
     width: 0;
-    transform: translateX(-79px);
   }
 }
 .app-banner .video-container:after {
@@ -398,10 +471,10 @@ b {
   .app-banner .video-container:after {
     width: 0;
     animation-name: line-second;
-    animation-timing-function: linear;
+    animation-timing-function: ease-out;
     animation-fill-mode: forwards;
     animation-delay: 1s;
-    animation-duration: 3s;
+    animation-duration: 1s;
   }
 }
 .app-banner .video-container .overlay {
@@ -415,8 +488,8 @@ b {
   transform: skewX(-35deg);
   animation-name: overlay;
   animation-fill-mode: forwards;
-  animation-duration: 1s;
-  animation-delay: 1s;
+  animation-duration: 0.8s;
+  animation-delay: 0.7s;
 }
 .app-banner .video-container video,
 .app-banner .video-container svg {
@@ -432,7 +505,7 @@ b {
   position: relative;
   overflow: hidden;
 }
-@media screen and (min-width: 500px) {
+@media screen and (min-width: 768px) {
   .app-intro {
     font-size: var(--step-4);
   }
@@ -472,11 +545,49 @@ b {
 .app-section {
   margin-bottom: var(--space-4xs-6xl);
 }
+.app-section .image {
+  position: sticky;
+  top: 0;
+  height: max-content;
+}
+@media screen and (max-width: 1024px) {
+  .app-section .image {
+    height: 0;
+    padding-bottom: 100%;
+    margin-bottom: 36px;
+    position: relative;
+  }
+}
+@media screen and (max-width: 1680px) {
+  .app-section .image {
+    height: 100vh;
+  }
+}
 .app-section .image img {
   width: 100%;
 }
-.app-section .content p {
-  line-height: 20px;
+@media screen and (max-width: 1680px) {
+  .app-section .image img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    position: absolute;
+    object-position: center;
+  }
+}
+.app-section .text {
+  width: 100%;
+  max-width: 85%;
+}
+@media screen and (max-width: 1024px) {
+  .app-section .text {
+    margin: auto;
+  }
+}
+@media screen and (min-width: 1024px) {
+  .app-section .text {
+    width: max-content;
+  }
 }
 .app-section .content p:not(:last-of-type) {
   margin: 0 0 1.73rem;
@@ -502,13 +613,14 @@ b {
 .app-footer .block {
   width: 100%;
   height: 0;
-  padding-bottom: 62.5%;
+  padding-bottom: 100%;
   background-repeat: no-repeat;
   background-size: cover;
 }
 @media screen and (min-width: 768px) {
   .app-footer .block {
     width: 50%;
+    padding-bottom: 62.5%;
   }
 }
 .app-footer .block.leftblock {

diff --git a/app.css.map b/app.css.map
index 83ef1f15b0ad55cce61c21267eec45dd8bf3f854..61ac44ef27de2d6a146e6bfcecd849454fe7453b 100644 (file)
--- a/app.css.map
+++ b/app.css.map
@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["sass/reset.sass","sass/fontface.sass","sass/helpers.sass","sass/animations.sass","sass/app.sass"],"names":[],"mappings":";AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EAaE;EACA;EACA;EACA;EACA;EACA;;;AAEF;AACA;AAAA;EAEE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;AAAA;EAEE;;;AAEF;EACE;EACA;;;AAEF;EACE;;;AC3CF;EACE;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;;AChBD;AACC;EACA;AAEA;EACA;AAEA;EACA;AAEA;EACA;AAEA;EACA;AAEA;EACA;AAEA;EACA;AAEA;EACA;AAEA;EACA;AAEA;EACA;AAEA;AACA;EACA;AAEA;EACA;AAEA;EACA;AAEA;EACA;AAEA;EACA;AAEA;EACA;AAEA;EACA;AAEA;EACA;AAEA;EACA;AAEA;EACA;AAEA;EACA;AAEA;EACA;AAEA;EACA;AAEA;EACA;AAEA;EACA;EAEA;EACA;AAEA;AAAA;AAAA;AAAA;EAKA;AAEA;EACA;AAEA;EACA;AAEA;EACA;AAEA;EACA;AAEA;EACA;AAEA;EACA;AAEA;EACA;AAEA;EACA;EAEA;;;AC3HA;EACE;IACE;;EAEF;IACE;;;AALJ;EACE;IACE;;EAEF;IACE;;;AALJ;EACE;IACE;;EAEF;IACE;;;ACDN;EACE,kBFLM;EEMN,aFFQ;EEGR,OFNE;EEOF;EACA;;;AAEF;EACE;EACA;;AFJA;EEEF;IAII;IACA;;;AFPF;EEEF;IAOI;;;AAEF;EACE;EACA;;;AAEJ;EACE,kBF1BK;;;AE4BP;EACE,OF7BK;;;AE+BP;EACE;EACA;;AFvBA;EEqBF;IAII;;;AAEF;EACE;;AAEF;EACE;;AF/BF;EE8BA;IAGI;;;AFjCJ;EEqCI;IACE;IACA;;EACF;IACE;IACA;;;AF1CN;EE4CE;IAEI;;;;AAGR;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AF9DA;EEiEF;IAEI;;;;AFnEF;EEqEF;IAEI;;;;AAEJ;EACE;EACA;EACA;EACA;EACA;EACA;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE,aFpGQ;;;AEsGV;EACE,aFtGQ;;;AEwGV;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAGA;EACE;EACA;;AAEF;EACE;;AACA;EACE;EACA;;AACA;EACE;;AAEF;EACE;;AACJ;EACE;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;;AFpIJ;EE8HE;IAQI;;;AAEF;EAEE;EACA;EACA,kBFpJJ;EEqJI;EACA;EACA;;AAEF;EACE;EACA;;AFnJN;EEiJI;IAII;IACA;IACA;IACA;;;AFxJR;EEiJI;IASI;IACA;;;AAEJ;EACE;EACA;;AF/JN;EE6JI;IAII;IACA;IACA;IACA;IACA;IACA;;;AAEJ;EACE;EACA;EACA;EACA;EACA;EACA,YFxLD;EEyLC;EACA;EACA;EACA;EACA;EACA;;AAEF;AAAA;EAEE;EACA;;AAEF;EACE;EACA;;AAEN;EACE;EACA;EACA;;AFlMF;EE+LA;IAKI;;;AAEF;EACE;EACA;EACA;EACA,kBFlNF;EEmNE;EACA;EACA;EACA;;AAEF;EACE;EACA;;AACA;EAEE;EACA;EACA;EACA;EACA,kBFnOD;;AEqOD;EACE;EACA;EACA;EACA;EACA;EACA;;AAEF;EACE;;AAEN;EACE;;AAEE;EACE;;AAGF;EACE;;AACA;EACE;;AACJ;EACE;;AAEJ;EACE;;AACA;EACE;;AACF;EACE;;AACF;EACE;;AACF;EACE;;AAGJ;EACE;EACA;EACA;EACA;EACA;;AFrQJ;EEgQE;IAOI;;;AAEF;EACE;;AAEF;EACE;;AAEJ;EACE;;AAEF;EACE;;AAEF;EACE;EACA;;AAEF;EACE,OFlSF;EEmSE;;AACA;EACE","file":"app.css"}
\ No newline at end of file
+{"version":3,"sourceRoot":"","sources":["sass/reset.sass","sass/fontface.sass","sass/helpers.sass","sass/animations.sass","sass/app.sass"],"names":[],"mappings":"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","file":"app.css"}
\ No newline at end of file

diff --git a/index.html b/index.html
index 0640ddd8691fbca817687bc0ee9adc09516cd384..f886f026eb5e45cc5cce127a8bef84d889eaccaf 100644 (file)
--- a/index.html
+++ b/index.html
@@ -2,21 +2,35 @@
 <html lang="en">
 <head>
     <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
     <title>Title</title>
     <link rel="stylesheet" href="app.css" >
 </head>
 <body>
     <header class="app-header bg-blue">
         <div class="container">
-            <a href="">
+            <a class="logo" href="">
                 <img src="assets/images/logo_pomerleau.svg" alt="Pomerleau" />
             </a>
+            <div class="video-container-mobile">
+                <video loop muted autoplay>
+                    <source src="assets/video_banner_promerleau.mp4" type="video/mp4">
+                </video>
+                <svg xmlns="http://www.w3.org/2000/svg" id="Calque_2" viewBox="0 0 888 890">
+                    <defs><style>.cls-1{fill:#0a7dff;}</style></defs>
+                    <g id="Calque_1-2">
+                        <polygon class="cls-1" points="379.36 890 888 890 888 175.17 379.36 890"/>
+                        <polygon class="cls-1" points="0 0 0 630.51 448.64 0 0 0"/>
+                    </g>
+                </svg>
+                <div class="overlay"></div>
+            </div>
         </div>
     </header>
     <div class="app-banner bg-blue">
         <div class="container relative">
             <div class="video-container">
-                <video loop muted>
+                <video loop muted autoplay>
                     <source src="assets/video_banner_promerleau.mp4" type="video/mp4">
                 </video>
                 <svg xmlns="http://www.w3.org/2000/svg" id="Calque_2" viewBox="0 0 888 890">
@@ -57,7 +71,7 @@
             <div class="image grid-item">
                 <img src="assets/images/Pomerleau_PDG.jpg" />
             </div>
-            <div class="text grid-item max-content">
+            <div class="text grid-item">
                 <h2 class="border-title text-center font-neue">
                     Promis à un avenir durable
                 </h2>
@@ -170,7 +184,7 @@
         </div>
     </div>
     <footer class="app-footer">
-        <div class="container full flex wrap">
+        <div class="flex wrap">
             <div class="leftblock block">
                 <div class="text text-center">
                     <h2 class="title text-xl">Construire</h2>

diff --git a/sass/animations.sass b/sass/animations.sass
index 6c4d0290ee07851261430e524433d6b240488dc4..07e1cd16faabc1beaf74db98e09ba19e5e99f35c 100644 (file)
--- a/sass/animations.sass
+++ b/sass/animations.sass
@@ -7,6 +7,6 @@
       width: #{$to}
 
 
-+width(0px, 493px, "line-first")
++width(0, 100%, "line-first")
 +width(0vw, 100vw, "line-second")
 +width(100%, 0, "overlay")
\ No newline at end of file

diff --git a/sass/app.sass b/sass/app.sass
index 5174bffe72251bc92653d7aa2e67525a378ecd0a..7d7d6d6e2a9fa2e5fea784bf7d30e4efc517ab97 100644 (file)
--- a/sass/app.sass
+++ b/sass/app.sass
@@ -10,25 +10,25 @@ body
   line-height: 1.25
   overflow-x: hidden
 
+.bg-blue
+  background-color: $blue
+
+.color-blue
+  color: $blue
+
 .container
   width: 80%
   margin: 0 auto
-  +screen-size(small-desktop)
-    width: 90%
-    max-width: 1680px
+  +screen-size(desktop, 'max')
+    width: 100%
   +screen-size(desktop)
     width: 100%
+    max-width: 1680px
 
   &:not(.full)
     padding: 0 var(--space-l-3xl)
     box-sizing: border-box
 
-.bg-blue
-  background-color: $blue
-
-.color-blue
-  color: $blue
-
 .grid
   display: grid
   gap: 32px
@@ -37,6 +37,10 @@ body
 
   .grid
     grid-template-columns: repeat(2, 278px)
+    +screen-size(intermediaire, 'max')
+      grid-template-columns: repeat(1, 358px)
+    +screen-size(small-desktop, 'max')
+      grid-template-columns: repeat(1, 1fr)
 
   &-item
     overflow: hidden
@@ -111,18 +115,51 @@ b
   font-weight: bold
 
 .max-content
-  width: max-content
+  +screen-size(small-desktop)
+    width: max-content
 
 .relative
   position: relative
 
+
 .app
   &-header
     padding-top: var(--space-l-3xl)
     padding-bottom: 100px
+    +screen-size(small-desktop, 'max')
+      padding-bottom: 288px
+
+    .logo
+      position: relative
+      z-index: 1
+      max-width: 100px
+      display: inline-block
+      +screen-size(small-desktop)
+        max-width: 160px
+
+      img
+        width: 100%
+
+    .video-container-mobile
+      width: 288px
+      height: 288px
+      position: absolute
+      top: 0
+      right: 0
+      +screen-size(small-desktop)
+        display: none
+      video,
+      svg
+        position: absolute
+        width: 100%
+
+      video
+        height: 100%
+        object-fit: cover
 
   &-banner
     overflow: hidden
+    padding-bottom: 169px
     p
       font-size: var(--step-10)
       position: relative
@@ -130,9 +167,20 @@ b
         padding-left: var(--space-custom-title-1)
 
       &.third
+        +screen-size(tablet)
+          padding-left: var(--space-custom-title-3)
+
+    .last-phrase
+      +screen-size(tablet, 'max')
+        flex-direction: column-reverse
         padding-left: var(--space-custom-title-3)
+
     span
       font-size: var(--step-3)
+      transform: translateY(25%)
+      +screen-size(small-desktop, 'max')
+        width: 100%
+        max-width: 200px
 
     .video-container
       height: 0
@@ -141,6 +189,8 @@ b
       position: absolute
       top: 2.2vw
       right: var(--space-l-3xl)
+      +screen-size(small-desktop, 'max')
+        display: none
       +screen-size(desktop)
         right: 145px
 
@@ -155,15 +205,15 @@ b
 
       &:before
         width: 93%
-        left: -100%
+        left: -17%
+        transform: translateX(-100%)
         +screen-size(small-desktop)
           animation-name: line-first
           animation-timing-function: cubic-bezier(.82,0,.65,.93)
           animation-fill-mode: forwards
-          animation-duration: 1s
+          animation-duration: .8s
         +screen-size(desktop)
           width: 0
-          transform: translateX(-79px)
 
       &:after
         width: 100vw
@@ -171,10 +221,10 @@ b
         +screen-size(small-desktop)
           width: 0
           animation-name: line-second
-          animation-timing-function: linear
+          animation-timing-function: ease-out
           animation-fill-mode: forwards
           animation-delay: 1s
-          animation-duration: 3s
+          animation-duration: 1s
 
       .overlay
         position: absolute
@@ -187,8 +237,8 @@ b
         transform: skewX(-35deg)
         animation-name: overlay
         animation-fill-mode: forwards
-        animation-duration: 1s
-        animation-delay: 1s
+        animation-duration: .8s
+        animation-delay: .7s
 
       video,
       svg
@@ -203,7 +253,7 @@ b
     padding: var(--space-2xl-5xl)
     position: relative
     overflow: hidden
-    +screen-size(phone)
+    +screen-size(tablet)
       font-size: var(--step-4)
 
     &:after
@@ -241,14 +291,37 @@ b
   &-section
     margin-bottom: var(--space-4xs-6xl)
     .image
+      position: sticky
+      top: 0
+      height: max-content
+      +screen-size(small-desktop, 'max')
+        height: 0
+        padding-bottom: 100%
+        margin-bottom: 36px
+        position: relative
+      +screen-size(desktop, 'max')
+        height: 100vh
+
       img
         width: 100%
+        +screen-size(desktop, 'max')
+          width: 100%
+          height: 100%
+          object-fit: cover
+          position: absolute
+          object-position: center
+
+    .text
+      width: 100%
+      max-width: 85%
+      +screen-size(small-desktop, 'max')
+        margin: auto
+      +screen-size(small-desktop)
+        width: max-content
 
     .content
-      p
-        line-height: 20px
-        &:not(:last-of-type)
-          margin: 0 0 1.73rem
+      p:not(:last-of-type)
+        margin: 0 0 1.73rem
       h3
         margin-bottom: 1rem
 
@@ -267,11 +340,12 @@ b
     .block
       width: 100%
       height: 0
-      padding-bottom: 62.5%
+      padding-bottom: 100%
       background-repeat: no-repeat
       background-size: cover
       +screen-size(tablet)
         width: 50%
+        padding-bottom: 62.5%
 
       &.leftblock
         background-image: url("assets/images/rapport-activite.jpg")

diff --git a/sass/helpers.sass b/sass/helpers.sass
index 884fc9b8ddd7100b5919f924461613ad7a3b81ca..a274ec0c03cdf45453a187ac277fa008c261f485 100644 (file)
--- a/sass/helpers.sass
+++ b/sass/helpers.sass
@@ -5,7 +5,7 @@ $w: #ffffff
 $ff_neue: 'Maison Neue', sans-serif
 $ff_book: 'Maison Neue Book', sans-serif
 
-$breakpoint: ('phone': '500px', 'tablet': '768px', 'small-desktop': '1024px', 'desktop': '1680px')
+$breakpoint: ('phone': '500px', 'tablet': '768px', 'small-desktop': '1024px', 'intermediaire': '1344px' , 'desktop': '1680px')
 
 @mixin screen-size($key, $query: 'min')
   @media screen and (#{$query}-width: map-get($breakpoint, $key))