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

css home enjeux

This commit is contained in:
ouidade 2024-07-03 16:32:00 +02:00
parent d47e771521
commit f717054454
19 changed files with 116 additions and 94 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,6 +1,14 @@
/*quartiers_de_demain*/ /*quartiers_de_demain*/
/*global*/ /*global*/
/* Colors used for quartiers_de_demain */ /* Colors used for quartiers_de_demain */
p {
font-size: 0.6rem;
}
h3 {
font-size: 1.2rem;
}
@media (min-width: 48rem) { @media (min-width: 48rem) {
:root { :root {
font-size: calc(1rem + (1vw - 0.48rem) * 1.389); font-size: calc(1rem + (1vw - 0.48rem) * 1.389);
@ -13,6 +21,25 @@
font-size: 2rem; font-size: 2rem;
} }
} }
/*Gilroy*/
@font-face {
font-family: "Gilroy";
src: url("./theme/custom/quartiers_de_demain/fonts/Gilroy/Gilroy-Light.otf") format("otf");
font-weight: 300;
font-style: normal;
}
@font-face {
font-family: "Gilroy";
src: url("../fonts/Gilroy/Gilroy-Medium.otf") format("otf");
font-weight: 400;
font-style: normal;
}
@font-face {
font-family: "Gilroy";
src: url("../fonts/Gilroy/Gilroy-SemiBold.otf") format("otf");
font-weight: 600;
font-style: normal;
}
/*marianne*/ /*marianne*/
@font-face { @font-face {
font-family: "Marianne"; font-family: "Marianne";
@ -97,7 +124,7 @@
position: relative; position: relative;
width: 100vw; width: 100vw;
background-color: rgb(255, 255, 255); background-color: rgb(255, 255, 255);
font-family: "Marianne", sans-serif; font-family: "Gilroy", sans-serif;
font-weight: 400; font-weight: 400;
font-style: normal; font-style: normal;
font-size: 0.8rem; font-size: 0.8rem;
@ -118,7 +145,7 @@
} }
.layout-content { .layout-content {
padding-top: 125px; padding-top: 320px;
} }
@media (max-width: 500px) { @media (max-width: 500px) {
.layout-content { .layout-content {
@ -164,30 +191,13 @@ header {
display: grid; display: grid;
grid-template-columns: repeat(12, 1fr); grid-template-columns: repeat(12, 1fr);
grid-template-rows: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr);
height: 125px; height: 320px;
background-color: rgb(255, 255, 255); background-color: rgb(255, 255, 255);
z-index: 99; z-index: 99;
width: 100vw; width: 38vw;
max-width: 100vw; max-width: 100vw;
position: fixed;
top: 0; top: 0;
border-bottom: 1px solid #808080; border: 1px solid #808080;
}
@media (max-width: 810px) {
header {
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;
@ -206,13 +216,17 @@ header .header_left_container {
height: inherit; height: inherit;
} }
} }
header .header_left_container #block-quartiers-de-demain-logorepu-2 {
display: none;
}
@media (max-width: 891px) { @media (max-width: 891px) {
header .header_left_container #block-quartiers-de-demain-logorepu-2 { header .header_left_container #block-quartiers-de-demain-logorepu-2 {
height: 110px; height: 110px;
} }
} }
header .header_left_container #block-quartiers-de-demain-logoepau-2 { header .header_left_container #block-quartiers-de-demain-logoepau-2 {
height: 125px; display: none;
height: 320px;
} }
@media (max-width: 891px) { @media (max-width: 891px) {
header .header_left_container #block-quartiers-de-demain-logoepau-2 { header .header_left_container #block-quartiers-de-demain-logoepau-2 {
@ -220,12 +234,13 @@ header .header_left_container #block-quartiers-de-demain-logoepau-2 {
} }
} }
header .header_left_container #block-quartiers-de-demain-logoquartiersdedemain { header .header_left_container #block-quartiers-de-demain-logoquartiersdedemain {
margin-left: auto;
padding-right: 5%; padding-right: 5%;
margin: auto;
} }
header .header_left_container img { header .header_left_container img {
width: auto; width: auto;
height: 125px; margin: auto;
height: 320px;
} }
@media (max-width: 891px) { @media (max-width: 891px) {
header .header_left_container img { header .header_left_container img {
@ -286,13 +301,12 @@ header .header_nav_container {
display: none; display: none;
grid-row: 3; grid-row: 3;
grid-column: 1/span 12; grid-column: 1/span 12;
position: absolute;
top: 100%; top: 100%;
width: 100%; width: 100%;
background: rgb(232, 235, 244); background: rgb(232, 235, 244);
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: 1.2rem;
text-align: center; text-align: center;
} }
header .header_nav_container #block-quartiers-de-demain-entete { header .header_nav_container #block-quartiers-de-demain-entete {
@ -441,7 +455,7 @@ footer span.totop #toTop .arrow-up::before {
} }
} }
.footer #footer-left .footer_left_container #block-quartiers-de-demain-logoepau { .footer #footer-left .footer_left_container #block-quartiers-de-demain-logoepau {
height: 125px; height: 320px;
} }
@media (max-width: 700px) { @media (max-width: 700px) {
.footer #footer-left .footer_left_container #block-quartiers-de-demain-logoepau { .footer #footer-left .footer_left_container #block-quartiers-de-demain-logoepau {
@ -450,7 +464,7 @@ footer span.totop #toTop .arrow-up::before {
} }
.footer #footer-left .footer_left_container img { .footer #footer-left .footer_left_container img {
width: auto; width: auto;
height: 125px; height: 320px;
} }
@media (max-width: 700px) { @media (max-width: 700px) {
.footer #footer-left .footer_left_container img { .footer #footer-left .footer_left_container img {
@ -685,14 +699,14 @@ footer span.totop #toTop .arrow-up::before {
} }
#home article.node-type-static #paragraph-id--1 { #home article.node-type-static #paragraph-id--1 {
background-color: #edefe8; background-color: #edefe8;
padding-top: 4rem; padding-top: 2rem;
padding-bottom: 4rem; padding-bottom: 2rem;
} }
#home article.node-type-static #paragraph-id--1 .field_field_picto { #home article.node-type-static #paragraph-id--1 .field_field_picto {
display: none; display: none;
} }
#home article.node-type-static #paragraph-id--1 .field_field_texte { #home article.node-type-static #paragraph-id--1 .field_field_texte {
width: 65%; width: 50%;
margin: auto; margin: auto;
} }
#home article.node-type-static #paragraph-id--1 .field_field_texte .colone-picto { #home article.node-type-static #paragraph-id--1 .field_field_texte .colone-picto {
@ -702,10 +716,8 @@ footer span.totop #toTop .arrow-up::before {
justify-content: flex-start; justify-content: flex-start;
} }
#home article.node-type-static #paragraph-id--1 .field_field_texte .colone-picto h3 { #home article.node-type-static #paragraph-id--1 .field_field_texte .colone-picto h3 {
flex: 1 90%; flex: 1 100%;
color: #0833c2; color: #0833c2;
font-size: 1.5rem;
padding-right: 3rem;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
} }
@ -723,52 +735,42 @@ footer span.totop #toTop .arrow-up::before {
#home article.node-type-static #paragraph-id--1 .field_field_texte .colone-picto p:nth-of-type(1)::before { #home article.node-type-static #paragraph-id--1 .field_field_texte .colone-picto p:nth-of-type(1)::before {
content: url("../img/fanion.svg"); content: url("../img/fanion.svg");
padding-bottom: 1rem; padding-bottom: 1rem;
height: 120px;
} }
#home article.node-type-static #paragraph-id--1 .field_field_texte .colone-picto p:nth-of-type(2)::before { #home article.node-type-static #paragraph-id--1 .field_field_texte .colone-picto p:nth-of-type(2)::before {
content: url("../img/pouce.svg"); content: url("../img/pouce.svg");
padding-bottom: 1rem; padding-bottom: 1rem;
height: 120px;
} }
#home article.node-type-static #paragraph-id--1 .field_field_texte .colone-picto p:nth-of-type(3)::before { #home article.node-type-static #paragraph-id--1 .field_field_texte .colone-picto p:nth-of-type(3)::before {
content: url("../img/planete.svg"); content: url("../img/planete.svg");
padding-bottom: 1rem; padding-bottom: 1rem;
height: 120px;
} }
#home article.node-type-static #paragraph-id--1 .field_field_texte .colone-picto p:nth-of-type(4)::before { #home article.node-type-static #paragraph-id--1 .field_field_texte .colone-picto p:nth-of-type(4)::before {
content: url("../img/puzzle.svg"); content: url("../img/puzzle.svg");
padding-bottom: 1rem; padding-bottom: 1rem;
height: 120px;
} }
#home article.node-type-static #paragraph-id--1 .field_field_texte .colone-picto p:nth-of-type(5)::before { #home article.node-type-static #paragraph-id--1 .field_field_texte .colone-picto p:nth-of-type(5)::before {
content: url("../img/cube.svg"); content: url("../img/cube.svg");
padding-bottom: 1rem; padding-bottom: 1rem;
height: 120px;
} }
#home article.node-type-static #paragraph-id--1 .field_field_texte .colone-picto p:nth-of-type(6)::before { #home article.node-type-static #paragraph-id--1 .field_field_texte .colone-picto p:nth-of-type(6)::before {
content: url("../img/ampoule.svg"); content: url("../img/ampoule.svg");
padding-bottom: 1rem; padding-bottom: 1rem;
height: 120px;
} }
#home article.node-type-static #paragraph-id--1 .field_field_texte .colone-picto p:nth-of-type(7)::before { #home article.node-type-static #paragraph-id--1 .field_field_texte .colone-picto p:nth-of-type(7)::before {
content: url("../img/bonhome.svg"); content: url("../img/bonhome.svg");
padding-bottom: 1rem; padding-bottom: 1rem;
height: 120px;
} }
#home article.node-type-static #paragraph-id--1 .field_field_texte .colone-picto p:nth-of-type(8)::before { #home article.node-type-static #paragraph-id--1 .field_field_texte .colone-picto p:nth-of-type(8)::before {
content: url("../img/feuilles.svg"); content: url("../img/feuilles.svg");
padding-bottom: 1rem; padding-bottom: 1rem;
height: 120px;
} }
#home article.node-type-static #paragraph-id--1 .field_field_texte .colone-picto p:nth-of-type(9)::before { #home article.node-type-static #paragraph-id--1 .field_field_texte .colone-picto p:nth-of-type(9)::before {
content: url("../img/calendrier.svg"); content: url("../img/calendrier.svg");
padding-bottom: 1rem; padding-bottom: 1rem;
height: 120px;
} }
#home article.node-type-static #paragraph-id--1 .field_field_texte .colone-picto p:nth-of-type(10)::before { #home article.node-type-static #paragraph-id--1 .field_field_texte .colone-picto p:nth-of-type(10)::before {
content: url("../img/crayons.svg"); content: url("../img/crayons.svg");
padding-bottom: 1rem; padding-bottom: 1rem;
height: 120px;
} }
#home article.node-type-static #paragraph-id--2, #home article.node-type-static #paragraph-id--2,
#home article.node-type-static #paragraph-id--3, #home article.node-type-static #paragraph-id--3,

