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

Merge branch 'master' into prod

This commit is contained in:
Bachir Soussi Chiadmi 2024-03-06 10:40:56 +01:00
parent b670399107 35f8ada402
commit c568be7711
47 changed files with 1333 additions and 172 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

483
web/themes/custom/quartiers_de_demain/css/quartiers_de_demain.css
View File

@ -160,9 +160,16 @@ header {
position: relative; position: relative;
top: 0; top: 0;
border-bottom: 1px solid #808080; } border-bottom: 1px solid #808080; }
@media (max-width: 800px) { @media (max-width: 810px) {
header { header {
width: 800px; } } height: 110px; } }
@media (max-width: 660px) {
header {
height: 70px; } }
@media (max-width: 450px) {
header {
display: flex;
height: 50px; } }
header .contextual-region { header .contextual-region {
width: max-content; } width: max-content; }
header .header_left_container { header .header_left_container {
@ -171,19 +178,46 @@ header {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
border-right: 1px solid #808080; border-right: 1px solid #808080;
padding-left: 40px; } padding-left: 2%;
padding-right: 2%; }
@media (max-width: 660px) {
header .header_left_container {
height: inherit; } }
@media (max-width: 891px) {
header .header_left_container #block-quartiers-de-demain-logorepu-2 {
height: 110px; } }
header .header_left_container #block-quartiers-de-demain-logoepau-2 { header .header_left_container #block-quartiers-de-demain-logoepau-2 {
height: 150px; } height: 150px; }
@media (max-width: 891px) {
header .header_left_container #block-quartiers-de-demain-logoepau-2 {
height: 110px; } }
header .header_left_container #block-quartiers-de-demain-logoquartiersdedemain {
margin-left: auto; }
header .header_left_container img { header .header_left_container img {
width: auto; width: auto;
height: 150px; } height: 150px; }
@media (max-width: 891px) {
header .header_left_container img {
height: 110px; } }
@media (max-width: 660px) {
header .header_left_container img {
height: 70px; } }
@media (max-width: 450px) {
header .header_left_container img {
height: 50px; } }
header .header_right_container { header .header_right_container {
padding-right: 10px; } padding-right: 10px; }
@media (max-width: 660px) {
header .header_right_container {
padding-right: 0; } }
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.8rem; font-size: 0.8rem;
padding: 0; } padding: 0; }
@media (max-width: 660px) {
header .header_right_container .language-switcher-language-url ul {
margin-bottom: 0; } }
header .header_right_container .language-switcher-language-url ul li:nth-child(1)::after { header .header_right_container .language-switcher-language-url ul li:nth-child(1)::after {
content: "/"; } content: "/"; }
header .header_right_container .language-switcher-language-url ul .is-active { header .header_right_container .language-switcher-language-url ul .is-active {
@ -198,7 +232,8 @@ header {
background: #e8ebf4; background: #e8ebf4;
border-bottom: 1px solid #808080; border-bottom: 1px solid #808080;
border-top: 1px solid #808080; border-top: 1px solid #808080;
font-size: 1rem; } font-size: 1rem;
text-align: center; }
header .header_nav_container #block-quartiers-de-demain-entete { header .header_nav_container #block-quartiers-de-demain-entete {
grid-column: 1 /span 11; grid-column: 1 /span 11;
order: 2; order: 2;
@ -219,14 +254,23 @@ header {
background: black; background: black;
border-radius: 3px; border-radius: 3px;
z-index: 1; } z-index: 1; }
@media (max-width: 660px) {
header .open-block span, header .open-block.opened span {
width: 25px; } }
header .open-block { header .open-block {
height: 100%; height: 100%;
display: grid; display: grid;
align-items: center; align-items: center;
margin: auto; } margin: auto; }
@media (max-width: 450px) {
header .open-block {
height: 50px; } }
header .open-block span { header .open-block span {
margin-bottom: 13px; margin-bottom: 13px;
transform-origin: 4px 0px; } transform-origin: 4px 0px; }
@media (max-width: 660px) {
header .open-block span {
margin-bottom: 5px; } }
header .open-block.opened { header .open-block.opened {
margin: auto; } margin: auto; }
header .open-block.opened span { header .open-block.opened span {
@ -239,34 +283,78 @@ header {
header .open-block.opened > div > span:nth-child(3) { header .open-block.opened > div > span:nth-child(3) {
display: none; } display: none; }
footer span.totop {
display: inline-flex;
width: 100vw; }
footer span.totop #toTop {
margin: auto;
background-color: #fff;
border-top-left-radius: 10%;
border-top-right-radius: 10%;
padding-bottom: 0.5rem; }
footer span.totop #toTop .fa-arrow-up {
font-size: 1.7rem;
line-height: 2.5rem;
text-align: center;
width: 3rem;
height: 2rem;
display: inline-block;
text-align: top; }
footer span.totop #toTop .fa-arrow-up .fa {
color: #fff; }
.footer { .footer {
display: grid; display: grid;
grid-template-columns: repeat(12, 1fr); grid-template-columns: repeat(12, 1fr);
grid-template-rows: repeat(1, 1fr); grid-template-rows: repeat(1, 1fr);
background-color: white; background-color: white;
padding-top: 1rem; padding-top: 1rem;
padding-bottom: 1rem;
border-top: 1px solid #808080; } border-top: 1px solid #808080; }
.footer section { .footer section {
width: fit-content; } width: fit-content; }
.footer h2, .footer ul { .footer h2, .footer ul {
margin: 0; } margin: 0; }
@media (max-width: 891px) {
.footer {
display: flex;
flex-wrap: wrap;
justify-content: space-between; } }
@media (max-width: 600px) {
.footer {
flex-wrap: nowrap; } }
.footer #footer-left { .footer #footer-left {
grid-column: 1 /span 5; grid-column: 1 /span 5;
grid-row: 1; grid-row: 1;
padding-left: 40px; } padding-left: 5%; }
.footer #footer-left .footer_left_container { .footer #footer-left .footer_left_container {
display: flex; display: flex;
flex-direction: row; } flex-direction: row; }
.footer #footer-left .footer_left_container #block-quartiers-de-demain-logoepau { .footer #footer-left .footer_left_container #block-quartiers-de-demain-logoepau {
height: 150px; } height: 150px; }
@media (max-width: 891px) {
.footer #footer-left .footer_left_container #block-quartiers-de-demain-logoepau {
height: 110px; } }
.footer #footer-left .footer_left_container img { .footer #footer-left .footer_left_container img {
width: auto; width: auto;
height: 150px; } height: 150px; }
@media (max-width: 891px) {
.footer #footer-left .footer_left_container img {
height: 110px; } }
@media (max-width: 660px) {
.footer #footer-left .footer_left_container img {
height: 70px; } }
@media (max-width: 450px) {
.footer #footer-left .footer_left_container img {
height: 50px; } }
.footer #footer-middle { .footer #footer-middle {
grid-column: 6 /span 7; grid-column: 6 /span 7;
grid-row: 1; } grid-row: 1; }
.footer #footer-middle #block-quartiers-de-demain-pieddepage ul li { .footer #footer-middle #block-quartiers-de-demain-pieddepage ul li {
padding-bottom: 0.2rem; } padding-bottom: 0.2rem; }
@media (max-width: 891px) {
.footer #footer-middle #block-quartiers-de-demain-pieddepage ul {
padding-left: 00.5rem; } }
.footer #footer-right { .footer #footer-right {
grid-column: 10 / 12; grid-column: 10 / 12;
grid-row: 1; } grid-row: 1; }
@ -277,11 +365,13 @@ header {
flex-direction: column; flex-direction: column;
font-size: 0.8rem; font-size: 0.8rem;
font-weight: 400; font-weight: 400;
padding-bottom: 1rem; } padding-bottom: 0.6rem; }
.footer #footer-right #block-quartiers-de-demain-socialmedialinks h2::before { .footer #footer-right #block-quartiers-de-demain-socialmedialinks h2::before {
content: "Nous contacter"; content: "Nous contacter";
padding-bottom: 1rem; padding-bottom: 0.6rem;
font-weight: 600; } font-weight: 600; }
.footer #footer-right #block-quartiers-de-demain-socialmedialinks .fa-3x {
font-size: 2em; }
@media (max-width: 891px) { @media (max-width: 891px) {
.footer div { .footer div {
flex-wrap: wrap; } } flex-wrap: wrap; } }
@ -291,13 +381,175 @@ header {
.layout-sidebar-first { .layout-sidebar-first {
display: flex; display: flex;
justify-content: end; } justify-content: end;
position: relative;
grid-column: 1 /span 2;
grid-row: 1;
z-index: 98;
order: 1;
margin-top: 5rem; }
@media (max-width: 891px) {
.layout-sidebar-first {
margin-left: 5%;
margin-top: 9rem; } }
@media (max-width: 500px) {
.layout-sidebar-first {
width: 80%;
margin-top: 3rem; } }
.layout-sidebar-first .sidebar_first_container { .layout-sidebar-first .sidebar_first_container {
width: 80%; } display: flex;
flex-direction: column;
width: 80%;
position: sticky;
position: -webkit-sticky;
top: 10rem;
font-weight: 400; }
.layout-sidebar-first .sidebar_first_container .field-content {
margin-bottom: 0.7rem; }
@media (max-width: 810px) {
.layout-sidebar-first .sidebar_first_container {
display: none; } }
.layout-sidebar-first .sidebar_first_container #block-quartiers-de-demain-views-block-statics-block-1 { .layout-sidebar-first .sidebar_first_container #block-quartiers-de-demain-views-block-statics-block-1 {
order: 1;
text-transform: uppercase; } text-transform: uppercase; }
/*pages*/ /*pages*/
#home {
width: 100%;
display: grid;
grid-template-columns: repeat(12, 1fr);
grid-gap: 10px; }
#home .layout-content {
grid-row: 1;
order: 2;
padding-top: 3rem;
padding-bottom: 6rem; }
@media (max-width: 500px) {
#home .layout-content {
padding-top: 0; } }
#home .layout-content .content_container {
display: flex; }
#home .layout-content .content_container #block-quartiers-de-demain-titredepage {
display: none; }
#home .layout-content .content_container article.node-type-static {
width: 100%; }
#home .layout-content .content_container article.node-type-static .field_body {
padding-left: 20%;
padding-right: 20%; }
@media (max-width: 640px) {
#home .layout-content .content_container article.node-type-static .field_body {
padding-left: 10%;
padding-right: 10%; } }
#home .layout-content .content_container article.node-type-static .field_body h2 {
font-size: 0.8rem;
font-weight: 600;
margin-bottom: 0; }
#home .layout-content .content_container article.node-type-static .field_body img {
width: 100%;
height: auto; }
#home .layout-content .content_container article.node-type-static .field_body p {
margin-top: 0; }
#home .layout-content .content_container article.node-type-static .paragraph {
padding-top: 1rem;
padding-bottom: 1rem;
padding-left: 20%;
padding-right: 20%; }
@media (max-width: 640px) {
#home .layout-content .content_container article.node-type-static .paragraph {
padding-left: 10%;
padding-right: 10%; } }
#home .layout-content .content_container article.node-type-static .field_field_textes .field_field_title {
text-transform: uppercase;
font-size: 1rem;
font-weight: 400; }
#home .layout-content .content_container article.node-type-static .field_field_textes #paragraph-id--1 .field_field_title, #home .layout-content .content_container article.node-type-static .field_field_textes #paragraph-id--2 .field_field_title, #home .layout-content .content_container article.node-type-static .field_field_textes #paragraph-id--6 .field_field_title, #home .layout-content .content_container article.node-type-static .field_field_textes #paragraph-id--7 .field_field_title, #home .layout-content .content_container article.node-type-static .field_field_textes #paragraph-id--8 .field_field_title {
color: #0732c2; }
#home .layout-content .content_container article.node-type-static .field_field_textes #paragraph-id--3 .field_field_title, #home .layout-content .content_container article.node-type-static .field_field_textes #paragraph-id--4 .field_field_title {
color: #f7002b; }
#home .layout-content .content_container article.node-type-static .field_field_textes #paragraph-id--1, #home .layout-content .content_container article.node-type-static .field_field_textes #paragraph-id--2, #home .layout-content .content_container article.node-type-static .field_field_textes #paragraph-id--3, #home .layout-content .content_container article.node-type-static .field_field_textes #paragraph-id--4, #home .layout-content .content_container article.node-type-static .field_field_textes #paragraph-id--6, #home .layout-content .content_container article.node-type-static .field_field_textes #paragraph-id--8 {
background-color: #e8ebf4; }
#home .layout-content .content_container article.node-type-static .field_field_textes #paragraph-id--7, #home .layout-content .content_container article.node-type-static .field_field_textes #paragraph-id--8 {
text-align: center; }
#home .layout-content .content_container article.node-type-static .field_field_textes #paragraph-id--7 {
display: flex;
flex-direction: column; }
#home .layout-content .content_container article.node-type-static .field_field_textes #paragraph-id--7 .field_field_title {
width: 60%;
margin: auto; }
#home .layout-content .content_container article.node-type-static .field_field_textes #paragraph-id--7 .field_field_texte div:nth-child(2) {
display: flex;
flex-direction: row; }
#home .layout-content .content_container article.node-type-static .field_field_textes #paragraph-id--7 .field_field_texte div:nth-child(2) p {
padding-right: 30px;
text-align: left;
color: #0732c2; }
#home .layout-content .content_container article.node-type-static .field_field_textes #paragraph-id--8 .field_field_texte div:nth-child(2) {
display: flex;
flex-direction: row; }
#home .layout-content .content_container article.node-type-static .field_field_textes #paragraph-id--8 .field_field_texte div:nth-child(2) p {
padding-right: 30px;
text-align: left; }
#home .layout-content .content_container article.node-type-static .field_field_textes p {
margin-bottom: 0; }
#home .layout-content .content_container article.node-type-static .field_field_textes .field_field_picto {
height: auto;
float: inline-start;
padding-right: 0.5rem; }
#home .layout-content .content_container article.node-type-static .field_field_textes .field_field_picto img {
width: 40px;
height: auto; }
@media (max-width: 891px) {
#home .layout-content .content_container article.node-type-static .field_field_textes .field_field_picto img {
width: 30px; } }
#home .layout-content .content_container article.node-type-static .field_field_textes #paragraph-id--9 img {
width: -moz-available;
height: auto;
cursor: url(/img/layout/backgrounds/zoom.cur), -moz-zoom-in; }
#home aside {
position: relative;
grid-column: 1 /span 2;
grid-row: 1;
z-index: 100;
order: 1;
margin-top: 5rem; }
@media (max-width: 891px) {
#home aside {
margin-left: 5%;
margin-top: 9rem; } }
@media (max-width: 500px) {
#home aside {
width: 80%;
margin-top: 3rem; } }
#home aside .sidebar_first_container {
position: -webkit-sticky;
position: sticky;
top: 10rem;
font-weight: 400; }
#home aside .sidebar_first_container .field-content {
margin-bottom: 0.7rem; }
@media (max-width: 810px) {
#home aside .sidebar_first_container {
display: none; } }
#home aside .views-field-field-pieces-jointes .field-content {
display: flex;
flex-direction: column; }
#home aside .views-field-field-pieces-jointes .field-content .file--application-pdf {
display: inline-flex; }
#home aside .views-field-field-pieces-jointes .field-content .file--application-pdf a {
display: block;
font-size: small;
font-weight: 800; }
#home aside .views-field-field-pieces-jointes .field-content .file--application-pdf::before {
content: url(../images/noun-arrow-download.svg);
margin: auto;
padding-right: 00.5rem; }
#home aside .views-field-field-pieces-jointes .field-content span {
font-size: small;
font-weight: 800; }
#home aside .views-field-field-pieces-jointes .field-content span:nth-child(2) {
margin-left: 50px;
align-self: center; }
.partenaires .layout-content .content_container #block-quartiers-de-demain-titredepage { .partenaires .layout-content .content_container #block-quartiers-de-demain-titredepage {
grid-column: 3 /span 9; grid-column: 3 /span 9;
grid-row: 1; grid-row: 1;
@ -322,7 +574,7 @@ header {
display: flex; display: flex;
flex-direction: column; } } flex-direction: column; } }
.partenaires .layout-content .content_container .views-element-container .node-type-partenaire .field_field_logo { .partenaires .layout-content .content_container .views-element-container .node-type-partenaire .field_field_logo {
grid-column: 1 /span 2; grid-column: 1 / 3;
grid-row: 1 /span 3; grid-row: 1 /span 3;
padding-right: 1rem; padding-right: 1rem;
margin: auto; } margin: auto; }
@ -336,10 +588,16 @@ header {
font-weight: 500; font-weight: 500;
font-size: 0.6rem; font-size: 0.6rem;
margin-left: 1rem; } margin-left: 1rem; }
@media (max-width: 810px) {
.partenaires .layout-content .content_container .views-element-container .node-type-partenaire .field_title {
margin-left: 0; } }
.partenaires .layout-content .content_container .views-element-container .node-type-partenaire .field_body { .partenaires .layout-content .content_container .views-element-container .node-type-partenaire .field_body {
grid-column: 3 /span 8; grid-column: 3 /span 8;
grid-row: 2; grid-row: 2;
margin-left: 1rem; } margin-left: 1rem; }
@media (max-width: 810px) {
.partenaires .layout-content .content_container .views-element-container .node-type-partenaire .field_body {
margin-left: 0; } }
.partenaires .layout-content .content_container .views-element-container .node-type-partenaire .field_field_lien { .partenaires .layout-content .content_container .views-element-container .node-type-partenaire .field_field_lien {
grid-column: 3 /span 8; grid-column: 3 /span 8;
grid-row: 3; grid-row: 3;
@ -347,6 +605,9 @@ header {
width: fit-content; width: fit-content;
padding-bottom: 0.5rem; padding-bottom: 0.5rem;
margin-left: 1rem; } margin-left: 1rem; }
@media (max-width: 810px) {
.partenaires .layout-content .content_container .views-element-container .node-type-partenaire .field_field_lien {
margin-left: 0; } }
.partenaires .layout-content .content_container .views-element-container .node-type-partenaire .field_field_lien a { .partenaires .layout-content .content_container .views-element-container .node-type-partenaire .field_field_lien a {
display: inline-flex; display: inline-flex;
align-items: center; } align-items: center; }
@ -361,49 +622,83 @@ header {
#presentation { #presentation {
width: 100%; width: 100%;
display: grid; display: grid;
grid-template-columns: repeat(12, 1fr); grid-template-columns: repeat(12, 1fr); }
grid-gap: 10px; } #presentation #block-quartiers-de-demain-views-block-statics-fields-block-1 {
order: 2;
border-top: 2px solid #0732c2;
padding-top: 0.3rem; }
#presentation #block-quartiers-de-demain-views-block-statics-fields-block-1 .views-field-field-pieces-jointes {
display: flex;
flex-direction: row; }
#presentation #block-quartiers-de-demain-views-block-statics-fields-block-1 .views-field-field-pieces-jointes::before {
content: url(../images/noun-arrow-download.svg);
padding-right: 00.3rem; }
#presentation #block-quartiers-de-demain-views-block-statics-fields-block-1 .views-field-field-pieces-jointes .field-content {
display: flex;
flex-direction: column;
font-size: 0.6rem;
font-weight: 800; }
#presentation #block-quartiers-de-demain-views-block-statics-fields-block-1 .views-field-field-pieces-jointes .field-content span {
font-weight: 400; }
#presentation .layout-content { #presentation .layout-content {
grid-row: 1; grid-row: 1;
order: 2; order: 2;
padding-top: 3rem; padding-top: 3rem; }
padding-bottom: 6rem; }
@media (max-width: 891px) {
#presentation .layout-content {
width: 90%; } }
@media (max-width: 500px) { @media (max-width: 500px) {
#presentation .layout-content { #presentation .layout-content {
padding-top: 0; } } padding-top: 0; } }
#presentation .layout-content .content_container { #presentation .layout-content .content_container {
display: flex; } display: flex;
margin-bottom: 0; }
#presentation .layout-content .content_container #block-quartiers-de-demain-titredepage { #presentation .layout-content .content_container #block-quartiers-de-demain-titredepage {
display: none; } display: none; }
#presentation .layout-content .content_container article.node-type-static { #presentation .layout-content .content_container article.node-type-static {
width: 100%; } width: 100%; }
#presentation .layout-content .content_container article.node-type-static .field_body { #presentation .layout-content .content_container article.node-type-static .field_body {
padding-left: 20%; padding-left: 20%;
width: 80%; } padding-right: 20%; }
@media (max-width: 810px) {
#presentation .layout-content .content_container article.node-type-static .field_body {
padding-left: 13%;
padding-right: 13%; } }
@media (max-width: 640px) {
#presentation .layout-content .content_container article.node-type-static .field_body {
padding-left: 10%;
padding-right: 10%; } }
#presentation .layout-content .content_container article.node-type-static .field_body h2 { #presentation .layout-content .content_container article.node-type-static .field_body h2 {
font-size: 0.8rem; font-size: 0.8rem;
font-weight: 600; font-weight: 600;
margin-bottom: 0; } margin-bottom: 0; }
#presentation .layout-content .content_container article.node-type-static .field_body p { #presentation .layout-content .content_container article.node-type-static .field_body img {
margin-top: 0; } width: 100%;
height: auto; }
#presentation .layout-content .content_container article.node-type-static .paragraph { #presentation .layout-content .content_container article.node-type-static .paragraph {
padding-top: 1rem; padding-top: 2rem;
padding-bottom: 1rem; padding-bottom: 2rem;
padding-left: 20%; padding-left: 20%;
padding-right: 20%; } padding-right: 20%; }
@media (max-width: 810px) {
#presentation .layout-content .content_container article.node-type-static .paragraph {
padding-left: 13%;
padding-right: 13%; } }
@media (max-width: 640px) {
#presentation .layout-content .content_container article.node-type-static .paragraph {
padding-left: 10%;
padding-right: 10%; } }
#presentation .layout-content .content_container article.node-type-static .field_field_textes .field_field_title { #presentation .layout-content .content_container article.node-type-static .field_field_textes .field_field_title {
text-transform: uppercase; text-transform: uppercase;
font-size: 1rem; font-size: 1rem;
font-weight: 300; } font-weight: 400; }
#presentation .layout-content .content_container article.node-type-static .field_field_textes #paragraph-id--1 .field_field_title, #presentation .layout-content .content_container article.node-type-static .field_field_textes #paragraph-id--2 .field_field_title, #presentation .layout-content .content_container article.node-type-static .field_field_textes #paragraph-id--6 .field_field_title, #presentation .layout-content .content_container article.node-type-static .field_field_textes #paragraph-id--7 .field_field_title, #presentation .layout-content .content_container article.node-type-static .field_field_textes #paragraph-id--8 .field_field_title { #presentation .layout-content .content_container article.node-type-static .field_field_textes #paragraph-id--1 .field_field_title, #presentation .layout-content .content_container article.node-type-static .field_field_textes #paragraph-id--2 .field_field_title, #presentation .layout-content .content_container article.node-type-static .field_field_textes #paragraph-id--6 .field_field_title, #presentation .layout-content .content_container article.node-type-static .field_field_textes #paragraph-id--7 .field_field_title, #presentation .layout-content .content_container article.node-type-static .field_field_textes #paragraph-id--8 .field_field_title {
color: #0732c2; } color: #0732c2; }
#presentation .layout-content .content_container article.node-type-static .field_field_textes #paragraph-id--3 .field_field_title, #presentation .layout-content .content_container article.node-type-static .field_field_textes #paragraph-id--4 .field_field_title { #presentation .layout-content .content_container article.node-type-static .field_field_textes #paragraph-id--3 .field_field_title, #presentation .layout-content .content_container article.node-type-static .field_field_textes #paragraph-id--4 .field_field_title {
color: #f7002b; } color: #f7002b; }
#presentation .layout-content .content_container article.node-type-static .field_field_textes #paragraph-id--1, #presentation .layout-content .content_container article.node-type-static .field_field_textes #paragraph-id--2, #presentation .layout-content .content_container article.node-type-static .field_field_textes #paragraph-id--3, #presentation .layout-content .content_container article.node-type-static .field_field_textes #paragraph-id--4, #presentation .layout-content .content_container article.node-type-static .field_field_textes #paragraph-id--6, #presentation .layout-content .content_container article.node-type-static .field_field_textes #paragraph-id--8 { #presentation .layout-content .content_container article.node-type-static .field_field_textes #paragraph-id--1, #presentation .layout-content .content_container article.node-type-static .field_field_textes #paragraph-id--2, #presentation .layout-content .content_container article.node-type-static .field_field_textes #paragraph-id--3, #presentation .layout-content .content_container article.node-type-static .field_field_textes #paragraph-id--4, #presentation .layout-content .content_container article.node-type-static .field_field_textes #paragraph-id--6, #presentation .layout-content .content_container article.node-type-static .field_field_textes #paragraph-id--8 {
background-color: #e8ebf4; } background-color: #e8ebf4; }
#presentation .layout-content .content_container article.node-type-static .field_field_textes #paragraph-id--1, #presentation .layout-content .content_container article.node-type-static .field_field_textes #paragraph-id--2, #presentation .layout-content .content_container article.node-type-static .field_field_textes #paragraph-id--3, #presentation .layout-content .content_container article.node-type-static .field_field_textes #paragraph-id--4 {
padding-top: 1rem; }
#presentation .layout-content .content_container article.node-type-static .field_field_textes #paragraph-id--1, #presentation .layout-content .content_container article.node-type-static .field_field_textes #paragraph-id--2, #presentation .layout-content .content_container article.node-type-static .field_field_textes #paragraph-id--3 {
padding-bottom: 1rem; }
#presentation .layout-content .content_container article.node-type-static .field_field_textes #paragraph-id--7, #presentation .layout-content .content_container article.node-type-static .field_field_textes #paragraph-id--8 { #presentation .layout-content .content_container article.node-type-static .field_field_textes #paragraph-id--7, #presentation .layout-content .content_container article.node-type-static .field_field_textes #paragraph-id--8 {
text-align: center; } text-align: center; }
#presentation .layout-content .content_container article.node-type-static .field_field_textes #paragraph-id--7 { #presentation .layout-content .content_container article.node-type-static .field_field_textes #paragraph-id--7 {
@ -411,20 +706,47 @@ header {
flex-direction: column; } flex-direction: column; }
#presentation .layout-content .content_container article.node-type-static .field_field_textes #paragraph-id--7 .field_field_title { #presentation .layout-content .content_container article.node-type-static .field_field_textes #paragraph-id--7 .field_field_title {
width: 60%; width: 60%;
margin: auto; } margin: auto;
padding-bottom: 1rem; }
#presentation .layout-content .content_container article.node-type-static .field_field_textes #paragraph-id--7 .field_field_texte div:nth-child(2) { #presentation .layout-content .content_container article.node-type-static .field_field_textes #paragraph-id--7 .field_field_texte div:nth-child(2) {
display: flex; display: flex;
flex-direction: row; } flex-direction: row; }
@media (max-width: 500px) {
#presentation .layout-content .content_container article.node-type-static .field_field_textes #paragraph-id--7 .field_field_texte div:nth-child(2) {
flex-direction: column; } }
#presentation .layout-content .content_container article.node-type-static .field_field_textes #paragraph-id--7 .field_field_texte div:nth-child(2) p { #presentation .layout-content .content_container article.node-type-static .field_field_textes #paragraph-id--7 .field_field_texte div:nth-child(2) p {
display: flex;
flex-direction: column;
padding-right: 30px; padding-right: 30px;
text-align: left; text-align: left;
color: #0732c2; } color: #0732c2;
#presentation .layout-content .content_container article.node-type-static .field_field_textes #paragraph-id--8 .field_field_texte div:nth-child(2) { width: calc(100vw / 3); }
display: flex; @media (max-width: 500px) {
flex-direction: row; } #presentation .layout-content .content_container article.node-type-static .field_field_textes #paragraph-id--7 .field_field_texte div:nth-child(2) p {
#presentation .layout-content .content_container article.node-type-static .field_field_textes #paragraph-id--8 .field_field_texte div:nth-child(2) p { padding-right: 0px;
padding-right: 30px; text-align: center; } }
text-align: left; } #presentation .layout-content .content_container article.node-type-static .field_field_textes #paragraph-id--7 .field_field_texte div:nth-child(2) p img {
width: 70%;
height: auto;
padding-bottom: 1rem; }
#presentation .layout-content .content_container article.node-type-static .field_field_textes #paragraph-id--8 {
padding-bottom: 4rem; }
#presentation .layout-content .content_container article.node-type-static .field_field_textes #paragraph-id--8 .field_field_title {
padding-bottom: 1rem; }
#presentation .layout-content .content_container article.node-type-static .field_field_textes #paragraph-id--8 .field_field_texte div:nth-child(2) {
display: flex;
flex-direction: row; }
@media (max-width: 500px) {
#presentation .layout-content .content_container article.node-type-static .field_field_textes #paragraph-id--8 .field_field_texte div:nth-child(2) {
flex-direction: column; } }
#presentation .layout-content .content_container article.node-type-static .field_field_textes #paragraph-id--8 .field_field_texte div:nth-child(2) p {
width: calc(100vw / 3);
padding-right: 30px;
text-align: left; }
@media (max-width: 500px) {
#presentation .layout-content .content_container article.node-type-static .field_field_textes #paragraph-id--8 .field_field_texte div:nth-child(2) p {
padding-right: 0px;
text-align: center; } }
#presentation .layout-content .content_container article.node-type-static .field_field_textes p { #presentation .layout-content .content_container article.node-type-static .field_field_textes p {
margin-bottom: 0; } margin-bottom: 0; }
#presentation .layout-content .content_container article.node-type-static .field_field_textes .field_field_picto { #presentation .layout-content .content_container article.node-type-static .field_field_textes .field_field_picto {
@ -432,49 +754,58 @@ header {
float: inline-start; float: inline-start;
padding-right: 0.5rem; } padding-right: 0.5rem; }
#presentation .layout-content .content_container article.node-type-static .field_field_textes .field_field_picto img { #presentation .layout-content .content_container article.node-type-static .field_field_textes .field_field_picto img {
width: 50px; width: 40px;
height: auto; } height: auto;
#presentation aside { margin: auto; }
position: relative; @media (max-width: 891px) {
grid-column: 1 /span 2; #presentation .layout-content .content_container article.node-type-static .field_field_textes .field_field_picto img {
grid-row: 1; width: 30px; } }
z-index: 100; #presentation .layout-content .content_container article.node-type-static .field_field_textes #paragraph-id--9 img {
order: 1; width: -moz-available;
margin-top: 5rem; } width: 100%;
@media (max-width: 891px) { height: auto;
#presentation aside { cursor: url(/img/layout/backgrounds/zoom.cur), -moz-zoom-in; }
margin-left: 5%; #presentation .layout-content .content_container article.node-type-static .field_field_textes #paragraph-id--9 img:hover {
margin-top: 9rem; } } filter: brightness(75%);
@media (max-width: 500px) { transition: 0.2s; }
#presentation aside { #presentation .layout-content .content_container article.node-type-static .field_field_textes #paragraph-id--9 .zoom_in {
width: 80%; -ms-transform: scale(1.7);
margin-top: 3rem; } } /* IE 9 */
#presentation aside .sidebar_first_container { -webkit-transform: scale(1.7);
position: -webkit-sticky; /* Safari 3-8 */
position: sticky; transform: scale(1.7);
top: 10rem; } max-width: 100vw;
@media (max-width: 810px) { overflow-x: scroll; }
#presentation aside .sidebar_first_container { #presentation .layout-content .content_container article.node-type-static .field_field_textes #paragraph-id--9 .zoom_in:hover {
display: none; } } filter: brightness(100%);
#presentation aside .views-field-field-pieces-jointes .field-content .file--application-pdf::before { transition: 0.2s;
content: url(../images/noun-arrow-download.png); } cursor: url(/img/layout/backgrounds/zoom.cur), -moz-zoom-out;
overflow-x: scroll; }
.node-type-static .layout-content .content_container #block-quartiers-de-demain-titredepage { .presentation footer span.totop {
grid-column: 3 /span 9; display: inline-flex;
grid-row: 1; width: 100vw;
margin-top: 3rem; } background: #e8ebf4; }
.node-type-static .layout-content .content_container #block-quartiers-de-demain-titredepage h1 {
text-transform: uppercase;
color: #f7002b;
font-size: 1.6rem;
font-weight: 300; }
.node-type-static .layout-content .content_container article.node-type-static { .node-type-static .layout-content {
grid-column: 3 /span 9; grid-row: 1; }
grid-row: 2; } .node-type-static .layout-content .content_container {
.node-type-static .layout-content .content_container article.node-type-static div.field_body h2 { margin-bottom: 3rem; }
font-size: 0.8rem; .node-type-static .layout-content .content_container #block-quartiers-de-demain-titredepage {
font-weight: 600; grid-column: 3 /span 9;
margin-bottom: 0; } grid-row: 1;
.node-type-static .layout-content .content_container article.node-type-static div.field_body p { margin-top: 3rem; }
margin-top: 0; } .node-type-static .layout-content .content_container #block-quartiers-de-demain-titredepage h1 {
text-transform: uppercase;
color: #f7002b;
font-size: 1.6rem;
font-weight: 300; }
.node-type-static .layout-content .content_container article.node-type-static {
grid-column: 3 /span 9;
grid-row: 2; }
.node-type-static .layout-content .content_container article.node-type-static div.field_body h2 {
font-size: 0.8rem;
font-weight: 600;
margin-bottom: 0; }
.node-type-static .layout-content .content_container article.node-type-static div.field_body p {
margin-top: 0; }

