bachir/drupal-quartiersdedemain
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

responsive node site

Browse Source
This commit is contained in:
Ouidade Soussi Chiadmi
2025-12-01 12:52:32 +01:00
parent 1f0f540268
commit b1d2acd246
3 changed files with 160 additions and 108 deletions
Download Patch File Download Diff File Expand all files Collapse all files

89
web/themes/custom/quartiers_de_demain/dist/assets/css/bundle.css vendored
View File

@@ -4004,7 +4004,7 @@ body {
flex-wrap: wrap; flex-wrap: wrap;
margin-bottom: 2rem; margin-bottom: 2rem;
} }
@media (max-width: 500px) { @media (max-width: 810px) {
.node-type-site .layout--threecol-25-50-25 .layout__region--second .block-region-second .paragraph--type--site-diapo .field_field_images .diaporama { .node-type-site .layout--threecol-25-50-25 .layout__region--second .block-region-second .paragraph--type--site-diapo .field_field_images .diaporama {
flex-direction: column !important; flex-direction: column !important;
} }
@@ -4014,6 +4014,12 @@ body {
width: 220px; width: 220px;
height: 145px; height: 145px;
} }
@media (max-width: 810px) {
.node-type-site .layout--threecol-25-50-25 .layout__region--second .block-region-second .paragraph--type--site-diapo .field_field_images .diaporama .cadre-img-zoom img {
width: 100%;
height: auto;
}
}
.node-type-site .layout--threecol-25-50-25 .layout__region--second .block-region-second .paragraph--type--site-diapo .field_field_images .diaporama .image-field-caption { .node-type-site .layout--threecol-25-50-25 .layout__region--second .block-region-second .paragraph--type--site-diapo .field_field_images .diaporama .image-field-caption {
margin: 0; margin: 0;
max-width: 200px; max-width: 200px;
@@ -4023,6 +4029,11 @@ body {
font-size: 0.5rem; font-size: 0.5rem;
font-family: "gilroy-light"; font-family: "gilroy-light";
} }
@media (max-width: 810px) {
.node-type-site .layout--threecol-25-50-25 .layout__region--second .block-region-second .paragraph--type--site-diapo .field_field_images .diaporama .image-field-caption p {
font-size: 0.8rem;
}
}
.node-type-site .layout--threecol-25-50-25 .layout__region--second .block-region-second div:has(.field--name-field-documents) { .node-type-site .layout--threecol-25-50-25 .layout__region--second .block-region-second div:has(.field--name-field-documents) {
order: 5; order: 5;
margin-top: 0.5rem; margin-top: 0.5rem;
@@ -4072,22 +4083,6 @@ body {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
} }
@media (max-width: 810px) {
.node-type-site .layout--threecol-25-50-25 .layout__region--third .block-region-third div {
justify-content: center;
margin: auto;
margin-bottom: 1rem;
width: fit-content;
}
}
@media (max-width: 500px) {
.node-type-site .layout--threecol-25-50-25 .layout__region--third .block-region-third div {
justify-content: center;
margin: auto;
margin-bottom: 1rem;
width: fit-content;
}
}
.node-type-site .layout--threecol-25-50-25 .layout__region--third .block-region-third div div:has(h2) { .node-type-site .layout--threecol-25-50-25 .layout__region--third .block-region-third div div:has(h2) {
border-bottom: solid black 1px; border-bottom: solid black 1px;
padding-left: 0.3rem; padding-left: 0.3rem;
@@ -4103,20 +4098,33 @@ body {
margin-left: 0.5rem; margin-left: 0.5rem;
padding-bottom: 0.5rem; padding-bottom: 0.5rem;
} }
@media (max-width: 810px) {
.node-type-site .layout--threecol-25-50-25 .layout__region--third .block-region-third div h2 {
font-size: 0.8rem;
margin: 0;
margin-bottom: 1rem;
}
}
.node-type-site .layout--threecol-25-50-25 .layout__region--third .block-region-third div h2::after { .node-type-site .layout--threecol-25-50-25 .layout__region--third .block-region-third div h2::after {
content: " :"; content: " :";
} }
.node-type-site .layout--threecol-25-50-25 .layout__region--third .block-region-third div .node-type-projet { @media (max-width: 810px) {
.node-type-site .layout--threecol-25-50-25 .layout__region--third .block-region-third div .field_field_projets_lie {
width: 80%;
justify-content: start;
}
}
.node-type-site .layout--threecol-25-50-25 .layout__region--third .block-region-third div .field_field_projets_lie .node-type-projet {
position: relative; position: relative;
transition: transform 0.4s ease-in-out; transition: transform 0.4s ease-in-out;
} }
.node-type-site .layout--threecol-25-50-25 .layout__region--third .block-region-third div .node-type-projet.is-laureat { .node-type-site .layout--threecol-25-50-25 .layout__region--third .block-region-third div .field_field_projets_lie .node-type-projet.is-laureat {
padding-top: 1.2rem; padding-top: 1.2rem;
} }
.node-type-site .layout--threecol-25-50-25 .layout__region--third .block-region-third div .node-type-projet:hover { .node-type-site .layout--threecol-25-50-25 .layout__region--third .block-region-third div .field_field_projets_lie .node-type-projet:hover {
transform: scale(1.05); transform: scale(1.05);
} }
.node-type-site .layout--threecol-25-50-25 .layout__region--third .block-region-third div .node-type-projet .node-projet-title { .node-type-site .layout--threecol-25-50-25 .layout__region--third .block-region-third div .field_field_projets_lie .node-type-projet .node-projet-title {
width: 80%; width: 80%;
padding-left: 0.5rem; padding-left: 0.5rem;
font-size: 0.5rem; font-size: 0.5rem;
@@ -4124,32 +4132,50 @@ body {
background-color: #f6f7f3; background-color: #f6f7f3;
font-family: "gilroy-regular"; font-family: "gilroy-regular";
} }
.node-type-site .layout--threecol-25-50-25 .layout__region--third .block-region-third div .node-type-projet .field_field_nom_de_l_equipe { @media (max-width: 810px) {
.node-type-site .layout--threecol-25-50-25 .layout__region--third .block-region-third div .field_field_projets_lie .node-type-projet .node-projet-title {
font-size: 0.8rem;
width: 100% !important;
}
}
.node-type-site .layout--threecol-25-50-25 .layout__region--third .block-region-third div .field_field_projets_lie .node-type-projet .field_field_nom_de_l_equipe {
width: 80%; width: 80%;
padding-left: 0.5rem; padding-left: 0.5rem;
font-size: 0.4rem; font-size: 0.4rem;
background-color: #f6f7f3; background-color: #f6f7f3;
text-transform: uppercase; text-transform: uppercase;
} }
.node-type-site .layout--threecol-25-50-25 .layout__region--third .block-region-third div .node-type-projet .field_field_nom_de_l_equipe div { @media (max-width: 810px) {
.node-type-site .layout--threecol-25-50-25 .layout__region--third .block-region-third div .field_field_projets_lie .node-type-projet .field_field_nom_de_l_equipe {
font-size: 0.8rem;
width: 100% !important;
}
}
.node-type-site .layout--threecol-25-50-25 .layout__region--third .block-region-third div .field_field_projets_lie .node-type-projet .field_field_nom_de_l_equipe div {
border-bottom: solid black 1px; border-bottom: solid black 1px;
margin-bottom: 0.5rem; margin-bottom: 0.5rem;
} }
.node-type-site .layout--threecol-25-50-25 .layout__region--third .block-region-third div .node-type-projet .field_field_nom_de_l_equipe p { .node-type-site .layout--threecol-25-50-25 .layout__region--third .block-region-third div .field_field_projets_lie .node-type-projet .field_field_nom_de_l_equipe p {
font-family: "gilroy-semibold"; font-family: "gilroy-semibold";
margin-bottom: 0.5rem; margin-bottom: 0.5rem;
font-size: 0.5rem; font-size: 0.5rem;
margin-top: 0.2rem; margin-top: 0.2rem;
} }
.node-type-site .layout--threecol-25-50-25 .layout__region--third .block-region-third div .node-type-projet .field_field_nom_de_l_equipe div.more-link { @media (max-width: 810px) {
.node-type-site .layout--threecol-25-50-25 .layout__region--third .block-region-third div .field_field_projets_lie .node-type-projet .field_field_nom_de_l_equipe p {
font-size: 0.8rem;
width: 100% !important;
}
}
.node-type-site .layout--threecol-25-50-25 .layout__region--third .block-region-third div .field_field_projets_lie .node-type-projet .field_field_nom_de_l_equipe div.more-link {
display: none; display: none;
margin-bottom: 1rem; margin-bottom: 1rem;
padding-left: 0rem; padding-left: 0rem;
} }
.node-type-site .layout--threecol-25-50-25 .layout__region--third .block-region-third div .node-type-projet .field_field_nom_de_l_equipe div.more-link a { .node-type-site .layout--threecol-25-50-25 .layout__region--third .block-region-third div .field_field_projets_lie .node-type-projet .field_field_nom_de_l_equipe div.more-link a {
font-size: 0.5rem; font-size: 0.5rem;
} }
.node-type-site .layout--threecol-25-50-25 .layout__region--third .block-region-third div .node-type-projet .field_field_laureats { .node-type-site .layout--threecol-25-50-25 .layout__region--third .block-region-third div .field_field_projets_lie .node-type-projet .field_field_laureats {
color: rgb(247, 0, 43); color: rgb(247, 0, 43);
text-transform: uppercase; text-transform: uppercase;
display: inline-flex; display: inline-flex;
@@ -4157,10 +4183,10 @@ body {
height: auto; height: auto;
font-size: 0px; font-size: 0px;
} }
.node-type-site .layout--threecol-25-50-25 .layout__region--third .block-region-third div .node-type-projet .field_field_laureats.is-laureat { .node-type-site .layout--threecol-25-50-25 .layout__region--third .block-region-third div .field_field_projets_lie .node-type-projet .field_field_laureats.is-laureat {
position: relative; position: relative;
} }
.node-type-site .layout--threecol-25-50-25 .layout__region--third .block-region-third div .node-type-projet .field_field_laureats.is-laureat::before { .node-type-site .layout--threecol-25-50-25 .layout__region--third .block-region-third div .field_field_projets_lie .node-type-projet .field_field_laureats.is-laureat::before {
content: ""; content: "";
position: absolute; position: absolute;
top: -4.2rem; top: -4.2rem;
@@ -4174,6 +4200,11 @@ body {
z-index: 0; z-index: 0;
margin-top: 0.3rem; margin-top: 0.3rem;
} }
@media (max-width: 810px) {
.node-type-site .layout--threecol-25-50-25 .layout__region--third .block-region-third div .field_field_projets_lie .node-type-projet .field_field_laureats.is-laureat::before {
top: -6rem;
}
}
.node-type-site .layout--threecol-25-50-25 .layout__region--third .block-region-third .prevnext { .node-type-site .layout--threecol-25-50-25 .layout__region--third .block-region-third .prevnext {
display: none; display: none;
flex-direction: row; flex-direction: row;

3
web/themes/custom/quartiers_de_demain/src/assets/scss/pages/node-type-projet.scss
View File

@@ -424,7 +424,6 @@
flex: 0 1 24%; flex: 0 1 24%;
.block-region-third{ .block-region-third{
position:relative; position:relative;
// width: 23% !important;
margin-top: 4.5rem; margin-top: 4.5rem;
margin-left: 2rem; margin-left: 2rem;
@media(max-width: 810px){ @media(max-width: 810px){
@@ -437,7 +436,6 @@
flex-direction: column; flex-direction: column;
@media(max-width: 810px){ @media(max-width: 810px){
justify-content: center; justify-content: center;
// margin: auto;
margin-bottom: 0rem; margin-bottom: 0rem;
} }
h2{ h2{
@@ -450,7 +448,6 @@
margin: auto; margin: auto;
margin-bottom: 1rem; margin-bottom: 1rem;
width: 80%; width: 80%;
} }
&::after{ &::after{
content: " :"; content: " :";

176
web/themes/custom/quartiers_de_demain/src/assets/scss/pages/node-type-site.scss
View File

@@ -317,7 +317,7 @@
gap: 20px; gap: 20px;
flex-wrap: wrap; flex-wrap: wrap;
margin-bottom: 2rem; margin-bottom: 2rem;
@media(max-width: 500px){ @media(max-width: 810px){
flex-direction: column !important; flex-direction: column !important;
} }
.cadre-img-zoom{ .cadre-img-zoom{
@@ -326,6 +326,10 @@
object-fit: cover; object-fit: cover;
width: 220px; width: 220px;
height: 145px; height: 145px;
@media(max-width: 810px){
width: 100%;
height: auto;
}
} }
} }
.image-field-caption{ .image-field-caption{
@@ -335,6 +339,9 @@
margin-top: 0; margin-top: 0;
font-size: 0.5rem; font-size: 0.5rem;
font-family: 'gilroy-light'; font-family: 'gilroy-light';
@media(max-width: 810px){
font-size: 0.8rem;
}
} }
} }
} }
@@ -396,19 +403,6 @@
display: flex; display: flex;
flex-direction: column; flex-direction: column;
// margin-bottom: 1rem;
@media(max-width: 810px){
justify-content: center;
margin: auto;
margin-bottom: 1rem;
width: fit-content;
}
@media(max-width: 500px){
justify-content: center;
margin: auto;
margin-bottom: 1rem;
width: fit-content;
}
div:has(h2){ div:has(h2){
border-bottom: solid black 1px; border-bottom: solid black 1px;
padding-left: 0.3rem; padding-left: 0.3rem;
@@ -423,80 +417,110 @@
border-bottom: solid black 1px; border-bottom: solid black 1px;
margin-left: 0.5rem; margin-left: 0.5rem;
padding-bottom: 0.5rem; padding-bottom: 0.5rem;
@media(max-width: 810px){
font-size:0.8rem;
margin: 0;
margin-bottom: 1rem;
}
&::after{ &::after{
content: " :"; content: " :";
} }
} }
.node-type-projet { .field_field_projets_lie{
position: relative; @media(max-width: 810px){
transition: transform 0.4s ease-in-out;
&.is-laureat{
padding-top: 1.2rem;
}
&:hover {
transform: scale(1.05);
}
.node-projet-title{
width: 80%; width: 80%;
padding-left: 0.5rem; justify-content: start;
font-size: 0.5rem; // padding-top: 1rem;
margin: 0;
background-color: #f6f7f3;
font-family: "gilroy-regular";
} }
.field_field_nom_de_l_equipe{ .node-type-projet {
width: 80%; position: relative;
padding-left: 0.5rem; transition: transform 0.4s ease-in-out;
font-size: 0.4rem;
background-color: #f6f7f3; &.is-laureat{
text-transform: uppercase; padding-top: 1.2rem;
div{
border-bottom: solid black 1px;
margin-bottom: 0.5rem;
} }
p{ &:hover {
font-family: "gilroy-semibold"; transform: scale(1.05);
margin-bottom: 0.5rem; }
.node-projet-title{
width: 80%;
padding-left: 0.5rem;
font-size: 0.5rem; font-size: 0.5rem;
margin-top: 0.2rem; margin: 0;
} background-color: #f6f7f3;
div.more-link{ font-family: "gilroy-regular";
display: none; @media(max-width: 810px){
margin-bottom: 1rem; font-size:0.8rem;
padding-left: 0rem; width: 100% !important;
a{
font-size: 0.5rem;
} }
} }
} .field_field_nom_de_l_equipe{
width: 80%;
.field_field_laureats{ padding-left: 0.5rem;
color:$red_QDD; font-size: 0.4rem;
text-transform: uppercase; background-color: #f6f7f3;
display: inline-flex; text-transform: uppercase;
align-items: flex-start; @media(max-width: 810px){
height: auto; font-size:0.8rem;
font-size: 0px; width: 100% !important;
&.is-laureat{ }
position: relative; div{
border-bottom: solid black 1px;
margin-bottom: 0.5rem;
}
p{
font-family: "gilroy-semibold";
margin-bottom: 0.5rem;
font-size: 0.5rem;
margin-top: 0.2rem;
@media(max-width: 810px){
font-size:0.8rem;
width: 100% !important;
}
}
div.more-link{
display: none;
margin-bottom: 1rem;
padding-left: 0rem;
a{
font-size: 0.5rem;
}
}
} }
&.is-laureat::before {
content: ""; .field_field_laureats{
position: absolute; color:$red_QDD;
top: -4.2rem; text-transform: uppercase;
left: -1rem; display: inline-flex;
width: 2.5rem; align-items: flex-start;
height: 2.5rem; height: auto;
background-image: url("../img/laureat-ouvert.svg"); font-size: 0px;
background-repeat: no-repeat; &.is-laureat{
background-position: center; position: relative;
background-size: contain; }
z-index: 0; &.is-laureat::before {
margin-top: 0.3rem; content: "";
position: absolute;
top: -4.2rem;
left: -1rem;
width: 2.5rem;
height: 2.5rem;
background-image: url("../img/laureat-ouvert.svg");
background-repeat: no-repeat;
background-position: center;
background-size: contain;
z-index: 0;
margin-top: 0.3rem;
@media(max-width: 810px){
top: -6rem;
}
}
} }
}
} }
}
} }
.prevnext{ .prevnext{
display: none; display: none;