BIN
web/themes/custom/quartiers_de_demain/dist/assets/fonts/Gilroy/Gilroy-Light.otf vendored Normal file
View File

Binary file not shown.

BIN
web/themes/custom/quartiers_de_demain/dist/assets/fonts/Gilroy/Gilroy-Medium.otf vendored Normal file
View File

Binary file not shown.

BIN
web/themes/custom/quartiers_de_demain/dist/assets/fonts/Gilroy/Gilroy-SemiBold.otf vendored Normal file
View File

Binary file not shown.

2
web/themes/custom/quartiers_de_demain/dist/assets/img/ampoule.svg vendored
View File

@ -5,7 +5,7 @@
version="1.1" version="1.1"
id="svg1" id="svg1"
width="115.54132" width="115.54132"
height="113.3667" height="80"
viewBox="0 0 115.54132 113.3667" viewBox="0 0 115.54132 113.3667"
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
xmlns:svg="http://www.w3.org/2000/svg"> xmlns:svg="http://www.w3.org/2000/svg">

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.7 KiB

After

Width:  |  Height:  |  Size: 1.7 KiB

2
web/themes/custom/quartiers_de_demain/dist/assets/img/bonhome.svg vendored
View File

@ -5,7 +5,7 @@
version="1.1" version="1.1"
id="svg1" id="svg1"
width="75.368286" width="75.368286"
height="114.56152" height="88"
viewBox="0 0 75.368286 114.56152" viewBox="0 0 75.368286 114.56152"
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
xmlns:svg="http://www.w3.org/2000/svg"> xmlns:svg="http://www.w3.org/2000/svg">

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2.5 KiB

