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;
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 {
flex-direction: column !important;
}
@@ -4014,6 +4014,12 @@ body {
width: 220px;
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 {
margin: 0;
max-width: 200px;
@@ -4023,6 +4029,11 @@ body {
font-size: 0.5rem;
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) {
order: 5;
margin-top: 0.5rem;
@@ -4072,22 +4083,6 @@ body {
display: flex;
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) {
border-bottom: solid black 1px;
padding-left: 0.3rem;
@@ -4103,20 +4098,33 @@ body {
margin-left: 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 {
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;
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;
}
.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);
}
.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%;
padding-left: 0.5rem;
font-size: 0.5rem;
@@ -4124,32 +4132,50 @@ body {
background-color: #f6f7f3;
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%;
padding-left: 0.5rem;
font-size: 0.4rem;
background-color: #f6f7f3;
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;
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";
margin-bottom: 0.5rem;
font-size: 0.5rem;
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;
margin-bottom: 1rem;
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;
}
.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);
text-transform: uppercase;
display: inline-flex;
@@ -4157,10 +4183,10 @@ body {
height: auto;
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;
}
.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: "";
position: absolute;
top: -4.2rem;
@@ -4174,6 +4200,11 @@ body {
z-index: 0;
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 {
display: none;
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%;
.block-region-third{
position:relative;
// width: 23% !important;
margin-top: 4.5rem;
margin-left: 2rem;
@media(max-width: 810px){
@@ -437,7 +436,6 @@
flex-direction: column;
@media(max-width: 810px){
justify-content: center;
// margin: auto;
margin-bottom: 0rem;
}
h2{
@@ -450,7 +448,6 @@
margin: auto;
margin-bottom: 1rem;
width: 80%;
}
&::after{
content: " :";

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

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