From ba724f32f96f27226ab0382afc6529b370a054d4 Mon Sep 17 00:00:00 2001 From: ouidade Date: Fri, 14 Mar 2025 14:12:07 +0100 Subject: [PATCH] css /actualites --- .../dist/assets/css/bundle.css | 58 ++++++++++---- .../src/assets/scss/pages/actualites.scss | 75 ++++++++++++++----- 2 files changed, 101 insertions(+), 32 deletions(-) diff --git a/web/themes/custom/quartiers_de_demain/dist/assets/css/bundle.css b/web/themes/custom/quartiers_de_demain/dist/assets/css/bundle.css index 0fb5c74..31193fc 100644 --- a/web/themes/custom/quartiers_de_demain/dist/assets/css/bundle.css +++ b/web/themes/custom/quartiers_de_demain/dist/assets/css/bundle.css @@ -4029,18 +4029,23 @@ main { grid-column: 1; grid-row: 1/span 5; width: 250px; + margin-right: 1rem; } #actualites .layout-content .content_container .views-element-container .view-rows-wrapper .views-row .node-type-actualite .content-wrapper-actu .field_field_images .actu-diaporama { + width: 100%; display: flex; flex-direction: row; align-items: center !important; margin: auto; + margin-right: 1rem; } #actualites .layout-content .content_container .views-element-container .view-rows-wrapper .views-row .node-type-actualite .content-wrapper-actu .field_field_images .actu-diaporama .slick-list { margin: auto; padding-top: 0 !important; } #actualites .layout-content .content_container .views-element-container .view-rows-wrapper .views-row .node-type-actualite .content-wrapper-actu .field_field_images .actu-diaporama .slick-list .cadre-img-zoom { + display: flex; + margin: auto; width: 250px; height: auto; } @@ -4048,28 +4053,37 @@ main { width: 100%; height: 100%; object-fit: cover; + -moz-border-radius: 9px; /* pour Mozilla */ + -khtml-border-radius: 9px; /* pour Safari et Chrome */ + -webkit-border-radius: 9px; /* pour Safari sur Mac */ + border-radius: 9px; /* CSS3 */ } -#actualites .layout-content .content_container .views-element-container .view-rows-wrapper .views-row .node-type-actualite .content-wrapper-actu .field_field_images .actu-diaporama .slick-list .cadre-img-zoom blockquote.image-field-caption { - margin-left: 0; - margin-top: 0; +#actualites .layout-content .content_container .views-element-container .view-rows-wrapper .views-row .node-type-actualite .content-wrapper-actu .field_field_images .actu-diaporama .slick-list blockquote.image-field-caption { + margin: 0; } -#actualites .layout-content .content_container .views-element-container .view-rows-wrapper .views-row .node-type-actualite .content-wrapper-actu .field_field_images .actu-diaporama .slick-list .cadre-img-zoom blockquote.image-field-caption p { +#actualites .layout-content .content_container .views-element-container .view-rows-wrapper .views-row .node-type-actualite .content-wrapper-actu .field_field_images .actu-diaporama .slick-list blockquote.image-field-caption p { margin-top: 0; font-size: 0.4rem; } #actualites .layout-content .content_container .views-element-container .view-rows-wrapper .views-row .node-type-actualite .content-wrapper-actu .field_field_images .actu-diaporama button { margin: auto; transform: none; - top: 20%; + top: 30%; height: 0; width: 0; } +#actualites .layout-content .content_container .views-element-container .view-rows-wrapper .views-row .node-type-actualite .content-wrapper-actu .field_field_images .actu-diaporama button:before { + transform: scale(0.4) !important; +} +#actualites .layout-content .content_container .views-element-container .view-rows-wrapper .views-row .node-type-actualite .content-wrapper-actu .field_field_images .actu-diaporama button:before:hover { + filter: brightness(1.75); +} #actualites .layout-content .content_container .views-element-container .view-rows-wrapper .views-row .node-type-actualite .content-wrapper-actu .field_field_images .actu-diaporama button.slick-next { - right: 0%; + right: 15%; padding: 0; } #actualites .layout-content .content_container .views-element-container .view-rows-wrapper .views-row .node-type-actualite .content-wrapper-actu .field_field_images .actu-diaporama button.slick-prev { - left: 0%; + left: 5%; padding: 0; } #actualites .layout-content .content_container .views-element-container .view-rows-wrapper .views-row .node-type-actualite .content-wrapper-actu .field_field_type_d_actualite, @@ -4092,7 +4106,13 @@ main { align-items: center; } #actualites .layout-content .content_container .views-element-container .view-rows-wrapper .views-row .node-type-actualite .content-wrapper-actu .field_field_type_d_actualite a::before { - content: url("../img/type-actu.svg"); + content: ""; + display: inline-block; + width: 16px; /* Ajuste la largeur */ + height: 16px; /* Ajuste la hauteur */ + background-image: url("../img/type-actu.svg"); + background-size: contain; + background-repeat: no-repeat; padding-right: 0.4rem; } #actualites .layout-content .content_container .views-element-container .view-rows-wrapper .views-row .node-type-actualite .content-wrapper-actu .field_field_date { @@ -4104,7 +4124,13 @@ main { align-items: center; } #actualites .layout-content .content_container .views-element-container .view-rows-wrapper .views-row .node-type-actualite .content-wrapper-actu .field_field_date::before { - content: url("../img/date-actu.svg"); + content: ""; + display: inline-block; + width: 16px; /* Ajuste la largeur */ + height: 16px; /* Ajuste la hauteur */ + background-image: url("../img/date-actu.svg"); + background-size: contain; + background-repeat: no-repeat; padding-right: 0.4rem; } #actualites .layout-content .content_container .views-element-container .view-rows-wrapper .views-row .node-type-actualite .content-wrapper-actu .field_field_site { @@ -4116,10 +4142,17 @@ main { font-weight: 600; display: inline-flex; align-items: center; + padding-left: 0.2rem; } #actualites .layout-content .content_container .views-element-container .view-rows-wrapper .views-row .node-type-actualite .content-wrapper-actu .field_field_site a::before { - content: url("../img/map_pointer.svg"); - padding-right: 0.4rem; + content: ""; + display: inline-block; + width: 10px; /* Ajuste la largeur */ + height: 10px; /* Ajuste la hauteur */ + background-image: url("../img/map_pointer.svg"); + background-size: contain; + background-repeat: no-repeat; + padding-right: 0.5rem; } #actualites .layout-content .content_container .views-element-container .view-rows-wrapper .views-row .node-type-actualite .content-wrapper-actu .field_title { order: 5; @@ -4139,8 +4172,7 @@ main { } #actualites .layout-content .content_container .views-element-container .view-rows-wrapper .views-row .node-type-actualite .content-wrapper-actu .field_field_liens { order: 7; - padding-bottom: 2rem; - padding-top: 2rem; + padding: 0; width: fit-content; } #actualites .layout-content .content_container .views-element-container .view-rows-wrapper .views-row .node-type-actualite .content-wrapper-actu .field_field_liens a { diff --git a/web/themes/custom/quartiers_de_demain/src/assets/scss/pages/actualites.scss b/web/themes/custom/quartiers_de_demain/src/assets/scss/pages/actualites.scss index 27baae6..cc833d7 100644 --- a/web/themes/custom/quartiers_de_demain/src/assets/scss/pages/actualites.scss +++ b/web/themes/custom/quartiers_de_demain/src/assets/scss/pages/actualites.scss @@ -60,18 +60,24 @@ grid-column: 1; grid-row: 1 /span 5; width: 250px; - + // display: flex; + // margin: auto; + margin-right: 1rem; + .actu-diaporama{ // height: 150px; - // width: 100%; + width: 100%; display: flex; flex-direction: row; align-items: center !important; margin:auto; + margin-right: 1rem; .slick-list{ margin: auto; padding-top: 0 !important; .cadre-img-zoom{ + display: flex; + margin: auto; width: 250px; height: auto; img{ @@ -79,31 +85,40 @@ width: 100%; height: 100%; object-fit: cover; + -moz-border-radius: 9px; /* pour Mozilla */ + -khtml-border-radius: 9px; /* pour Safari et Chrome */ + -webkit-border-radius: 9px; /* pour Safari sur Mac */ + border-radius: 9px; /* CSS3 */ } - blockquote.image-field-caption{ - margin-left: 0; + } + blockquote.image-field-caption{ + margin: 0; + p{ margin-top: 0; - p{ - margin-top: 0; - font-size: 0.4rem; - } - + font-size: 0.4rem; } + } } button{ margin: auto; transform: none; - top: 20%; + top: 30%; height: 0; width: 0; + &:before{ + transform: scale(0.4) !important; + &:hover{ + filter: brightness(1.75); + } + } } button.slick-next{ - right: 0% ; + right: 15% ; padding: 0; } button.slick-prev{ - left: 0%; + left: 5%; padding: 0; } } @@ -127,7 +142,14 @@ display: inline-flex; align-items: center; &::before{ - content: url('../img/type-actu.svg'); + content: ""; + display: inline-block; + width: 16px; /* Ajuste la largeur */ + height: 16px; /* Ajuste la hauteur */ + background-image: url('../img/type-actu.svg'); + background-size: contain; + background-repeat: no-repeat; + // margin-right: 0.4rem; padding-right: 0.4rem; } } @@ -141,7 +163,14 @@ align-items: center; // margin-left: 1rem; &::before{ - content: url('../img/date-actu.svg'); + content: ""; + display: inline-block; + width: 16px; /* Ajuste la largeur */ + height: 16px; /* Ajuste la hauteur */ + background-image: url('../img/date-actu.svg'); + background-size: contain; + background-repeat: no-repeat; + // margin-right: 0.4rem; padding-right: 0.4rem; } } @@ -150,13 +179,22 @@ a{ color: red; font-size: 0.6rem; - font-weight: 600; + font-weight: 600; display: inline-flex; align-items: center; // margin-left: 1rem; + padding-left: 0.2rem; + &::before{ - content: url('../img/map_pointer.svg'); - padding-right: 0.4rem; + content: ""; + display: inline-block; + width: 10px; /* Ajuste la largeur */ + height: 10px; /* Ajuste la hauteur */ + background-image: url("../img/map_pointer.svg"); + background-size: contain; + background-repeat: no-repeat; + // margin-right: 0.4rem; + padding-right: 0.5rem; } } } @@ -179,8 +217,7 @@ } .field_field_liens{ order: 7; - padding-bottom: 2rem; - padding-top: 2rem; + padding:0; width: fit-content; a{ display: flex;