After

Width:  |  Height:  |  Size: 2.5 KiB

2
web/themes/custom/quartiers_de_demain/dist/assets/img/calendrier.svg vendored
View File

@ -5,7 +5,7 @@
version="1.1" version="1.1"
id="svg1" id="svg1"
width="126.14136" width="126.14136"
height="114.36377" height="80"
viewBox="0 0 126.14136 114.36377" viewBox="0 0 126.14136 114.36377"
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
xmlns:svg="http://www.w3.org/2000/svg"> xmlns:svg="http://www.w3.org/2000/svg">

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.4 KiB

After

Width:  |  Height:  |  Size: 1.4 KiB

2
web/themes/custom/quartiers_de_demain/dist/assets/img/crayons.svg vendored
View File

@ -5,7 +5,7 @@
version="1.1" version="1.1"
id="svg1" id="svg1"
width="71.040039" width="71.040039"
height="99.820801" height="80"
viewBox="0 0 71.040039 99.820799" viewBox="0 0 71.040039 99.820799"
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
xmlns:svg="http://www.w3.org/2000/svg"> xmlns:svg="http://www.w3.org/2000/svg">

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.4 KiB

After

Width:  |  Height:  |  Size: 1.4 KiB

2
web/themes/custom/quartiers_de_demain/dist/assets/img/cube.svg vendored
View File

