node_full display for mobile

web/themes/custom/leshed/assets/scss/partials/abstracts/_node-full.scss

@@ -8,24 +8,19 @@
 @use "fluid" as *;
 
 @mixin nodefull{
+
   div.cols{
-    display: flex;
-    flex-direction: row;
-    gap: $colsgap;
-    align-items: flex-start;
     div.col{
-      flex:0 0 calc(50% - $colsgap / 2);
-      max-width: calc(50% - $colsgap / 2);
 
       &.left{
         z-index: 10;
         // padding-bottom: 5em;
         // box-sizing: border-box;
         >header{
-          transform-origin: 0 0;
+          // transform-origin: 0 0;
-          width: 205%;//calc(50% - $colsgap / 2);
+          // width: 205%;//calc(50% - $colsgap / 2);
-          z-index: 100;
+          // z-index: 100;
-          pointer-events: none;
+          // pointer-events: none;
 
           >h2.node-title{
             position: relative;
@@ -66,49 +61,16 @@
         }
       }
       &.right{
-        // Étire .field_images sur toute la hauteur de la colonne (= colonne la
+
-        // plus haute, via le stretch de .cols) : le contexte de collage sticky
-        // couvre alors tout le scroll, donc les cartes restent figées tant que
-        // la colonne gauche défile encore (cf. point 6).
-        display: flex;
         .field_images{
-          flex: 1;
-          // .field-items{
-            &:after{
-              display: block;
-              position: relative;
-              content: "";
-              // border: 1px solid red;
-              width: 100%;
-              // Étend le contexte sticky au-delà de la dernière image pour
-              // couvrir le scroll restant de la colonne gauche. Hauteur calculée
-              // en JS (voir main.js, adjustStickyContext) via --sticky-extent.
-              height: var(--sticky-extent, 100vh);
-            }
-          // }
           .field-item{
             position: relative;
-            // Empilement "cartes" : chaque image se fige au même endroit (haut) et
+            margin-bottom: 1em;
-            // est recouverte par la suivante (l'ordre du DOM fait que la dernière
-            // passe au-dessus). La 1re image ne bouge pas. Desktop uniquement.
-            @media (min-width: 768px){
-              position: sticky;
-              top: 0;
-              // &:last-child:after{
-              //   content: "";
-              //   // position: relative;
-              //   display:block;
-              //   // blockquote.image-field-caption{
-              //   height: 100vh;
-              //   width:100%;
-              //   border: 1px solid red;
-              //   // }
-              // }
-            }
             figure{
               margin: 0;
               a{
                 display: block;
+                line-height: 0;
                 img{
                   width: 100%;
                   max-width: 100%;
@@ -117,19 +79,12 @@
               }
               figcaption.image-field-caption{
                 margin: 0;
-                position: absolute;
-                bottom: 0; left: 0;
-                height: 5em;
-                width: 100%;
-                overflow: visible;
                 display: block;
                 // border: 1px solid red;
                 blockquote{
-                  position: absolute;
-                  bottom: 0; left: 0;
                   width: 100%;
                   margin: 0;
-                  background-color: rgba(0,0,0,0.65);
+                  background-color: rgb(30,30,30);
                   color: #fff;
                   pointer-events: none;
                   p{
@@ -138,15 +93,8 @@
                     font-weight: 300;
                     font-size: 0.8em;
                   }
-                  opacity: 0;
-                  transition: opacity 0.3s ease-in-out;
-                }
-                &:hover{
-                  // z-index:200;
-                  blockquote{
-                    opacity: 1;
-                  }
                 }
+
               }
 
             }
@@ -162,4 +110,83 @@
       }
     }
   }
+  // ONLY FOR DESKTOP
+  @media (min-width:769px){
+    div.cols{
+      display: flex;
+      flex-direction: row;
+      gap: $colsgap;
+      align-items: flex-start;
+      div.col{
+        flex:0 0 calc(50% - $colsgap / 2);
+        max-width: calc(50% - $colsgap / 2);
+
+        &.left{
+          >header{
+            transform-origin: 0 0;
+            width: 205%;//calc(50% - $colsgap / 2);
+            z-index: 100;
+            pointer-events: none;
+          }
+        }
+
+        &.right{
+          // Étire .field_images sur toute la hauteur de la colonne (= colonne la
+          // plus haute, via le stretch de .cols) : le contexte de collage sticky
+          // couvre alors tout le scroll, donc les cartes restent figées tant que
+          // la colonne gauche défile encore (cf. point 6).
+          display: flex;
+          .field_images{
+            flex: 1;
+            // .field-items{
+            &:after{
+              display: block;
+              position: relative;
+              content: "";
+              // border: 1px solid red;
+              width: 100%;
+              // Étend le contexte sticky au-delà de la dernière image pour
+              // couvrir le scroll restant de la colonne gauche. Hauteur calculée
+              // en JS (voir main.js, adjustStickyContext) via --sticky-extent.
+              height: var(--sticky-extent, 100vh);
+            }
+
+            .field-item{
+              position: sticky;
+              // margin-bottom: 0;
+              top: 0;
+
+              figure{
+                figcaption.image-field-caption{
+                  position: absolute;
+                  bottom: 0; left: 0;
+                  height: 5em;
+                  width: 100%;
+                  overflow: visible;
+                  blockquote{
+                    position: absolute;
+                    bottom: 0; left: 0;
+                    opacity: 0;
+                    transition: opacity 0.3s ease-in-out;
+                    background-color: rgba(0,0,0,0.65);
+
+                  }
+                  &:hover{
+                    // z-index:200;
+                    blockquote{
+                      opacity: 1;
+                    }
+                  }
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+  // ONLY FOR MOBILE
+  @media (max-width:768px){
+
+  }
 }