page ressource css

web/themes/custom/eql/dist/assets/css/bundle.css

@@ -2110,6 +2110,7 @@ a {
 
 .page-node-type-ressource .layout__region--top {
   padding-top: 4rem;
+  /* Hide empty blocks */
 }
 .page-node-type-ressource .layout__region--top .block-region-top {
   display: flex;
@@ -2118,8 +2119,8 @@ a {
 @media screen and (min-width: 1100px) {
   .page-node-type-ressource .layout__region--top .block-region-top {
     display: grid;
-    grid-template-columns: 1fr repeat(8, 1fr) 1fr;
-    grid-template-rows: auto;
+    grid-template-columns: 1fr 2fr; /* 1/3 pour l'image, 2/3 pour le contenu */
+    gap: 1rem;
   }
 }
 .page-node-type-ressource .layout__region--top .block-region-top .block-entity-fieldnodefield-images {
@@ -2129,8 +2130,59 @@ a {
 }
 @media screen and (min-width: 1100px) {
   .page-node-type-ressource .layout__region--top .block-region-top .block-entity-fieldnodefield-images {
-    grid-column: 2/span 4;
-    grid-row: 1/span 5;
+    grid-column: 1/2;
+    grid-row: 1/span 7; /* Prendre toutes les lignes disponibles */
+    align-self: start; /* S'assurer qu'il commence en haut */
+  }
+}
+.page-node-type-ressource .layout__region--top .block-region-top .block-block-content4e5df355-e76c-4e44-bec0-e211d94f2640,
+.page-node-type-ressource .layout__region--top .block-region-top .block-entity-fieldnodefield-type-de-ressource,
+.page-node-type-ressource .layout__region--top .block-region-top .block-entity-fieldnodetitle,
+.page-node-type-ressource .layout__region--top .block-region-top .block-entity-fieldnodefield-sous-titre,
+.page-node-type-ressource .layout__region--top .block-region-top .block-entity-fieldnodefield-edition,
+.page-node-type-ressource .layout__region--top .block-region-top .block-entity-fieldnodefield-auteur-s-,
+.page-node-type-ressource .layout__region--top .block-region-top .block-entity-fieldnodefield-date-de-parution,
+.page-node-type-ressource .layout__region--top .block-region-top .block-entity-fieldnodefield-mots-clefs {
+  width: 100%;
+  margin-left: 13%;
+}
+@media (max-width: 810px) {
+  .page-node-type-ressource .layout__region--top .block-region-top .block-block-content4e5df355-e76c-4e44-bec0-e211d94f2640,
+  .page-node-type-ressource .layout__region--top .block-region-top .block-entity-fieldnodefield-type-de-ressource,
+  .page-node-type-ressource .layout__region--top .block-region-top .block-entity-fieldnodetitle,
+  .page-node-type-ressource .layout__region--top .block-region-top .block-entity-fieldnodefield-sous-titre,
+  .page-node-type-ressource .layout__region--top .block-region-top .block-entity-fieldnodefield-edition,
+  .page-node-type-ressource .layout__region--top .block-region-top .block-entity-fieldnodefield-auteur-s-,
+  .page-node-type-ressource .layout__region--top .block-region-top .block-entity-fieldnodefield-date-de-parution,
+  .page-node-type-ressource .layout__region--top .block-region-top .block-entity-fieldnodefield-mots-clefs {
+    margin-left: 9%;
+    margin-right: 9%;
+  }
+}
+@media screen and (min-width: 1100px) {
+  .page-node-type-ressource .layout__region--top .block-region-top .block-block-content4e5df355-e76c-4e44-bec0-e211d94f2640,
+  .page-node-type-ressource .layout__region--top .block-region-top .block-entity-fieldnodefield-type-de-ressource,
+  .page-node-type-ressource .layout__region--top .block-region-top .block-entity-fieldnodetitle,
+  .page-node-type-ressource .layout__region--top .block-region-top .block-entity-fieldnodefield-sous-titre,
+  .page-node-type-ressource .layout__region--top .block-region-top .block-entity-fieldnodefield-edition,
+  .page-node-type-ressource .layout__region--top .block-region-top .block-entity-fieldnodefield-auteur-s-,
+  .page-node-type-ressource .layout__region--top .block-region-top .block-entity-fieldnodefield-date-de-parution,
+  .page-node-type-ressource .layout__region--top .block-region-top .block-entity-fieldnodefield-mots-clefs {
+    width: auto;
+    margin-left: 0;
+    grid-column: 2/3;
+    align-self: start; /* S'assurer qu'il commence en haut */
+    height: fit-content;
+  }
+  .page-node-type-ressource .layout__region--top .block-region-top .block-block-content4e5df355-e76c-4e44-bec0-e211d94f2640 p,
+  .page-node-type-ressource .layout__region--top .block-region-top .block-entity-fieldnodefield-type-de-ressource p,
+  .page-node-type-ressource .layout__region--top .block-region-top .block-entity-fieldnodetitle p,
+  .page-node-type-ressource .layout__region--top .block-region-top .block-entity-fieldnodefield-sous-titre p,
+  .page-node-type-ressource .layout__region--top .block-region-top .block-entity-fieldnodefield-edition p,
+  .page-node-type-ressource .layout__region--top .block-region-top .block-entity-fieldnodefield-auteur-s- p,
+  .page-node-type-ressource .layout__region--top .block-region-top .block-entity-fieldnodefield-date-de-parution p,
+  .page-node-type-ressource .layout__region--top .block-region-top .block-entity-fieldnodefield-mots-clefs p {
+    margin: 0;
   }
 }
 .page-node-type-ressource .layout__region--top .block-region-top .block-block-content4e5df355-e76c-4e44-bec0-e211d94f2640 {
@@ -2146,13 +2198,6 @@ a {
   padding-bottom: 0.5rem;
   vertical-align: middle;
 }
-@media screen and (min-width: 1100px) {
-  .page-node-type-ressource .layout__region--top .block-region-top .block-block-content4e5df355-e76c-4e44-bec0-e211d94f2640 {
-    width: 50%;
-    grid-column: 5/span 7;
-    grid-row: 1;
-  }
-}
 .page-node-type-ressource .layout__region--top .block-region-top .block-entity-fieldnodefield-type-de-ressource {
   margin-top: 2rem;
   margin-left: 13%;
@@ -2160,75 +2205,23 @@ a {
   text-transform: uppercase;
   font-weight: 800;
 }
-@media (max-width: 810px) {
-  .page-node-type-ressource .layout__region--top .block-region-top .block-entity-fieldnodefield-type-de-ressource {
-    margin-left: 9%;
-    margin-right: 9%;
-  }
-}
-@media screen and (min-width: 1100px) {
-  .page-node-type-ressource .layout__region--top .block-region-top .block-entity-fieldnodefield-type-de-ressource {
-    width: 50%;
-    grid-column: 5/span 7;
-    grid-row: 1;
-  }
-}
 .page-node-type-ressource .layout__region--top .block-region-top .block-entity-fieldnodetitle {
   margin-left: 13%;
   font-size: 2rem;
   font-weight: 600;
 }
-@media (max-width: 810px) {
-  .page-node-type-ressource .layout__region--top .block-region-top .block-entity-fieldnodetitle {
-    margin-left: 9%;
-    margin-right: 9%;
-  }
-}
-@media screen and (min-width: 1100px) {
-  .page-node-type-ressource .layout__region--top .block-region-top .block-entity-fieldnodetitle {
-    width: 50%;
-    grid-column: 5/span 7;
-    grid-row: 2;
-  }
-}
 .page-node-type-ressource .layout__region--top .block-region-top .block-entity-fieldnodefield-sous-titre {
   margin-left: 13%;
 }
 .page-node-type-ressource .layout__region--top .block-region-top .block-entity-fieldnodefield-sous-titre .field--name-field-edition p {
   margin-bottom: 0;
 }
-@media (max-width: 810px) {
-  .page-node-type-ressource .layout__region--top .block-region-top .block-entity-fieldnodefield-sous-titre {
-    margin-left: 9%;
-    margin-right: 9%;
-  }
-}
-@media screen and (min-width: 1100px) {
-  .page-node-type-ressource .layout__region--top .block-region-top .block-entity-fieldnodefield-sous-titre {
-    width: 50%;
-    grid-column: 5/span 7;
-    grid-row: 3;
-  }
-}
 .page-node-type-ressource .layout__region--top .block-region-top .block-entity-fieldnodefield-edition {
   margin-left: 13%;
 }
 .page-node-type-ressource .layout__region--top .block-region-top .block-entity-fieldnodefield-edition .field--name-field-edition p {
   margin-bottom: 0;
 }
-@media (max-width: 810px) {
-  .page-node-type-ressource .layout__region--top .block-region-top .block-entity-fieldnodefield-edition {
-    margin-left: 9%;
-    margin-right: 9%;
-  }
-}
-@media screen and (min-width: 1100px) {
-  .page-node-type-ressource .layout__region--top .block-region-top .block-entity-fieldnodefield-edition {
-    width: 50%;
-    grid-column: 5/span 7;
-    grid-row: 4;
-  }
-}
 .page-node-type-ressource .layout__region--top .block-region-top .block-entity-fieldnodefield-auteur-s- {
   margin-left: 13%;
 }
@@ -2239,35 +2232,9 @@ a {
 .page-node-type-ressource .layout__region--top .block-region-top .block-entity-fieldnodefield-auteur-s- .field--name-field-auteur-s- p {
   margin: 0;
 }
-@media (max-width: 810px) {
-  .page-node-type-ressource .layout__region--top .block-region-top .block-entity-fieldnodefield-auteur-s- {
-    margin-left: 9%;
-    margin-right: 9%;
-  }
-}
-@media screen and (min-width: 1100px) {
-  .page-node-type-ressource .layout__region--top .block-region-top .block-entity-fieldnodefield-auteur-s- {
-    width: 50%;
-    grid-column: 5/span 7;
-    grid-row: 5;
-  }
-}
 .page-node-type-ressource .layout__region--top .block-region-top .block-entity-fieldnodefield-date-de-parution {
   margin-left: 13%;
 }
-@media (max-width: 810px) {
-  .page-node-type-ressource .layout__region--top .block-region-top .block-entity-fieldnodefield-date-de-parution {
-    margin-left: 9%;
-    margin-right: 9%;
-  }
-}
-@media screen and (min-width: 1100px) {
-  .page-node-type-ressource .layout__region--top .block-region-top .block-entity-fieldnodefield-date-de-parution {
-    width: 50%;
-    grid-column: 5/span 7;
-    grid-row: 6;
-  }
-}
 .page-node-type-ressource .layout__region--top .block-region-top .block-entity-fieldnodefield-mots-clefs {
   margin-left: 13%;
 }
@@ -2285,10 +2252,6 @@ a {
   vertical-align: middle;
 }
 @media (max-width: 810px) {
-  .page-node-type-ressource .layout__region--top .block-region-top .block-entity-fieldnodefield-mots-clefs {
-    margin-left: 9%;
-    margin-right: 9%;
-  }
   .page-node-type-ressource .layout__region--top .block-region-top .block-entity-fieldnodefield-mots-clefs .field--name-field-mots-clefs {
     display: flex;
     flex-direction: row;
@@ -2298,12 +2261,15 @@ a {
     margin-bottom: 0.5rem;
   }
 }
-@media screen and (min-width: 800px) {
-  .page-node-type-ressource .layout__region--top .block-region-top .block-entity-fieldnodefield-mots-clefs {
-    width: 50%;
-    grid-column: 5/span 7;
-    grid-row: 7;
-  }
+.page-node-type-ressource .layout__region--top .block-block-content4e5df355-e76c-4e44-bec0-e211d94f2640:empty,
+.page-node-type-ressource .layout__region--top .block-entity-fieldnodefield-type-de-ressource:empty,
+.page-node-type-ressource .layout__region--top .block-entity-fieldnodetitle:empty,
+.page-node-type-ressource .layout__region--top .block-entity-fieldnodefield-sous-titre:empty,
+.page-node-type-ressource .layout__region--top .block-entity-fieldnodefield-edition:empty,
+.page-node-type-ressource .layout__region--top .block-entity-fieldnodefield-auteur-s-:empty,
+.page-node-type-ressource .layout__region--top .block-entity-fieldnodefield-date-de-parution:empty,
+.page-node-type-ressource .layout__region--top .block-entity-fieldnodefield-mots-clefs:empty {
+  display: none;
 }
 .page-node-type-ressource .layout__region--first {
   margin-top: 3rem;

web/themes/custom/eql/scss/pages/_ressource.scss

@@ -9,8 +9,10 @@
                 flex-direction: column;
                 @media screen and (min-width:1100px) {
                     display: grid;
-                    grid-template-columns: 1fr repeat(8, 1fr) 1fr;
-                    grid-template-rows: auto;
+                    // grid-template-columns: 1fr repeat(8, 1fr) 1fr;
+                    // grid-template-rows: auto;
+                    grid-template-columns: 1fr 2fr; /* 1/3 pour l'image, 2/3 pour le contenu */
+                    gap: 1rem;
                 }
                 // &div:not(.block-entity-fieldnodefield-images){
                 //     @media screen and (min-width:800px) {
@@ -23,11 +25,39 @@
                     margin: auto;
                     padding-right: 2rem;
                     @media screen and (min-width:1100px) {
-                        grid-column: 2/span 4;
-                        grid-row: 1 /span 5;
+                        // grid-column: 2/span 4;
+                        // grid-row: 1 /span 5;
+                        grid-column: 1 / 2;
+                        grid-row: 1 /span 7; /* Prendre toutes les lignes disponibles */
+                        align-self: start; /* S'assurer qu'il commence en haut */
                     }
                     
                 }
+                .block-block-content4e5df355-e76c-4e44-bec0-e211d94f2640, 
+                .block-entity-fieldnodefield-type-de-ressource, 
+                .block-entity-fieldnodetitle, 
+                .block-entity-fieldnodefield-sous-titre, 
+                .block-entity-fieldnodefield-edition, 
+                .block-entity-fieldnodefield-auteur-s-, 
+                .block-entity-fieldnodefield-date-de-parution, 
+                .block-entity-fieldnodefield-mots-clefs {
+                    width: 100%;
+                    margin-left: 13%;
+                    @media (max-width: 810px) {
+                        margin-left: 9%;
+                        margin-right: 9%;
+                    }
+                    @media screen and (min-width: 1100px) {
+                        width: auto;
+                        margin-left: 0;
+                        grid-column: 2 / 3;
+                        align-self: start; /* S'assurer qu'il commence en haut */
+                        height: fit-content ;
+                        p{margin: 0;}
+
+                    }
+                }
+            
                 .block-block-content4e5df355-e76c-4e44-bec0-e211d94f2640{
                     width: 100%;
                     font-family: 'Source Code Pro';
@@ -40,11 +70,11 @@
                     padding-top: 1rem;
                     padding-bottom: 0.5rem;
                     vertical-align: middle;
-                    @media screen and (min-width:1100px) {
-                        width: 50%;
-                        grid-column: 5/span 7;
-                        grid-row: 1;
-                    }
+                    // @media screen and (min-width:1100px) {
+                    //     // width: 50%;
+                    //     // grid-column: 5/span 7;
+                    //     // grid-row: 1;
+                    // }
     
                 }
 
@@ -54,32 +84,32 @@
                     color: $blue-light;
                     text-transform: uppercase;
                     font-weight: 800;
-                    @media (max-width: 810px){
-                        margin-left:9%;
-                        margin-right: 9%;
-                    }
-                    @media screen and (min-width:1100px) {
-                        width: 50%;
-                        grid-column: 5/span 7;
-                        grid-row: 1;
+                    // @media (max-width: 810px){
+                    //     margin-left:9%;
+                    //     margin-right: 9%;
+                    // }
+                    // @media screen and (min-width:1100px) {
+                    //     width: 50%;
+                    //     grid-column: 5/span 7;
+                    //     grid-row: 1;
 
-                    }
+                    // }
 
                 }
                 .block-entity-fieldnodetitle{
                     margin-left: 13%;
                     font-size: 2rem;
                     font-weight: 600;
-                    @media (max-width: 810px){
-                        margin-left:9%;
-                        margin-right: 9%;
-                    }
-                    @media screen and (min-width:1100px) {
-                        width: 50%;
-                        grid-column: 5/span 7;
-                        grid-row: 2;
+                    // @media (max-width: 810px){
+                    //     margin-left:9%;
+                    //     margin-right: 9%;
+                    // }
+                    // @media screen and (min-width:1100px) {
+                    //     width: 50%;
+                    //     grid-column: 5/span 7;
+                    //     grid-row: 2;
 
-                    }
+                    // }
                 }
 
                 .block-entity-fieldnodefield-sous-titre{
@@ -89,16 +119,16 @@
                             margin-bottom: 0;
                         }
                     }
-                    @media (max-width: 810px){
-                        margin-left:9%;
-                        margin-right: 9%;
-                    }
-                    @media screen and (min-width:1100px) {
-                        width: 50%;
-                        grid-column: 5/span 7;
-                        grid-row: 3;
+                    // @media (max-width: 810px){
+                    //     margin-left:9%;
+                    //     margin-right: 9%;
+                    // }
+                    // @media screen and (min-width:1100px) {
+                    //     width: 50%;
+                    //     grid-column: 5/span 7;
+                    //     grid-row: 3;
 
-                    }
+                    // }
                 }
                 .block-entity-fieldnodefield-edition{
                     margin-left: 13%;
@@ -107,16 +137,16 @@
                             margin-bottom: 0;
                         }
                     }
-                    @media (max-width: 810px){
-                        margin-left:9%;
-                        margin-right: 9%;
-                    }
-                    @media screen and (min-width:1100px) {
-                        width: 50%;
-                        grid-column: 5/span 7;
-                        grid-row: 4;
+                    // @media (max-width: 810px){
+                    //     margin-left:9%;
+                    //     margin-right: 9%;
+                    // }
+                    // @media screen and (min-width:1100px) {
+                    //     width: 50%;
+                    //     grid-column: 5/span 7;
+                    //     grid-row: 4;
 
-                    }
+                    // }
 
                 }
                 .block-entity-fieldnodefield-auteur-s-{
@@ -128,30 +158,30 @@
                             margin: 0;
                         }
                     }
-                    @media (max-width: 810px){
-                        margin-left:9%;
-                        margin-right: 9%;
-                    }
-                    @media screen and (min-width:1100px) {
-                        width: 50%;
-                        grid-column: 5/span 7;
-                        grid-row: 5;
+                    // @media (max-width: 810px){
+                    //     margin-left:9%;
+                    //     margin-right: 9%;
+                    // }
+                    // @media screen and (min-width:1100px) {
+                    //     width: 50%;
+                    //     grid-column: 5/span 7;
+                    //     grid-row: 5;
 
-                    }
+                    // }
                 }    
 
                 .block-entity-fieldnodefield-date-de-parution{
                     margin-left: 13%;
-                    @media (max-width: 810px){
-                        margin-left:9%;
-                        margin-right: 9%;
-                    }
-                    @media screen and (min-width:1100px) {
-                        width: 50%;
-                        grid-column: 5/span 7;
-                        grid-row: 6;
+                    // @media (max-width: 810px){
+                    //     margin-left:9%;
+                    //     margin-right: 9%;
+                    // }
+                    // @media screen and (min-width:1100px) {
+                    //     width: 50%;
+                    //     grid-column: 5/span 7;
+                    //     grid-row: 6;
 
-                    }
+                    // }
                 }
                 .block-entity-fieldnodefield-mots-clefs{
                     margin-left: 13%;
@@ -173,8 +203,8 @@
                         }
                     }
                     @media (max-width: 810px){
-                        margin-left:9%;
-                        margin-right: 9%;
+                        // margin-left:9%;
+                        // margin-right: 9%;
                         .field--name-field-mots-clefs{
                             display: flex;
                             flex-direction: row;
@@ -186,13 +216,24 @@
                         }    
 
                     }
-                    @media screen and (min-width:800px) {
-                        width: 50%;
-                        grid-column: 5/span 7;
-                        grid-row: 7;
+                    // @media screen and (min-width:800px) {
+                    //     width: 50%;
+                    //     grid-column: 5/span 7;
+                    //     grid-row: 7;
 
-                    }   
+                    // }   
                 }
+            }
+                        /* Hide empty blocks */
+            .block-block-content4e5df355-e76c-4e44-bec0-e211d94f2640:empty,
+            .block-entity-fieldnodefield-type-de-ressource:empty,
+            .block-entity-fieldnodetitle:empty,
+            .block-entity-fieldnodefield-sous-titre:empty,
+            .block-entity-fieldnodefield-edition:empty,
+            .block-entity-fieldnodefield-auteur-s-:empty,
+            .block-entity-fieldnodefield-date-de-parution:empty,
+            .block-entity-fieldnodefield-mots-clefs:empty {
+                display: none;
             }
         }
         .layout__region--first{             // menu ancres a gauche