css ressource livre

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

@@ -2139,6 +2139,9 @@ svg.ext {
   display: none;
 }
 
+.page-node-type-ressource .layout-container {
+  overflow: visible;
+}
 .page-node-type-ressource .layout__region--top {
   padding-top: 4rem;
   /* Hide empty blocks */
@@ -2156,12 +2159,11 @@ svg.ext {
   .page-node-type-ressource .layout__region--top .block-region-top {
     display: grid;
     grid-template-columns: 1fr 2fr; /* 1/3 pour l'image, 2/3 pour le contenu */
-    gap: 1rem;
+    gap: 0.5rem;
   }
 }
 .page-node-type-ressource .layout__region--top .block-region-top .block-entity-fieldnodefield-images {
   width: fit-content;
-  padding-right: 2rem;
   padding-left: 25%;
 }
 @media screen and (min-width: 1100px) {
@@ -2265,7 +2267,7 @@ svg.ext {
 .page-node-type-ressource .layout__region--top .block-region-top .block-entity-fieldnodefield-type-de-ressource {
   color: rgb(0, 158, 227);
   text-transform: uppercase;
-  font-weight: 800;
+  font-weight: 900;
 }
 @media (max-width: 1099px) {
   .page-node-type-ressource .layout__region--top .block-region-top .block-entity-fieldnodefield-type-de-ressource {
@@ -2273,8 +2275,9 @@ svg.ext {
   }
 }
 .page-node-type-ressource .layout__region--top .block-region-top .block-entity-fieldnodetitle {
-  font-size: 2rem;
+  font-size: 3rem;
   font-weight: 600;
+  line-height: 1.2;
 }
 @media (max-width: 550px) {
   .page-node-type-ressource .layout__region--top .block-region-top .block-entity-fieldnodetitle .field--name-title {
@@ -2291,13 +2294,14 @@ svg.ext {
 .page-node-type-ressource .layout__region--top .block-region-top .block-entity-fieldnodefield-auteur-s- .field--name-field-auteur-s- {
   font-size: 1.5rem;
   font-weight: 800;
+  line-height: 0.8;
 }
 .page-node-type-ressource .layout__region--top .block-region-top .block-entity-fieldnodefield-auteur-s- .field--name-field-auteur-s- p {
   margin: 0;
 }
 .page-node-type-ressource .layout__region--top .block-region-top .block-entity-fieldnodefield-mots-clefs .field--name-field-mots-clefs {
   display: inline-flex;
-  margin-top: 2rem;
+  margin-top: 0.5rem;
 }
 .page-node-type-ressource .layout__region--top .block-region-top .block-entity-fieldnodefield-mots-clefs .field--name-field-mots-clefs .field__item {
   background: rgb(9, 57, 139);
@@ -2341,7 +2345,7 @@ svg.ext {
   display: flex;
   justify-content: flex-end;
   position: sticky;
-  top: 7rem;
+  top: 13rem;
 }
 .page-node-type-ressource .layout__region--first .block-region-first .block-entity-fieldnodefield-textes {
   display: flex;
@@ -2438,12 +2442,14 @@ svg.ext {
 .page-node-type-ressource .layout__region--third .block-region-third .field--name-field-fichiers .file--mime-application-pdf {
   height: inherit;
   margin: auto;
+  width: fit-content;
 }
 .page-node-type-ressource .layout__region--third .block-region-third .field--name-field-fichiers .file--mime-application-pdf ::before {
-  content: url("../images/pictos/noun_Download_file_307900.svg");
+  content: url("../images/pictos/download.png");
   min-width: 30px;
   height: auto;
   padding-right: 1rem;
+  margin-right: 1rem;
 }
 .page-node-type-ressource .layout__region--third .block-region-third .field--name-field-fichiers .file--mime-application-pdf a {
   hyphens: auto;
@@ -5611,6 +5617,7 @@ svg.ext {
   width: 100%;
   position: relative;
   z-index: 0;
+  padding-bottom: 4rem;
 }
 .path-ressources .layout-content .region-content #block-contenudelapageprincipale .layout--onecol .layout__region--content .block-region-content .block-views-blockbase-de-donnees-block-1 .view-base-de-donnees .view-content .view-type-ressource-slide:not(footer)::before {
   content: "";
@@ -5625,6 +5632,7 @@ svg.ext {
   z-index: 1;
 }
 .path-ressources .layout-content .region-content #block-contenudelapageprincipale .layout--onecol .layout__region--content .block-region-content .block-views-blockbase-de-donnees-block-1 .view-base-de-donnees .view-content .view-type-ressource-slide:not(footer) h3 {
+  margin-top: 3rem;
   text-transform: uppercase;
 }
 .path-ressources .layout-content .region-content #block-contenudelapageprincipale .layout--onecol .layout__region--content .block-region-content .block-views-blockbase-de-donnees-block-1 .view-base-de-donnees .view-content .view-type-ressource-slide:not(footer) h3 a {
@@ -5670,44 +5678,58 @@ svg.ext {
 .path-ressources .layout-content .region-content #block-contenudelapageprincipale .layout--onecol .layout__region--content .block-region-content .block-views-blockbase-de-donnees-block-1 .view-base-de-donnees .view-content .view-type-ressource-slide:not(footer) .views-row-wrapper .views-row .node-type-ressource svg.ext {
   display: none;
 }
-.path-ressources .layout-content .region-content #block-contenudelapageprincipale .layout--onecol .layout__region--content .block-region-content .block-views-blockbase-de-donnees-block-1 .view-base-de-donnees .view-content .view-type-ressource-slide:not(footer) .views-row-wrapper .views-row .node-type-ressource.type-productions-du-programme-engages-pour-la-qualite-du-logement-de-demain .wrapper-ressource {
+.path-ressources .layout-content .region-content #block-contenudelapageprincipale .layout--onecol .layout__region--content .block-region-content .block-views-blockbase-de-donnees-block-1 .view-base-de-donnees .view-content .view-type-ressource-slide:not(footer) .views-row-wrapper .views-row .node-type-ressource.type-de-ressource-Productions-du-programme-Engagés-pour-la-qualité-du-logement-de-demain .wrapper-ressource {
   display: grid;
   grid-template-columns: 1fr 1.5fr;
   grid-template-rows: repeat(5 1fr);
 }
-.path-ressources .layout-content .region-content #block-contenudelapageprincipale .layout--onecol .layout__region--content .block-region-content .block-views-blockbase-de-donnees-block-1 .view-base-de-donnees .view-content .view-type-ressource-slide:not(footer) .views-row-wrapper .views-row .node-type-ressource.type-productions-du-programme-engages-pour-la-qualite-du-logement-de-demain .wrapper-ressource .field--name-field-type-de-ressource {
+.path-ressources .layout-content .region-content #block-contenudelapageprincipale .layout--onecol .layout__region--content .block-region-content .block-views-blockbase-de-donnees-block-1 .view-base-de-donnees .view-content .view-type-ressource-slide:not(footer) .views-row-wrapper .views-row .node-type-ressource.type-de-ressource-Productions-du-programme-Engagés-pour-la-qualité-du-logement-de-demain .wrapper-ressource .field--name-field-type-de-ressource {
   order: 1;
   grid-row: 1;
+  margin-bottom: 1rem;
 }
-.path-ressources .layout-content .region-content #block-contenudelapageprincipale .layout--onecol .layout__region--content .block-region-content .block-views-blockbase-de-donnees-block-1 .view-base-de-donnees .view-content .view-type-ressource-slide:not(footer) .views-row-wrapper .views-row .node-type-ressource.type-productions-du-programme-engages-pour-la-qualite-du-logement-de-demain .wrapper-ressource .field--name-field-images {
+.path-ressources .layout-content .region-content #block-contenudelapageprincipale .layout--onecol .layout__region--content .block-region-content .block-views-blockbase-de-donnees-block-1 .view-base-de-donnees .view-content .view-type-ressource-slide:not(footer) .views-row-wrapper .views-row .node-type-ressource.type-de-ressource-Productions-du-programme-Engagés-pour-la-qualité-du-logement-de-demain .wrapper-ressource .field--name-field-type-de-media {
   order: 2;
-  grid-row: 2/span 5;
+  grid-row: 2;
+}
+.path-ressources .layout-content .region-content #block-contenudelapageprincipale .layout--onecol .layout__region--content .block-region-content .block-views-blockbase-de-donnees-block-1 .view-base-de-donnees .view-content .view-type-ressource-slide:not(footer) .views-row-wrapper .views-row .node-type-ressource.type-de-ressource-Productions-du-programme-Engagés-pour-la-qualité-du-logement-de-demain .wrapper-ressource .field--name-field-images {
+  order: 3;
+  grid-row: 3/span 5;
   height: auto;
   width: 90%;
 }
-.path-ressources .layout-content .region-content #block-contenudelapageprincipale .layout--onecol .layout__region--content .block-region-content .block-views-blockbase-de-donnees-block-1 .view-base-de-donnees .view-content .view-type-ressource-slide:not(footer) .views-row-wrapper .views-row .node-type-ressource.type-productions-du-programme-engages-pour-la-qualite-du-logement-de-demain .wrapper-ressource .field--name-field-images img {
+.path-ressources .layout-content .region-content #block-contenudelapageprincipale .layout--onecol .layout__region--content .block-region-content .block-views-blockbase-de-donnees-block-1 .view-base-de-donnees .view-content .view-type-ressource-slide:not(footer) .views-row-wrapper .views-row .node-type-ressource.type-de-ressource-Productions-du-programme-Engagés-pour-la-qualité-du-logement-de-demain .wrapper-ressource .field--name-field-images img {
   height: auto;
   width: 90%;
   border: 1px solid #a3a3a3;
 }
-.path-ressources .layout-content .region-content #block-contenudelapageprincipale .layout--onecol .layout__region--content .block-region-content .block-views-blockbase-de-donnees-block-1 .view-base-de-donnees .view-content .view-type-ressource-slide:not(footer) .views-row-wrapper .views-row .node-type-ressource.type-productions-du-programme-engages-pour-la-qualite-du-logement-de-demain .wrapper-ressource .field--name-title {
-  grid-row: 2;
-}
-.path-ressources .layout-content .region-content #block-contenudelapageprincipale .layout--onecol .layout__region--content .block-region-content .block-views-blockbase-de-donnees-block-1 .view-base-de-donnees .view-content .view-type-ressource-slide:not(footer) .views-row-wrapper .views-row .node-type-ressource.type-productions-du-programme-engages-pour-la-qualite-du-logement-de-demain .wrapper-ressource .field--name-field-sous-titre {
+.path-ressources .layout-content .region-content #block-contenudelapageprincipale .layout--onecol .layout__region--content .block-region-content .block-views-blockbase-de-donnees-block-1 .view-base-de-donnees .view-content .view-type-ressource-slide:not(footer) .views-row-wrapper .views-row .node-type-ressource.type-de-ressource-Productions-du-programme-Engagés-pour-la-qualité-du-logement-de-demain .wrapper-ressource .field--name-title {
   grid-row: 3;
+  margin-top: 0;
+}
+.path-ressources .layout-content .region-content #block-contenudelapageprincipale .layout--onecol .layout__region--content .block-region-content .block-views-blockbase-de-donnees-block-1 .view-base-de-donnees .view-content .view-type-ressource-slide:not(footer) .views-row-wrapper .views-row .node-type-ressource.type-de-ressource-Productions-du-programme-Engagés-pour-la-qualité-du-logement-de-demain .wrapper-ressource .field--name-title a {
+  color: rgb(0, 158, 227);
+  font-size: 1.2rem;
+  font-style: normal;
 }
-.path-ressources .layout-content .region-content #block-contenudelapageprincipale .layout--onecol .layout__region--content .block-region-content .block-views-blockbase-de-donnees-block-1 .view-base-de-donnees .view-content .view-type-ressource-slide:not(footer) .views-row-wrapper .views-row .node-type-ressource.type-productions-du-programme-engages-pour-la-qualite-du-logement-de-demain .wrapper-ressource .field--name-field-auteur-s- {
+.path-ressources .layout-content .region-content #block-contenudelapageprincipale .layout--onecol .layout__region--content .block-region-content .block-views-blockbase-de-donnees-block-1 .view-base-de-donnees .view-content .view-type-ressource-slide:not(footer) .views-row-wrapper .views-row .node-type-ressource.type-de-ressource-Productions-du-programme-Engagés-pour-la-qualité-du-logement-de-demain .wrapper-ressource .field--name-field-sous-titre {
   grid-row: 4;
+  color: rgb(0, 158, 227);
+  font-size: 0.8rem;
+  font-weight: 800;
 }
-.path-ressources .layout-content .region-content #block-contenudelapageprincipale .layout--onecol .layout__region--content .block-region-content .block-views-blockbase-de-donnees-block-1 .view-base-de-donnees .view-content .view-type-ressource-slide:not(footer) .views-row-wrapper .views-row .node-type-ressource.type-productions-du-programme-engages-pour-la-qualite-du-logement-de-demain .wrapper-ressource .field--name-field-edition {
+.path-ressources .layout-content .region-content #block-contenudelapageprincipale .layout--onecol .layout__region--content .block-region-content .block-views-blockbase-de-donnees-block-1 .view-base-de-donnees .view-content .view-type-ressource-slide:not(footer) .views-row-wrapper .views-row .node-type-ressource.type-de-ressource-Productions-du-programme-Engagés-pour-la-qualité-du-logement-de-demain .wrapper-ressource .field--name-field-auteur-s- {
   grid-row: 5;
 }