BIN
web/themes/custom/quartiers_de_demain/fonts/Marianne/Marianne-Bold.woff Normal file
View File

Binary file not shown.

BIN
web/themes/custom/quartiers_de_demain/fonts/Marianne/Marianne-Bold.woff2 Normal file
View File

Binary file not shown.

BIN
web/themes/custom/quartiers_de_demain/fonts/Marianne/Marianne-Bold_Italic.woff Normal file
View File

Binary file not shown.

BIN
web/themes/custom/quartiers_de_demain/fonts/Marianne/Marianne-Bold_Italic.woff2 Normal file
View File

Binary file not shown.

BIN
web/themes/custom/quartiers_de_demain/fonts/Marianne/Marianne-ExtraBold.woff Normal file
View File

Binary file not shown.

BIN
web/themes/custom/quartiers_de_demain/fonts/Marianne/Marianne-ExtraBold.woff2 Normal file
View File

Binary file not shown.

BIN
web/themes/custom/quartiers_de_demain/fonts/Marianne/Marianne-ExtraBold_Italic.woff Normal file
View File

Binary file not shown.

BIN
web/themes/custom/quartiers_de_demain/fonts/Marianne/Marianne-ExtraBold_Italic.woff2 Normal file
View File

Binary file not shown.

BIN
web/themes/custom/quartiers_de_demain/fonts/Marianne/Marianne-Light.woff Normal file
View File