@ -5,7 +5,7 @@
version="1.1" version="1.1"
id="svg1" id="svg1"
width="120.29468" width="120.29468"
height="111.03076" height="80"
viewBox="0 0 120.29468 111.03076" viewBox="0 0 120.29468 111.03076"
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
xmlns:svg="http://www.w3.org/2000/svg"> xmlns:svg="http://www.w3.org/2000/svg">

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.4 KiB

After

Width:  |  Height:  |  Size: 1.4 KiB

2
web/themes/custom/quartiers_de_demain/dist/assets/img/fanion.svg vendored
View File

@ -5,7 +5,7 @@
version="1.1" version="1.1"
id="svg1" id="svg1"
width="78.958679" width="78.958679"
height="110.33325" height="80"
viewBox="0 0 78.958679 110.33325" viewBox="0 0 78.958679 110.33325"
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
xmlns:svg="http://www.w3.org/2000/svg"> xmlns:svg="http://www.w3.org/2000/svg">

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 884 B

After

Width:  |  Height:  |  Size: 877 B

2
web/themes/custom/quartiers_de_demain/dist/assets/img/feuilles.svg vendored
View File

@ -5,7 +5,7 @@
version="1.1" version="1.1"
id="svg1" id="svg1"
width="94.244873" width="94.244873"
height="100.66504" height="80"
viewBox="0 0 94.244873 100.66504" viewBox="0 0 94.244873 100.66504"
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
xmlns:svg="http://www.w3.org/2000/svg"> xmlns:svg="http://www.w3.org/2000/svg">

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.6 KiB

After

Width:  |  Height:  |  Size: 1.6 KiB

2
web/themes/custom/quartiers_de_demain/dist/assets/img/planete.svg vendored
View File

@ -5,7 +5,7 @@
version="1.1" version="1.1"
id="svg1" id="svg1"
width="97.911987" width="97.911987"
height="97.911865" height="75"
viewBox="0 0 97.911987 97.911864" viewBox="0 0 97.911987 97.911864"
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
xmlns:svg="http://www.w3.org/2000/svg"> xmlns:svg="http://www.w3.org/2000/svg">

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2.7 KiB

After

Width:  |  Height:  |  Size: 2.7 KiB

2
web/themes/custom/quartiers_de_demain/dist/assets/img/pouce.svg vendored
View File