-.path-ressources .layout-content .region-content #block-contenudelapageprincipale .layout--onecol .layout__region--content .block-region-content .block-views-blockbase-de-donnees-block-1 .view-base-de-donnees .view-content .view-type-ressource-slide:not(footer) .views-row-wrapper .views-row .node-type-ressource.type-productions-du-programme-engages-pour-la-qualite-du-logement-de-demain .wrapper-ressource .field--name-field-date-de-parution {
+.path-ressources .layout-content .region-content #block-contenudelapageprincipale .layout--onecol .layout__region--content .block-region-content .block-views-blockbase-de-donnees-block-1 .view-base-de-donnees .view-content .view-type-ressource-slide:not(footer) .views-row-wrapper .views-row .node-type-ressource.type-de-ressource-Productions-du-programme-Engagés-pour-la-qualité-du-logement-de-demain .wrapper-ressource .field--name-field-edition {
   grid-row: 6;
 }
-.path-ressources .layout-content .region-content #block-contenudelapageprincipale .layout--onecol .layout__region--content .block-region-content .block-views-blockbase-de-donnees-block-1 .view-base-de-donnees .view-content .view-type-ressource-slide:not(footer) .views-row-wrapper .views-row .node-type-ressource.type-productions-du-programme-engages-pour-la-qualite-du-logement-de-demain .wrapper-ressource .field--name-field-mots-clefs {
+.path-ressources .layout-content .region-content #block-contenudelapageprincipale .layout--onecol .layout__region--content .block-region-content .block-views-blockbase-de-donnees-block-1 .view-base-de-donnees .view-content .view-type-ressource-slide:not(footer) .views-row-wrapper .views-row .node-type-ressource.type-de-ressource-Productions-du-programme-Engagés-pour-la-qualité-du-logement-de-demain .wrapper-ressource .field--name-field-date-de-parution {
   grid-row: 7;
 }