Binary file not shown.

BIN
web/themes/custom/quartiers_de_demain/fonts/Marianne/Marianne-Light.woff2 Normal file
View File

Binary file not shown.

BIN
web/themes/custom/quartiers_de_demain/fonts/Marianne/Marianne-Light_Italic.woff Normal file
View File

Binary file not shown.

BIN
web/themes/custom/quartiers_de_demain/fonts/Marianne/Marianne-Light_Italic.woff2 Normal file
View File

Binary file not shown.

BIN
web/themes/custom/quartiers_de_demain/fonts/Marianne/Marianne-Medium.woff Normal file
View File

Binary file not shown.

BIN
web/themes/custom/quartiers_de_demain/fonts/Marianne/Marianne-Medium.woff2 Normal file
View File

Binary file not shown.

BIN
web/themes/custom/quartiers_de_demain/fonts/Marianne/Marianne-Medium_Italic.woff Normal file
View File

Binary file not shown.

BIN
web/themes/custom/quartiers_de_demain/fonts/Marianne/Marianne-Medium_Italic.woff2 Normal file
View File

Binary file not shown.

BIN
web/themes/custom/quartiers_de_demain/fonts/Marianne/Marianne-Regular.woff Normal file
View File

Binary file not shown.

BIN
web/themes/custom/quartiers_de_demain/fonts/Marianne/Marianne-Regular.woff2 Normal file
View File

