wip #5941 @1:30 correctifs responsive

diff --git a/app.css b/app.css
index a3a5fc2f2ee10c8d53f8802bda8953b511707608..eb60af4e91d0da210b2e0d0a7666fbb6b046628f 100644 (file)
--- a/app.css
+++ b/app.css
@@ -199,14 +199,9 @@ body {
 }
 
 .container {
-  width: 80%;
+  width: 100%;
   margin: 0 auto;
 }
-@media screen and (max-width: 1680px) {
-  .container {
-    width: 100%;
-  }
-}
 @media screen and (min-width: 1680px) {
   .container {
     width: 100%;
@@ -228,16 +223,16 @@ body {
   }
 }
 .grid .grid {
-  grid-template-columns: repeat(2, 278px);
+  grid-template-columns: repeat(1, 1fr);
 }
-@media screen and (max-width: 1344px) {
+@media screen and (min-width: 1024px) {
   .grid .grid {
     grid-template-columns: repeat(1, 358px);
   }
 }
-@media screen and (max-width: 1024px) {
+@media screen and (min-width: 1344px) {
   .grid .grid {
-    grid-template-columns: repeat(1, 1fr);
+    grid-template-columns: repeat(2, 278px);
   }
 }
 .grid-item {
@@ -260,7 +255,7 @@ body {
 }
 @media screen and (min-width: 1024px) {
   .grid-reverse .grid {
-    margin-left: var(--space-4xs-6xl);
+    margin-left: var(--space-4xs-6xl) !important;
   }
 }
 
@@ -424,17 +419,20 @@ b {
   width: max-content;
   position: relative;
 }
-@media screen and (max-width: 1024px) {
+@media screen and (min-width: 1024px) {
   .app-banner p.second:after {
-    content: "";
-    width: 100vw;
-    position: absolute;
-    height: 1px;
-    left: calc(100% + 24px);
-    background-color: #ffffff;
-    top: 45%;
+    display: none;
   }
 }
+.app-banner p.second:after {
+  content: "";
+  width: 100vw;
+  position: absolute;
+  height: 1px;
+  left: calc(100% + 24px);
+  background-color: #ffffff;
+  top: 45%;
+}
 @media screen and (min-width: 768px) {
   .app-banner p.third {
     padding-left: var(--space-custom-title-3);
@@ -463,10 +461,11 @@ b {
   position: absolute;
   top: 2.2vw;
   right: var(--space-l-3xl);
+  display: none;
 }
-@media screen and (max-width: 1024px) {
+@media screen and (min-width: 1024px) {
   .app-banner .video-container {
-    display: none;
+    display: block;
   }
 }
 @media screen and (min-width: 1680px) {
@@ -588,22 +587,23 @@ b {
   margin-bottom: var(--space-4xs-6xl);
 }
 .app-section .image {
-  height: 72vh;
-  position: sticky;
-  top: 15vh;
+  height: 0;
+  padding-bottom: 100%;
+  margin-bottom: 36px;
+  position: relative;
 }
-@media screen and (max-width: 1680px) {
+@media screen and (min-width: 1024px) {
   .app-section .image {
-    height: 100vh;
+    padding-bottom: 0;
+    position: sticky;
+    height: 80vh;
     top: 0;
   }
 }
-@media screen and (max-width: 1024px) {
+@media screen and (min-width: 1680px) {
   .app-section .image {
-    height: 0;
-    padding-bottom: 100%;
-    margin-bottom: 36px;
-    position: relative;
+    height: 72vh;
+    top: 15vh;
   }
 }
 .app-section .image img {
@@ -611,19 +611,16 @@ b {
   height: 100%;
   object-fit: cover;
   position: absolute;
-  object-position: center;
+  object-position: 0 38%;
 }
 .app-section .text {
   width: 100%;
   max-width: 85%;
-}
-@media screen and (max-width: 1024px) {
-  .app-section .text {
-    margin: auto;
-  }
+  margin: auto;
 }
 @media screen and (min-width: 1024px) {
   .app-section .text {
+    margin: initial;
     width: max-content;
   }
 }
@@ -658,14 +655,12 @@ b {
   position: relative;
   overflow: hidden;
 }
-@media screen and (min-width: 768px) {
+@media screen and (min-width: 1024px) {
   .app-footer .block {
     width: 50%;
     height: 100vh;
     padding: 0;
   }
-}
-@media screen and (min-width: 1024px) {
   .app-footer .block:hover img {
     transform: scale(1.05);
   }

diff --git a/app.css.map b/app.css.map
index f19c38cea79d556219af02f3f9882f773c46124c..0a58df0811935b93aff9b776e18e75c2da0741a3 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":"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","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":";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,kBFbK;;;AEeP;EACE,OFhBK;;;AEkBP;EACE;EACA;;AFVA;EEQF;IAII;IACA;;;AAEF;EACE;EACA;;;AAEJ;EACE;EACA;;AFrBA;EEmBF;IAII;;;AAEF;EACE;;AF1BF;EEyBA;IAGI;;;AF5BJ;EEyBA;IAKI;;;AAEJ;EACE;;AFjCF;EEgCA;IAGI;;;AFnCJ;EEuCI;IACE;IACA;;EACF;IACE;IACA;;;AF5CN;EE8CE;IAEI;;;;AAGR;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AFhEA;EEmEF;IAEI;;;;AFrEF;EEuEF;IAEI;;;;AAEJ;EACE;EACA;EACA;EACA;EACA;;AFhFA;EE2EF;IAOI;;;AAGA;EAEE;;AAEJ;EAEE;EACA;EACA;EACA;EACA,kBFzGG;EE0GH;EACA;;AAEF;EACE;;AAEF;EACE;;;AAIJ;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE,aF9HQ;;;AEgIV;EACE,aFhIQ;;;AEkIV;EACE;;;AF9HA;EEgIF;IAEI;;;;AAEJ;EACE;;;AAIA;EACE;EACA;;AF3IF;EEyIA;IAII;;;AAEF;EACE;EACA;EACA;EACA;;AFnJJ;EE+IE;IAMI;;;AAEF;EACE;;AAEJ;EACE;EACA;EACA;EACA;EACA;;AF/JJ;EE0JE;IAOI;;;AACF;AAAA;EAEE;EACA;;AAEF;EACE;EACA;;AAEN;EACE;EACA;;AACA;EACE;EACA;;AACA;EACE;;AAEF;EACE;EACA;;AFtLN;EEwLQ;IACE;;;AAEJ;EACE;EACA;EACA;EACA;EACA;EACA,kBFzMN;EE0MM;;AFlMR;EEqMI;IAEI;;;AFvMR;EEyME;IAEI;IACA;;;AAEJ;EACE;EACA;;AFhNJ;EE8ME;IAII;IACA;;;AAEJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AF5NJ;EEqNE;IASI;;;AF9NN;EEqNE;IAWI;;;AAEF;EAEE;EACA;EACA,kBF9OJ;EE+OI;EACA;EACA;;AAEF;EACE;EACA;;AF7ON;EE2OI;IAII;IACA;IACA;IACA;;;AFlPR;EE2OI;IASI;;;AAEJ;EACE;EACA;;AFxPN;EEsPI;IAII;IACA;IACA;IACA;IACA;IACA;;;AAEJ;EACE;EACA;EACA;EACA;EACA;EACA,YFjRD;EEkRC;EACA;EACA;EACA;EACA;EACA;;AAEF;AAAA;EAEE;EACA;;AAEF;EACE;EACA;;AAEN;EACE;EACA;EACA;;AF3RF;EEwRA;IAKI;;;AAGA;EACE;EACA;EACA;EACA;;AAEJ;EACE;EACA;EACA;EACA,kBFlTF;EEmTE;EACA;EACA;EACA;;AAEF;EACE;EACA;;AACA;EAEE;EACA;EACA;EACA;EACA,kBFnUD;;AEqUD;EACE;EACA;EACA;EACA;EACA;EACA;;AAEF;EACE;;AAEN;EACE;;AACA;EACE;EACA;EACA;EACA;;AF5UJ;EEwUE;IAOI;IACA;IACA;IACA;;;AFlVN;EEwUE;IAaI;IACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;AAEJ;EACE;EACA;EACA;;AFnWJ;EEgWE;IAKI;IACA;;;AAGF;EACE;;AACF;EACE;;AAEJ;EACE;;AACA;EACE;;AACF;EACE;;AACF;EACE;;AACF;EACE;;AAGJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AFlYJ;EE0XE;IAUI;IACA;IACA;;EACA;IACE;;;AAEJ;EACE,OFnZJ;;AEqZA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;;AAEF;EACE;;AAEF;EACE;EACA;;AAEF;EACE;EACA;EACA;;AAEF;EACE,OFjbF;EEkbE;;AACA;EACE","file":"app.css"}
\ No newline at end of file

diff --git a/index.html b/index.html
index a929bcbe28d99fd88fc08a67bdc6ea93f40018d9..cb0c3241506e7da5fcba3d76b79c480f81324537 100644 (file)
--- a/index.html
+++ b/index.html
@@ -3,7 +3,7 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
-    <title>Title</title>
+    <title>Rapport d’activités et ESG 2022 - Pomerleau</title>
     <link rel="stylesheet" href="app.css" >
     <script>
         window.addEventListener("DOMContentLoaded", (event) => {
@@ -13,12 +13,8 @@
                 const offset = el.offsetTop
 
                 const el2 = document.getElementById("intro")
-                const el2Height = el2.getBoundingClientRect().height / 2
                 const offset2 = el2.offsetTop
 
-                console.log(el2Height)
-
-
                 if(window.innerHeight + y >= offset)
                    el.classList.add("active")
 

diff --git a/sass/app.sass b/sass/app.sass
index 882b5826cc9a9b564f7ba279955c1bf68183e488..931e673d02f6e8e5278ce6b9665dd2b2570c80c3 100644 (file)
--- a/sass/app.sass
+++ b/sass/app.sass
@@ -17,10 +17,8 @@ body
   color: $blue
 
 .container
-  width: 80%
+  width: 100%
   margin: 0 auto
-  +screen-size(desktop, 'max')
-    width: 100%
   +screen-size(desktop)
     width: 100%
     max-width: 1680px
@@ -36,11 +34,11 @@ body
     grid-template-columns: repeat(2, 1fr)
 
   .grid
-    grid-template-columns: repeat(2, 278px)
-    +screen-size(intermediaire, 'max')
+    grid-template-columns: repeat(1, 1fr)
+    +screen-size(small-desktop)
       grid-template-columns: repeat(1, 358px)
-    +screen-size(small-desktop, 'max')
-      grid-template-columns: repeat(1, 1fr)
+    +screen-size(intermediaire)
+      grid-template-columns: repeat(2, 278px)
 
   &-item
     overflow: hidden
@@ -58,7 +56,7 @@ body
 
     .grid
       +screen-size(small-desktop)
-        margin-left: var(--space-4xs-6xl)
+        margin-left: var(--space-4xs-6xl) !important
 
 
 .gap-xl
@@ -193,15 +191,18 @@ b
       &.second
         width: max-content
         position: relative
-        +screen-size(small-desktop, 'max')
+        +screen-size(small-desktop)
           &:after
-            content: ""
-            width: 100vw
-            position: absolute
-            height: 1px
-            left: calc(100% + 24px)
-            background-color: $w
-            top: 45%
+            display: none
+
+        &:after
+          content: ""
+          width: 100vw
+          position: absolute
+          height: 1px
+          left: calc(100% + 24px)
+          background-color: $w
+          top: 45%
 
 
       &.third
@@ -227,8 +228,9 @@ b
       position: absolute
       top: 2.2vw
       right: var(--space-l-3xl)
-      +screen-size(small-desktop, 'max')
-        display: none
+      display: none
+      +screen-size(small-desktop)
+        display: block
       +screen-size(desktop)
         right: 145px
 
@@ -335,31 +337,35 @@ b
   &-section
     margin-bottom: var(--space-4xs-6xl)
     .image
-      height: 72vh
-      position: sticky
-      top: 15vh
-      +screen-size(desktop, 'max')
-        height: 100vh
+      height: 0
+      padding-bottom: 100%
+      margin-bottom: 36px
+      position: relative
+
+      +screen-size(small-desktop)
+        padding-bottom: 0
+        position: sticky
+        height: 80vh
         top: 0
-      +screen-size(small-desktop, 'max')
-        height: 0
-        padding-bottom: 100%
-        margin-bottom: 36px
-        position: relative
+
+      +screen-size(desktop)
+        height: 72vh
+        top: 15vh
+
 
       img
         width: 100%
         height: 100%
         object-fit: cover
         position: absolute
-        object-position: center
+        object-position: 0 38%
 
     .text
       width: 100%
       max-width: 85%
-      +screen-size(small-desktop, 'max')
-        margin: auto
+      margin: auto
       +screen-size(small-desktop)
+        margin: initial
         width: max-content
 
     .content
@@ -389,12 +395,10 @@ b
       background-position: 0 50%
       position: relative
       overflow: hidden
-      +screen-size(tablet)
+      +screen-size(small-desktop)
         width: 50%
         height: 100vh
         padding: 0
-
-      +screen-size(small-desktop)
         &:hover img
           transform: scale(1.05)