+.path-ressources .layout-content .region-content #block-contenudelapageprincipale .layout--onecol .layout__region--content .block-region-content .block-views-blockbase-de-donnees-block-1 .view-base-de-donnees .view-content .view-type-ressource-slide:not(footer) .views-row-wrapper .views-row .node-type-ressource.type-de-ressource-Productions-du-programme-Engagés-pour-la-qualité-du-logement-de-demain .wrapper-ressource .field--name-field-mots-clefs {
+  grid-row: 8;
+}
 @media (max-width: 479px) {
   .path-ressources .layout-content .region-content #block-contenudelapageprincipale .layout--onecol .layout__region--content .block-region-content .block-views-blockbase-de-donnees-block-1 .view-base-de-donnees .view-content .view-type-ressource-slide:not(footer) .views-row-wrapper .views-row .node-type-ressource {
     margin-left: 0;

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

@@ -1,5 +1,8 @@
 
 .page-node-type-ressource{
+    .layout-container{
+        overflow: visible;
+    }
 
     // #block-contenudelapageprincipale{
         .layout__region--top{
@@ -13,11 +16,11 @@
                 @media screen and (min-width:1100px) {
                     display: grid;
                     grid-template-columns: 1fr 2fr; /* 1/3 pour l'image, 2/3 pour le contenu */
-                    gap: 1rem;
+                    gap: 0.5rem;
                 }
                 .block-entity-fieldnodefield-images{
                     width: fit-content;
-                    padding-right: 2rem;
+                    // padding-right: 2rem;
                     padding-left: 25%;
                     
                     @media screen and (min-width:1100px) {                        
@@ -86,14 +89,15 @@
                 .block-entity-fieldnodefield-type-de-ressource{
                     color: $blue-light;
                     text-transform: uppercase;
-                    font-weight: 800;
+                    font-weight: 900;
                     @media (max-width: 1099px) {
                     margin-top: 2rem;
                     }
                 }
                 .block-entity-fieldnodetitle{
-                    font-size: 2rem;
+                    font-size: 3rem;
                     font-weight: 600;
+                    line-height: 1.2;
                     .field--name-title{
                         @media (max-width: 550px) {
                             font-size: 1.5rem;
@@ -121,6 +125,7 @@
                     .field--name-field-auteur-s-{
                         font-size: 1.5rem;
                         font-weight: 800;
+                        line-height: 0.8;
                         p{
                             margin: 0;
                         }
@@ -132,7 +137,7 @@
                 .block-entity-fieldnodefield-mots-clefs{
                     .field--name-field-mots-clefs{
                         display: inline-flex;
-                        margin-top: 2rem;
+                        margin-top: 0.5rem;
                         .field__item{
                             background: $blue-dark;
                             margin-right: 1rem;
@@ -180,7 +185,7 @@
                display: flex;
                justify-content: flex-end;
                position: sticky;
-               top: 7rem;
+               top: 13rem;
                 .block-entity-fieldnodefield-textes{
                     display: flex;
                     width: 50%;
@@ -277,11 +282,13 @@
                     .file--mime-application-pdf{    
                         height: inherit;      
                         margin: auto;  
+                        width: fit-content;
                         ::before{
-                            content: url("../images/pictos/noun_Download_file_307900.svg");
+                            content: url("../images/pictos/download.png");
                             min-width:30px;
                             height: auto;
                             padding-right: 1rem;
+                            margin-right: 1rem;
                         }
                         a{
                             hyphens: auto;

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

@@ -271,17 +271,15 @@
                                         width: 100%;
                                         .view-type-ressource-slide:not(footer){
                                             width: 100%;
-                                            // padding-top: 1rem;
                                             position: relative;
-                                            // overflow: hidden;
                                             z-index: 0;
+                                            padding-bottom: 4rem;
                                             &::before {
                                                 content: "";
                                                 position: absolute;
                                                 left: -30%;
                                                 height: 100%;
                                                 width: 110vw;
-                                                // background-color: $background-actus;
                                                 z-index: 0;
                                             }
                                             > * {
@@ -289,6 +287,7 @@
                                                 z-index: 1;
                                               }
                                             h3{
+                                                margin-top: 3rem;
                                                 text-transform: uppercase;
                                                 a{color: rgb(9, 57, 139) !important;}
                                             }
@@ -339,7 +338,7 @@
                                                         svg.ext{
                                                             display: none;
                                                         }
-                                                        &.type-productions-du-programme-engages-pour-la-qualite-du-logement-de-demain{
+                                                        &.type-de-ressource-Productions-du-programme-Engagés-pour-la-qualité-du-logement-de-demain{
                                                             // background-color: $background-actus;
                                                             .wrapper-ressource{
                                                                 display: grid;
@@ -348,13 +347,15 @@
                                                                 .field--name-field-type-de-ressource{
                                                                     order: 1;
                                                                     grid-row: 1;
+                                                                    margin-bottom: 1rem;
                                                                 }
                                                                 .field--name-field-type-de-media{
-
+                                                                    order: 2;
+                                                                    grid-row: 2;
                                                                 }
                                                                 .field--name-field-images{
-                                                                    order: 2;
-                                                                    grid-row: 2 /span 5;
+                                                                    order: 3;
+                                                                    grid-row: 3 /span 5;
                                                                     height: auto;
                                                                     width: 90%;
                                                                     img{
@@ -364,22 +365,31 @@
                                                                     }
                                                                 }
                                                                 .field--name-title{
-                                                                    grid-row: 2;
+                                                                    grid-row: 3;
+                                                                    margin-top: 0;
+                                                                    a{
+                                                                        color: $blue-light;
+                                                                        font-size: 1.2rem;
+                                                                        font-style: normal;
+                                                                    }
                                                                 }
                                                                 .field--name-field-sous-titre{
-                                                                    grid-row: 3;
+                                                                    grid-row: 4;
+                                                                    color: $blue-light;
+                                                                    font-size: 0.8rem;
+                                                                    font-weight: 800;
                                                                 }
                                                                 .field--name-field-auteur-s-{
-                                                                    grid-row: 4;
+                                                                    grid-row: 5;
                                                                 }
                                                                 .field--name-field-edition{
-                                                                    grid-row: 5;
+                                                                    grid-row: 6;
                                                                 }
                                                                 .field--name-field-date-de-parution{
-                                                                    grid-row: 6;
+                                                                    grid-row: 7;
                                                                 }
                                                                 .field--name-field-mots-clefs{
-                                                                    grid-row: 7;
+                                                                    grid-row: 8;
                                                                 }
                                                             }
                                                         }