wip #5941 @1: correctifs css

diff --git a/app.css b/app.css
index 59fc07646b3089525560794c5acf8bcc5b624a48..e4967326b4c0598f94b8c3584178ae320aacfaac 100644 (file)
--- a/app.css
+++ b/app.css
@@ -301,8 +301,30 @@ body {
   font-size: var(--step-3);
   margin-bottom: var(--space-l-xl-custom);
   padding: 18px 0;
-  border-top: 1px solid #0A7DFF;
-  border-bottom: 1px solid #0A7DFF;
+  position: relative;
+}
+@media screen and (max-width: 1680px) {
+  .border-title {
+    margin-top: var(--space-xl-6xl);
+  }
+}
+.border-title.active:before, .border-title.active:after {
+  width: 100%;
+}
+.border-title:before, .border-title:after {
+  content: "";
+  position: absolute;
+  width: 0;
+  height: 1px;
+  background-color: #0A7DFF;
+  left: 0;
+  transition: width cubic-bezier(0.82, 0, 0.65, 0.93) 0.9s;
+}
+.border-title:before {
+  top: 0;
+}
+.border-title:after {
+  bottom: 0;
 }
 
 .text-center {
@@ -447,8 +469,7 @@ b {
 }
 .app-banner .video-container:before {
   width: 93%;
-  left: -17%;
-  transform: translateX(-100%);
+  left: -117%;
 }
 @media screen and (min-width: 1024px) {
   .app-banner .video-container:before {
@@ -510,9 +531,15 @@ b {
     font-size: var(--step-4);
   }
 }
+.app-intro.active:after {
+  animation-name: line-second;
+  animation-fill-mode: forwards;
+  animation-timing-function: cubic-bezier(0.6, 0, 0.3, 1);
+  animation-duration: 0.75s;
+}
 .app-intro:after {
   content: "";
-  width: 100vw;
+  width: 0;
   height: 1px;
   background-color: #ffffff;
   position: absolute;
@@ -553,6 +580,7 @@ b {
 @media screen and (max-width: 1680px) {
   .app-section .image {
     height: 100vh;
+    top: 0;
   }
 }
 @media screen and (max-width: 1024px) {
@@ -612,6 +640,8 @@ b {
   background-repeat: no-repeat;
   background-size: cover;
   background-position: 0 50%;
+  position: relative;
+  overflow: hidden;
 }
 @media screen and (min-width: 768px) {
   .app-footer .block {
@@ -620,14 +650,28 @@ b {
     padding: 0;
   }
 }
-.app-footer .block.leftblock {
-  background-image: url("assets/images/rapport-activite.jpg");
+@media screen and (min-width: 1024px) {
+  .app-footer .block:hover img {
+    transform: scale(1.05);
+  }
 }
-.app-footer .block.rightblock {
-  background-image: url("assets/images/rapport-esg.jpg");
+.app-footer .block * {
+  color: #ffffff;
+}
+.app-footer img {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  left: 0;
+  top: 0;
+  object-position: left center;
+  transition: all 0.5s cubic-bezier(0.19, 1, 0.22, 1);
 }
 .app-footer .text {
   padding: var(--space-xl-6xl) 0;
+  position: relative;
+  z-index: 2;
 }
 .app-footer .title {
   margin-bottom: var(--space-m-xl);
@@ -636,6 +680,11 @@ b {
   font-size: 25px;
   margin-bottom: var(--space-l-xl);
 }
+.app-footer .link-block {
+  display: inline-block;
+  width: 100%;
+  height: 100%;
+}
 .app-footer .link {
   color: #ffffff;
   font-size: var(--step-4);

diff --git a/app.css.map b/app.css.map
index 4b51bea278db9a42db29070d5afa819842e93165..a0ecaadae67117cbf4ce5b4bc835e5eafd47b368 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":"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","file":"app.css"}
\ No newline at end of file

diff --git a/index.html b/index.html
index 4ee4a3f71a4ca061eee39a99494d149878c9732a..a929bcbe28d99fd88fc08a67bdc6ea93f40018d9 100644 (file)
--- a/index.html
+++ b/index.html
@@ -5,17 +5,36 @@
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <title>Title</title>
     <link rel="stylesheet" href="app.css" >
-    <script
-            src="https://code.jquery.com/jquery-3.7.0.min.js"
-            integrity="sha256-2Pmvv0kuTBOenSvLm6bvfBSSHrUJ+3A7x6P5Ebd07/g="
-            crossorigin="anonymous"></script>
+    <script>
+        window.addEventListener("DOMContentLoaded", (event) => {
+            document.addEventListener("scroll", () => {
+                const y = window.scrollY
+                const el = document.getElementById("border-title")
+                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")
+
+                if(y >= offset2)
+                    el2.classList.add("active")
+
+            })
+        })
+    </script>
 </head>
 <body>
     <header class="app-header bg-blue">
         <div class="container">
-            <a class="logo" href="">
+            <div class="logo">
                 <img src="assets/images/logo_pomerleau.svg" alt="Pomerleau" />
-            </a>
+            </div>
             <div class="video-container-mobile">
                 <video loop muted autoplay>
                     <source src="assets/video_banner_promerleau.mp4" type="video/mp4">
@@ -54,7 +73,7 @@
             </div>
         </div>
     </div>
-    <div class="app-intro bg-blue">
+    <div id="intro" class="app-intro bg-blue">
         <div class="container full">
             <div class="text relative">
                 <p>Construire. Notre perspective. est le premier rapport intégré de Pomerleau. Il couvre nos activités, notre
@@ -76,7 +95,7 @@
                 <img src="assets/images/Pomerleau_PDG.jpg" />
             </div>
             <div class="text grid-item">
-                <h2 class="border-title text-center font-neue">
+                <h2 id="border-title" class="border-title text-center font-neue">
                     Promis à un avenir durable
                 </h2>
                 <div class="grid">
@@ -190,34 +209,40 @@
     <footer class="app-footer">
         <div class="flex wrap">
             <div class="leftblock block">
-                <div class="text text-center">
-                    <h2 class="title text-xl">Construire</h2>
-                    <p class="subtitle">Rapport d'activités</p>
-                    <a class="link" href="">Entrez
-                        <svg xmlns="http://www.w3.org/2000/svg" width="24.817" height="21.587" viewBox="0 0 24.817 21.587">
-                            <g id="Groupe_32" data-name="Groupe 32" transform="translate(0 21.586)">
-                                <g id="Groupe_31" data-name="Groupe 31" transform="translate(13.751 -21.587)">
-                                    <path id="Tracé_20" data-name="Tracé 20" d="M0,0-1.676,1.755l8.482,8.1-20.557-.181.05,2.192,20.078.1L-1.212,19.91.543,21.587,11.066,10.57v-.048L9.311,8.894Z" fill="#f1ece8"/>
+                <a class="link-block" href="./rapport-activites/index.html">
+                    <div class="text text-center">
+                        <h2 class="title text-xl">Construire</h2>
+                        <p class="subtitle">Rapport d'activités</p>
+                        <div class="link">Entrez
+                            <svg xmlns="http://www.w3.org/2000/svg" width="24.817" height="21.587" viewBox="0 0 24.817 21.587">
+                                <g id="Groupe_32" data-name="Groupe 32" transform="translate(0 21.586)">
+                                    <g id="Groupe_31" data-name="Groupe 31" transform="translate(13.751 -21.587)">
+                                        <path id="Tracé_20" data-name="Tracé 20" d="M0,0-1.676,1.755l8.482,8.1-20.557-.181.05,2.192,20.078.1L-1.212,19.91.543,21.587,11.066,10.57v-.048L9.311,8.894Z" fill="#f1ece8"/>
+                                    </g>
                                 </g>
-                            </g>
-                        </svg>
-                    </a>
-                </div>
+                            </svg>
+                        </div>
+                    </div>
+                    <img src="assets/images/rapport-activite.jpg" />
+                </a>
             </div>
             <div class="rightblock block text-center">
-                <div class="text text-center">
-                    <h2 class="title text-xl">Notre perspective</h2>
-                    <p class="subtitle">Rapport ESG</p>
-                    <a class="link" href="">Entrez
-                        <svg xmlns="http://www.w3.org/2000/svg" width="24.817" height="21.587" viewBox="0 0 24.817 21.587">
-                            <g id="Groupe_32" data-name="Groupe 32" transform="translate(0 21.586)">
-                                <g id="Groupe_31" data-name="Groupe 31" transform="translate(13.751 -21.587)">
-                                    <path id="Tracé_20" data-name="Tracé 20" d="M0,0-1.676,1.755l8.482,8.1-20.557-.181.05,2.192,20.078.1L-1.212,19.91.543,21.587,11.066,10.57v-.048L9.311,8.894Z" fill="#f1ece8"/>
+                <a class="link-block" href="./rapport-esg/index.html">
+                    <div class="text text-center">
+                        <h2 class="title text-xl">Notre perspective</h2>
+                        <p class="subtitle">Rapport ESG</p>
+                        <div class="link">Entrez
+                            <svg xmlns="http://www.w3.org/2000/svg" width="24.817" height="21.587" viewBox="0 0 24.817 21.587">
+                                <g id="Groupe_32" data-name="Groupe 32" transform="translate(0 21.586)">
+                                    <g id="Groupe_31" data-name="Groupe 31" transform="translate(13.751 -21.587)">
+                                        <path id="Tracé_20" data-name="Tracé 20" d="M0,0-1.676,1.755l8.482,8.1-20.557-.181.05,2.192,20.078.1L-1.212,19.91.543,21.587,11.066,10.57v-.048L9.311,8.894Z" fill="#f1ece8"/>
+                                    </g>
                                 </g>
-                            </g>
-                        </svg>
-                    </a>
-                </div>
+                            </svg>
+                        </div>
+                    </div>
+                    <img src="assets/images/rapport-esg.jpg" />
+                </a>
             </div>
         </div>
     </footer>

diff --git a/sass/app.sass b/sass/app.sass
index 2fe2e3993c29c0b08d2c5cd301f4f4ea2d66cfb0..adcbaef1b94f8ada34bf5f950442ba89ae422557 100644 (file)
--- a/sass/app.sass
+++ b/sass/app.sass
@@ -90,8 +90,32 @@ body > .app-section ~ .app-section
   font-size: var(--step-3)
   margin-bottom: var(--space-l-xl-custom)
   padding: 18px 0
-  border-top: 1px solid $blue
-  border-bottom: 1px solid $blue
+  position: relative
+  +screen-size(desktop, 'max')
+    margin-top: var(--space-xl-6xl)
+
+  &.active
+    &:before,
+    &:after
+      width: 100%
+
+  &:before,
+  &:after
+    content: ""
+    position: absolute
+    width: 0
+    height: 1px
+    background-color: $blue
+    left: 0
+    transition: width cubic-bezier(.82,0,.65,.93) .9s
+
+  &:before
+    top: 0
+
+  &:after
+    bottom: 0
+
+
 
 .text-center
   text-align: center
@@ -205,8 +229,7 @@ b
 
       &:before
         width: 93%
-        left: -17%
-        transform: translateX(-100%)
+        left: -117%
         +screen-size(small-desktop)
           animation-name: line-first
           animation-timing-function: cubic-bezier(.82,0,.65,.93)
@@ -256,9 +279,16 @@ b
     +screen-size(tablet)
       font-size: var(--step-4)
 
+    &.active
+      &:after
+        animation-name: line-second
+        animation-fill-mode: forwards
+        animation-timing-function: cubic-bezier(.6,0,.3,1)
+        animation-duration: .75s
+
     &:after
       content: ""
-      width: 100vw
+      width: 0
       height: 1px
       background-color: $w
       position: absolute
@@ -296,6 +326,7 @@ b
       top: 15vh
       +screen-size(desktop, 'max')
         height: 100vh
+        top: 0
       +screen-size(small-desktop, 'max')
         height: 0
         padding-bottom: 100%
@@ -342,19 +373,34 @@ b
       background-repeat: no-repeat
       background-size: cover
       background-position: 0 50%
+      position: relative
+      overflow: hidden
       +screen-size(tablet)
         width: 50%
         height: 100vh
         padding: 0
 
-      &.leftblock
-        background-image: url("assets/images/rapport-activite.jpg")
+      +screen-size(small-desktop)
+        &:hover img
+          transform: scale(1.05)
 
-      &.rightblock
-        background-image: url("assets/images/rapport-esg.jpg")
+      *
+        color: $w
+        
+    img
+      position: absolute
+      width: 100%
+      height: 100%
+      object-fit: cover
+      left: 0
+      top: 0
+      object-position: left center
+      transition: all .5s cubic-bezier(.19,1,.22,1)
 
     .text
       padding: var(--space-xl-6xl) 0
+      position: relative
+      z-index: 2
 
     .title
       margin-bottom: var(--space-m-xl)
@@ -362,6 +408,11 @@ b
     .subtitle
       font-size: 25px
       margin-bottom: var(--space-l-xl)
+      
+    .link-block
+      display: inline-block
+      width: 100%
+      height: 100%
 
     .link
       color: $w