Binary file not shown.

BIN
web/themes/custom/quartiers_de_demain/fonts/Marianne/Marianne-Regular_Italic.woff Normal file
View File

Binary file not shown.

BIN
web/themes/custom/quartiers_de_demain/fonts/Marianne/Marianne-Regular_Italic.woff2 Normal file
View File

Binary file not shown.

BIN
web/themes/custom/quartiers_de_demain/fonts/Marianne/Marianne-Thin.woff Normal file
View File

Binary file not shown.

BIN
web/themes/custom/quartiers_de_demain/fonts/Marianne/Marianne-Thin.woff2 Normal file
View File

Binary file not shown.

BIN
web/themes/custom/quartiers_de_demain/fonts/Marianne/Marianne-Thin_Italic.woff Normal file
View File

Binary file not shown.

BIN
web/themes/custom/quartiers_de_demain/fonts/Marianne/Marianne-Thin_Italic.woff2 Normal file
View File

Binary file not shown.

34
web/themes/custom/quartiers_de_demain/images/noun-arrow-download.svg
View File

@ -2,16 +2,44 @@
<!-- Created with Inkscape (http://www.inkscape.org/) --> <!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg <svg
width="210mm" width="15mm"
height="296.99997mm" height="15mm"
viewBox="0 0 210 296.99997" viewBox="0 0 10.531931 10.531931"
version="1.1" version="1.1"
id="svg1" id="svg1"
inkscape:export-filename="noun-arrow-download.svg"
inkscape:export-xdpi="300"
inkscape:export-ydpi="300"
inkscape:version="1.3.2 (091e20ef0f, 2023-11-25, custom)"
sodipodi:docname="noun-arrow-download.svg"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
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">
<sodipodi:namedview
id="namedview1"
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1.0"
inkscape:showpageshadow="2"
inkscape:pageopacity="0.0"
inkscape:pagecheckerboard="0"
inkscape:deskcolor="#d1d1d1"
inkscape:document-units="mm"
inkscape:zoom="0.72337262"
inkscape:cx="8.9856871"
inkscape:cy="215.65649"
inkscape:window-width="1920"
inkscape:window-height="1016"
inkscape:window-x="0"
inkscape:window-y="36"
inkscape:window-maximized="1"
inkscape:current-layer="layer1" />
<defs <defs
id="defs1" /> id="defs1" />
<g <g
inkscape:label="Calque 1"
inkscape:groupmode="layer"
id="layer1" id="layer1"
transform="translate(-102.65834,-91.281253)"> transform="translate(-102.65834,-91.281253)">
<circle <circle

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.4 KiB

After

Width:  |  Height:  |  Size: 2.4 KiB

52
web/themes/custom/quartiers_de_demain/images/noun-loop-3037049.svg Normal file
View File

@ -0,0 +1,52 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
version="1.0"
x="0px"
y="0px"
viewBox="0 0 100 125"
style="enable-background:new 0 0 100 100;"
xml:space="preserve"
id="svg2"
sodipodi:docname="noun-loop-3037049.svg"
inkscape:version="1.3.2 (091e20ef0f, 2023-11-25, custom)"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns="http://www.w3.org/2000/svg"
xmlns:svg="http://www.w3.org/2000/svg"><defs
id="defs2" /><sodipodi:namedview
id="namedview2"
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1.0"
inkscape:showpageshadow="2"
inkscape:pageopacity="0.0"
inkscape:pagecheckerboard="0"
inkscape:deskcolor="#d1d1d1"
inkscape:zoom="4.1365747"
inkscape:cx="41.217677"
inkscape:cy="56.810288"
inkscape:window-width="1920"
inkscape:window-height="1012"
inkscape:window-x="0"
inkscape:window-y="0"
inkscape:window-maximized="1"
inkscape:current-layer="svg2" /><g
id="g1"
transform="matrix(-1,0,0,1,99.722674,0)"><path
d="M 86.85,13.47 C 81.61,8.34 74.67,5.51 67.35,5.63 c -7.34,0.08 -14.2,3 -19.34,8.24 -8.48,8.65 -10.23,21.81 -4.45,32.36 l -7.58,7.74 -2.3,-2.26 c -0.24,-0.23 -0.57,-0.37 -0.89,-0.36 -0.33,0 -0.65,0.14 -0.88,0.38 L 5.01,79.17 c -0.23,0.24 -0.36,0.56 -0.36,0.89 0,0.33 0.14,0.65 0.38,0.88 l 14.11,13.83 c 0.24,0.24 0.56,0.36 0.88,0.36 0.32,0 0.65,-0.13 0.89,-0.38 l 26.9,-27.44 c 0.23,-0.24 0.36,-0.56 0.36,-0.89 0,-0.33 -0.14,-0.65 -0.38,-0.88 l -2.3,-2.26 7.1,-7.24 c 0.43,0.28 0.86,0.56 1.32,0.82 4.29,2.48 9.02,3.69 13.73,3.69 7.19,0 14.3,-2.83 19.61,-8.25 C 97.83,41.5 97.66,24.07 86.85,13.47 Z M 20,92.11 7.67,80.03 32.82,54.37 45.14,66.45 Z m 23.7,-30.58 -5.94,-5.82 7.11,-7.26 c 0.04,0.06 0.08,0.11 0.12,0.17 0.09,0.14 0.19,0.27 0.29,0.4 0.21,0.3 0.43,0.6 0.66,0.89 0.11,0.15 0.23,0.29 0.34,0.43 0.23,0.29 0.47,0.57 0.71,0.84 0.11,0.12 0.21,0.25 0.32,0.37 0.35,0.39 0.72,0.77 1.09,1.14 0.46,0.45 0.93,0.87 1.42,1.28 0.12,0.1 0.24,0.2 0.36,0.3 0.12,0.1 0.23,0.2 0.34,0.29 z M 85.46,50.56 c -7.98,8.15 -20.44,9.85 -30.3,4.14 -0.7,-0.41 -1.36,-0.84 -2.01,-1.3 -1.04,-0.75 -2.05,-1.59 -2.98,-2.51 -1.49,-1.46 -2.8,-3.1 -3.91,-4.95 -0.02,-0.05 -0.05,-0.1 -0.08,-0.15 -5.78,-9.7 -4.28,-22.11 3.63,-30.19 4.67,-4.76 10.91,-7.42 17.58,-7.49 0.09,0 0.18,0 0.26,0 6.57,0 12.76,2.53 17.46,7.13 9.82,9.65 9.97,25.49 0.35,35.32 z"
id="path1" /></g><g
id="g2"
transform="translate(0.48349182,-0.48349182)"><rect
style="fill:#000000;fill-rule:evenodd;stroke:#000000;stroke-width:1.59149;stroke-linecap:round;stroke-linejoin:round;paint-order:stroke fill markers"
id="rect2"
width="0.68201739"
height="26.391418"
x="31.111984"
y="20.342749" /><rect
style="fill:#000000;fill-rule:evenodd;stroke:#000000;stroke-width:1.59149;stroke-linecap:round;stroke-linejoin:round;paint-order:stroke fill markers"
id="rect2-5"
width="0.68201739"
height="26.391418"
x="-33.879463"
y="18.257284"
transform="rotate(-90)" /></g></svg>
Side by Side

After

Width:  |  Height:  |  Size: 3.1 KiB

60
web/themes/custom/quartiers_de_demain/js/quartiers_de_demain.js
View File

@ -37,6 +37,62 @@
$('.header_nav_container').fadeOut(); $('.header_nav_container').fadeOut();
}); });
});
// // /////////////////
// //// ancre dans texte au click parragraphe correspondant arrive en dessous du header
(function($, window) {
var adjustAnchor = function() {
var $anchor = $('.sidebar_first_container'),
fixedElementHeight = 350;
if ($anchor.length > 0) {
$('html, body').stop().animate({scrollTop: $anchor.offset().top - fixedElementHeight }, 0);
}
};
$(window).on('hashchange', function() {
adjustAnchor();
});
})(jQuery, window);
//////////// agrandissement du shema
$('#paragraph-id--9 img').click(function() {
$(this).toggleClass('zoom_in');
});
});
// function $(id){
// return document.getElementById(id);
// }
// function agrandir(id){
// $('popup').style.display='block';
// $('imageAgrandie').src=$(id).src;
// }
// function reduire(){
// $('popup').style.display='none';
// $('imageAgrandie').src="";
// }
// zoom=2;
// document.body.onmousemouve=function(){
// loupe=document.getElementById("#paragraph-id--9");
// loupe.style.left=event.clientX+"px";
// loupe.style.right=event.clientY+"px";
// loupe.style.backgroundSize=(1500*zoom)+"px";
// loupe.style.backgroundPosition=(-loupe.offsetLeft+zoom-150)+"px"+(-loupe.offsetTop+zoom-150)+"px";
// }
function $zoom() {
}

