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

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

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

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/) -->
<svg
width="210mm"
height="296.99997mm"
viewBox="0 0 210 296.99997"
width="15mm"
height="15mm"
viewBox="0 0 10.531931 10.531931"
version="1.1"
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: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
id="defs1" />
<g
inkscape:label="Calque 1"
inkscape:groupmode="layer"
id="layer1"
transform="translate(-102.65834,-91.281253)">
<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

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

@ -37,6 +37,62 @@
$('.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-pad : 110px;
$header-height-small : 70px;
$header-height-ultrasmall : 50px;
$width-menu-slidedown : 550px;
.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;
}
.field_field_logo{
grid-column: 1 /span 2;
grid-column: 1 / 3;
grid-row: 1 /span 3;
padding-right: 1rem;
margin: auto;
@ -50,11 +50,17 @@
font-weight: 500;
font-size: $font-normal;
margin-left: 1rem;
@media (max-width:810px) {
margin-left: 0;
}
}
.field_body{
grid-column: 3 /span 8;
grid-row: 2;
margin-left: 1rem;
@media (max-width:810px) {
margin-left: 0;
}
}
.field_field_lien{
@ -64,6 +70,9 @@
width: fit-content;
padding-bottom: 0.5rem;
margin-left: 1rem;
@media (max-width:810px) {
margin-left: 0;
}
a{
display: inline-flex;

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

@ -3,23 +3,45 @@
width: 100%;
display: grid;
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{
// 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%;
}
// padding-bottom: 6rem;
@media (max-width:500px) {
padding-top: 0;
}
.content_container{
display: flex;
margin-bottom: 0;
#block-quartiers-de-demain-titredepage{
display: none;
}
@ -29,28 +51,49 @@
.field_body{
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{
font-size: $font-medium;
font-weight: 600;
margin-bottom: 0;
}
img{
width: 100%;
height: auto;
}
p{
margin-top: 0;
// margin-top: 0;
}
}
.paragraph{
padding-top: 1rem;
padding-bottom: 1rem;
padding-top: 2rem;
padding-bottom: 2rem;
padding-left: 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_title{
text-transform: uppercase;
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{
.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{
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{
text-align: center;
}
@ -75,25 +125,55 @@
.field_field_title{
width: 60%;
margin: auto;
padding-bottom: 1rem;
}
.field_field_texte div:nth-child(2){
display: flex;
flex-direction: row;
@media(max-width: 500px){
flex-direction: column;
}
p{
display: flex;
flex-direction: column;
padding-right: 30px;
text-align: left;
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{
padding-bottom: 4rem;
.field_field_title{
padding-bottom: 1rem;
}
.field_field_texte div:nth-child(2){
display: flex;
flex-direction: row;
@media(max-width: 500px){
flex-direction: column;
}
p{
width: calc(100vw / 3);
padding-right: 30px;
text-align: left;
@media(max-width: 500px){
padding-right: 0px;
text-align: center;
}
}
}
}
@ -106,56 +186,53 @@
float: inline-start;
padding-right: 0.5rem;
img{
width: 50px;
width: 40px;
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;
}
}
}
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;
.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;
}
}
.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{
.layout-content{
// grid-column: 1 / span 12;
grid-row: 1;
.content_container{
margin-bottom: 3rem;
#block-quartiers-de-demain-titredepage{
grid-column: 3 /span 9;
grid-row: 1;
@ -34,3 +35,4 @@
}
}

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

@ -1,12 +1,63 @@
.layout-sidebar-first{
display: flex;
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%;
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{
order: 1;
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;
// }
// }
// }
// }
}

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

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

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

2
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

@ -52,7 +52,7 @@
{% block paragraph %}
{# <div{{ attributes.addClass(classes) }}> #}
<div{{ attributes.addClass(classes) }}>
<a href="{{ ancre_href }}">
{# <a href="{{ ancre_href }}"> #}
{% block content %}
{{ content }}
{% 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',
]
%}
{%
set ancre_href = '#paragraph-id--' ~ paragraph.id()
%}
{% if label_hidden %}
{% if multiple %}
<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>
<css-placeholder token="{{ placeholder_token }}">
<js-placeholder token="{{ placeholder_token }}">
</head>
<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
*/
#}
<div class="layout-container" >
<div class="layout-container presentation" >
<header role="banner">
{{ 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 %} #}
<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">
<section id="footer-left">{{ page.footer_left }}</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 %} #}
<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">
<section id="footer-left">{{ page.footer_left }}</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 %} #}
<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">
<section id="footer-left">{{ page.footer_left }}</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'
]
%}
{% block paragraph %}
{# <div{{ attributes.addClass(classes) }}> #}
<div{{ attributes.addClass(classes).setAttribute('id', 'paragraph-id--' ~ paragraph.id()) }}>
{% block content %}
{% block content %}
{{ content }}
{% endblock %}
</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 %}