@ -5,7 +5,7 @@
version="1.1" version="1.1"
id="svg1" id="svg1"
width="95.478638" width="95.478638"
height="100.66577" height="75"
viewBox="0 0 95.478638 100.66577" viewBox="0 0 95.478638 100.66577"
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
xmlns:svg="http://www.w3.org/2000/svg"> xmlns:svg="http://www.w3.org/2000/svg">

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.7 KiB

After

Width:  |  Height:  |  Size: 1.7 KiB

2
web/themes/custom/quartiers_de_demain/dist/assets/img/puzzle.svg vendored
View File

@ -5,7 +5,7 @@
version="1.1" version="1.1"
id="svg1" id="svg1"
width="110.33337" width="110.33337"
height="110.32935" height="80"
viewBox="0 0 110.33337 110.32935" viewBox="0 0 110.33337 110.32935"
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
xmlns:svg="http://www.w3.org/2000/svg"> xmlns:svg="http://www.w3.org/2000/svg">

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2.2 KiB

After

Width:  |  Height:  |  Size: 2.2 KiB

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

@ -1,3 +1,26 @@
/*Gilroy*/
@font-face {
font-family: 'Gilroy';
src: url('./theme/custom/quartiers_de_demain/fonts/Gilroy/Gilroy-Light.otf') format('otf');
font-weight: 300;
font-style: normal;
}
@font-face {
font-family: 'Gilroy';
src: url('../fonts/Gilroy/Gilroy-Medium.otf') format('otf');
font-weight: 400;
font-style: normal;
}
@font-face {
font-family: 'Gilroy';
src: url('../fonts/Gilroy/Gilroy-SemiBold.otf') format('otf');
font-weight: 600;
font-style: normal;
}
/*marianne*/ /*marianne*/

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

@ -1,5 +1,5 @@
$header-height : 125px; $header-height : 320px;
$header-height-pad : 110px; $header-height-pad : 110px;
$header-height-small : 70px; $header-height-small : 70px;
$header-height-ultrasmall : 50px; $header-height-ultrasmall : 50px;

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

@ -1,15 +1,21 @@
// Font Family // Font Family
$font-family-default: "Marianne", sans-serif; $font-family-default: "Gilroy", sans-serif;
$font-family-header: "Marianne", sans-serif; $font-family-header: "Gilroy", sans-serif;
$font-family-chapeau: "Marianne", sans-serif; $font-family-chapeau: "Gilroy", sans-serif;
$font-extra: 2.3rem; $font-extra: 2.3rem;
$font-large: 1.6rem; $font-large: 1.6rem;
$font-big: 1rem; $font-big: 1.2rem;
$font-medium: .8rem; $font-medium: .8rem;
$font-normal: .6rem; $font-normal: .6rem;
$font-small: .45rem; $font-small: .45rem;
p{
font-size: $font-normal;
}
h3{
font-size: $font-big;
}

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