3
web/themes/custom/quartiers_de_demain/scss/global/_layout.scss
View File

@ -1,5 +1,8 @@
$header-height : 150px; $header-height : 150px;
$header-height-pad : 110px;
$header-height-small : 70px;
$header-height-ultrasmall : 50px;
$width-menu-slidedown : 550px; $width-menu-slidedown : 550px;
.layout-container { .layout-container {

200
web/themes/custom/quartiers_de_demain/scss/pages/_home.scss Normal file
View File

@ -0,0 +1,200 @@
#home{
width: 100%;
display: grid;
grid-template-columns: repeat(12, 1fr);
grid-gap: 10px;
.layout-content{
// grid-column: 3 / 11;
grid-row: 1;
order: 2;
padding-top: 3rem;
padding-bottom: 6rem;
// width: 70%;
// margin: auto;
@media(max-width: 891px){
// width: 90%;
}
@media (max-width:500px) {
padding-top: 0;
}
.content_container{
display: flex;
#block-quartiers-de-demain-titredepage{
display: none;
}
article.node-type-static{
width: 100%;
.field_body{
padding-left: 20%;
padding-right: 20%;
@media (max-width:640px) {
padding-left: 10%;
padding-right: 10%;
}
// width: 80%;
h2{
font-size: $font-medium;
font-weight: 600;
margin-bottom: 0;
}
img{
width: 100%;
height: auto;
}
p{
margin-top: 0;
}
}
.paragraph{
padding-top: 1rem;
padding-bottom: 1rem;
padding-left: 20%;
padding-right: 20%;
@media (max-width:640px) {
padding-left: 10%;
padding-right: 10%;
}
}
.field_field_textes{
.field_field_title{
text-transform: uppercase;
font-size: $font-big;
font-weight: 400;
}
#paragraph-id--1, #paragraph-id--2, #paragraph-id--6, #paragraph-id--7, #paragraph-id--8{
.field_field_title{
color: $blue_QDD;
}
}
#paragraph-id--3, #paragraph-id--4{
.field_field_title{
color: $red_QDD;
}
}
#paragraph-id--1, #paragraph-id--2, #paragraph-id--3, #paragraph-id--4, #paragraph-id--6, #paragraph-id--8{
background-color: $bleu_fond_header;
}
#paragraph-id--7, #paragraph-id--8{
text-align: center;
}
#paragraph-id--7{
display: flex;
flex-direction: column;
.field_field_title{
width: 60%;
margin: auto;
}
.field_field_texte div:nth-child(2){
display: flex;
flex-direction: row;
p{
padding-right: 30px;
text-align: left;
color: $blue_QDD;
}
}
}
#paragraph-id--8{
.field_field_texte div:nth-child(2){
display: flex;
flex-direction: row;
p{
padding-right: 30px;
text-align: left;
}
}
}
p{
margin-bottom: 0;
// padding-bottom: 1.5rem;
}
.field_field_picto{
height: auto;
float: inline-start;
padding-right: 0.5rem;
img{
width: 40px;
height: auto;
@media(max-width: 891px){
width: 30px;
}
}
}
#paragraph-id--9{
img{
width: -moz-available;
height: auto;
cursor: url(/img/layout/backgrounds/zoom.cur), -moz-zoom-in;
}
}
}
}
}
}
aside{
position: relative;
grid-column: 1 /span 2;
grid-row: 1;
z-index: 100;
order: 1;
margin-top: 5rem;
@media(max-width:891px){
margin-left: 5%;
margin-top: 9rem;
}
@media (max-width:500px) {
width: 80%;
margin-top: 3rem;
}
.sidebar_first_container{
position: -webkit-sticky;
position: sticky;
top: 10rem;
font-weight: 400;
.field-content{
margin-bottom: 0.7rem;
}
@media (max-width: 810px){
display: none;
}
}
.views-field-field-pieces-jointes{
.field-content{
display: flex;
flex-direction: column;
.file--application-pdf{
display: inline-flex;
a{
display: block;
font-size: small;
font-weight: 800;
}
&::before{
content: url(../images/noun-arrow-download.svg);
margin: auto;
padding-right: 00.5rem;
}
}
span{
font-size: small;
font-weight: 800;
&:nth-child(2){
margin-left: 50px;
align-self: center;
}
}
}
}
}
}

11
web/themes/custom/quartiers_de_demain/scss/pages/_partenaires.scss
View File

