From: soufiane Date: Thu, 25 May 2023 13:50:13 +0000 (+0200) Subject: wip #5941 @1:30 correctifs css X-Git-Url: http://git.cubedesigners.com/?a=commitdiff_plain;h=c9bb69057627057ffef747de70f07a283f38419f;p=pomerleau.git wip #5941 @1:30 correctifs css --- diff --git a/app.css b/app.css index d375a79..daba580 100644 --- a/app.css +++ b/app.css @@ -304,6 +304,11 @@ body { border-top: 1px solid #0A7DFF; border-bottom: 1px solid #0A7DFF; } +@media screen and (min-width: 1024px) { + .border-title { + margin-top: var(--space-xl-6xl); + } +} .text-center { text-align: center; @@ -517,7 +522,7 @@ b { background-color: #ffffff; position: absolute; left: 0; - top: 50%; + top: calc(50% + 35px); transform: translateY(-50%); } .app-intro .container { @@ -546,9 +551,14 @@ b { margin-bottom: var(--space-4xs-6xl); } .app-section .image { + height: 72vh; position: sticky; - top: 0; - height: max-content; + top: 15vh; +} +@media screen and (max-width: 1680px) { + .app-section .image { + height: 100vh; + } } @media screen and (max-width: 1024px) { .app-section .image { @@ -558,22 +568,12 @@ b { position: relative; } } -@media screen and (max-width: 1680px) { - .app-section .image { - height: 100vh; - } -} .app-section .image img { width: 100%; -} -@media screen and (max-width: 1680px) { - .app-section .image img { - width: 100%; - height: 100%; - object-fit: cover; - position: absolute; - object-position: center; - } + height: 100%; + object-fit: cover; + position: absolute; + object-position: center; } .app-section .text { width: 100%; diff --git a/app.css.map b/app.css.map index 61ac44e..e0424ac 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":";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;;;AFZF;EEQF;IAMI;IACA;;;AAEF;EACE;EACA;;;AAEJ;EACE;EACA;;AFvBA;EEqBF;IAII;;;AAEF;EACE;;AF5BF;EE2BA;IAGI;;;AF9BJ;EE2BA;IAKI;;;AAEJ;EACE;;AFnCF;EEkCA;IAGI;;;AFrCJ;EEyCI;IACE;IACA;;EACF;IACE;IACA;;;AF9CN;EEgDE;IAEI;;;;AAGR;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AFlEA;EEqEF;IAEI;;;;AFvEF;EEyEF;IAEI;;;;AAEJ;EACE;EACA;EACA;EACA;EACA;EACA;;AFnFA;EE6EF;IAQI;;;;AAEJ;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE,aF1GQ;;;AE4GV;EACE,aF5GQ;;;AE8GV;EACE;;;AF1GA;EE4GF;IAEI;;;;AAEJ;EACE;;;AAIA;EACE;EACA;;AFvHF;EEqHA;IAII;;;AAEF;EACE;EACA;EACA;EACA;;AF/HJ;EE2HE;IAMI;;;AAEF;EACE;;AAEJ;EACE;EACA;EACA;EACA;EACA;;AF3IJ;EEsIE;IAOI;;;AACF;AAAA;EAEE;EACA;;AAEF;EACE;EACA;;AAEN;EACE;EACA;;AACA;EACE;EACA;;AACA;EACE;;AF9JN;EEgKI;IAEI;;;AFlKR;EEoKE;IAEI;IACA;;;AAEJ;EACE;EACA;;AF3KJ;EEyKE;IAII;IACA;;;AAEJ;EACE;EACA;EACA;EACA;EACA;EACA;;AFtLJ;EEgLE;IAQI;;;AFxLN;EEgLE;IAUI;;;AAEF;EAEE;EACA;EACA,kBFxMJ;EEyMI;EACA;EACA;;AAEF;EACE;EACA;EACA;;AFxMN;EEqMI;IAKI;IACA;IACA;IACA;;;AF7MR;EEqMI;IAUI;;;AAEJ;EACE;EACA;;AFnNN;EEiNI;IAII;IACA;IACA;IACA;IACA;IACA;;;AAEJ;EACE;EACA;EACA;EACA;EACA;EACA,YF5OD;EE6OC;EACA;EACA;EACA;EACA;EACA;;AAEF;AAAA;EAEE;EACA;;AAEF;EACE;EACA;;AAEN;EACE;EACA;EACA;;AFtPF;EEmPA;IAKI;;;AAEF;EACE;EACA;EACA;EACA,kBFtQF;EEuQE;EACA;EACA;EACA;;AAEF;EACE;EACA;;AACA;EAEE;EACA;EACA;EACA;EACA,kBFvRD;;AEyRD;EACE;EACA;EACA;EACA;EACA;EACA;;AAEF;EACE;;AAEN;EACE;;AACA;EACE;EACA;EACA;;AF/RJ;EE4RE;IAKI;;;AFjSN;EE4RE;IAOI;IACA;IACA;IACA;;;AAEF;EACE;EACA;EACA;EACA;EACA;;AAEJ;EACE;EACA;;AFjTJ;EE+SE;IAII;;;AFnTN;EE+SE;IAMI;;;AAGF;EACE;;AACF;EACE;;AAEJ;EACE;;AACA;EACE;;AACF;EACE;;AACF;EACE;;AACF;EACE;;AAGJ;EACE;EACA;EACA;EACA;EACA;;AF9UJ;EEyUE;IAOI;IACA;;;AAEF;EACE;;AAEF;EACE;;AAEJ;EACE;;AAEF;EACE;;AAEF;EACE;EACA;;AAEF;EACE,OF5WF;EE6WE;;AACA;EACE","file":"app.css"} \ No newline at end of file diff --git a/index.html b/index.html index f886f02..4ee4a3f 100644 --- a/index.html +++ b/index.html @@ -5,6 +5,10 @@ Title +
diff --git a/sass/app.sass b/sass/app.sass index 7d7d6d6..8f82be9 100644 --- a/sass/app.sass +++ b/sass/app.sass @@ -92,6 +92,8 @@ body > .app-section ~ .app-section padding: 18px 0 border-top: 1px solid $blue border-bottom: 1px solid $blue + +screen-size(small-desktop) + margin-top: var(--space-xl-6xl) .text-center text-align: center @@ -263,7 +265,7 @@ b background-color: $w position: absolute left: 0 - top: 50% + top: calc(50% + 35px) transform: translateY(-50%) .container @@ -291,25 +293,23 @@ b &-section margin-bottom: var(--space-4xs-6xl) .image + height: 72vh position: sticky - top: 0 - height: max-content + top: 15vh + +screen-size(desktop, 'max') + height: 100vh +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 + height: 100% + object-fit: cover + position: absolute + object-position: center .text width: 100%