From 8a1c6a4c827c7d6fa5d40cc333aa8e273c3d7859 Mon Sep 17 00:00:00 2001 From: soufiane Date: Thu, 25 May 2023 17:06:00 +0200 Subject: [PATCH] wip #5941 @1: correctifs css --- app.css | 67 ++++++++++++++++++++++++++++++++------ app.css.map | 2 +- index.html | 89 +++++++++++++++++++++++++++++++++------------------ sass/app.sass | 69 +++++++++++++++++++++++++++++++++------ 4 files changed, 176 insertions(+), 51 deletions(-) diff --git a/app.css b/app.css index 59fc076..e496732 100644 --- 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 4b51bea..a0ecaad 100644 --- 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 4ee4a3f..a929bcb 100644 --- a/index.html +++ b/index.html @@ -5,17 +5,36 @@ Title - +
-
-
+

Construire. Notre perspective. est le premier rapport intégré de Pomerleau. Il couvre nos activités, notre @@ -76,7 +95,7 @@

-

+

Promis à un avenir durable

@@ -190,34 +209,40 @@ diff --git a/sass/app.sass b/sass/app.sass index 2fe2e39..adcbaef 100644 --- 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 -- 2.39.5