@ -34,7 +34,7 @@
flex-direction: column; flex-direction: column;
} }
.field_field_logo{ .field_field_logo{
grid-column: 1 /span 2; grid-column: 1 / 3;
grid-row: 1 /span 3; grid-row: 1 /span 3;
padding-right: 1rem; padding-right: 1rem;
margin: auto; margin: auto;
@ -50,11 +50,17 @@
font-weight: 500; font-weight: 500;
font-size: $font-normal; font-size: $font-normal;
margin-left: 1rem; margin-left: 1rem;
@media (max-width:810px) {
margin-left: 0;
}
} }
.field_body{ .field_body{
grid-column: 3 /span 8; grid-column: 3 /span 8;
grid-row: 2; grid-row: 2;
margin-left: 1rem; margin-left: 1rem;
@media (max-width:810px) {
margin-left: 0;
}
} }
.field_field_lien{ .field_field_lien{
@ -64,6 +70,9 @@
width: fit-content; width: fit-content;
padding-bottom: 0.5rem; padding-bottom: 0.5rem;
margin-left: 1rem; margin-left: 1rem;
@media (max-width:810px) {
margin-left: 0;
}
a{ a{
display: inline-flex; display: inline-flex;

201
web/themes/custom/quartiers_de_demain/scss/pages/_presentation.scss
View File

@ -3,23 +3,45 @@
width: 100%; width: 100%;
display: grid; display: grid;
grid-template-columns: repeat(12, 1fr); grid-template-columns: repeat(12, 1fr);
grid-gap: 10px; // grid-gap: 10px;
#block-quartiers-de-demain-views-block-statics-fields-block-1{
order: 2;
border-top: 2px solid $blue_QDD;
padding-top: 0.3rem;
.views-field-field-pieces-jointes{
display: flex;
flex-direction: row;
&::before{
content: url(../images/noun-arrow-download.svg);
padding-right: 00.3rem;
}
.field-content{
display: flex;
flex-direction: column;
font-size: 0.6rem;
font-weight: 800;
span{
font-weight: 400;
}
}
}
}
.layout-content{ .layout-content{
// grid-column: 3 / 11; // grid-column: 3 / 11;
grid-row: 1; grid-row: 1;
order: 2; order: 2;
padding-top: 3rem; padding-top: 3rem;
padding-bottom: 6rem; // padding-bottom: 6rem;
// width: 70%;
// margin: auto;
@media(max-width: 891px){
width: 90%;
}
@media (max-width:500px) { @media (max-width:500px) {
padding-top: 0; padding-top: 0;
} }
.content_container{ .content_container{
display: flex; display: flex;
margin-bottom: 0;
#block-quartiers-de-demain-titredepage{ #block-quartiers-de-demain-titredepage{
display: none; display: none;
} }
@ -29,28 +51,49 @@
.field_body{ .field_body{
padding-left: 20%; padding-left: 20%;
width: 80%; padding-right: 20%;
@media (max-width:810px) {
padding-left: 13%;
padding-right: 13%;
}
@media (max-width:640px) {
padding-left: 10%;
padding-right: 10%;
}
// width: 80%;
h2{ h2{
font-size: $font-medium; font-size: $font-medium;
font-weight: 600; font-weight: 600;
margin-bottom: 0; margin-bottom: 0;
} }
img{
width: 100%;
height: auto;
}
p{ p{
margin-top: 0; // margin-top: 0;
} }
} }
.paragraph{ .paragraph{
padding-top: 1rem; padding-top: 2rem;
padding-bottom: 1rem; padding-bottom: 2rem;
padding-left: 20%; padding-left: 20%;
padding-right: 20%; padding-right: 20%;
@media (max-width:810px) {
padding-left: 13%;
padding-right: 13%;
}
@media (max-width:640px) {
padding-left: 10%;
padding-right: 10%;
}
} }
.field_field_textes{ .field_field_textes{
.field_field_title{ .field_field_title{
text-transform: uppercase; text-transform: uppercase;
font-size: $font-big; font-size: $font-big;
font-weight: 300; font-weight: 400;
} }
#paragraph-id--1, #paragraph-id--2, #paragraph-id--6, #paragraph-id--7, #paragraph-id--8{ #paragraph-id--1, #paragraph-id--2, #paragraph-id--6, #paragraph-id--7, #paragraph-id--8{
.field_field_title{ .field_field_title{
@ -65,6 +108,13 @@
#paragraph-id--1, #paragraph-id--2, #paragraph-id--3, #paragraph-id--4, #paragraph-id--6, #paragraph-id--8{ #paragraph-id--1, #paragraph-id--2, #paragraph-id--3, #paragraph-id--4, #paragraph-id--6, #paragraph-id--8{
background-color: $bleu_fond_header; background-color: $bleu_fond_header;
} }
#paragraph-id--1, #paragraph-id--2, #paragraph-id--3, #paragraph-id--4{
padding-top: 1rem;
}
#paragraph-id--1, #paragraph-id--2, #paragraph-id--3{
padding-bottom: 1rem;
}
#paragraph-id--7, #paragraph-id--8{ #paragraph-id--7, #paragraph-id--8{
text-align: center; text-align: center;
} }
@ -75,26 +125,56 @@
.field_field_title{ .field_field_title{
width: 60%; width: 60%;
margin: auto; margin: auto;
padding-bottom: 1rem;
} }
.field_field_texte div:nth-child(2){ .field_field_texte div:nth-child(2){
display: flex; display: flex;
flex-direction: row; flex-direction: row;
@media(max-width: 500px){
flex-direction: column;
}
p{ p{
display: flex;
flex-direction: column;
padding-right: 30px; padding-right: 30px;
text-align: left; text-align: left;
color: $blue_QDD; color: $blue_QDD;
width: calc(100vw / 3);
@media(max-width: 500px){
padding-right: 0px;
text-align: center;
}
img{
width: 70%;
height: auto;
padding-bottom: 1rem;
}
} }
} }
} }
#paragraph-id--8{ #paragraph-id--8{
padding-bottom: 4rem;
.field_field_title{
padding-bottom: 1rem;
}
.field_field_texte div:nth-child(2){ .field_field_texte div:nth-child(2){
display: flex; display: flex;
flex-direction: row; flex-direction: row;
p{ @media(max-width: 500px){
padding-right: 30px; flex-direction: column;
text-align: left; }
p{
width: calc(100vw / 3);
padding-right: 30px;
text-align: left;
@media(max-width: 500px){
padding-right: 0px;
text-align: center;
} }
}
} }
} }
p{ p{
@ -106,56 +186,53 @@
float: inline-start; float: inline-start;
padding-right: 0.5rem; padding-right: 0.5rem;
img{ img{
width: 50px; width: 40px;
height: auto; height: auto;
margin: auto;
@media(max-width: 891px){
width: 30px;
}
}
}
#paragraph-id--9{
img{
width: -moz-available;
width: 100%;
height: auto;
cursor: url(/img/layout/backgrounds/zoom.cur), -moz-zoom-in;
&:hover{
filter: brightness(75%);
transition: 0.2s;
}
}
.zoom_in{
-ms-transform: scale(1.7); /* IE 9 */
-webkit-transform: scale(1.7); /* Safari 3-8 */
transform: scale(1.7);
max-width: 100vw;
overflow-x: scroll;
&:hover{
filter: brightness(100%);
transition: 0.2s;
cursor:url(/img/layout/backgrounds/zoom.cur),-moz-zoom-out;
overflow-x: scroll;
}
} }
} }
} }
} }
} }
} }
aside{
position: relative;
grid-column: 1 /span 2;
grid-row: 1;
z-index: 100;
// width: 80%;
order: 1;
margin-top: 5rem;
// margin-left: 10%;
// margin-right: 1rem;
@media(max-width:891px){
margin-left: 5%;
margin-top: 9rem;
}
@media (max-width:500px) {
width: 80%;
margin-top: 3rem;
}
.sidebar_first_container{
// display: flex;
// justify-content: flex-end;
position: -webkit-sticky;
position: sticky;
top: 10rem;
@media (max-width: 810px){
display: none;
}
}
.views-field-field-pieces-jointes{
.field-content{
.file--application-pdf{
&::before{
content: url(../images/noun-arrow-download.png);
}
}
}
}
}
} }
.presentation footer{
span.totop {
display: inline-flex;
width: 100vw;
background: $bleu_fond_header;
}
}

4
web/themes/custom/quartiers_de_demain/scss/pages/_static.scss
View File

@ -1,8 +1,9 @@
.node-type-static{ .node-type-static{
.layout-content{ .layout-content{
// grid-column: 1 / span 12; // grid-column: 1 / span 12;
grid-row: 1;
.content_container{ .content_container{
margin-bottom: 3rem;
#block-quartiers-de-demain-titredepage{ #block-quartiers-de-demain-titredepage{
grid-column: 3 /span 9; grid-column: 3 /span 9;
grid-row: 1; grid-row: 1;
@ -34,3 +35,4 @@
} }
} }

55
web/themes/custom/quartiers_de_demain/scss/partials/_aside.scss
View File

@ -1,13 +1,64 @@
.layout-sidebar-first{ .layout-sidebar-first{
display: flex; display: flex;
justify-content: end; justify-content: end;
.sidebar_first_container{ position: relative;
grid-column: 1 /span 2;
grid-row: 1;
z-index: 98;
order: 1;
margin-top: 5rem;
@media(max-width:891px){
margin-left: 5%;
margin-top: 9rem;
}
@media (max-width:500px) {
width: 80%; width: 80%;
margin-top: 3rem;
}
.sidebar_first_container{
display: flex;
flex-direction: column;
width: 80%;
position: sticky;
position: -webkit-sticky;
top: 10rem;
font-weight: 400;
.field-content{
margin-bottom: 0.7rem;
}
@media (max-width: 810px){
display: none;
}
#block-quartiers-de-demain-views-block-statics-block-1{ #block-quartiers-de-demain-views-block-statics-block-1{
order: 1;
text-transform: uppercase; text-transform: uppercase;
} }
// #block-quartiers-de-demain-views-block-statics-fields-block-1{
// order: 2;
// border-top: 2px solid $blue_QDD;
// padding-top: 0.3rem;
// .views-field-field-pieces-jointes{
// display: flex;
// flex-direction: row;
// &::before{
// content: url(../images/noun-arrow-download.svg);
// padding-right: 00.3rem;
// }
// .field-content{
// display: flex;
// flex-direction: column;
// font-size: 0.6rem;
// font-weight: 800;
// span{
// font-weight: 400;
// }
// }
// }
// }
} }
} }

68
web/themes/custom/quartiers_de_demain/scss/partials/_footer.scss
View File

