wip #5941 @1:30 correctifs css

diff --git a/app.css b/app.css
index d375a79adf57b08321f0585421a2158ca365b7b8..daba58022d55ec68a2c131a9440f0f12871608ac 100644 (file)
--- 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 61ac44ef27de2d6a146e6bfcecd849454fe7453b..e0424ac5eb2e8881a1a7b865c74118e8813e9d41 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 f886f026eb5e45cc5cce127a8bef84d889eaccaf..4ee4a3f71a4ca061eee39a99494d149878c9732a 100644 (file)
--- a/index.html
+++ b/index.html
@@ -5,6 +5,10 @@
     <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>
 </head>
 <body>
     <header class="app-header bg-blue">

diff --git a/sass/app.sass b/sass/app.sass
index 7d7d6d6e2a9fa2e5fea784bf7d30e4efc517ab97..8f82be9249a01259e64cf85e30bfca964d2c37c7 100644 (file)
--- 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%