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;
@@ -65,6 +60,76 @@
           height: 5em;
         }
       }
+      &.right{
+
+        .field_images{
+          .field-item{
+            position: relative;
+            margin-bottom: 1em;
+            figure{
+              margin: 0;
+              a{
+                display: block;
+                line-height: 0;
+                img{
+                  width: 100%;
+                  max-width: 100%;
+                  height: auto;
+                }
+              }
+              figcaption.image-field-caption{
+                margin: 0;
+                display: block;
+                // border: 1px solid red;
+                blockquote{
+                  width: 100%;
+                  margin: 0;
+                  background-color: rgb(30,30,30);
+                  color: #fff;
+                  pointer-events: none;
+                  p{
+                    margin: 0;
+                    padding: 1em;
+                    font-weight: 300;
+                    font-size: 0.8em;
+                  }
+                }
+
+              }
+
+            }
+
+            &:hover{
+              z-index:200;
+
+            }
+          }
+
+        }
+
+      }
+    }
+  }
+  // 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
@@ -85,61 +150,26 @@
               // 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
-            // 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;
+              // margin-bottom: 0;
               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;
-                img{
-                  width: 100%;
-                  max-width: 100%;
-                  height: auto;
-                }
-              }
                 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);
-                  color: #fff;
-                  pointer-events: none;
-                  p{
-                    margin: 0;
-                    padding: 1em;
-                    font-weight: 300;
-                    font-size: 0.8em;
-                  }
                     opacity: 0;
                     transition: opacity 0.3s ease-in-out;
+                    background-color: rgba(0,0,0,0.65);
+
                   }
                   &:hover{
                     // z-index:200;
@@ -148,18 +178,15 @@
                     }
                   }
                 }
-
               }
-
+            }
-            &:hover{
+          }
-              z-index:200;
+        }
+      }
+    }
+  }
+  // ONLY FOR MOBILE
+  @media (max-width:768px){
 
   }
 }
-
-        }
-
-      }
-    }
-  }
-}