@ -1,18 +1,54 @@
footer{
span.totop {
display: inline-flex;
width: 100vw;
// background: $bleu_fond_header;
#toTop{
margin: auto;
background-color: #fff;
border-top-left-radius: 10%;
border-top-right-radius: 10%;
padding-bottom: 0.5rem;
.fa-arrow-up{
font-size: 1.7rem;
line-height: 2.5rem;
text-align: center;
// background: $footer-bg;
width: 3rem;
height: 2rem;
display: inline-block;
text-align: top;
.fa{
color: #fff;
}
}
}
}
}
.footer{ .footer{
display: grid; display: grid;
grid-template-columns: repeat(12, 1fr); grid-template-columns: repeat(12, 1fr);
grid-template-rows: repeat(1, 1fr); grid-template-rows: repeat(1, 1fr);
background-color: $white-header; background-color: $white-header;
padding-top: 1rem; padding-top: 1rem;
padding-bottom: 1rem;
section{width: fit-content;} section{width: fit-content;}
h2, ul{margin: 0;} h2, ul{margin: 0;}
border-top: 1px solid #808080; border-top: 1px solid #808080;
@media(max-width: 891px){
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
@media(max-width: 600px){
flex-wrap: nowrap;
}
#footer-left{ #footer-left{
grid-column: 1 /span 5; grid-column: 1 /span 5;
grid-row: 1; grid-row: 1;
padding-left: 40px; padding-left: 5%;
.footer_left_container{ .footer_left_container{
display: flex; display: flex;
flex-direction: row; flex-direction: row;
@ -20,11 +56,23 @@
} }
#block-quartiers-de-demain-logoepau{ #block-quartiers-de-demain-logoepau{
height: $header-height; height: $header-height;
@media(max-width: 891px){
height: $header-height-pad;
}
} }
img{ img{
width: auto; width: auto;
height: $header-height; height: $header-height;
@media(max-width: 891px){
height: $header-height-pad;
}
@media(max-width: 660px){
height: $header-height-small;
}
@media(max-width: 450px){
height: $header-height-ultrasmall;
}
} }
} }
@ -36,6 +84,11 @@
ul li{ ul li{
padding-bottom: 0.2rem; padding-bottom: 0.2rem;
} }
@media(max-width: 891px){
ul{
padding-left: 00.5rem;
}
}
} }
} }
#footer-right{ #footer-right{
@ -50,10 +103,13 @@
font-weight: 400; font-weight: 400;
&::before{ &::before{
content: "Nous contacter"; content: "Nous contacter";
padding-bottom: 1rem; padding-bottom: 0.6rem;
font-weight: 600; font-weight: 600;
} }
padding-bottom: 1rem; padding-bottom: 0.6rem;
}
.fa-3x{
font-size: 2em;
} }
} }
} }

65
web/themes/custom/quartiers_de_demain/scss/partials/_header.scss
View File

