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

fix design with sandrine

This commit is contained in:
ouidade 2024-07-10 14:02:30 +02:00
parent c7f5338a71
commit f72a96cdd8
13 changed files with 429 additions and 217 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -3,13 +3,21 @@
/*global*/ /*global*/
/* Colors used for quartiers_de_demain */ /* Colors used for quartiers_de_demain */
p { p {
font-size: 0.6rem; font-size: 0.8rem;
} }
h3 { h3 {
font-size: 1.2rem; font-size: 1.2rem;
} }
h1 {
font-family: "gilroy-bold";
}
h2 {
font-family: "gilroy-semibold";
}
@media (min-width: 48rem) { @media (min-width: 48rem) {
:root { :root {
font-size: calc(1rem + (1vw - 0.48rem) * 1.389); font-size: calc(1rem + (1vw - 0.48rem) * 1.389);
@ -26,43 +34,43 @@ h3 {
/*! Generated by Font Squirrel (https://www.fontsquirrel.com) on July 4, 2024 */ /*! Generated by Font Squirrel (https://www.fontsquirrel.com) on July 4, 2024 */
@font-face { @font-face {
font-family: "gilroy-semiboldita"; font-family: "gilroy-semiboldita";
src: url("./theme/custom/quartiers_de_demain/dist/assets/fonts/Gilroy/gilroy-semibolditalic-webfont.woff2") format("woff2"), url("./theme/custom/quartiers_de_demain/dist/assets/fonts/Gilroy/gilroy-semibolditalic-webfont.woff") format("woff"); src: url("../fonts/Gilroy/gilroy-semibolditalic-webfont.woff2") format("woff2"), url("../fonts/Gilroy/gilroy-semibolditalic-webfont.woff") format("woff");
font-weight: normal; font-weight: normal;
font-style: normal; font-style: normal;
} }
@font-face { @font-face {
font-family: "gilroy-semibold"; font-family: "gilroy-semibold";
src: url("./theme/custom/quartiers_de_demain/dist/assets/fonts/Gilroy/gilroy-semibold-webfont.woff2") format("woff2"), url("./theme/custom/quartiers_de_demain/dist/assets/fonts/Gilroy/gilroy-semibold-webfont.woff") format("woff"); src: url("../fonts/Gilroy/gilroy-semibold-webfont.woff2") format("woff2"), url("../fonts/Gilroy/gilroy-semibold-webfont.woff") format("woff");
font-weight: normal; font-weight: normal;
font-style: normal; font-style: normal;
} }
@font-face { @font-face {
font-family: "gilroy-regularita"; font-family: "gilroy-regularita";
src: url("./theme/custom/quartiers_de_demain/dist/assets/fonts/Gilroy/gilroy-regularitalic-webfont.woff2") format("woff2"), url("./theme/custom/quartiers_de_demain/dist/assets/fonts/Gilroy/gilroy-regularitalic-webfont.woff") format("woff"); src: url("../fonts/Gilroy/gilroy-regularitalic-webfont.woff2") format("woff2"), url("../fonts/Gilroy/gilroy-regularitalic-webfont.woff") format("woff");
font-weight: normal; font-weight: normal;
font-style: normal; font-style: normal;
} }
@font-face { @font-face {
font-family: "gilroy-regular"; font-family: "gilroy-regular";
src: url("./theme/custom/quartiers_de_demain/dist/assets/fonts/Gilroy/gilroy-regular-webfont.woff2") format("woff2"), url("./theme/custom/quartiers_de_demain/dist/assets/fonts/Gilroy/gilroy-regular-webfont.woff") format("woff"); src: url("../fonts/Gilroy/gilroy-regular-webfont.woff2") format("woff2"), url("../fonts/Gilroy/gilroy-regular-webfont.woff") format("woff");
font-weight: normal; font-weight: normal;
font-style: normal; font-style: normal;
} }
@font-face { @font-face {
font-family: "gilroy-bolditalic"; font-family: "gilroy-bolditalic";
src: url("./theme/custom/quartiers_de_demain/dist/assets/fonts/Gilroy/gilroy-bolditalic-webfont.woff2") format("woff2"), url("./theme/custom/quartiers_de_demain/dist/assets/fonts/Gilroy/gilroy-bolditalic-webfont.woff") format("woff"); src: url("../fonts/Gilroy/gilroy-bolditalic-webfont.woff2") format("woff2"), url("../fonts/Gilroy/gilroy-bolditalic-webfont.woff") format("woff");
font-weight: normal; font-weight: normal;
font-style: normal; font-style: normal;
} }
@font-face { @font-face {
font-family: "gilroy-bold"; font-family: "gilroy-bold";
src: url("../fonts/Gilroy/gilroy-bold-webfont.woff2") format("woff2"), url("./theme/custom/quartiers_de_demain/dist/assets/fonts/Gilroy/gilroy-bold-webfont.woff") format("woff"); src: url("../fonts/Gilroy/gilroy-bold-webfont.woff2") format("woff2"), url("../fonts/Gilroy/gilroy-bold-webfont.woff") format("woff");
font-weight: normal; font-weight: normal;
font-style: normal; font-style: normal;
} }
@font-face { @font-face {
font-family: "gilroy-mediumital"; font-family: "gilroy-mediumital";
src: url("./theme/custom/quartiers_de_demain/dist/assets/fonts/Gilroy/gilroy-mediumitalic-webfont.woff2") format("woff2"), url("./theme/custom/quartiers_de_demain/dist/assets/fonts/Gilroy/gilroy-mediumitalic-webfont.woff") format("woff"); src: url("../fonts/Gilroy/gilroy-mediumitalic-webfont.woff2") format("woff2"), url("../fonts/Gilroy/gilroy-mediumitalic-webfont.woff") format("woff");
font-weight: normal; font-weight: normal;
font-style: normal; font-style: normal;
} }
@ -314,7 +322,7 @@ header .header_right_container .language-switcher-language-url {
header .header_right_container .language-switcher-language-url ul { header .header_right_container .language-switcher-language-url ul {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
font-size: 0.6rem; font-size: 0.8rem;
padding: 0; padding: 0;
} }
@media (max-width: 660px) { @media (max-width: 660px) {
@ -792,7 +800,7 @@ footer {
} }
@media (max-width: 810px) { @media (max-width: 810px) {
.slick-prev { .slick-prev {
left: 36%; left: 29%;
} }
} }
[dir=rtl] .slick-prev { [dir=rtl] .slick-prev {
@ -1002,9 +1010,8 @@ footer {
#home .__container-deroulement h2 { #home .__container-deroulement h2 {
width: fit-content; width: fit-content;
margin: auto; margin: auto;
padding-top: 3rem; padding-top: 4rem;
font-size: 1.7rem; font-size: 1.7rem;
font-weight: bold;
} }
#home .timeline { #home .timeline {
white-space: nowrap; white-space: nowrap;
@ -1097,10 +1104,10 @@ footer {
margin: auto; margin: auto;
align-items: flex-start; align-items: flex-start;
padding-right: 1rem; padding-right: 1rem;
margin-bottom: 2rem; margin-bottom: 1rem;
} }
#home .timeline .__timeline-content .__paragraphs .paragraph--type--phase-deroulement .date .field_field_date_de_jour { #home .timeline .__timeline-content .__paragraphs .paragraph--type--phase-deroulement .date .field_field_date_de_jour {
font-size: 2rem; font-size: 2.5rem;
line-height: 0.3rem; line-height: 0.3rem;
} }
@media (max-width: 550px) { @media (max-width: 550px) {
@ -1112,7 +1119,7 @@ footer {
#home .timeline .__timeline-content .__paragraphs .paragraph--type--phase-deroulement .date .field_field_date_de_moi { #home .timeline .__timeline-content .__paragraphs .paragraph--type--phase-deroulement .date .field_field_date_de_moi {
padding-right: 0.2rem; padding-right: 0.2rem;
text-transform: uppercase; text-transform: uppercase;
font-size: 3rem; font-size: 4rem;
display: inline-flex; display: inline-flex;
} }
@media (max-width: 550px) { @media (max-width: 550px) {
@ -1167,7 +1174,7 @@ footer {
min-width: 65%; min-width: 65%;
} }
#home .timeline .__timeline-content .__paragraphs .paragraph--type--phase-deroulement .text .field_field_titre { #home .timeline .__timeline-content .__paragraphs .paragraph--type--phase-deroulement .text .field_field_titre {
font-size: 0.5rem; font-size: 0.6rem;
font-weight: 800; font-weight: 800;
} }
@media (max-width: 1090px) { @media (max-width: 1090px) {
@ -1176,7 +1183,7 @@ footer {
} }
} }
#home .timeline .__timeline-content .__paragraphs .paragraph--type--phase-deroulement .text .field_field_description p { #home .timeline .__timeline-content .__paragraphs .paragraph--type--phase-deroulement .text .field_field_description p {
font-size: 0.5rem !important; font-size: 0.6rem !important;
margin: 0; margin: 0;
} }
@media (max-width: 1090px) { @media (max-width: 1090px) {
@ -1196,11 +1203,11 @@ footer {
} }
#actus-caroussel h2 { #actus-caroussel h2 {
width: fit-content; width: fit-content;
padding-bottom: 0.4rem; padding-bottom: 1.5rem;
margin-top: 3rem; margin-top: 4rem;
margin-bottom: 3rem; margin-bottom: 3rem;
font-size: 1.7rem; font-size: 1.7rem;
font-weight: bold; font-family: "gilroy-semibold";
} }
#actus-caroussel .content-actus .view { #actus-caroussel .content-actus .view {
display: flex; display: flex;
@ -1209,8 +1216,8 @@ footer {
width: 100vw; width: 100vw;
} }
#actus-caroussel .content-actus .views-row { #actus-caroussel .content-actus .views-row {
width: 500px !important; width: 650px !important;
padding: 2rem; padding: 1rem;
} }
@media (max-width: 550px) { @media (max-width: 550px) {
#actus-caroussel .content-actus .views-row { #actus-caroussel .content-actus .views-row {
@ -1222,11 +1229,12 @@ footer {
flex-direction: column; flex-direction: column;
} }
#actus-caroussel .content-actus .views-row article.node-type-actualite .field_field_images { #actus-caroussel .content-actus .views-row article.node-type-actualite .field_field_images {
background-color: black;
-moz-border-radius: 9px; /* pour Mozilla */ -moz-border-radius: 9px; /* pour Mozilla */
-khtml-border-radius: 9px; /* pour Safari et Chrome */ -khtml-border-radius: 9px; /* pour Safari et Chrome */
-webkit-border-radius: 9px; /* pour Safari sur Mac */ -webkit-border-radius: 9px; /* pour Safari sur Mac */
border-radius: 9px; /* CSS3 */ border-radius: 9px; /* CSS3 */
height: 250px; height: 350px;
margin-bottom: 0.6rem; margin-bottom: 0.6rem;
} }
@media (max-width: 550px) { @media (max-width: 550px) {
@ -1234,10 +1242,33 @@ footer {
height: 170px; height: 170px;
} }
} }
#actus-caroussel .content-actus .views-row article.node-type-actualite .field_field_images div {
height: 100%;
}
#actus-caroussel .content-actus .views-row article.node-type-actualite .field_field_images div div {
height: 100%;
}
#actus-caroussel .content-actus .views-row article.node-type-actualite .field_field_images div div a {
display: block;
height: 100%;
}
#actus-caroussel .content-actus .views-row article.node-type-actualite .field_field_images div div a img {
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 */
}
@media (max-width: 550px) {
#actus-caroussel .content-actus .views-row article.node-type-actualite .field_field_images div div a img {
max-height: 170px;
}
}
#actus-caroussel .content-actus .views-row article.node-type-actualite .field_field_images img { #actus-caroussel .content-actus .views-row article.node-type-actualite .field_field_images img {
width: 100%; width: 100%;
height: fit-content; height: 100%;
max-height: 250px;
object-fit: cover; object-fit: cover;
-moz-border-radius: 9px; /* pour Mozilla */ -moz-border-radius: 9px; /* pour Mozilla */
-khtml-border-radius: 9px; /* pour Safari et Chrome */ -khtml-border-radius: 9px; /* pour Safari et Chrome */
@ -1252,31 +1283,37 @@ footer {
#actus-caroussel .content-actus .views-row article.node-type-actualite .field_field_type_d_actualite { #actus-caroussel .content-actus .views-row article.node-type-actualite .field_field_type_d_actualite {
text-transform: uppercase; text-transform: uppercase;
color: red; color: red;
font-size: 0.6rem; font-size: 0.8rem;
font-weight: 600; font-family: "gilroy-bold";
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
} }
#actus-caroussel .content-actus .views-row article.node-type-actualite .field_field_type_d_actualite::before { #actus-caroussel .content-actus .views-row article.node-type-actualite .field_field_type_d_actualite::before {
content: url("../img/type-actu.svg"); content: url("../img/type-actu.svg");
padding-right: 0.2rem; padding-right: 0.3rem;
padding-bottom: 0.2rem;
} }
#actus-caroussel .content-actus .views-row article.node-type-actualite .field_field_date { #actus-caroussel .content-actus .views-row article.node-type-actualite .field_field_date {
color: red; color: red;
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
font-size: 0.6rem; font-size: 0.8rem;
font-family: "gilroy-bold";
} }
#actus-caroussel .content-actus .views-row article.node-type-actualite .field_field_date::before { #actus-caroussel .content-actus .views-row article.node-type-actualite .field_field_date::before {
content: url("../img/date-actu.svg"); content: url("../img/date-actu.svg");
padding-right: 0.2rem; padding-right: 0.3rem;
}
#actus-caroussel .content-actus .views-row article.node-type-actualite .field_title {
padding-top: 0.5rem;
} }
#actus-caroussel .content-actus .views-row article.node-type-actualite .field_title h2 { #actus-caroussel .content-actus .views-row article.node-type-actualite .field_title h2 {
margin: 0; margin: 0;
line-height: 0.4; line-height: 0.4;
padding-bottom: 0.8rem;
} }
#actus-caroussel .content-actus .views-row article.node-type-actualite .field_title h2 a { #actus-caroussel .content-actus .views-row article.node-type-actualite .field_title h2 a {
font-size: 0.8rem; font-size: 1rem;
color: rgb(7, 50, 194); color: rgb(7, 50, 194);
} }
#actus-caroussel .content-actus .views-row article.node-type-actualite .field_body { #actus-caroussel .content-actus .views-row article.node-type-actualite .field_body {
@ -1285,6 +1322,7 @@ footer {
} }
#actus-caroussel .content-actus .views-row article.node-type-actualite .field_body p { #actus-caroussel .content-actus .views-row article.node-type-actualite .field_body p {
margin: 0; margin: 0;
font-size: 0.9rem;
} }
#actus-caroussel .content-actus .views-row:nth-child(odd) { #actus-caroussel .content-actus .views-row:nth-child(odd) {
position: relative; position: relative;
@ -1342,7 +1380,7 @@ header #block-quartiers-de-demain-logoquartiersdedemain .field_field_logo .qdd-h
display: none; display: none;
} }
#home .paragraph--type--static-parts { #home .paragraph--type--static-parts {
padding-top: 2rem; padding-top: 4rem;
padding-bottom: 2rem; padding-bottom: 2rem;
} }
#home article.node-type-static .field_body { #home article.node-type-static .field_body {
@ -1352,6 +1390,11 @@ header #block-quartiers-de-demain-logoquartiersdedemain .field_field_logo .qdd-h
flex-direction: row; flex-direction: row;
flex-wrap: wrap; flex-wrap: wrap;
} }
@media (max-width: 1090px) {
#home article.node-type-static .field_body {
flex-direction: column;
}
}
#home article.node-type-static .field_body > p:nth-child(1) { #home article.node-type-static .field_body > p:nth-child(1) {
margin-bottom: 0; margin-bottom: 0;
flex: 1 100%; flex: 1 100%;
@ -1382,21 +1425,30 @@ header #block-quartiers-de-demain-logoquartiersdedemain .field_field_logo .qdd-h
padding-left: 0; padding-left: 0;
} }
} }
@media (max-width: 1090px) {
#home article.node-type-static .field_body > p:nth-child(3) {
padding-top: 0;
margin-top: 0;
}
}
#home article.node-type-static .field_field_title { #home article.node-type-static .field_field_title {
width: fit-content; width: fit-content;
margin: auto; margin: auto;
font-size: 2rem; font-size: 2rem;
font-weight: 800; font-family: "gilroy-bold";
padding-bottom: 1rem; padding-bottom: 1rem;
} }
#home article.node-type-static #paragraph-id--1 { #home article.node-type-static #paragraph-id--1 {
background-color: #edefe8; background-color: #edefe8;
} }
#home article.node-type-static #paragraph-id--1 .field_field_title {
font-family: "gilroy-bold";
}
#home article.node-type-static #paragraph-id--1 .field_field_picto { #home article.node-type-static #paragraph-id--1 .field_field_picto {
display: none; display: none;
} }
#home article.node-type-static #paragraph-id--1 .field_field_texte { #home article.node-type-static #paragraph-id--1 .field_field_texte {
width: 50%; width: 65%;
margin: auto; margin: auto;
} }
@media (max-width: 1090px) { @media (max-width: 1090px) {
@ -1409,19 +1461,26 @@ header #block-quartiers-de-demain-logoquartiersdedemain .field_field_logo .qdd-h
flex-direction: row; flex-direction: row;
flex-wrap: wrap; flex-wrap: wrap;
justify-content: flex-start; justify-content: flex-start;
padding-left: 6rem;
}
@media (max-width: 1090px) {
#home article.node-type-static #paragraph-id--1 .field_field_texte .colone-picto {
padding-left: 1.5rem;
}
} }
#home article.node-type-static #paragraph-id--1 .field_field_texte .colone-picto h3 { #home article.node-type-static #paragraph-id--1 .field_field_texte .colone-picto h3 {
flex: 1 100%; flex: 0 80%;
color: #0833c2; color: #0833c2;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
font-size: 1rem;
} }
#home article.node-type-static #paragraph-id--1 .field_field_texte .colone-picto h3:nth-of-type(2) { #home article.node-type-static #paragraph-id--1 .field_field_texte .colone-picto h3:nth-of-type(2) {
padding-top: 3rem; padding-top: 3rem;
border-top: solid 1px #0833c2; border-top: solid 1px #0833c2;
} }
#home article.node-type-static #paragraph-id--1 .field_field_texte .colone-picto p { #home article.node-type-static #paragraph-id--1 .field_field_texte .colone-picto p {
padding-right: 2rem; padding-right: 1rem;
padding-bottom: 1rem; padding-bottom: 1rem;
flex: 1 30%; flex: 1 30%;
max-width: 30%; max-width: 30%;
@ -1438,11 +1497,11 @@ header #block-quartiers-de-demain-logoquartiersdedemain .field_field_logo .qdd-h
} }
#home article.node-type-static #paragraph-id--1 .field_field_texte .colone-picto p:nth-of-type(1)::before { #home article.node-type-static #paragraph-id--1 .field_field_texte .colone-picto p:nth-of-type(1)::before {
background-image: url("../img/fanion.svg"); background-image: url("../img/fanion.svg");
background-size: 60px 80px; background-size: 90px 100px;
background-repeat: no-repeat; background-repeat: no-repeat;
display: inline-block; display: inline-block;
width: 80px; width: 100px;
height: 80px; height: 100px;
content: ""; content: "";
padding-bottom: 1rem; padding-bottom: 1rem;
} }
@ -1455,11 +1514,11 @@ header #block-quartiers-de-demain-logoquartiersdedemain .field_field_logo .qdd-h
} }
#home article.node-type-static #paragraph-id--1 .field_field_texte .colone-picto p:nth-of-type(2)::before { #home article.node-type-static #paragraph-id--1 .field_field_texte .colone-picto p:nth-of-type(2)::before {
background-image: url("../img/pouce.svg"); background-image: url("../img/pouce.svg");
background-size: 60px 80px; background-size: 90px 100px;
background-repeat: no-repeat; background-repeat: no-repeat;
display: inline-block; display: inline-block;
width: 80px; width: 100px;
height: 80px; height: 100px;
content: ""; content: "";
padding-bottom: 1rem; padding-bottom: 1rem;
} }
@ -1472,11 +1531,11 @@ header #block-quartiers-de-demain-logoquartiersdedemain .field_field_logo .qdd-h
} }
#home article.node-type-static #paragraph-id--1 .field_field_texte .colone-picto p:nth-of-type(3)::before { #home article.node-type-static #paragraph-id--1 .field_field_texte .colone-picto p:nth-of-type(3)::before {
background-image: url("../img/planete.svg"); background-image: url("../img/planete.svg");
background-size: 60px 80px; background-size: 90px 100px;
background-repeat: no-repeat; background-repeat: no-repeat;
display: inline-block; display: inline-block;
width: 80px; width: 100px;
height: 80px; height: 100px;
content: ""; content: "";
padding-bottom: 1rem; padding-bottom: 1rem;
} }
@ -1489,11 +1548,11 @@ header #block-quartiers-de-demain-logoquartiersdedemain .field_field_logo .qdd-h
} }
#home article.node-type-static #paragraph-id--1 .field_field_texte .colone-picto p:nth-of-type(4)::before { #home article.node-type-static #paragraph-id--1 .field_field_texte .colone-picto p:nth-of-type(4)::before {
background-image: url("../img/puzzle.svg"); background-image: url("../img/puzzle.svg");
background-size: 60px 80px; background-size: 90px 100px;
background-repeat: no-repeat; background-repeat: no-repeat;
display: inline-block; display: inline-block;
width: 80px; width: 100px;
height: 80px; height: 100px;
content: ""; content: "";
padding-bottom: 1rem; padding-bottom: 1rem;
} }
@ -1506,11 +1565,11 @@ header #block-quartiers-de-demain-logoquartiersdedemain .field_field_logo .qdd-h
} }
#home article.node-type-static #paragraph-id--1 .field_field_texte .colone-picto p:nth-of-type(5)::before { #home article.node-type-static #paragraph-id--1 .field_field_texte .colone-picto p:nth-of-type(5)::before {
background-image: url("../img/cube.svg"); background-image: url("../img/cube.svg");
background-size: 70px 80px; background-size: 100px 100px;
background-repeat: no-repeat; background-repeat: no-repeat;
display: inline-block; display: inline-block;
width: 80px; width: 100px;
height: 80px; height: 100px;
content: ""; content: "";
padding-bottom: 1rem; padding-bottom: 1rem;
} }
@ -1523,11 +1582,11 @@ header #block-quartiers-de-demain-logoquartiersdedemain .field_field_logo .qdd-h
} }
#home article.node-type-static #paragraph-id--1 .field_field_texte .colone-picto p:nth-of-type(6)::before { #home article.node-type-static #paragraph-id--1 .field_field_texte .colone-picto p:nth-of-type(6)::before {
background-image: url("../img/ampoule.svg"); background-image: url("../img/ampoule.svg");
background-size: 60px 80px; background-size: 90px 100px;
background-repeat: no-repeat; background-repeat: no-repeat;
display: inline-block; display: inline-block;
width: 80px; width: 100px;
height: 80px; height: 100px;
content: ""; content: "";
padding-bottom: 1rem; padding-bottom: 1rem;
} }
@ -1540,11 +1599,11 @@ header #block-quartiers-de-demain-logoquartiersdedemain .field_field_logo .qdd-h
} }
#home article.node-type-static #paragraph-id--1 .field_field_texte .colone-picto p:nth-of-type(7)::before { #home article.node-type-static #paragraph-id--1 .field_field_texte .colone-picto p:nth-of-type(7)::before {
background-image: url("../img/bonhome.svg"); background-image: url("../img/bonhome.svg");
background-size: 60px 80px; background-size: 90px 100px;
background-repeat: no-repeat; background-repeat: no-repeat;
display: inline-block; display: inline-block;
width: 80px; width: 100px;
height: 80px; height: 100px;
content: ""; content: "";
padding-bottom: 1rem; padding-bottom: 1rem;
} }
@ -1557,11 +1616,11 @@ header #block-quartiers-de-demain-logoquartiersdedemain .field_field_logo .qdd-h
} }
#home article.node-type-static #paragraph-id--1 .field_field_texte .colone-picto p:nth-of-type(8)::before { #home article.node-type-static #paragraph-id--1 .field_field_texte .colone-picto p:nth-of-type(8)::before {
background-image: url("../img/feuilles.svg"); background-image: url("../img/feuilles.svg");
background-size: 60px 80px; background-size: 90px 100px;
background-repeat: no-repeat; background-repeat: no-repeat;
display: inline-block; display: inline-block;
width: 80px; width: 100px;
height: 80px; height: 100px;
content: ""; content: "";
padding-bottom: 1rem; padding-bottom: 1rem;
} }
@ -1574,11 +1633,11 @@ header #block-quartiers-de-demain-logoquartiersdedemain .field_field_logo .qdd-h
} }
#home article.node-type-static #paragraph-id--1 .field_field_texte .colone-picto p:nth-of-type(9)::before { #home article.node-type-static #paragraph-id--1 .field_field_texte .colone-picto p:nth-of-type(9)::before {
background-image: url("../img/calendrier.svg"); background-image: url("../img/calendrier.svg");
background-size: 60px 80px; background-size: 90px 100px;
background-repeat: no-repeat; background-repeat: no-repeat;
display: inline-block; display: inline-block;
width: 80px; width: 100px;
height: 80px; height: 100px;
content: ""; content: "";
padding-bottom: 1rem; padding-bottom: 1rem;
} }
@ -1591,11 +1650,11 @@ header #block-quartiers-de-demain-logoquartiersdedemain .field_field_logo .qdd-h
} }
#home article.node-type-static #paragraph-id--1 .field_field_texte .colone-picto p:nth-of-type(10)::before { #home article.node-type-static #paragraph-id--1 .field_field_texte .colone-picto p:nth-of-type(10)::before {
background-image: url("../img/crayons.svg"); background-image: url("../img/crayons.svg");
background-size: 48px 80px; background-size: 60px 100px;
background-repeat: no-repeat; background-repeat: no-repeat;
display: inline-block; display: inline-block;
width: 80px; width: 100px;
height: 80px; height: 100px;
content: ""; content: "";
padding-bottom: 1rem; padding-bottom: 1rem;
} }
@ -1611,7 +1670,6 @@ header #block-quartiers-de-demain-logoquartiersdedemain .field_field_logo .qdd-h
flex-direction: column; flex-direction: column;
margin: auto; margin: auto;
align-items: center; align-items: center;
width: 70%;
padding-bottom: 2rem; padding-bottom: 2rem;
} }
@media (max-width: 500px) { @media (max-width: 500px) {
@ -1620,30 +1678,47 @@ header #block-quartiers-de-demain-logoquartiersdedemain .field_field_logo .qdd-h
text-align: center; text-align: center;
} }
} }
#home article.node-type-static #paragraph-id--6 .field_field_title {
padding-top: 4rem;
padding-bottom: 2rem;
}
@media (max-width: 500px) {
#home article.node-type-static #paragraph-id--6 .field_field_title {
padding-top: 0;
}
}
#home article.node-type-static #paragraph-id--6 .field_field_texte { #home article.node-type-static #paragraph-id--6 .field_field_texte {
width: 50%;
margin: auto; margin: auto;
} }
@media (max-width: 500px) {
#home article.node-type-static #paragraph-id--6 .field_field_texte {
width: 90%;
}
}
#home article.node-type-static #paragraph-id--6 .field_field_texte .colone-picto { #home article.node-type-static #paragraph-id--6 .field_field_texte .colone-picto {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
} }
#home article.node-type-static #paragraph-id--6 .field_field_texte .colone-picto > p:nth-of-type(1) { #home article.node-type-static #paragraph-id--6 .field_field_texte .colone-picto > p:nth-of-type(1) {
color: #0833c2; color: #0833c2;
font-size: 1.5rem; font-size: 1rem;
font-weight: 800; font-weight: 800;
} }
#home article.node-type-static #paragraph-id--6 .field_field_texte .colone-picto > p:nth-of-type(2) { #home article.node-type-static #paragraph-id--6 .field_field_texte .colone-picto > p:nth-of-type(2) {
width: 60%; width: 60%;
font-size: 1.2rem; font-size: 0.8rem;
align-self: center; align-self: center;
padding-top: 1.5rem;
} }
@media (max-width: 500px) { @media (max-width: 500px) {
#home article.node-type-static #paragraph-id--6 .field_field_texte .colone-picto > p:nth-of-type(2) { #home article.node-type-static #paragraph-id--6 .field_field_texte .colone-picto > p:nth-of-type(2) {
width: 80%; width: 80%;
padding-top: 0;
} }
} }
#home article.node-type-static #paragraph-id--6 .field_field_texte .colone-picto > p:nth-of-type(3) { #home article.node-type-static #paragraph-id--6 .field_field_texte .colone-picto > p:nth-of-type(3) {
width: 80%; width: 90%;
align-self: center; align-self: center;
margin-top: 0; margin-top: 0;
} }
@ -1661,10 +1736,11 @@ header #block-quartiers-de-demain-logoquartiersdedemain .field_field_logo .qdd-h
color: white; color: white;
} }
#home article.node-type-static #paragraph-id--7 .field_field_title { #home article.node-type-static #paragraph-id--7 .field_field_title {
width: 50%; width: 48%;
text-transform: lowercase; text-transform: lowercase;
padding-top: 3rem; padding-top: 3rem;
text-align: center; text-align: center;
font-size: 1.8rem;
} }
@media (max-width: 550px) { @media (max-width: 550px) {
#home article.node-type-static #paragraph-id--7 .field_field_title { #home article.node-type-static #paragraph-id--7 .field_field_title {
@ -1674,11 +1750,18 @@ header #block-quartiers-de-demain-logoquartiersdedemain .field_field_logo .qdd-h
#home article.node-type-static #paragraph-id--7 .field_field_texte { #home article.node-type-static #paragraph-id--7 .field_field_texte {
width: 80%; width: 80%;
} }
@media (max-width: 700px) {
#home article.node-type-static #paragraph-id--7 .field_field_texte {
position: relative;
top: -80px;
}
}
#home article.node-type-static #paragraph-id--7 .field_field_texte .colone-picto { #home article.node-type-static #paragraph-id--7 .field_field_texte .colone-picto {
margin-top: 2rem; margin-top: 2rem;
padding-left: 4rem;
display: grid; display: grid;
grid-template-columns: repeat(6 auto); grid-template-columns: repeat(6 auto);
grid-template-rows: repeat(3 1fr); grid-template-rows: repeat(3 auto);
} }
@media (max-width: 700px) { @media (max-width: 700px) {
#home article.node-type-static #paragraph-id--7 .field_field_texte .colone-picto { #home article.node-type-static #paragraph-id--7 .field_field_texte .colone-picto {
@ -1695,6 +1778,7 @@ header #block-quartiers-de-demain-logoquartiersdedemain .field_field_logo .qdd-h
#home article.node-type-static #paragraph-id--7 .field_field_texte .colone-picto h5:nth-of-type(1) { #home article.node-type-static #paragraph-id--7 .field_field_texte .colone-picto h5:nth-of-type(1) {
grid-row: 2; grid-row: 2;
grid-column: 1; grid-column: 1;
padding-left: 1rem;
} }
#home article.node-type-static #paragraph-id--7 .field_field_texte .colone-picto h5:nth-of-type(2) { #home article.node-type-static #paragraph-id--7 .field_field_texte .colone-picto h5:nth-of-type(2) {
grid-row: 2; grid-row: 2;
@ -1705,6 +1789,8 @@ header #block-quartiers-de-demain-logoquartiersdedemain .field_field_logo .qdd-h
grid-row: 4; grid-row: 4;
grid-column: 2; grid-column: 2;
margin: auto; margin: auto;
top: -50px;
position: relative;
} }
} }
#home article.node-type-static #paragraph-id--7 .field_field_texte .colone-picto h5:nth-of-type(3) { #home article.node-type-static #paragraph-id--7 .field_field_texte .colone-picto h5:nth-of-type(3) {
@ -1715,58 +1801,85 @@ header #block-quartiers-de-demain-logoquartiersdedemain .field_field_logo .qdd-h
#home article.node-type-static #paragraph-id--7 .field_field_texte .colone-picto h5:nth-of-type(3) { #home article.node-type-static #paragraph-id--7 .field_field_texte .colone-picto h5:nth-of-type(3) {
grid-row: 8; grid-row: 8;
grid-column: 1; grid-column: 1;
padding-left: 1rem;
} }
} }
#home article.node-type-static #paragraph-id--7 .field_field_texte .colone-picto p { #home article.node-type-static #paragraph-id--7 .field_field_texte .colone-picto p {
font-size: 1rem; font-size: 0.8rem;
font-weight: 400; font-weight: 400;
margin: 0; margin: 0;
} }
#home article.node-type-static #paragraph-id--7 .field_field_texte .colone-picto p:not(:last-of-type) { #home article.node-type-static #paragraph-id--7 .field_field_texte .colone-picto p:not(:last-of-type) {
padding-right: 2rem; padding-right: 2rem;
} }
@media (max-width: 700px) {
#home article.node-type-static #paragraph-id--7 .field_field_texte .colone-picto p {
font-size: 1.2rem;
}
}
#home article.node-type-static #paragraph-id--7 .field_field_texte .colone-picto svg:nth-of-type(1) { #home article.node-type-static #paragraph-id--7 .field_field_texte .colone-picto svg:nth-of-type(1) {
grid-row: 1/span 2; grid-row: 1/span 2;
grid-column: 1/span 2; grid-column: 1/span 2;
padding: 1rem;
} }
@media (max-width: 700px) { @media (max-width: 700px) {
#home article.node-type-static #paragraph-id--7 .field_field_texte .colone-picto svg:nth-of-type(1) { #home article.node-type-static #paragraph-id--7 .field_field_texte .colone-picto svg:nth-of-type(1) {
width: 315px; width: 260px;
top: 50px;
position: relative;
} }
} }
#home article.node-type-static #paragraph-id--7 .field_field_texte .colone-picto svg:nth-of-type(2) { #home article.node-type-static #paragraph-id--7 .field_field_texte .colone-picto svg:nth-of-type(2) {
grid-row: 3; grid-row: 3;
grid-column: inherit; grid-column: inherit;
padding: 1rem;
padding-left: 0;
} }
@media (max-width: 700px) { @media (max-width: 700px) {
#home article.node-type-static #paragraph-id--7 .field_field_texte .colone-picto svg:nth-of-type(2) { #home article.node-type-static #paragraph-id--7 .field_field_texte .colone-picto svg:nth-of-type(2) {
grid-row: 4; grid-row: 4;
grid-column: 1/span 2; grid-column: 1/span 2;
width: 315px; width: 260px;
padding-left: 1rem;
} }
} }
#home article.node-type-static #paragraph-id--7 .field_field_texte .colone-picto svg:nth-of-type(3) { #home article.node-type-static #paragraph-id--7 .field_field_texte .colone-picto svg:nth-of-type(3) {
grid-row: 1/span 2; grid-row: 1/span 2;
grid-column: 5/span 6; grid-column: 5/span 6;
padding: 1rem;
padding-left: 0;
position: relative;
left: -0.5rem;
} }
@media (max-width: 700px) { @media (max-width: 700px) {
#home article.node-type-static #paragraph-id--7 .field_field_texte .colone-picto svg:nth-of-type(3) { #home article.node-type-static #paragraph-id--7 .field_field_texte .colone-picto svg:nth-of-type(3) {
grid-row: 8; grid-row: 8;
grid-column: 1/span 2; grid-column: 1/span 2;
width: 315px; width: 260px;
top: -50px;
left: 0rem;
padding-left: 1rem;
position: relative;
} }
} }
#home article.node-type-static #paragraph-id--7 .field_field_texte .colone-picto p:nth-of-type(1) { #home article.node-type-static #paragraph-id--7 .field_field_texte .colone-picto p:nth-of-type(1) {
grid-row: 3; grid-row: 3;
grid-column: 1/span 2; grid-column: 1/span 2;
padding-left: 1rem;
} }
#home article.node-type-static #paragraph-id--7 .field_field_texte .colone-picto p:nth-of-type(2) { #home article.node-type-static #paragraph-id--7 .field_field_texte .colone-picto p:nth-of-type(2) {
display: block;
grid-row: 1; grid-row: 1;
height: fit-content;
padding-top: 0%;
} }
@media (max-width: 700px) { @media (max-width: 700px) {
#home article.node-type-static #paragraph-id--7 .field_field_texte .colone-picto p:nth-of-type(2) { #home article.node-type-static #paragraph-id--7 .field_field_texte .colone-picto p:nth-of-type(2) {
grid-row: 7; grid-row: 7;
grid-column: 1/span 2; grid-column: 1/span 2;
padding: 1rem;
top: -60px;
position: relative;
} }
} }
#home article.node-type-static #paragraph-id--7 .field_field_texte .colone-picto p:nth-of-type(3) { #home article.node-type-static #paragraph-id--7 .field_field_texte .colone-picto p:nth-of-type(3) {
@ -1777,6 +1890,9 @@ header #block-quartiers-de-demain-logoquartiersdedemain .field_field_logo .qdd-h
#home article.node-type-static #paragraph-id--7 .field_field_texte .colone-picto p:nth-of-type(3) { #home article.node-type-static #paragraph-id--7 .field_field_texte .colone-picto p:nth-of-type(3) {
grid-row: 9; grid-row: 9;
grid-column: 1/span 2; grid-column: 1/span 2;
padding-left: 1rem;
top: -80px;
position: relative;
} }
} }
#home .paragraph--type--static-parts:not(#paragraph-id--7) #svg1 { #home .paragraph--type--static-parts:not(#paragraph-id--7) #svg1 {
@ -1799,7 +1915,6 @@ header #block-quartiers-de-demain-logoquartiersdedemain .field_field_logo .qdd-h
text-transform: none; text-transform: none;
color: black; color: black;
font-size: 2rem; font-size: 2rem;
font-weight: 500;
} }
#consultation .layout-content .content_container .node-type-static { #consultation .layout-content .content_container .node-type-static {
width: 80%; width: 80%;
@ -1811,6 +1926,9 @@ header #block-quartiers-de-demain-logoquartiersdedemain .field_field_logo .qdd-h
width: 80%; width: 80%;
margin: auto; margin: auto;
} }
#consultation .layout-content .content_container .node-type-static .field_field_title {
font-family: "gilroy-semibold";
}
#consultation .layout-content .content_container .node-type-static .paragraph--type--static-parts:not(#paragraph-id--7) #svg1 { #consultation .layout-content .content_container .node-type-static .paragraph--type--static-parts:not(#paragraph-id--7) #svg1 {
display: none; display: none;
} }
@ -1823,7 +1941,6 @@ header #block-quartiers-de-demain-logoquartiersdedemain .field_field_logo .qdd-h
padding: 1rem; padding: 1rem;
color: rgb(7, 50, 194); color: rgb(7, 50, 194);
font-size: 2.5rem; font-size: 2.5rem;
font-weight: 500;
} }
@media (max-width: 500px) { @media (max-width: 500px) {
#consultation .layout-content .content_container .node-type-static #paragraph-id--10 .field_field_title { #consultation .layout-content .content_container .node-type-static #paragraph-id--10 .field_field_title {
@ -1853,7 +1970,7 @@ header #block-quartiers-de-demain-logoquartiersdedemain .field_field_logo .qdd-h
content: ""; content: "";
display: block; display: block;
border-left: solid 1px rgb(7, 50, 194); border-left: solid 1px rgb(7, 50, 194);
height: 30%; height: 20%;
margin-bottom: 0.5rem; margin-bottom: 0.5rem;
} }
@media (max-width: 500px) { @media (max-width: 500px) {
@ -1865,6 +1982,7 @@ header #block-quartiers-de-demain-logoquartiersdedemain .field_field_logo .qdd-h
color: black; color: black;
width: 55%; width: 55%;
padding-top: 2rem; padding-top: 2rem;
margin-top: 2rem;
margin: auto; margin: auto;
} }
@media (max-width: 500px) { @media (max-width: 500px) {
@ -1873,7 +1991,7 @@ header #block-quartiers-de-demain-logoquartiersdedemain .field_field_logo .qdd-h
} }
} }
#consultation .layout-content .content_container .node-type-static #paragraph-id--11 { #consultation .layout-content .content_container .node-type-static #paragraph-id--11 {
width: 65%; width: 70%;
background-color: white; background-color: white;
margin: auto; margin: auto;
display: flex; display: flex;
@ -1890,7 +2008,6 @@ header #block-quartiers-de-demain-logoquartiersdedemain .field_field_logo .qdd-h
#consultation .layout-content .content_container .node-type-static #paragraph-id--11 .field_field_title { #consultation .layout-content .content_container .node-type-static #paragraph-id--11 .field_field_title {
color: rgb(7, 50, 194); color: rgb(7, 50, 194);
font-size: 1.2rem; font-size: 1.2rem;
font-weight: 500;
} }
@media (max-width: 500px) { @media (max-width: 500px) {
#consultation .layout-content .content_container .node-type-static #paragraph-id--11 .field_field_title { #consultation .layout-content .content_container .node-type-static #paragraph-id--11 .field_field_title {
@ -1903,28 +2020,27 @@ header #block-quartiers-de-demain-logoquartiersdedemain .field_field_logo .qdd-h
grid-template-rows: auto auto; grid-template-rows: auto auto;
padding: 1rem; padding: 1rem;
} }
@media (max-width: 500px) {
#consultation .layout-content .content_container .node-type-static #paragraph-id--11 .colone-picto {
padding-left: 0;
padding-right: 0;
}
}
#consultation .layout-content .content_container .node-type-static #paragraph-id--11 .colone-picto p { #consultation .layout-content .content_container .node-type-static #paragraph-id--11 .colone-picto p {
flex: 1 15%;
padding: 0rem; padding: 0rem;
margin: 0; margin: 0;
} }
#consultation .layout-content .content_container .node-type-static #paragraph-id--11 .colone-picto p:nth-of-type(1) { #consultation .layout-content .content_container .node-type-static #paragraph-id--11 .colone-picto p:nth-of-type(1) {
grid-column: 1; grid-column: 1;
grid-row: 2; grid-row: 2;
padding-right: 5rem;
}
@media (max-width: 500px) {
#consultation .layout-content .content_container .node-type-static #paragraph-id--11 .colone-picto p:nth-of-type(1) {
padding-right: 1rem;
}
} }
#consultation .layout-content .content_container .node-type-static #paragraph-id--11 .colone-picto p:nth-of-type(2) { #consultation .layout-content .content_container .node-type-static #paragraph-id--11 .colone-picto p:nth-of-type(2) {
grid-column: 2; grid-column: 2;
grid-row: 2; grid-row: 2;
} }
#consultation .layout-content .content_container .node-type-static #paragraph-id--11 .colone-picto h5 { #consultation .layout-content .content_container .node-type-static #paragraph-id--11 .colone-picto h5 {
font-size: 3rem; font-size: 3.5rem;
font-weight: 500; font-family: "gilroy-semibold";
color: rgb(7, 50, 194); color: rgb(7, 50, 194);
margin: 0; margin: 0;
height: fit-content; height: fit-content;
@ -1957,7 +2073,7 @@ header #block-quartiers-de-demain-logoquartiersdedemain .field_field_logo .qdd-h
color: rgb(7, 50, 194); color: rgb(7, 50, 194);
font-size: 1.2rem; font-size: 1.2rem;
font-weight: 500; font-weight: 500;
padding-bottom: 1.5rem; padding-bottom: 1rem;
} }
@media (max-width: 500px) { @media (max-width: 500px) {
#consultation .layout-content .content_container .node-type-static #paragraph-id--12 .field_field_title, #consultation .layout-content .content_container .node-type-static #paragraph-id--12 .field_field_title,
@ -1965,6 +2081,9 @@ header #block-quartiers-de-demain-logoquartiersdedemain .field_field_logo .qdd-h
padding-bottom: 0.8rem; padding-bottom: 0.8rem;
} }
} }
#consultation .layout-content .content_container .node-type-static #paragraph-id--12 .field_field_texte {
width: 80%;
}
#consultation .layout-content .content_container .node-type-static #paragraph-id--12::after { #consultation .layout-content .content_container .node-type-static #paragraph-id--12::after {
content: ""; content: "";
display: block; display: block;
@ -2054,7 +2173,7 @@ header #block-quartiers-de-demain-logoquartiersdedemain .field_field_logo .qdd-h
grid-column: 3/span 4; grid-column: 3/span 4;
grid-row: 1; grid-row: 1;
font-weight: 500; font-weight: 500;
font-size: 0.6rem; font-size: 0.8rem;
margin-left: 1rem; margin-left: 1rem;
} }
@media (max-width: 810px) { @media (max-width: 810px) {

6
web/themes/custom/quartiers_de_demain/dist/assets/img/date-actu.svg vendored
View File

@ -4,8 +4,8 @@
<svg <svg
version="1.1" version="1.1"
id="svg1" id="svg1"
width="22" width="30"
height="22" height="30"
viewBox="0 0 31.925354 31.926757" viewBox="0 0 31.925354 31.926757"
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">
@ -26,7 +26,7 @@
<path <path
id="path412" id="path412"
d="m 0,0 c 0,6.372 5.166,11.538 11.538,11.538 6.371,0 11.537,-5.166 11.537,-11.538 0,-6.372 -5.166,-11.538 -11.537,-11.538 C 5.166,-11.538 0,-6.372 0,0 Z m 11.114,0.606 c 0.281,0.281 0.736,0.281 1.017,0 0.281,-0.28 0.281,-0.735 0,-1.016 -0.281,-0.28 -0.736,-0.28 -1.017,0 -0.28,0.281 -0.28,0.736 0,1.016 z m 0.424,-0.521 6.218,6.219 m -6.218,-6.219 4.945,-4.946" d="m 0,0 c 0,6.372 5.166,11.538 11.538,11.538 6.371,0 11.537,-5.166 11.537,-11.538 0,-6.372 -5.166,-11.538 -11.537,-11.538 C 5.166,-11.538 0,-6.372 0,0 Z m 11.114,0.606 c 0.281,0.281 0.736,0.281 1.017,0 0.281,-0.28 0.281,-0.735 0,-1.016 -0.281,-0.28 -0.736,-0.28 -1.017,0 -0.28,0.281 -0.28,0.736 0,1.016 z m 0.424,-0.521 6.218,6.219 m -6.218,-6.219 4.945,-4.946"
style="fill:none;stroke:#f7002b;stroke-width:0.869;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;stroke-dasharray:none;stroke-opacity:1" style="fill:none;stroke:#f7002b;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;stroke-dasharray:none;stroke-opacity:1"
transform="matrix(1.3333333,0,0,-1.3333333,881.07533,11164.68)" transform="matrix(1.3333333,0,0,-1.3333333,881.07533,11164.68)"
clip-path="url(#clipPath413)" /> clip-path="url(#clipPath413)" />
</g> </g>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.3 KiB

After

Width:  |  Height:  |  Size: 1.3 KiB

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="55" width="75"
height="55" height="75"
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="55" width="75"
height="55" height="75"
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

6
web/themes/custom/quartiers_de_demain/dist/assets/img/type-actu.svg vendored
View File

@ -4,8 +4,8 @@
<svg <svg
version="1.1" version="1.1"
id="svg1" id="svg1"
width="22" width="30"
height="22" height="30"
viewBox="0 0 33.440002 38.374023" viewBox="0 0 33.440002 38.374023"
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">
@ -26,7 +26,7 @@
<path <path
id="path410" id="path410"
d="M 0,0 V 2.406 L 9.495,12.03 11.868,9.624 2.374,0 Z M 7.121,9.624 9.495,7.218 M 7.596,13.474 V 23.82 c 0,0.665 -0.532,1.203 -1.187,1.203 H 3.086 m -10.682,0 h -3.56 c -0.656,0 -1.187,-0.538 -1.187,-1.203 V 1.203 C -12.343,0.539 -11.812,0 -11.156,0 h 8.308 m 3.797,26.948 h -1.986 c -0.196,0.559 -0.717,0.963 -1.337,0.963 -0.619,0 -1.14,-0.404 -1.337,-0.963 h -1.986 c -1.048,0 -1.899,-0.862 -1.899,-1.925 V 24.061 H 2.848 v 0.962 c 0,1.063 -0.85,1.925 -1.899,1.925 z" d="M 0,0 V 2.406 L 9.495,12.03 11.868,9.624 2.374,0 Z M 7.121,9.624 9.495,7.218 M 7.596,13.474 V 23.82 c 0,0.665 -0.532,1.203 -1.187,1.203 H 3.086 m -10.682,0 h -3.56 c -0.656,0 -1.187,-0.538 -1.187,-1.203 V 1.203 C -12.343,0.539 -11.812,0 -11.156,0 h 8.308 m 3.797,26.948 h -1.986 c -0.196,0.559 -0.717,0.963 -1.337,0.963 -0.619,0 -1.14,-0.404 -1.337,-0.963 h -1.986 c -1.048,0 -1.899,-0.862 -1.899,-1.925 V 24.061 H 2.848 v 0.962 c 0,1.063 -0.85,1.925 -1.899,1.925 z"
style="fill:none;stroke:#f7002b;stroke-width:0.869;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;stroke-dasharray:none;stroke-opacity:1" style="fill:none;stroke:#f7002b;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;stroke-dasharray:none;stroke-opacity:1"
transform="matrix(1.3333333,0,0,-1.3333333,897.53253,11134.014)" transform="matrix(1.3333333,0,0,-1.3333333,897.53253,11134.014)"
clip-path="url(#clipPath411)" /> clip-path="url(#clipPath411)" />
</g> </g>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.4 KiB

After

Width:  |  Height:  |  Size: 1.4 KiB

29
web/themes/custom/quartiers_de_demain/src/assets/scss/global/_fonts.scss
View File

@ -6,8 +6,8 @@
@font-face { @font-face {
font-family: 'gilroy-semiboldita'; font-family: 'gilroy-semiboldita';
src: url('./theme/custom/quartiers_de_demain/dist/assets/fonts/Gilroy/gilroy-semibolditalic-webfont.woff2') format('woff2'), src: url('../fonts/Gilroy/gilroy-semibolditalic-webfont.woff2') format('woff2'),
url('./theme/custom/quartiers_de_demain/dist/assets/fonts/Gilroy/gilroy-semibolditalic-webfont.woff') format('woff'); url('../fonts/Gilroy/gilroy-semibolditalic-webfont.woff') format('woff');
font-weight: normal; font-weight: normal;
font-style: normal; font-style: normal;
@ -18,8 +18,8 @@
@font-face { @font-face {
font-family: 'gilroy-semibold'; font-family: 'gilroy-semibold';
src: url('./theme/custom/quartiers_de_demain/dist/assets/fonts/Gilroy/gilroy-semibold-webfont.woff2') format('woff2'), src: url('../fonts/Gilroy/gilroy-semibold-webfont.woff2') format('woff2'),
url('./theme/custom/quartiers_de_demain/dist/assets/fonts/Gilroy/gilroy-semibold-webfont.woff') format('woff'); url('../fonts/Gilroy/gilroy-semibold-webfont.woff') format('woff');
font-weight: normal; font-weight: normal;
font-style: normal; font-style: normal;
@ -30,8 +30,8 @@
@font-face { @font-face {
font-family: 'gilroy-regularita'; font-family: 'gilroy-regularita';
src: url('./theme/custom/quartiers_de_demain/dist/assets/fonts/Gilroy/gilroy-regularitalic-webfont.woff2') format('woff2'), src: url('../fonts/Gilroy/gilroy-regularitalic-webfont.woff2') format('woff2'),
url('./theme/custom/quartiers_de_demain/dist/assets/fonts/Gilroy/gilroy-regularitalic-webfont.woff') format('woff'); url('../fonts/Gilroy/gilroy-regularitalic-webfont.woff') format('woff');
font-weight: normal; font-weight: normal;
font-style: normal; font-style: normal;
@ -42,8 +42,8 @@
@font-face { @font-face {
font-family: 'gilroy-regular'; font-family: 'gilroy-regular';
src: url('./theme/custom/quartiers_de_demain/dist/assets/fonts/Gilroy/gilroy-regular-webfont.woff2') format('woff2'), src: url('../fonts/Gilroy/gilroy-regular-webfont.woff2') format('woff2'),
url('./theme/custom/quartiers_de_demain/dist/assets/fonts/Gilroy/gilroy-regular-webfont.woff') format('woff'); url('../fonts/Gilroy/gilroy-regular-webfont.woff') format('woff');
font-weight: normal; font-weight: normal;
font-style: normal; font-style: normal;
@ -51,23 +51,20 @@
@font-face { @font-face {
font-family: 'gilroy-bolditalic'; font-family: 'gilroy-bolditalic';
src: url('./theme/custom/quartiers_de_demain/dist/assets/fonts/Gilroy/gilroy-bolditalic-webfont.woff2') format('woff2'), src: url('../fonts/Gilroy/gilroy-bolditalic-webfont.woff2') format('woff2'),
url('./theme/custom/quartiers_de_demain/dist/assets/fonts/Gilroy/gilroy-bolditalic-webfont.woff') format('woff'); url('../fonts/Gilroy/gilroy-bolditalic-webfont.woff') format('woff');
font-weight: normal; font-weight: normal;
font-style: normal; font-style: normal;
} }
@font-face { @font-face {
font-family: 'gilroy-bold'; font-family: 'gilroy-bold';
src: url('../fonts/Gilroy/gilroy-bold-webfont.woff2') format('woff2'), src: url('../fonts/Gilroy/gilroy-bold-webfont.woff2') format('woff2'),
url('./theme/custom/quartiers_de_demain/dist/assets/fonts/Gilroy/gilroy-bold-webfont.woff') format('woff'); url('../fonts/Gilroy/gilroy-bold-webfont.woff') format('woff');
font-weight: normal; font-weight: normal;
font-style: normal; font-style: normal;
@ -76,8 +73,8 @@
@font-face { @font-face {
font-family: 'gilroy-mediumital'; font-family: 'gilroy-mediumital';
src: url('./theme/custom/quartiers_de_demain/dist/assets/fonts/Gilroy/gilroy-mediumitalic-webfont.woff2') format('woff2'), src: url('../fonts/Gilroy/gilroy-mediumitalic-webfont.woff2') format('woff2'),
url('./theme/custom/quartiers_de_demain/dist/assets/fonts/Gilroy/gilroy-mediumitalic-webfont.woff') format('woff'); url('../fonts/Gilroy/gilroy-mediumitalic-webfont.woff') format('woff');
font-weight: normal; font-weight: normal;
font-style: normal; font-style: normal;

9
web/themes/custom/quartiers_de_demain/src/assets/scss/global/variables/_typography.scss
View File

@ -8,7 +8,7 @@ $font-extra: 2.3rem;
$font-large: 1.6rem; $font-large: 1.6rem;
$font-big: 1.2rem; $font-big: 1.2rem;
$font-medium: .8rem; $font-medium: .8rem;
$font-normal: .6rem; $font-normal: .8rem;
$font-small: .45rem; $font-small: .45rem;
@ -19,3 +19,10 @@ p{
h3{ h3{
font-size: $font-big; font-size: $font-big;
} }
h1{
font-family: 'gilroy-bold';
}
h2{
font-family: 'gilroy-semibold';
}

35
web/themes/custom/quartiers_de_demain/src/assets/scss/pages/consultation.scss
View File

@ -8,6 +8,7 @@
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
#block-quartiers-de-demain-titredepage{ #block-quartiers-de-demain-titredepage{
margin-top: 1rem; margin-top: 1rem;
width: fit-content; width: fit-content;
@ -15,7 +16,6 @@
text-transform: none; text-transform: none;
color: black; color: black;
font-size: 2rem; font-size: 2rem;
font-weight: 500;
} }
@ -29,7 +29,9 @@
width: 80% ; width: 80% ;
margin: auto; margin: auto;
} }
.field_field_title{
font-family: 'gilroy-semibold';
}
width: 80%; width: 80%;
.paragraph--type--static-parts:not(#paragraph-id--7){ .paragraph--type--static-parts:not(#paragraph-id--7){
#svg1{ #svg1{
@ -44,7 +46,6 @@
padding: 1rem; padding: 1rem;
color: $blue_QDD; color: $blue_QDD;
font-size: 2.5rem; font-size: 2.5rem;
font-weight: 500;
@media(max-width: 500px){ @media(max-width: 500px){
font-size: 2.2rem; font-size: 2.2rem;
padding: 0rem; padding: 0rem;
@ -69,7 +70,7 @@
content:""; content:"";
display: block; display: block;
border-left: solid 1px $blue_QDD; border-left: solid 1px $blue_QDD;
height: 30%; height: 20%;
margin-bottom: 0.5rem; margin-bottom: 0.5rem;
@media(max-width: 500px){ @media(max-width: 500px){
height: 15%; height: 15%;
@ -82,6 +83,7 @@
// flex: 1 80%; // flex: 1 80%;
width: 55%; width: 55%;
padding-top: 2rem; padding-top: 2rem;
margin-top: 2rem;
margin: auto; margin: auto;
@media(max-width: 500px){ @media(max-width: 500px){
width: 80%; width: 80%;
@ -91,7 +93,7 @@
} }
} }
#paragraph-id--11{ #paragraph-id--11{
width: 65%; width: 70%;
background-color: white; background-color: white;
margin: auto; margin: auto;
display: flex; display: flex;
@ -105,7 +107,6 @@
.field_field_title{ .field_field_title{
color: $blue_QDD; color: $blue_QDD;
font-size: 1.2rem; font-size: 1.2rem;
font-weight: 500;
@media(max-width: 500px){ @media(max-width: 500px){
width: 80%; width: 80%;
} }
@ -115,18 +116,18 @@
grid-template-columns: auto auto; grid-template-columns: auto auto;
grid-template-rows: auto auto; grid-template-rows: auto auto;
padding: 1rem; padding: 1rem;
@media(max-width: 500px){
padding-left: 0;
padding-right: 0;
}
p{ p{
flex: 1 15%;
padding: 0rem; padding: 0rem;
margin: 0; margin: 0;
&:nth-of-type(1){ &:nth-of-type(1){
grid-column: 1; grid-column: 1;
grid-row: 2; grid-row: 2;
padding-right: 5rem;
@media(max-width: 500px){
padding-right: 1rem;
}
} }
&:nth-of-type(2){ &:nth-of-type(2){
grid-column: 2; grid-column: 2;
@ -135,8 +136,8 @@
} }
h5{ h5{
font-size: 3rem; font-size: 3.5rem;
font-weight: 500; font-family: 'gilroy-semibold';
color: $blue_QDD; color: $blue_QDD;
margin: 0; margin: 0;
height: fit-content; height: fit-content;
@ -167,14 +168,18 @@
color: $blue_QDD; color: $blue_QDD;
font-size: 1.2rem; font-size: 1.2rem;
font-weight: 500; font-weight: 500;
padding-bottom: 1.5rem; padding-bottom: 1rem;
@media(max-width: 500px){ @media(max-width: 500px){
padding-bottom: 0.8rem; padding-bottom: 0.8rem;
} }
} }
} }
#paragraph-id--12{
.field_field_texte{
width: 80%;
}
}
#paragraph-id--12::after{ #paragraph-id--12::after{
content:""; content:"";
display: block; display: block;

163
web/themes/custom/quartiers_de_demain/src/assets/scss/pages/home.scss
View File

@ -5,7 +5,7 @@
} }
} }
.paragraph--type--static-parts{ .paragraph--type--static-parts{
padding-top: 2rem; padding-top: 4rem;
padding-bottom: 2rem; padding-bottom: 2rem;
} }
article.node-type-static{ article.node-type-static{
@ -15,6 +15,9 @@
display: flex; display: flex;
flex-direction: row; flex-direction: row;
flex-wrap: wrap ; flex-wrap: wrap ;
@media(max-width: 1090px){
flex-direction: column;
}
> p:nth-child(1){ > p:nth-child(1){
margin-bottom: 0; margin-bottom: 0;
flex: 1 100%; flex: 1 100%;
@ -38,21 +41,30 @@
padding-left: 0 ; padding-left: 0 ;
} }
} }
> p:nth-child(3){
@media(max-width: 1090px){
padding-top: 0 ;
margin-top: 0;
}
}
} }
.field_field_title{ .field_field_title{
width: fit-content; width: fit-content;
margin: auto; margin: auto;
font-size: 2rem; font-size: 2rem;
font-weight: 800; font-family: 'gilroy-bold';
padding-bottom: 1rem; padding-bottom: 1rem;
} }
#paragraph-id--1{ ///// Les enjeux #paragraph-id--1{ ///// Les enjeux
background-color: #edefe8; background-color: #edefe8;
.field_field_title{
font-family: 'gilroy-bold';
}
.field_field_picto{ .field_field_picto{
display: none; display: none;
} }
.field_field_texte{ .field_field_texte{
width: 50%; width: 65%;
margin: auto; margin: auto;
@media(max-width: 1090px){ @media(max-width: 1090px){
width: 80%; width: 80%;
@ -62,22 +74,24 @@
flex-direction: row; flex-direction: row;
flex-wrap: wrap; flex-wrap: wrap;
justify-content: flex-start; justify-content: flex-start;
padding-left: 6rem;
@media(max-width: 1090px){
padding-left: 1.5rem;
}
h3{ h3{
flex: 1 100%; flex: 0 80%;
color: #0833c2ff; color: #0833c2ff;
// width: 80%;
// padding-right: 3rem;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
font-size: 1rem;
&:nth-of-type(2){ &:nth-of-type(2){
padding-top: 3rem; padding-top: 3rem;
border-top: solid 1px #0833c2ff; border-top: solid 1px #0833c2ff;
} }
} }
p{ p{
padding-right: 2rem; padding-right: 1rem;
padding-bottom: 1rem; padding-bottom: 1rem;
flex: 1 30%; flex: 1 30%;
max-width: 30%; max-width: 30%;
@ -91,11 +105,11 @@
} }
&:nth-of-type(1)::before{ &:nth-of-type(1)::before{
background-image: url("../img/fanion.svg"); background-image: url("../img/fanion.svg");
background-size: 60px 80px; background-size: 90px 100px;
background-repeat: no-repeat; background-repeat: no-repeat;
display: inline-block; display: inline-block;
width: 80px; width: 100px;
height: 80px; height: 100px;
content: ""; content: "";
padding-bottom: 1rem; padding-bottom: 1rem;
@media(max-width: 500px){ @media(max-width: 500px){
@ -106,11 +120,11 @@
} }
&:nth-of-type(2)::before{ &:nth-of-type(2)::before{
background-image: url("../img/pouce.svg"); background-image: url("../img/pouce.svg");
background-size: 60px 80px; background-size: 90px 100px;
background-repeat: no-repeat; background-repeat: no-repeat;
display: inline-block; display: inline-block;
width: 80px; width: 100px;
height: 80px; height: 100px;
content: ""; content: "";
padding-bottom: 1rem; padding-bottom: 1rem;
@media(max-width: 500px){ @media(max-width: 500px){
@ -121,11 +135,11 @@
} }
&:nth-of-type(3)::before{ &:nth-of-type(3)::before{
background-image: url("../img/planete.svg"); background-image: url("../img/planete.svg");
background-size: 60px 80px; background-size: 90px 100px;
background-repeat: no-repeat; background-repeat: no-repeat;
display: inline-block; display: inline-block;
width: 80px; width: 100px;
height: 80px; height: 100px;
content: ""; content: "";
padding-bottom: 1rem; padding-bottom: 1rem;
@media(max-width: 500px){ @media(max-width: 500px){
@ -137,11 +151,11 @@
} }
&:nth-of-type(4)::before{ &:nth-of-type(4)::before{
background-image: url("../img/puzzle.svg"); background-image: url("../img/puzzle.svg");
background-size: 60px 80px; background-size: 90px 100px;
background-repeat: no-repeat; background-repeat: no-repeat;
display: inline-block; display: inline-block;
width: 80px; width: 100px;
height: 80px; height: 100px;
content: ""; content: "";
padding-bottom: 1rem; padding-bottom: 1rem;
@media(max-width: 500px){ @media(max-width: 500px){
@ -152,11 +166,11 @@
} }
&:nth-of-type(5)::before{ &:nth-of-type(5)::before{
background-image: url("../img/cube.svg"); background-image: url("../img/cube.svg");
background-size: 70px 80px; background-size: 100px 100px;
background-repeat: no-repeat; background-repeat: no-repeat;
display: inline-block; display: inline-block;
width: 80px; width: 100px;
height: 80px; height: 100px;
content: ""; content: "";
padding-bottom: 1rem; padding-bottom: 1rem;
@media(max-width: 500px){ @media(max-width: 500px){
@ -167,11 +181,11 @@
} }
&:nth-of-type(6)::before{ &:nth-of-type(6)::before{
background-image: url("../img/ampoule.svg"); background-image: url("../img/ampoule.svg");
background-size: 60px 80px; background-size: 90px 100px;
background-repeat: no-repeat; background-repeat: no-repeat;
display: inline-block; display: inline-block;
width: 80px; width: 100px;
height: 80px; height: 100px;
content: ""; content: "";
padding-bottom: 1rem; padding-bottom: 1rem;
@media(max-width: 500px){ @media(max-width: 500px){
@ -182,11 +196,11 @@
} }
&:nth-of-type(7)::before{ &:nth-of-type(7)::before{
background-image: url("../img/bonhome.svg"); background-image: url("../img/bonhome.svg");
background-size: 60px 80px; background-size: 90px 100px;
background-repeat: no-repeat; background-repeat: no-repeat;
display: inline-block; display: inline-block;
width: 80px; width: 100px;
height: 80px; height: 100px;
content: ""; content: "";
padding-bottom: 1rem; padding-bottom: 1rem;
@media(max-width: 500px){ @media(max-width: 500px){
@ -197,11 +211,11 @@
} }
&:nth-of-type(8)::before{ &:nth-of-type(8)::before{
background-image: url("../img/feuilles.svg"); background-image: url("../img/feuilles.svg");
background-size: 60px 80px; background-size: 90px 100px;
background-repeat: no-repeat; background-repeat: no-repeat;
display: inline-block; display: inline-block;
width: 80px; width: 100px;
height: 80px; height: 100px;
content: ""; content: "";
padding-bottom: 1rem; padding-bottom: 1rem;
@media(max-width: 500px){ @media(max-width: 500px){
@ -212,11 +226,11 @@
} }
&:nth-of-type(9)::before{ &:nth-of-type(9)::before{
background-image: url("../img/calendrier.svg"); background-image: url("../img/calendrier.svg");
background-size: 60px 80px; background-size: 90px 100px;
background-repeat: no-repeat; background-repeat: no-repeat;
display: inline-block; display: inline-block;
width: 80px; width: 100px;
height: 80px; height: 100px;
content: ""; content: "";
padding-bottom: 1rem; padding-bottom: 1rem;
@media(max-width: 500px){ @media(max-width: 500px){
@ -227,11 +241,11 @@
} }
&:nth-of-type(10)::before{ &:nth-of-type(10)::before{
background-image: url("../img/crayons.svg"); background-image: url("../img/crayons.svg");
background-size: 48px 80px; background-size: 60px 100px;
background-repeat: no-repeat; background-repeat: no-repeat;
display: inline-block; display: inline-block;
width: 80px; width: 100px;
height: 80px; height: 100px;
content: ""; content: "";
padding-bottom: 1rem; padding-bottom: 1rem;
@media(max-width: 500px){ @media(max-width: 500px){
@ -245,38 +259,50 @@
} }
} }
#paragraph-id--6{ /////// quartier 2030 #paragraph-id--6{ /////// quartier 2030
display: flex; display: flex;
flex-direction: column; flex-direction: column;
margin: auto; margin: auto;
align-items: center; align-items: center;
width: 70%;
padding-bottom: 2rem; padding-bottom: 2rem;
@media(max-width: 500px){ @media(max-width: 500px){
width: 90%; width: 90%;
text-align: center; text-align: center;
} }
.field_field_title{
padding-top: 4rem;
padding-bottom: 2rem;
@media(max-width: 500px){
padding-top: 0;
}
}
.field_field_texte{ .field_field_texte{
width: 50%;
margin: auto; margin: auto;
@media(max-width: 500px){
width: 90%;
}
.colone-picto{ .colone-picto{
display: flex; display: flex;
flex-direction: column; flex-direction: column;
> p:nth-of-type(1){ > p:nth-of-type(1){
color: #0833c2ff; color: #0833c2ff;
font-size: 1.5rem; font-size: 1rem;
font-weight: 800 font-weight: 800
} }
> p:nth-of-type(2){ > p:nth-of-type(2){
width: 60%; width: 60%;
font-size: 1.2rem; font-size: 0.8rem;
align-self: center; align-self: center;
padding-top: 1.5rem;
@media(max-width: 500px){ @media(max-width: 500px){
width: 80%; width: 80%;
padding-top: 0;
} }
} }
> p:nth-of-type(3){ > p:nth-of-type(3){
width: 80%; width: 90%;
align-self: center; align-self: center;
margin-top: 0 ; margin-top: 0 ;
img{ img{
@ -287,6 +313,7 @@
} }
} }
} }
#paragraph-id--7{ ///////// les piliers #paragraph-id--7{ ///////// les piliers
background-color: #0833c2ff; background-color: #0833c2ff;
display: flex; display: flex;
@ -296,21 +323,27 @@
padding-bottom: 2rem; padding-bottom: 2rem;
color: white; color: white;
.field_field_title{ .field_field_title{
width: 50%; width: 48%;
text-transform: lowercase; text-transform: lowercase;
padding-top: 3rem; padding-top: 3rem;
text-align: center; text-align: center;
font-size: 1.8rem;
@media(max-width: 550px){ @media(max-width: 550px){
width: 90%; width: 90%;
} }
} }
.field_field_texte{ .field_field_texte{
width: 80%; width: 80%;
@media(max-width: 700px){
position: relative;
top: -80px;
}
.colone-picto{ .colone-picto{
margin-top: 2rem; margin-top: 2rem;
padding-left: 4rem;
display: grid; display: grid;
grid-template-columns: repeat(6 auto); grid-template-columns: repeat(6 auto);
grid-template-rows: repeat(3 1fr); grid-template-rows: repeat(3 auto);
@media(max-width: 700px){ @media(max-width: 700px){
grid-template-rows: repeat(10 auto); grid-template-rows: repeat(10 auto);
grid-template-columns: repeat(2 1fr); grid-template-columns: repeat(2 1fr);
@ -325,6 +358,7 @@
h5:nth-of-type(1){ h5:nth-of-type(1){
grid-row: 2; grid-row: 2;
grid-column: 1; grid-column: 1;
padding-left: 1rem;
} }
h5:nth-of-type(2){ h5:nth-of-type(2){
@ -334,6 +368,8 @@
grid-row: 4; grid-row: 4;
grid-column: 2; grid-column: 2;
margin: auto; margin: auto;
top: -50px;
position: relative;
} }
} }
h5:nth-of-type(3){ h5:nth-of-type(3){
@ -342,50 +378,76 @@
@media(max-width: 700px){ @media(max-width: 700px){
grid-row: 8; grid-row: 8;
grid-column: 1; grid-column: 1;
padding-left: 1rem;
} }
} }
p{ p{
font-size: 1rem; font-size: 0.8rem;
font-weight: 400; font-weight: 400;
margin: 0; margin: 0;
&:not(:last-of-type){ &:not(:last-of-type){
padding-right: 2rem; padding-right: 2rem;
} }
@media(max-width: 700px){
font-size: 1.2rem;
}
} }
svg:nth-of-type(1){ svg:nth-of-type(1){
grid-row: 1 /span 2; grid-row: 1 /span 2;
grid-column: 1 /span 2; grid-column: 1 /span 2;
padding: 1rem;
@media(max-width: 700px){ @media(max-width: 700px){
width: 315px; width: 260px;
top: 50px;
position: relative;
} }
} }
svg:nth-of-type(2){ svg:nth-of-type(2){
grid-row: 3; grid-row: 3;
grid-column: inherit; grid-column: inherit;
padding: 1rem;
padding-left: 0;
@media(max-width: 700px){ @media(max-width: 700px){
grid-row: 4; grid-row: 4;
grid-column: 1 /span 2 ; grid-column: 1 /span 2 ;
width: 315px; width: 260px;
padding-left: 1rem;
} }
} }
svg:nth-of-type(3){ svg:nth-of-type(3){
grid-row: 1 /span 2; grid-row: 1 /span 2;
grid-column: 5 /span 6; grid-column: 5 /span 6;
padding: 1rem;
padding-left: 0;
position: relative;
left: -0.5rem;
@media(max-width: 700px){ @media(max-width: 700px){
grid-row: 8 ; grid-row: 8 ;
grid-column: 1 /span 2; grid-column: 1 /span 2;
width: 315px; width: 260px;
top: -50px;
left: 0rem;
padding-left: 1rem;
position: relative;
} }
} }
p:nth-of-type(1){ p:nth-of-type(1){
grid-row: 3; grid-row: 3;
grid-column: 1 /span 2; grid-column: 1 /span 2;
padding-left: 1rem;
} }
p:nth-of-type(2){ p:nth-of-type(2){
display: block;
grid-row: 1; grid-row: 1;
height: fit-content;
padding-top: 0%;
@media(max-width: 700px){ @media(max-width: 700px){
grid-row: 7; grid-row: 7;
grid-column: 1 /span 2; grid-column: 1 /span 2;
padding: 1rem;
top: -60px;
position: relative;
} }
} }
p:nth-of-type(3){ p:nth-of-type(3){
@ -394,6 +456,9 @@
@media(max-width: 700px){ @media(max-width: 700px){
grid-row: 9; grid-row: 9;
grid-column: 1 /span 2; grid-column: 1 /span 2;
padding-left: 1rem;
top: -80px;
position: relative;
} }
} }
} }

59
web/themes/custom/quartiers_de_demain/src/assets/scss/partials/actu-caroussel-home.scss
View File

@ -5,11 +5,11 @@
padding-bottom: 3rem; padding-bottom: 3rem;
h2{ h2{
width: fit-content; width: fit-content;
padding-bottom: 0.4rem; padding-bottom: 1.5rem;
margin-top: 3rem; margin-top: 4rem;
margin-bottom: 3rem; margin-bottom: 3rem;
font-size: 1.7rem; font-size: 1.7rem;
font-weight: bold; font-family: 'gilroy-semibold';
} }
.content-actus{ .content-actus{
.view{ .view{
@ -20,8 +20,9 @@
} }
.views-row{ .views-row{
width: 500px !important; width: 650px !important;
padding: 2rem; padding: 1rem;
@media(max-width: 550px){ @media(max-width: 550px){
width: 296px !important; width: 296px !important;
} }
@ -29,19 +30,43 @@
display: flex; display: flex;
flex-direction: column; flex-direction: column;
.field_field_images{ .field_field_images{
background-color: black;
-moz-border-radius: 9px; /* pour Mozilla */ -moz-border-radius: 9px; /* pour Mozilla */
-khtml-border-radius: 9px; /* pour Safari et Chrome */ -khtml-border-radius: 9px; /* pour Safari et Chrome */
-webkit-border-radius: 9px; /* pour Safari sur Mac */ -webkit-border-radius: 9px; /* pour Safari sur Mac */
border-radius: 9px; /* CSS3 */ border-radius: 9px; /* CSS3 */
height: 250px; height: 350px;
margin-bottom: 0.6rem; margin-bottom: 0.6rem;
@media(max-width: 550px){ @media(max-width: 550px){
height: 170px; height: 170px;
} }
div{
height: 100%;
div{
height: 100%;
a{
display: block;
height: 100%;
img{ img{
width: 100%; width: 100%;
height: fit-content; height: 100%;
max-height: 250px; 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 */
@media(max-width: 550px){
max-height: 170px;
}
}
}
}
}
img{
width: 100%;
height: 100%;
object-fit: cover; object-fit: cover;
-moz-border-radius: 9px; /* pour Mozilla */ -moz-border-radius: 9px; /* pour Mozilla */
-khtml-border-radius: 9px; /* pour Safari et Chrome */ -khtml-border-radius: 9px; /* pour Safari et Chrome */
@ -56,33 +81,38 @@
.field_field_type_d_actualite{ .field_field_type_d_actualite{
text-transform: uppercase; text-transform: uppercase;
color: red; color: red;
font-size: 0.6rem; font-size: 0.8rem;
font-weight: 600; font-family: 'gilroy-bold';
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
&::before{ &::before{
content: url('../img/type-actu.svg'); content: url('../img/type-actu.svg');
padding-right: 0.2rem; padding-right: 0.3rem;
padding-bottom: 0.2rem;
} }
} }
.field_field_date{ .field_field_date{
color: red; color: red;
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
font-size: 0.6rem; font-size: 0.8rem;
font-family: 'gilroy-bold';
&::before{ &::before{
content: url('../img/date-actu.svg'); content: url('../img/date-actu.svg');
padding-right: 0.2rem; padding-right: 0.3rem;
} }
} }
.field_title{ .field_title{
padding-top: 0.5rem;
h2{ h2{
margin: 0; margin: 0;
line-height: 0.4; line-height: 0.4;
padding-bottom: 0.8rem;
a{ a{
font-size: 0.8rem; font-size: 1rem;
color: $blue_QDD; color: $blue_QDD;
} }
} }
@ -93,6 +123,7 @@
transform: none !important; transform: none !important;
p{ p{
margin: 0; margin: 0;
font-size: 0.9rem ;
} }
} }
} }

12
web/themes/custom/quartiers_de_demain/src/assets/scss/partials/header.scss
View File

@ -223,15 +223,3 @@ header{
} }
} }
// /* Initial state of SVG */
// .qdd-animated{
// opacity: 1;
// transform: scale(0.5);
// transition: opacity 0.5s, transform 0.5s;
// }
// /* Animated state of SVG */
// .header:not(.header--collapsed .header--collapsed-already) .qdd-animated {
// opacity: 1;
// transform: scale(1);
// }

2
web/themes/custom/quartiers_de_demain/src/assets/scss/partials/slick-theme.scss
View File

@ -115,7 +115,7 @@ $slick-opacity-not-active: 0.25 !default;
.slick-prev { .slick-prev {
left: 46%; left: 46%;
@media(max-width:810px){ @media(max-width:810px){
left: 36%; left: 29%;
} }
[dir="rtl"] & { [dir="rtl"] & {
left: auto; left: auto;

14
web/themes/custom/quartiers_de_demain/src/assets/scss/partials/timeline.scss
View File

@ -16,9 +16,9 @@
h2{ h2{
width: fit-content; width: fit-content;
margin: auto; margin: auto;
padding-top: 3rem; padding-top: 4rem;
font-size: 1.7rem; font-size: 1.7rem;
font-weight: bold;
} }
} }
@ -112,9 +112,9 @@
margin: auto; margin: auto;
align-items: flex-start; align-items: flex-start;
padding-right: 1rem; padding-right: 1rem;
margin-bottom: 2rem; margin-bottom: 1rem;
.field_field_date_de_jour{ .field_field_date_de_jour{
font-size: 2rem; font-size: 2.5rem;
line-height: 0.3rem; line-height: 0.3rem;
@media(max-width:550px){ @media(max-width:550px){
font-size: 3rem; font-size: 3rem;
@ -124,7 +124,7 @@
.field_field_date_de_moi{ .field_field_date_de_moi{
padding-right: 0.2rem; padding-right: 0.2rem;
text-transform: uppercase; text-transform: uppercase;
font-size: 3rem; font-size: 4rem;
display: inline-flex; display: inline-flex;
@media(max-width:550px){ @media(max-width:550px){
font-size: 4rem; font-size: 4rem;
@ -186,7 +186,7 @@
// width: fit-content; // width: fit-content;
min-width: 65%; min-width: 65%;
.field_field_titre{ .field_field_titre{
font-size: 0.5rem; font-size: 0.6rem;
font-weight: 800; font-weight: 800;
@media(max-width:1090px){ @media(max-width:1090px){
font-size: 1rem; font-size: 1rem;
@ -194,7 +194,7 @@
} }
.field_field_description{ .field_field_description{
p{ p{
font-size: 0.5rem !important; font-size: 0.6rem !important;
margin: 0; margin: 0;
@media(max-width:1090px){ @media(max-width:1090px){
font-size: 1rem !important; font-size: 1rem !important;