@ -34,13 +34,13 @@
} }
#paragraph-id--1{ ///// Les enjeux #paragraph-id--1{ ///// Les enjeux
background-color: #edefe8; background-color: #edefe8;
padding-top: 4rem; padding-top: 2rem;
padding-bottom: 4rem; padding-bottom: 2rem;
.field_field_picto{ .field_field_picto{
display: none; display: none;
} }
.field_field_texte{ .field_field_texte{
width: 65%; width: 50%;
margin: auto; margin: auto;
.colone-picto{ .colone-picto{
display: flex; display: flex;
@ -48,11 +48,10 @@
flex-wrap: wrap; flex-wrap: wrap;
justify-content: flex-start; justify-content: flex-start;
h3{ h3{
flex: 1 90%; flex: 1 100%;
color: #0833c2ff; color: #0833c2ff;
font-size: 1.5rem;
// width: 80%; // width: 80%;
padding-right: 3rem; // padding-right: 3rem;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
&:nth-of-type(2){ &:nth-of-type(2){
@ -70,52 +69,42 @@
&:nth-of-type(1)::before{ &:nth-of-type(1)::before{
content: url("../img/fanion.svg"); content: url("../img/fanion.svg");
padding-bottom: 1rem; padding-bottom: 1rem;
height: 120px;
} }
&:nth-of-type(2)::before{ &:nth-of-type(2)::before{
content: url("../img/pouce.svg"); content: url("../img/pouce.svg");
padding-bottom: 1rem; padding-bottom: 1rem;
height: 120px;
} }
&:nth-of-type(3)::before{ &:nth-of-type(3)::before{
content: url("../img/planete.svg"); content: url("../img/planete.svg");
padding-bottom: 1rem; padding-bottom: 1rem;
height: 120px;
} }
&:nth-of-type(4)::before{ &:nth-of-type(4)::before{
content: url("../img/puzzle.svg"); content: url("../img/puzzle.svg");
padding-bottom: 1rem; padding-bottom: 1rem;
height: 120px;
} }
&:nth-of-type(5)::before{ &:nth-of-type(5)::before{
content: url("../img/cube.svg"); content: url("../img/cube.svg");
padding-bottom: 1rem; padding-bottom: 1rem;
height: 120px;
} }
&:nth-of-type(6)::before{ &:nth-of-type(6)::before{
content: url("../img/ampoule.svg"); content: url("../img/ampoule.svg");
padding-bottom: 1rem; padding-bottom: 1rem;
height: 120px;
} }
&:nth-of-type(7)::before{ &:nth-of-type(7)::before{
content: url("../img/bonhome.svg"); content: url("../img/bonhome.svg");
padding-bottom: 1rem; padding-bottom: 1rem;
height: 120px;
} }
&:nth-of-type(8)::before{ &:nth-of-type(8)::before{
content: url("../img/feuilles.svg"); content: url("../img/feuilles.svg");
padding-bottom: 1rem; padding-bottom: 1rem;
height: 120px;
} }
&:nth-of-type(9)::before{ &:nth-of-type(9)::before{
content: url("../img/calendrier.svg"); content: url("../img/calendrier.svg");
padding-bottom: 1rem; padding-bottom: 1rem;
height: 120px;
} }
&:nth-of-type(10)::before{ &:nth-of-type(10)::before{
content: url("../img/crayons.svg"); content: url("../img/crayons.svg");
padding-bottom: 1rem; padding-bottom: 1rem;
height: 120px;
} }
} }
} }

38
web/themes/custom/quartiers_de_demain/src/assets/scss/partials/_header.scss
View File

@ -6,22 +6,22 @@ header{
height: $header-height; height: $header-height;
background-color: $white-header; background-color: $white-header;
z-index: 99; z-index: 99;
width: 100vw; width: 38vw;
max-width: 100vw; max-width: 100vw;
position: fixed; // position: fixed;
top: 0; top: 0;
border-bottom: 1px solid #808080; border: 1px solid #808080;
@media (max-width:810px) { // @media (max-width:810px) {
// width: 800px; // // width: 800px;
height: $header-height-pad; // height: $header-height-pad;
} // }
@media(max-width: 660px){ // @media(max-width: 660px){
height: $header-height-small; // height: $header-height-small;
} // }
@media(max-width: 450px){ // @media(max-width: 450px){
display: flex; // display: flex;
height: $header-height-ultrasmall; // height: $header-height-ultrasmall;
} // }
.contextual-region{ .contextual-region{
width: max-content; width: max-content;
} }
@ -39,13 +39,13 @@ header{
} }
#block-quartiers-de-demain-logorepu-2{ #block-quartiers-de-demain-logorepu-2{
display: none;
@media(max-width: 891px){ @media(max-width: 891px){
height: $header-height-pad; height: $header-height-pad;
} }
} }
#block-quartiers-de-demain-logoepau-2{ #block-quartiers-de-demain-logoepau-2{
display: none;
height: $header-height; height: $header-height;
@media(max-width: 891px){ @media(max-width: 891px){
height: $header-height-pad; height: $header-height-pad;
@ -53,12 +53,14 @@ header{
} }
#block-quartiers-de-demain-logoquartiersdedemain{ #block-quartiers-de-demain-logoquartiersdedemain{
margin-left: auto; // margin-left: auto;
padding-right: 5%; padding-right: 5%;
margin: auto;
} }
img{ img{
width: auto; width: auto;
margin: auto;
height: $header-height; height: $header-height;
@media(max-width: 891px){ @media(max-width: 891px){
height: $header-height-pad; height: $header-height-pad;
@ -115,7 +117,7 @@ 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;