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

page site design

This commit is contained in:
ouidade 2024-10-29 15:46:30 +01:00
parent f20d972ce3
commit 1b7a447d9c
6 changed files with 48 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
web/modules/custom/q2d_mod/assets/css/carte-interactive-qdd.scss
View File

@ -3,7 +3,7 @@
src: url('../css/fonts/Gilroy/gilroy-semibold-webfont.woff') format('woff'); src: url('../css/fonts/Gilroy/gilroy-semibold-webfont.woff') format('woff');
} }
#sites-map-container { #sites-map-container {
background-color: #cecfcc; background-color: #f6f7f3;
text-align: center; text-align: center;
position: relative; position: relative;
width: 100%; /* Prend toute la largeur du conteneur parent */ width: 100%; /* Prend toute la largeur du conteneur parent */

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

@ -193,7 +193,7 @@ h2 {
} }
.layout-container main { .layout-container main {
width: 100%; width: 100%;
padding-top: 280px; padding-top: 200px;
} }
@media (max-width: 810px) { @media (max-width: 810px) {
.layout-container main { .layout-container main {
@ -291,7 +291,7 @@ header .header_left_container #block-quartiers-de-demain-logorepu-2 {
} }
header .header_left_container #block-quartiers-de-demain-logoepau-2 { header .header_left_container #block-quartiers-de-demain-logoepau-2 {
display: none; display: none;
height: 280px; height: 200px;
} }
@media (max-width: 891px) { @media (max-width: 891px) {
header .header_left_container #block-quartiers-de-demain-logoepau-2 { header .header_left_container #block-quartiers-de-demain-logoepau-2 {
@ -316,7 +316,7 @@ header .header_left_container #block-quartiers-de-demain-logoquartiersdedemain .
header .header_left_container img { header .header_left_container img {
width: auto; width: auto;
margin: auto; margin: auto;
height: calc(280px - 1rem); height: calc(200px - 1rem);
padding: 2rem; padding: 2rem;
transition: height 0.3s; /* Add transition for smooth resizing */ transition: height 0.3s; /* Add transition for smooth resizing */
} }
@ -459,7 +459,7 @@ header .header:hover + .header_nav_container {
/* Taille définitive du header après l'animation */ /* Taille définitive du header après l'animation */
.header--collapsed { .header--collapsed {
height: 280px; /* Ou la hauteur que vous souhaitez pour votre header */ height: 200px; /* Ou la hauteur que vous souhaitez pour votre header */
width: 35%; width: 35%;
transform-origin: bottom right; transform-origin: bottom right;
transition: all 1s ease-in-out; transition: all 1s ease-in-out;
@ -501,7 +501,7 @@ header .header:hover + .header_nav_container {
} }
.header--collapsed-already { .header--collapsed-already {
height: 280px; /* Ou la hauteur que vous souhaitez pour votre header */ height: 200px; /* Ou la hauteur que vous souhaitez pour votre header */
width: 35%; width: 35%;
transform-origin: bottom right; transform-origin: bottom right;
transition: all 0s ease-in-out; transition: all 0s ease-in-out;
@ -2929,7 +2929,7 @@ body {
.node-type-site .layout--threecol-25-50-25 .layout__region--first div #sites-map-container { .node-type-site .layout--threecol-25-50-25 .layout__region--first div #sites-map-container {
position: fixed; position: fixed;
width: auto; width: auto;
left: 1.3rem; left: 0.3rem;
} }
@media (max-width: 500px) { @media (max-width: 500px) {
.node-type-site .layout--threecol-25-50-25 .layout__region--first div:has(.field_field_documents) { .node-type-site .layout--threecol-25-50-25 .layout__region--first div:has(.field_field_documents) {
@ -2992,13 +2992,13 @@ body {
padding-left: 0.2rem; padding-left: 0.2rem;
} }
.node-type-site .layout--threecol-25-50-25 .layout__region--second { .node-type-site .layout--threecol-25-50-25 .layout__region--second {
width: 60%; flex: 0 1 60% !important;
} }
.node-type-site .layout--threecol-25-50-25 .layout__region--second .block-region-second { .node-type-site .layout--threecol-25-50-25 .layout__region--second .block-region-second {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
flex-wrap: wrap; flex-wrap: wrap;
margin-left: 3.5rem; margin-left: 0.5rem;
} }
@media (max-width: 500px) { @media (max-width: 500px) {
.node-type-site .layout--threecol-25-50-25 .layout__region--second .block-region-second { .node-type-site .layout--threecol-25-50-25 .layout__region--second .block-region-second {
@ -3012,17 +3012,20 @@ body {
font-family: "gilroy-semibold"; font-family: "gilroy-semibold";
font-size: 1.3rem; font-size: 1.3rem;
} }
.node-type-site .layout--threecol-25-50-25 .layout__region--second .block-region-second .field_field_numero ::before { .node-type-site .layout--threecol-25-50-25 .layout__region--second .block-region-second .field_field_numero {
content: url("../img/map_pointer.svg"); display: none;
top: 0.8rem;
position: relative;
padding-right: 0.5rem;
} }
.node-type-site .layout--threecol-25-50-25 .layout__region--second .block-region-second .field_field_numero div::after { .node-type-site .layout--threecol-25-50-25 .layout__region--second .block-region-second .field_field_numero div::after {
content: "-"; content: "-";
padding-left: 0.4rem; padding-left: 0.4rem;
padding-right: 0.4rem; padding-right: 0.4rem;
} }
.node-type-site .layout--threecol-25-50-25 .layout__region--second .block-region-second .field_title ::before {
content: url("../img/map_pointer.svg");
top: 0.8rem;
position: relative;
padding-right: 0.5rem;
}
.node-type-site .layout--threecol-25-50-25 .layout__region--second .block-region-second div:has(.field_title) { .node-type-site .layout--threecol-25-50-25 .layout__region--second .block-region-second div:has(.field_title) {
align-content: end; align-content: end;
} }
@ -3062,6 +3065,7 @@ body {
border-bottom: none; border-bottom: none;
} }
.node-type-site .layout--threecol-25-50-25 .layout__region--second .block-region-second div:has(.field_field_mots_clefs) { .node-type-site .layout--threecol-25-50-25 .layout__region--second .block-region-second div:has(.field_field_mots_clefs) {
display: none;
margin-top: 1rem; margin-top: 1rem;
flex: 0 0 25%; flex: 0 0 25%;
padding-left: 1rem; padding-left: 1rem;
@ -3114,8 +3118,8 @@ body {
} }
.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 { .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 {
object-fit: cover; object-fit: cover;
width: 350px; width: 220px;
height: 230px; height: 145px;
} }
.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;
@ -3126,6 +3130,7 @@ body {
font-family: "gilroy-light"; font-family: "gilroy-light";
} }
.node-type-site .layout--threecol-25-50-25 .layout__region--third { .node-type-site .layout--threecol-25-50-25 .layout__region--third {
flex: 0 1 15% !important;
height: fit-content; height: fit-content;
} }
@media (max-width: 500px) { @media (max-width: 500px) {
@ -3227,7 +3232,7 @@ main {
src: url("../css/fonts/Gilroy/gilroy-semibold-webfont.woff") format("woff"); src: url("../css/fonts/Gilroy/gilroy-semibold-webfont.woff") format("woff");
} }
#sites-map-container { #sites-map-container {
background-color: #cecfcc; background-color: #f6f7f3;
text-align: center; text-align: center;
position: relative; position: relative;
width: 100%; /* Prend toute la largeur du conteneur parent */ width: 100%; /* Prend toute la largeur du conteneur parent */

4
web/themes/custom/quartiers_de_demain/dist/assets/img/next.svg vendored
View File

@ -4,8 +4,8 @@
<svg <svg
version="1.1" version="1.1"
id="svg1" id="svg1"
width="60" width="50"
height="60" height="50"
viewBox="0 0 90.491943 90.492186" viewBox="0 0 90.491943 90.492186"
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
xmlns:svg="http://www.w3.org/2000/svg"> xmlns:svg="http://www.w3.org/2000/svg">

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.4 KiB

After

Width:  |  Height:  |  Size: 1.4 KiB

4
web/themes/custom/quartiers_de_demain/dist/assets/img/prev.svg vendored
View File

@ -4,8 +4,8 @@
<svg <svg
version="1.1" version="1.1"
id="svg1" id="svg1"
width="60" width="50"
height="60" height="50"
viewBox="0 0 90.490723 90.492186" viewBox="0 0 90.490723 90.492186"
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
xmlns:svg="http://www.w3.org/2000/svg"> xmlns:svg="http://www.w3.org/2000/svg">

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.4 KiB

After

Width:  |  Height:  |  Size: 1.4 KiB

2
web/themes/custom/quartiers_de_demain/src/assets/scss/global/_layout.scss
View File

@ -1,5 +1,5 @@
$header-height : 280px; $header-height : 200px;
$header-height-pad : 160px; $header-height-pad : 160px;
$header-height-small : 70px; $header-height-small : 70px;
$header-height-ultrasmall : 50px; $header-height-ultrasmall : 50px;

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

@ -36,7 +36,7 @@
#sites-map-container{ #sites-map-container{
position: fixed; position: fixed;
width: auto; width: auto;
left: 1.3rem; left: 0.3rem;
} }
} }
div:has(.field_field_documents){ div:has(.field_field_documents){
@ -103,13 +103,13 @@
} }
} }
.layout__region--second{ .layout__region--second{
// flex: 0 1 60%; flex: 0 1 60% !important;
width: 60%; // width: 60%;
.block-region-second{ .block-region-second{
display: flex; display: flex;
flex-direction: row; flex-direction: row;
flex-wrap: wrap; flex-wrap: wrap;
margin-left: 3.5rem; margin-left: 0.5rem;
@media(max-width: 500px){ @media(max-width: 500px){
margin-left: 0.5rem; margin-left: 0.5rem;
margin-top: 1rem; margin-top: 1rem;
@ -121,12 +121,8 @@
font-size: 1.3rem; font-size: 1.3rem;
} }
.field_field_numero{ .field_field_numero{
::before{ display: none;
content: url("../img/map_pointer.svg");
top: 0.8rem;
position: relative;
padding-right: 0.5rem;
}
div{ div{
&::after{ &::after{
content: "-"; content: "-";
@ -136,8 +132,19 @@
} }
} }
.field_title{
::before{
content: url("../img/map_pointer.svg");
top: 0.8rem;
position: relative;
padding-right: 0.5rem;
}
}
div:has(.field_title){ div:has(.field_title){
align-content: end; align-content: end;
} }
.field_field_sous_titre{ .field_field_sous_titre{
@ -184,6 +191,7 @@
} }
} }
div:has(.field_field_mots_clefs){ div:has(.field_field_mots_clefs){
display: none;
margin-top: 1rem; margin-top: 1rem;
flex: 0 0 25%; flex: 0 0 25%;
padding-left: 1rem; padding-left: 1rem;
@ -239,8 +247,8 @@
margin: auto; margin: auto;
img{ img{
object-fit: cover; object-fit: cover;
width: 350px; width: 220px;
height: 230px; height: 145px;
} }
} }
.image-field-caption{ .image-field-caption{
@ -262,6 +270,7 @@
.layout__region--third{ .layout__region--third{
flex: 0 1 15% !important;
height: fit-content; height: fit-content;
@media(max-width: 500px){ @media(max-width: 500px){
display: flex; display: flex;