@ -3,7 +3,7 @@ header{
grid-template-columns: repeat(12, 1fr); grid-template-columns: repeat(12, 1fr);
grid-gap: 10px; grid-gap: 10px;
grid-template-rows: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr);
height: 150px; height: $header-height;
background-color: $white-header; background-color: $white-header;
z-index: 99; z-index: 99;
width: 100vw; width: 100vw;
@ -13,8 +13,16 @@ header{
position: relative; position: relative;
top: 0; top: 0;
border-bottom: 1px solid #808080; border-bottom: 1px solid #808080;
@media (max-width:800px) { @media (max-width:810px) {
width: 800px; // width: 800px;
height: $header-height-pad;
}
@media(max-width: 660px){
height: $header-height-small;
}
@media(max-width: 450px){
display: flex;
height: $header-height-ultrasmall;
} }
.contextual-region{ .contextual-region{
width: max-content; width: max-content;
@ -26,27 +34,55 @@ header{
display: flex; display: flex;
flex-direction: row; flex-direction: row;
border-right: 1px solid #808080; border-right: 1px solid #808080;
padding-left: 40px; padding-left: 2%;
padding-right: 2%;
@media(max-width: 660px){
height: inherit;
}
#block-quartiers-de-demain-logorepu-2{ #block-quartiers-de-demain-logorepu-2{
@media(max-width: 891px){
height: $header-height-pad;
}
} }
#block-quartiers-de-demain-logoepau-2{ #block-quartiers-de-demain-logoepau-2{
height: $header-height; height: $header-height;
@media(max-width: 891px){
height: $header-height-pad;
}
}
#block-quartiers-de-demain-logoquartiersdedemain{
margin-left: auto;
// padding-right: 5%;
} }
img{ img{
width: auto; width: auto;
height: $header-height; height: $header-height;
@media(max-width: 891px){
height: $header-height-pad;
}
@media(max-width: 660px){
height: $header-height-small;
}
@media(max-width: 450px){
height: $header-height-ultrasmall;
}
} }
} }
.header_right_container{ .header_right_container{
padding-right: 10px; padding-right: 10px;
@media(max-width: 660px){
padding-right: 0;
}
.language-switcher-language-url{ .language-switcher-language-url{
ul{ ul{
display: flex; display: flex;
flex-direction: row; flex-direction: row;
font-size: $font-medium; font-size: $font-medium;
padding: 0; padding: 0;
@media(max-width: 660px){
margin-bottom: 0;
}
li:nth-child(1){ li:nth-child(1){
&::after{ &::after{
content: "/"; content: "/";
@ -65,18 +101,14 @@ header{
display: none; display: none;
grid-row: 3; grid-row: 3;
grid-column: 1 /span 12; grid-column: 1 /span 12;
position: absolute; position: absolute;
top: 100%; top: 100%;
width: 100%; width: 100%;
background: $bleu_fond_header; background: $bleu_fond_header;
border-bottom: 1px solid #808080; border-bottom: 1px solid #808080;
border-top: 1px solid #808080; border-top: 1px solid #808080;
font-size: $font-big; font-size: $font-big;
text-align: center;
#block-quartiers-de-demain-entete{ #block-quartiers-de-demain-entete{
grid-column: 1 /span 11; grid-column: 1 /span 11;
order: 2; order: 2;
@ -84,6 +116,9 @@ header{
h2{ h2{
display: none; display: none;
} }
@media(max-width: 660px){
}
} }
} }
@ -104,6 +139,9 @@ header{
background: black; background: black;
border-radius: 3px; border-radius: 3px;
z-index: 1; z-index: 1;
@media(max-width: 660px){
width: 25px;
}
} }
} }
.open-block{ .open-block{
@ -111,10 +149,17 @@ header{
display: grid; display: grid;
align-items: center; align-items: center;
margin: auto; margin: auto;
@media(max-width: 450px){
height: $header-height-ultrasmall;
}
span{ span{
margin-bottom: 13px; margin-bottom: 13px;
transform-origin: 4px 0px; transform-origin: 4px 0px;
@media(max-width: 660px){
margin-bottom: 5px;
}
} }
} }
.open-block.opened { .open-block.opened {
margin: auto; margin: auto;

2
web/themes/custom/quartiers_de_demain/scss/quartiers_de_demain.scss
View File

@ -26,7 +26,7 @@
/*pages*/ /*pages*/
@import "pages/home";
@import "pages/partenaires"; @import "pages/partenaires";
@import "pages/presentation"; @import "pages/presentation";
@import "pages/static"; @import "pages/static";

4
web/themes/custom/quartiers_de_demain/templates/paragraph--texte--textes-toc.html.twig → web/themes/custom/quartiers_de_demain/templates/--paragraph--static-parts.html.twig
View File

@ -1,4 +1,4 @@
{# {#
/** /**
* @file * @file
* Default theme implementation to display a paragraph. * Default theme implementation to display a paragraph.
@ -52,7 +52,7 @@
{% block paragraph %} {% block paragraph %}
{# <div{{ attributes.addClass(classes) }}> #} {# <div{{ attributes.addClass(classes) }}> #}
<div{{ attributes.addClass(classes) }}> <div{{ attributes.addClass(classes) }}>
<a href="{{ ancre_href }}"> {# <a href="{{ ancre_href }}"> #}
{% block content %} {% block content %}
{{ content }} {{ content }}
{% endblock %} {% endblock %}

81
web/themes/custom/quartiers_de_demain/templates/field--field-textes.html.twig Normal file
View File

@ -0,0 +1,81 @@
{#
/**
* @file
* Default theme implementation for a field.
*
* To override output, copy the "field.html.twig" from the templates directory
* to your theme's directory and customize it, just like customizing other
* Drupal templates such as page.html.twig or node.html.twig.
*
* Instead of overriding the theming for all fields, you can also just override
* theming for a subset of fields using
* @link themeable Theme hook suggestions. @endlink For example,
* here are some theme hook suggestions that can be used for a field_foo field
* on an article node type:
* - field--node--field-foo--article.html.twig
* - field--node--field-foo.html.twig
* - field--node--article.html.twig
* - field--field-foo.html.twig
* - field--text-with-summary.html.twig
* - field.html.twig
*
* Available variables:
* - attributes: HTML attributes for the containing element.
* - label_hidden: Whether to show the field label or not.
* - title_attributes: HTML attributes for the title.
* - label: The label for the field.
* - multiple: TRUE if a field can contain multiple items.
* - items: List of all the field items. Each item contains:
* - attributes: List of HTML attributes for each item.
* - content: The field item's content.
* - entity_type: The entity type to which the field belongs.
* - field_name: The name of the field.
* - field_type: The type of the field.
* - label_display: The display settings for the label.
*
* @see template_preprocess_field()
*
* @ingroup themeable
*/
#}
{%
set title_classes = [
'field',
'field--name-' ~ field_name|clean_class,
'field--type-' ~ field_type|clean_class,
'field--label-' ~ label_display,
label_display == 'visually_hidden' ? 'visually-hidden',
]
%}
{%
set ancre_href = '#field-id--' ~ field.id()
%}
{% if label_hidden %}
{% if multiple %}
<div{{ attributes }}>
{% for item in items %}
<div{{ item.attributes }}>{{ item.content }}</div>
{% endfor %}
</div>
{% else %}
{% for item in items %}
{# <div{{ attributes }}>{{ item.content }}</div> #}
<div{{ attributes.addClass(classes).setAttribute('id', 'field-id--' ~ field.id()) }}>{{ item.content }}</div>
{% endfor %}
{% endif %}
{% else %}
<div{{ attributes }}>
<div{{ title_attributes.addClass(title_classes) }}>{{ label }}</div>
{% if multiple %}
<div>
{% endif %}
{% for item in items %}
<div{{ item.attributes }}>{{ item.content }}</div>
{% endfor %}
{% if multiple %}
</div>
{% endif %}
</div>
{% endif %}

4
web/themes/custom/quartiers_de_demain/templates/field.html.twig
View File

@ -47,7 +47,9 @@
label_display == 'visually_hidden' ? 'visually-hidden', label_display == 'visually_hidden' ? 'visually-hidden',
] ]
%} %}
{%
set ancre_href = '#paragraph-id--' ~ paragraph.id()
%}
{% if label_hidden %} {% if label_hidden %}
{% if multiple %} {% if multiple %}
<div{{ attributes }}> <div{{ attributes }}>

1
web/themes/custom/quartiers_de_demain/templates/html.html.twig
View File

@ -32,6 +32,7 @@
<title>{{ head_title|safe_join(' | ') }}</title> <title>{{ head_title|safe_join(' | ') }}</title>
<css-placeholder token="{{ placeholder_token }}"> <css-placeholder token="{{ placeholder_token }}">
<js-placeholder token="{{ placeholder_token }}"> <js-placeholder token="{{ placeholder_token }}">
</head> </head>
<body{{ attributes }}> <body{{ attributes }}>
{# {#

92
web/themes/custom/quartiers_de_demain/templates/page--front.html.twig Normal file
View File

@ -0,0 +1,92 @@
{#
/**
* @file
* Claro's theme implementation to display a single Drupal page.
*
* The doctype, html, head, and body tags are not in this template. Instead
* they can be found in the html.html.twig template normally located in the
* core/modules/system directory.
*
* Available variables:
*
* General utility variables:
* - base_path: The base URL path of the Drupal installation. Will usually be
* "/" unless you have installed Drupal in a sub-directory.
* - is_front: A flag indicating if the current page is the front page.
* - logged_in: A flag indicating if the user is registered and signed in.
* - is_admin: A flag indicating if the user has permission to access
* administration pages.
*
* Site identity:
* - front_page: The URL of the front page. Use this instead of base_path when
* linking to the front page. This includes the language domain or prefix.
*
* Page content (in order of occurrence in the default page.html.twig):
* - node: Fully loaded node, if there is an automatically-loaded node
* associated with the page and the node ID is the second argument in the
* page's path (e.g. node/12345 and node/12345/revisions, but not
* comment/reply/12345).
*
* Regions:
* - page.header: Items for the header region.
* - page.pre_content: Items for the pre-content region.
* - page.breadcrumb: Items for the breadcrumb region.
* - page.highlighted: Items for the highlighted region.
* - page.help: Dynamic help text, mostly for admin pages.
* - page.content: The main content of the current page.
*
* @see template_preprocess_page()
* @see html.html.twig
*/
#}
<div class="layout-container" >
<header role="banner">
{{ page.header_left }}
{{ page.header_right }}
{{ page.header_nav }}
</header>
{{ page.primary_menu }}
{{ page.secondary_menu }}
{{ page.breadcrumb }}
{{ page.highlighted }}
{{ page.help }}
<main role="main" id="home">
{# <a id="main-content" tabindex="-1"></a>link is in html.html.twig #}
<div class="layout-content">
{{ page.content }}
</div>{# /.layout-content #}
{% if page.sidebar_first %}
<aside class="layout-sidebar-first" role="complementary">
{{ page.sidebar_first }}
</aside>
{% endif %}
{% if page.sidebar_second %}
<aside class="layout-sidebar-second" role="complementary">
{{ page.sidebar_second }}
</aside>
{% endif %}
</main>
{# {% if page.footer_top or page.footer_left or page.footer_middle or page.footer_right or page.footer_bottom %} #}
<footer role="contentinfo">
{# <section id="footer-top">{{ page.footer_top }}</section> #}
<div class="footer">
<section id="footer-left">{{ page.footer_left }}</section>
<section id="footer-middle">{{ page.footer_middle }}</section>
<section id="footer-right">{{ page.footer_right }}</section>
</div>
{# <section id="footer-bottom">{{ page.footer_bottom }}</section> #}
</footer>
{# {% endif %} #}
</div>{# /.layout-container #}

6
web/themes/custom/quartiers_de_demain/templates/page--node--6.html.twig
View File

@ -39,7 +39,7 @@
* @see html.html.twig * @see html.html.twig
*/ */
#} #}
<div class="layout-container" > <div class="layout-container presentation" >
<header role="banner"> <header role="banner">
{{ page.header_left }} {{ page.header_left }}
@ -79,7 +79,9 @@
{# {% if page.footer_top or page.footer_left or page.footer_middle or page.footer_right or page.footer_bottom %} #} {# {% if page.footer_top or page.footer_left or page.footer_middle or page.footer_right or page.footer_bottom %} #}
<footer role="contentinfo"> <footer role="contentinfo">
{# <section id="footer-top">{{ page.footer_top }}</section> #} {# <section id="footer-top"> #}
<span class="totop"><a href="#" id="toTop"><i class="fa fa-arrow-up"></i></a></span>
{# </section> #}
<div class="footer"> <div class="footer">
<section id="footer-left">{{ page.footer_left }}</section> <section id="footer-left">{{ page.footer_left }}</section>
<section id="footer-middle">{{ page.footer_middle }}</section> <section id="footer-middle">{{ page.footer_middle }}</section>

4
web/themes/custom/quartiers_de_demain/templates/page--partenaires.html.twig
View File

@ -79,7 +79,9 @@
{# {% if page.footer_top or page.footer_left or page.footer_middle or page.footer_right or page.footer_bottom %} #} {# {% if page.footer_top or page.footer_left or page.footer_middle or page.footer_right or page.footer_bottom %} #}
<footer role="contentinfo"> <footer role="contentinfo">
{# <section id="footer-top">{{ page.footer_top }}</section> #} {# <section id="footer-top"> #}
<span class="totop"><a href="#" id="toTop"><i class="fa fa-arrow-up"></i></a></span>
{# </section> #}
<div class="footer"> <div class="footer">
<section id="footer-left">{{ page.footer_left }}</section> <section id="footer-left">{{ page.footer_left }}</section>
<section id="footer-middle">{{ page.footer_middle }}</section> <section id="footer-middle">{{ page.footer_middle }}</section>

4
web/themes/custom/quartiers_de_demain/templates/page.html.twig
View File

@ -79,7 +79,9 @@
{# {% if page.footer_top or page.footer_left or page.footer_middle or page.footer_right or page.footer_bottom %} #} {# {% if page.footer_top or page.footer_left or page.footer_middle or page.footer_right or page.footer_bottom %} #}
<footer role="contentinfo"> <footer role="contentinfo">
{# <section id="footer-top">{{ page.footer_top }}</section> #} {# <section id="footer-top"> #}
<span class="totop"><a href="#" id="toTop"><i class="fa fa-arrow-up"></i></a></span>
{# </section> #}
<div class="footer"> <div class="footer">
<section id="footer-left">{{ page.footer_left }}</section> <section id="footer-left">{{ page.footer_left }}</section>
<section id="footer-middle">{{ page.footer_middle }}</section> <section id="footer-middle">{{ page.footer_middle }}</section>

4
web/themes/custom/quartiers_de_demain/templates/paragraph.html.twig
View File

@ -46,10 +46,12 @@
not paragraph.isPublished() ? 'paragraph--unpublished' not paragraph.isPublished() ? 'paragraph--unpublished'
] ]
%} %}
{% block paragraph %} {% block paragraph %}
{# <div{{ attributes.addClass(classes) }}> #} {# <div{{ attributes.addClass(classes) }}> #}
<div{{ attributes.addClass(classes).setAttribute('id', 'paragraph-id--' ~ paragraph.id()) }}> <div{{ attributes.addClass(classes).setAttribute('id', 'paragraph-id--' ~ paragraph.id()) }}>
{% block content %}
{% block content %}
{{ content }} {{ content }}
{% endblock %} {% endblock %}
</div> </div>

67
web/themes/custom/quartiers_de_demain/templates/views-view-fields.html.twig Normal file
View File

@ -0,0 +1,67 @@
{#
/**
* @file
* Default view template to display all the fields in a row.
*
* Available variables:
* - view: The view in use.
* - fields: A list of fields, each one contains:
* - content: The output of the field.
* - raw: The raw data for the field, if it exists. This is NOT output safe.
* - class: The safe class ID to use.
* - handler: The Views field handler controlling this field.
* - inline: Whether or not the field should be inline.
* - wrapper_element: An HTML element for a wrapper.
* - wrapper_attributes: List of attributes for wrapper element.
* - separator: An optional separator that may appear before a field.
* - label: The field's label text.
* - label_element: An HTML element for a label wrapper.
* - label_attributes: List of attributes for label wrapper.
* - label_suffix: Colon after the label.
* - element_type: An HTML element for the field content.
* - element_attributes: List of attributes for HTML element for field content.
* - has_label_colon: A boolean indicating whether to display a colon after
* the label.
* - element_type: An HTML element for the field content.
* - element_attributes: List of attributes for HTML element for field content.
* - row: The raw result from the query, with all data it fetched.
*
* @see template_preprocess_views_view_fields()
*
* @ingroup themeable
*/
#}
{% for field in fields -%}
{{ field.separator }}
{%- if field.wrapper_element -%}
<{{ field.wrapper_element }}{{ field.wrapper_attributes }}>
{%- endif %}
{%- if field.label -%}
{%- if field.label_element -%}
<{{ field.label_element }}{{ field.label_attributes }}>{{ field.label }}{{ field.label_suffix }}</{{ field.label_element }}>
{%- else -%}
{{ field.label }}{{ field.label_suffix }}
{%- endif %}
{%- endif %}
{%- if field.element_type -%}
<{{ field.element_type }}{{ field.element_attributes }}>
{# Vérifiez d'abord si le champ contient des données #}
{% if row._entity.static_parts is not empty %}
{# Accédez à l'ID du paragraphe #}
{% set paragraph_id = row._entity.static_parts.entity.id() %}
{% endif %}
{# Créez le lien d'ancrage avec l'ID du paragraphe #}
<a href="#{{ paragraph_id }}">{{ field.content }}</a>
</{{ field.element_type }}>
{%- else -%}
{{ field.content }}
{%- endif %}
{%- if field.wrapper_element -%}
</{{ field.wrapper_element }}>
{%- endif %}
{%- endfor %}