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

responsive node projet

Browse Source
This commit is contained in:
Ouidade Soussi Chiadmi
2025-12-01 11:44:53 +01:00
parent c53e9461dd
commit 53b935bd07
2 changed files with 214 additions and 56 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -4342,8 +4342,8 @@ body {
}
@media (max-width: 810px) {
.node-type-projet .layout--threecol-25-50-25 .layout__region--first .block-region-first #sites-map-container {
width: 50% !important;
margin: auto;
margin-top: 3rem;
}
}
.node-type-projet .layout--threecol-25-50-25 .layout__region--first .block-region-first .field_field_site_projet .node-type-site {
@@ -4351,10 +4351,21 @@ body {
margin: auto;
padding-left: 2rem;
}
@media (max-width: 810px) {
.node-type-projet .layout--threecol-25-50-25 .layout__region--first .block-region-first .field_field_site_projet .node-type-site {
padding-left: 0rem;
width: 80%;
}
}
.node-type-projet .layout--threecol-25-50-25 .layout__region--first .block-region-first .field_field_site_projet .node-type-site .field_title h2 {
text-transform: none;
font-size: 0.6rem;
}
@media (max-width: 810px) {
.node-type-projet .layout--threecol-25-50-25 .layout__region--first .block-region-first .field_field_site_projet .node-type-site .field_title h2 {
font-size: 1rem;
}
}
.node-type-projet .layout--threecol-25-50-25 .layout__region--first .block-region-first .field_field_site_projet .node-type-site .field_title h2 a {
color: rgb(7, 50, 194);
font-weight: 700;
@@ -4362,6 +4373,11 @@ body {
.node-type-projet .layout--threecol-25-50-25 .layout__region--first .block-region-first .field_field_site_projet .node-type-site .field_field_sous_titre p {
font-size: 0.55rem;
}
@media (max-width: 810px) {
.node-type-projet .layout--threecol-25-50-25 .layout__region--first .block-region-first .field_field_site_projet .node-type-site .field_field_sous_titre p {
font-size: 1rem;
}
}
.node-type-projet .layout--threecol-25-50-25 .layout__region--first .block-region-first .field_field_site_projet .node-type-site .more-link {
width: fit-content;
display: inline-flex;
@@ -4381,6 +4397,11 @@ body {
font-size: 0.5rem;
padding-left: 0.5rem;
}
@media (max-width: 810px) {
.node-type-projet .layout--threecol-25-50-25 .layout__region--first .block-region-first .field_field_site_projet .node-type-site .more-link a {
font-size: 0.8rem;
}
}
.node-type-projet .layout--threecol-25-50-25 .layout__region--first .block-region-first .field_field_site_projet .node-type-site .more-link a svg {
display: none;
}
@@ -4409,6 +4430,11 @@ body {
flex-direction: column;
padding-left: 2rem;
}
@media (max-width: 810px) {
.node-type-projet .layout--threecol-25-50-25 .layout__region--second .block-region-second {
padding-left: 0rem;
}
}
.node-type-projet .layout--threecol-25-50-25 .layout__region--second .block-region-second .field_field_laureats.is-laureat::before {
content: "";
position: absolute;
@@ -4444,10 +4470,20 @@ body {
font-size: 0.7em;
font-family: "gilroy-light";
}
@media (max-width: 810px) {
.node-type-projet .layout--threecol-25-50-25 .layout__region--second .block-region-second .field_field_infos .infos-projet h4 {
font-size: 0.8rem;
}
}
.node-type-projet .layout--threecol-25-50-25 .layout__region--second .block-region-second .field_field_infos .infos-projet .field_field_contenu {
font-size: 0.8em;
font-family: "gilroy-bold";
}
@media (max-width: 810px) {
.node-type-projet .layout--threecol-25-50-25 .layout__region--second .block-region-second .field_field_infos .infos-projet .field_field_contenu {
font-size: 0.8rem;
}
}
.node-type-projet .layout--threecol-25-50-25 .layout__region--second .block-region-second .field_field_equipe_photo {
padding-top: 2rem;
}
@@ -4461,14 +4497,29 @@ body {
font-size: 0.5rem;
font-family: "gilroy-light";
}
@media (max-width: 810px) {
.node-type-projet .layout--threecol-25-50-25 .layout__region--second .block-region-second .field_field_equipe_photo .image-field-caption {
font-size: 0.8rem;
}
}
.node-type-projet .layout--threecol-25-50-25 .layout__region--second .block-region-second .field_field_equipe_photo .image-field-caption p {
margin-top: 0;
font-size: 0.5rem;
}
@media (max-width: 810px) {
.node-type-projet .layout--threecol-25-50-25 .layout__region--second .block-region-second .field_field_equipe_photo .image-field-caption p {
font-size: 0.8rem;
}
}
.node-type-projet .layout--threecol-25-50-25 .layout__region--second .block-region-second .field_field_equipe_presentation p {
font-family: "gilroy-light";
font-size: 0.6rem;
}
@media (max-width: 810px) {
.node-type-projet .layout--threecol-25-50-25 .layout__region--second .block-region-second .field_field_equipe_presentation p {
font-size: 0.8rem;
}
}
.node-type-projet .layout--threecol-25-50-25 .layout__region--second .block-region-second .equipe-panel {
overflow: hidden;
max-height: 0;
@@ -4492,6 +4543,11 @@ body {
border: none;
margin-bottom: 1rem;
}
@media (max-width: 810px) {
.node-type-projet .layout--threecol-25-50-25 .layout__region--second .block-region-second .btn-equipe-toggle {
font-size: 0.8rem;
}
}
.node-type-projet .layout--threecol-25-50-25 .layout__region--second .block-region-second .btn-equipe-toggle svg {
display: none;
}
@@ -4523,6 +4579,11 @@ body {
font-family: "gilroy-light";
font-size: 0.6rem;
}
@media (max-width: 810px) {
.node-type-projet .layout--threecol-25-50-25 .layout__region--second .block-region-second .field_field_parties_projet .paragraph--type--projet-partie-texte .field_field_texte_partie_texte_projet p {
font-size: 0.8rem;
}
}
.node-type-projet .layout--threecol-25-50-25 .layout__region--second .block-region-second .field_field_parties_projet .paragraph--type--projet-diapo .field_field_images_projet .diaporama {
display: flex !important;
flex-direction: row !important;
@@ -4540,6 +4601,12 @@ body {
width: 220px;
height: 145px;
}
@media (max-width: 810px) {
.node-type-projet .layout--threecol-25-50-25 .layout__region--second .block-region-second .field_field_parties_projet .paragraph--type--projet-diapo .field_field_images_projet .diaporama .cadre-img-zoom img {
width: 100%;
height: auto;
}
}
.node-type-projet .layout--threecol-25-50-25 .layout__region--second .block-region-second .field_field_parties_projet .paragraph--type--projet-diapo .field_field_images_projet .diaporama .image-field-caption {
margin: 0;
max-width: 200px;
@@ -4549,6 +4616,11 @@ body {
font-size: 0.5rem;
font-family: "gilroy-light";
}
@media (max-width: 810px) {
.node-type-projet .layout--threecol-25-50-25 .layout__region--second .block-region-second .field_field_parties_projet .paragraph--type--projet-diapo .field_field_images_projet .diaporama .image-field-caption p {
font-size: 0.8rem;
}
}
.node-type-projet .layout--threecol-25-50-25 .layout__region--second .block-region-second .field_field_documents,
.node-type-projet .layout--threecol-25-50-25 .layout__region--second .block-region-second .field_field_liens {
width: fit-content;
@@ -4571,6 +4643,12 @@ body {
text-transform: uppercase;
font-size: 0.5rem;
}
@media (max-width: 810px) {
.node-type-projet .layout--threecol-25-50-25 .layout__region--second .block-region-second .field_field_documents a,
.node-type-projet .layout--threecol-25-50-25 .layout__region--second .block-region-second .field_field_liens a {
font-size: 0.8rem;
}
}
.node-type-projet .layout--threecol-25-50-25 .layout__region--second .block-region-second .field_field_documents a svg,
.node-type-projet .layout--threecol-25-50-25 .layout__region--second .block-region-second .field_field_liens a svg {
display: none;
@@ -4620,6 +4698,8 @@ body {
@media (max-width: 810px) {
.node-type-projet .layout--threecol-25-50-25 .layout__region--third .block-region-third {
position: relative;
margin-left: 0;
margin-top: 2rem;
}
}
.node-type-projet .layout--threecol-25-50-25 .layout__region--third .block-region-third div {
@@ -4630,16 +4710,7 @@ body {
.node-type-projet .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-projet .layout--threecol-25-50-25 .layout__region--third .block-region-third div {
justify-content: center;
margin: auto;
margin-bottom: 1rem;
width: fit-content;
margin-bottom: 0rem;
}
}
.node-type-projet .layout--threecol-25-50-25 .layout__region--third .block-region-third div h2 {
@@ -4647,6 +4718,14 @@ body {
text-transform: uppercase;
font-size: 0.6rem;
}
@media (max-width: 810px) {
.node-type-projet .layout--threecol-25-50-25 .layout__region--third .block-region-third div h2 {
font-size: 0.8rem;
margin: auto;
margin-bottom: 1rem;
width: 80%;
}
}
.node-type-projet .layout--threecol-25-50-25 .layout__region--third .block-region-third div h2::after {
content: " :";
}
@@ -4657,6 +4736,13 @@ body {
padding-top: 0.5rem;
transition: transform 0.4s ease-in-out;
}
@media (max-width: 810px) {
.node-type-projet .layout--threecol-25-50-25 .layout__region--third .block-region-third div .views-row {
width: 80%;
justify-content: start;
padding-top: 1rem;
}
}
.node-type-projet .layout--threecol-25-50-25 .layout__region--third .block-region-third div .views-row:hover {
transform: scale(1.05);
}
@@ -4678,9 +4764,20 @@ body {
z-index: 0;
margin-top: 0.2rem;
}
@media (max-width: 810px) {
.node-type-projet .layout--threecol-25-50-25 .layout__region--third .block-region-third div .views-row .is-laureat ::before {
top: 0rem;
left: -11.4rem;
}
}
.node-type-projet .layout--threecol-25-50-25 .layout__region--third .block-region-third div .views-row .is-laureat .field-content {
font-size: 0;
}
@media (max-width: 810px) {
.node-type-projet .layout--threecol-25-50-25 .layout__region--third .block-region-third div .views-row .views-field-title {
width: fit-content;
}
}
.node-type-projet .layout--threecol-25-50-25 .layout__region--third .block-region-third div .views-row .views-field-title h2 {
font-size: 0.5rem;
margin-bottom: 0rem;
@@ -4690,14 +4787,31 @@ body {
.node-type-projet .layout--threecol-25-50-25 .layout__region--third .block-region-third div .views-row .views-field-title h2::after {
content: "";
}
@media (max-width: 810px) {
.node-type-projet .layout--threecol-25-50-25 .layout__region--third .block-region-third div .views-row .views-field-title h2 {
font-size: 0.8rem;
width: 100% !important;
}
}
.node-type-projet .layout--threecol-25-50-25 .layout__region--third .block-region-third div .views-row .views-field-field-nom-de-l-equipe {
font-size: 0.4rem;
}
@media (max-width: 810px) {
.node-type-projet .layout--threecol-25-50-25 .layout__region--third .block-region-third div .views-row .views-field-field-nom-de-l-equipe {
width: fit-content;
margin: 0;
}
}
.node-type-projet .layout--threecol-25-50-25 .layout__region--third .block-region-third div .views-row .views-field-field-nom-de-l-equipe h3 {
margin-bottom: 0.3rem;
margin-top: 0.3rem;
text-transform: uppercase;
}
@media (max-width: 810px) {
.node-type-projet .layout--threecol-25-50-25 .layout__region--third .block-region-third div .views-row .views-field-field-nom-de-l-equipe {
font-size: 0.7rem;
}
}
.node-type-projet .layout--threecol-25-50-25 .layout__region--third .block-region-third div .views-row .views-field-field-nom-de-l-equipe p {
font-family: "gilroy-semibold";
margin-bottom: 0.5rem;

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

@@ -44,9 +44,9 @@
display: none;
}
@media(max-width: 810px){
width: 50% !important;
// width: 50% !important;
margin: auto;
margin-top: 3rem;
}
}
.field_field_site_projet{
@@ -54,10 +54,17 @@
width: 65%;
margin: auto;
padding-left: 2rem;
@media(max-width: 810px){
padding-left: 0rem;
width: 80%;
}
.field_title{
h2{
text-transform: none;
font-size: 0.60rem;
@media(max-width: 810px){
font-size:1rem;
}
a{
color: $blue_QDD;
font-weight: 700;
@@ -67,6 +74,9 @@
.field_field_sous_titre{
p{
font-size: 0.55rem;
@media(max-width: 810px){
font-size:1rem;
}
}
}
.more-link{
@@ -85,6 +95,9 @@
text-transform: uppercase;
font-size: 0.5rem;
padding-left: 0.5rem;
@media(max-width: 810px){
font-size:0.8rem;
}
svg{
display: none;
@@ -123,8 +136,7 @@
flex-direction: column;
padding-left: 2rem;
@media(max-width: 810px){
// margin-left: 2rem;
// margin-top: 3rem;
padding-left: 0rem;
}
.field_field_laureats{
@@ -164,10 +176,16 @@
margin: 0;
font-size: 0.7em;
font-family: 'gilroy-light';
@media(max-width: 810px){
font-size:0.8rem;
}
}
.field_field_contenu{
font-size: 0.8em;
font-family: 'gilroy-bold';
@media(max-width: 810px){
font-size:0.8rem;
}
}
}
}
@@ -183,9 +201,15 @@
margin-left: 0;
font-size: 0.5rem;
font-family: "gilroy-light";
@media(max-width: 810px){
font-size:0.8rem;
}
p{
margin-top: 0;
font-size: 0.5rem;
@media(max-width: 810px){
font-size:0.8rem;
}
}
}
}
@@ -193,6 +217,9 @@
p{
font-family: "gilroy-light";
font-size: 0.6rem;
@media(max-width: 810px){
font-size:0.8rem;
}
}
}
.equipe-panel {
@@ -223,6 +250,9 @@
display: flex;
border: none;
// margin-top: 1rem;
@media(max-width: 810px){
font-size:0.8rem;
}
svg{
display: none;
@@ -262,6 +292,9 @@
p{
font-family: "gilroy-light";
font-size: 0.6rem;
@media(max-width: 810px){
font-size:0.8rem;
}
}
}
}
@@ -284,6 +317,10 @@
object-fit: cover;
width: 220px;
height: 145px;
@media (max-width:810px){
width: 100%;
height: auto;
}
}
}
.image-field-caption{
@@ -293,6 +330,9 @@
margin-top: 0;
font-size: 0.5rem;
font-family: 'gilroy-light';
@media(max-width: 810px){
font-size:0.8rem;
}
}
}
@@ -316,6 +356,9 @@
color: white;
text-transform: uppercase;
font-size: 0.5rem;
@media(max-width: 810px){
font-size:0.8rem;
}
svg{
display: none;
}
@@ -368,6 +411,8 @@
margin-left: 2rem;
@media(max-width: 810px){
position: relative;
margin-left: 0;
margin-top: 2rem;
}
div{
display: flex;
@@ -375,19 +420,21 @@
@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;
margin-bottom: 0rem;
}
h2{
font-family: "gilroy-light";
text-transform: uppercase;
font-size: 0.6rem;
@media(max-width: 810px){
font-size:0.8rem;
margin: auto;
margin-bottom: 1rem;
width: 80%;
}
&::after{
content: " :";
}
@@ -397,6 +444,11 @@
border-bottom: solid black 1px;
padding-bottom: 0.5rem;
padding-top: 0.5rem;
@media(max-width: 810px){
width: 80%;
justify-content: start;
padding-top: 1rem;
}
transition: transform 0.4s ease-in-out;
&:hover {
transform: scale(1.05);
@@ -417,6 +469,10 @@
background-size: contain;
z-index: 0;
margin-top: 0.2rem;
@media(max-width: 810px){
top: 0rem;
left: -11.4rem;
}
}
.field-content{
font-size: 0;
@@ -424,24 +480,37 @@
}
.views-field-title {
@media (max-width:810px){
width: fit-content;
}
h2 {
font-size: 0.5rem;
margin-bottom: 0rem;
// margin-top: 0.3rem;
text-transform: none;
font-family: "gilroy-regular";
&::after{
content: "";
font-size: 0.5rem;
margin-bottom: 0rem;
text-transform: none;
font-family: "gilroy-regular";
&::after{
content: "";
}
@media(max-width: 810px){
font-size:0.8rem;
width: 100% !important;
}
}
}
.views-field-field-nom-de-l-equipe{
@media (max-width:810px){
width: fit-content;
margin: 0;
}
h3 {
margin-bottom: 0.3rem;
margin-top:0.3rem;
text-transform: uppercase;
}
font-size: 0.4rem;
@media(max-width: 810px){
font-size:0.7rem;
}
p{
font-family: "gilroy-semibold";
margin-bottom: 0.5rem;
@@ -449,32 +518,7 @@
}
.views-field-view-node{
display: none;
// width: fit-content;
// padding-left: 0.5rem;
// background: black;
// @media (max-width:810px) {
// margin-left: 0;
// }
// a{
// display: inline-flex;
// justify-content: space-between;
// align-items: center;
// color: white;
// text-transform: uppercase;
// font-size: 0.5rem;
// svg{
// display: none;
// }
// &::after{
// display: inline-flex;
// content: url("../img/noun-arrow-to-right.svg");
// padding-right: 0.2rem;
// padding-left: 0.2rem;
// // padding-bottom: 0.2rem;
// height: 25px;
// }
// }
display: none;
}
}