diff --git a/web/themes/custom/quartiers_de_demain/dist/assets/css/bundle.css b/web/themes/custom/quartiers_de_demain/dist/assets/css/bundle.css index 025f4e9..bf57bb5 100644 --- a/web/themes/custom/quartiers_de_demain/dist/assets/css/bundle.css +++ b/web/themes/custom/quartiers_de_demain/dist/assets/css/bundle.css @@ -1,6 +1,14 @@ /*quartiers_de_demain*/ /*global*/ /* Colors used for quartiers_de_demain */ +p { + font-size: 0.6rem; +} + +h3 { + font-size: 1.2rem; +} + @media (min-width: 48rem) { :root { font-size: calc(1rem + (1vw - 0.48rem) * 1.389); @@ -13,6 +21,25 @@ 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*/ @font-face { font-family: "Marianne"; @@ -97,7 +124,7 @@ position: relative; width: 100vw; background-color: rgb(255, 255, 255); - font-family: "Marianne", sans-serif; + font-family: "Gilroy", sans-serif; font-weight: 400; font-style: normal; font-size: 0.8rem; @@ -118,7 +145,7 @@ } .layout-content { - padding-top: 125px; + padding-top: 320px; } @media (max-width: 500px) { .layout-content { @@ -164,30 +191,13 @@ header { display: grid; grid-template-columns: repeat(12, 1fr); grid-template-rows: repeat(3, 1fr); - height: 125px; + height: 320px; background-color: rgb(255, 255, 255); z-index: 99; - width: 100vw; + width: 38vw; max-width: 100vw; - position: fixed; top: 0; - border-bottom: 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; - } + border: 1px solid #808080; } header .contextual-region { width: max-content; @@ -206,13 +216,17 @@ header .header_left_container { height: inherit; } } +header .header_left_container #block-quartiers-de-demain-logorepu-2 { + display: none; +} @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: 125px; + display: none; + height: 320px; } @media (max-width: 891px) { 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 { - margin-left: auto; padding-right: 5%; + margin: auto; } header .header_left_container img { width: auto; - height: 125px; + margin: auto; + height: 320px; } @media (max-width: 891px) { header .header_left_container img { @@ -286,13 +301,12 @@ header .header_nav_container { display: none; grid-row: 3; grid-column: 1/span 12; - position: absolute; top: 100%; width: 100%; background: rgb(232, 235, 244); border-bottom: 1px solid #808080; border-top: 1px solid #808080; - font-size: 1rem; + font-size: 1.2rem; text-align: center; } 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 { - height: 125px; + height: 320px; } @media (max-width: 700px) { .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 { width: auto; - height: 125px; + height: 320px; } @media (max-width: 700px) { .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 { background-color: #edefe8; - padding-top: 4rem; - padding-bottom: 4rem; + padding-top: 2rem; + padding-bottom: 2rem; } #home article.node-type-static #paragraph-id--1 .field_field_picto { display: none; } #home article.node-type-static #paragraph-id--1 .field_field_texte { - width: 65%; + width: 50%; margin: auto; } #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; } #home article.node-type-static #paragraph-id--1 .field_field_texte .colone-picto h3 { - flex: 1 90%; + flex: 1 100%; color: #0833c2; - font-size: 1.5rem; - padding-right: 3rem; display: flex; 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 { content: url("../img/fanion.svg"); padding-bottom: 1rem; - height: 120px; } #home article.node-type-static #paragraph-id--1 .field_field_texte .colone-picto p:nth-of-type(2)::before { content: url("../img/pouce.svg"); padding-bottom: 1rem; - height: 120px; } #home article.node-type-static #paragraph-id--1 .field_field_texte .colone-picto p:nth-of-type(3)::before { content: url("../img/planete.svg"); padding-bottom: 1rem; - height: 120px; } #home article.node-type-static #paragraph-id--1 .field_field_texte .colone-picto p:nth-of-type(4)::before { content: url("../img/puzzle.svg"); padding-bottom: 1rem; - height: 120px; } #home article.node-type-static #paragraph-id--1 .field_field_texte .colone-picto p:nth-of-type(5)::before { content: url("../img/cube.svg"); padding-bottom: 1rem; - height: 120px; } #home article.node-type-static #paragraph-id--1 .field_field_texte .colone-picto p:nth-of-type(6)::before { content: url("../img/ampoule.svg"); padding-bottom: 1rem; - height: 120px; } #home article.node-type-static #paragraph-id--1 .field_field_texte .colone-picto p:nth-of-type(7)::before { content: url("../img/bonhome.svg"); padding-bottom: 1rem; - height: 120px; } #home article.node-type-static #paragraph-id--1 .field_field_texte .colone-picto p:nth-of-type(8)::before { content: url("../img/feuilles.svg"); padding-bottom: 1rem; - height: 120px; } #home article.node-type-static #paragraph-id--1 .field_field_texte .colone-picto p:nth-of-type(9)::before { content: url("../img/calendrier.svg"); padding-bottom: 1rem; - height: 120px; } #home article.node-type-static #paragraph-id--1 .field_field_texte .colone-picto p:nth-of-type(10)::before { content: url("../img/crayons.svg"); padding-bottom: 1rem; - height: 120px; } #home article.node-type-static #paragraph-id--2, #home article.node-type-static #paragraph-id--3, diff --git a/web/themes/custom/quartiers_de_demain/dist/assets/fonts/Gilroy/Gilroy-Light.otf b/web/themes/custom/quartiers_de_demain/dist/assets/fonts/Gilroy/Gilroy-Light.otf new file mode 100644 index 0000000..a2eb009 Binary files /dev/null and b/web/themes/custom/quartiers_de_demain/dist/assets/fonts/Gilroy/Gilroy-Light.otf differ diff --git a/web/themes/custom/quartiers_de_demain/dist/assets/fonts/Gilroy/Gilroy-Medium.otf b/web/themes/custom/quartiers_de_demain/dist/assets/fonts/Gilroy/Gilroy-Medium.otf new file mode 100644 index 0000000..7f03b58 Binary files /dev/null and b/web/themes/custom/quartiers_de_demain/dist/assets/fonts/Gilroy/Gilroy-Medium.otf differ diff --git a/web/themes/custom/quartiers_de_demain/dist/assets/fonts/Gilroy/Gilroy-SemiBold.otf b/web/themes/custom/quartiers_de_demain/dist/assets/fonts/Gilroy/Gilroy-SemiBold.otf new file mode 100644 index 0000000..b511424 Binary files /dev/null and b/web/themes/custom/quartiers_de_demain/dist/assets/fonts/Gilroy/Gilroy-SemiBold.otf differ diff --git a/web/themes/custom/quartiers_de_demain/dist/assets/img/ampoule.svg b/web/themes/custom/quartiers_de_demain/dist/assets/img/ampoule.svg index 48ec2a2..a512a7e 100644 --- a/web/themes/custom/quartiers_de_demain/dist/assets/img/ampoule.svg +++ b/web/themes/custom/quartiers_de_demain/dist/assets/img/ampoule.svg @@ -5,7 +5,7 @@ version="1.1" id="svg1" width="115.54132" - height="113.3667" + height="80" viewBox="0 0 115.54132 113.3667" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg"> diff --git a/web/themes/custom/quartiers_de_demain/dist/assets/img/bonhome.svg b/web/themes/custom/quartiers_de_demain/dist/assets/img/bonhome.svg index 9061b4b..00d99a1 100644 --- a/web/themes/custom/quartiers_de_demain/dist/assets/img/bonhome.svg +++ b/web/themes/custom/quartiers_de_demain/dist/assets/img/bonhome.svg @@ -5,7 +5,7 @@ version="1.1" id="svg1" width="75.368286" - height="114.56152" + height="88" viewBox="0 0 75.368286 114.56152" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg"> diff --git a/web/themes/custom/quartiers_de_demain/dist/assets/img/calendrier.svg b/web/themes/custom/quartiers_de_demain/dist/assets/img/calendrier.svg index 07ef11a..49f4cf1 100644 --- a/web/themes/custom/quartiers_de_demain/dist/assets/img/calendrier.svg +++ b/web/themes/custom/quartiers_de_demain/dist/assets/img/calendrier.svg @@ -5,7 +5,7 @@ version="1.1" id="svg1" width="126.14136" - height="114.36377" + height="80" viewBox="0 0 126.14136 114.36377" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg"> diff --git a/web/themes/custom/quartiers_de_demain/dist/assets/img/crayons.svg b/web/themes/custom/quartiers_de_demain/dist/assets/img/crayons.svg index 3b1b6fa..389ee93 100644 --- a/web/themes/custom/quartiers_de_demain/dist/assets/img/crayons.svg +++ b/web/themes/custom/quartiers_de_demain/dist/assets/img/crayons.svg @@ -5,7 +5,7 @@ version="1.1" id="svg1" width="71.040039" - height="99.820801" + height="80" viewBox="0 0 71.040039 99.820799" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg"> diff --git a/web/themes/custom/quartiers_de_demain/dist/assets/img/cube.svg b/web/themes/custom/quartiers_de_demain/dist/assets/img/cube.svg index 341ea39..cfaccf4 100644 --- a/web/themes/custom/quartiers_de_demain/dist/assets/img/cube.svg +++ b/web/themes/custom/quartiers_de_demain/dist/assets/img/cube.svg @@ -5,7 +5,7 @@ version="1.1" id="svg1" width="120.29468" - height="111.03076" + height="80" viewBox="0 0 120.29468 111.03076" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg"> diff --git a/web/themes/custom/quartiers_de_demain/dist/assets/img/fanion.svg b/web/themes/custom/quartiers_de_demain/dist/assets/img/fanion.svg index 4b32d7e..e15f682 100644 --- a/web/themes/custom/quartiers_de_demain/dist/assets/img/fanion.svg +++ b/web/themes/custom/quartiers_de_demain/dist/assets/img/fanion.svg @@ -5,7 +5,7 @@ version="1.1" id="svg1" width="78.958679" - height="110.33325" + height="80" viewBox="0 0 78.958679 110.33325" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg"> diff --git a/web/themes/custom/quartiers_de_demain/dist/assets/img/feuilles.svg b/web/themes/custom/quartiers_de_demain/dist/assets/img/feuilles.svg index b7e5647..5ee86f7 100644 --- a/web/themes/custom/quartiers_de_demain/dist/assets/img/feuilles.svg +++ b/web/themes/custom/quartiers_de_demain/dist/assets/img/feuilles.svg @@ -5,7 +5,7 @@ version="1.1" id="svg1" width="94.244873" - height="100.66504" + height="80" viewBox="0 0 94.244873 100.66504" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg"> diff --git a/web/themes/custom/quartiers_de_demain/dist/assets/img/planete.svg b/web/themes/custom/quartiers_de_demain/dist/assets/img/planete.svg index 94da261..8d4e8bb 100644 --- a/web/themes/custom/quartiers_de_demain/dist/assets/img/planete.svg +++ b/web/themes/custom/quartiers_de_demain/dist/assets/img/planete.svg @@ -5,7 +5,7 @@ version="1.1" id="svg1" width="97.911987" - height="97.911865" + height="75" viewBox="0 0 97.911987 97.911864" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg"> diff --git a/web/themes/custom/quartiers_de_demain/dist/assets/img/pouce.svg b/web/themes/custom/quartiers_de_demain/dist/assets/img/pouce.svg index eda3601..3a04ba9 100644 --- a/web/themes/custom/quartiers_de_demain/dist/assets/img/pouce.svg +++ b/web/themes/custom/quartiers_de_demain/dist/assets/img/pouce.svg @@ -5,7 +5,7 @@ version="1.1" id="svg1" width="95.478638" - height="100.66577" + height="75" viewBox="0 0 95.478638 100.66577" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg"> diff --git a/web/themes/custom/quartiers_de_demain/dist/assets/img/puzzle.svg b/web/themes/custom/quartiers_de_demain/dist/assets/img/puzzle.svg index 5b596af..d0df0aa 100644 --- a/web/themes/custom/quartiers_de_demain/dist/assets/img/puzzle.svg +++ b/web/themes/custom/quartiers_de_demain/dist/assets/img/puzzle.svg @@ -5,7 +5,7 @@ version="1.1" id="svg1" width="110.33337" - height="110.32935" + height="80" viewBox="0 0 110.33337 110.32935" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg"> diff --git a/web/themes/custom/quartiers_de_demain/src/assets/scss/global/_fonts.scss b/web/themes/custom/quartiers_de_demain/src/assets/scss/global/_fonts.scss index a412707..c85ed5c 100644 --- a/web/themes/custom/quartiers_de_demain/src/assets/scss/global/_fonts.scss +++ b/web/themes/custom/quartiers_de_demain/src/assets/scss/global/_fonts.scss @@ -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*/ diff --git a/web/themes/custom/quartiers_de_demain/src/assets/scss/global/_layout.scss b/web/themes/custom/quartiers_de_demain/src/assets/scss/global/_layout.scss index 78f9cbb..154acf7 100644 --- a/web/themes/custom/quartiers_de_demain/src/assets/scss/global/_layout.scss +++ b/web/themes/custom/quartiers_de_demain/src/assets/scss/global/_layout.scss @@ -1,5 +1,5 @@ -$header-height : 125px; +$header-height : 320px; $header-height-pad : 110px; $header-height-small : 70px; $header-height-ultrasmall : 50px; diff --git a/web/themes/custom/quartiers_de_demain/src/assets/scss/global/variables/_typography.scss b/web/themes/custom/quartiers_de_demain/src/assets/scss/global/variables/_typography.scss index 0f66aed..6956b00 100644 --- a/web/themes/custom/quartiers_de_demain/src/assets/scss/global/variables/_typography.scss +++ b/web/themes/custom/quartiers_de_demain/src/assets/scss/global/variables/_typography.scss @@ -1,15 +1,21 @@ // Font Family -$font-family-default: "Marianne", sans-serif; -$font-family-header: "Marianne", sans-serif; -$font-family-chapeau: "Marianne", sans-serif; +$font-family-default: "Gilroy", sans-serif; +$font-family-header: "Gilroy", sans-serif; +$font-family-chapeau: "Gilroy", sans-serif; $font-extra: 2.3rem; $font-large: 1.6rem; -$font-big: 1rem; +$font-big: 1.2rem; $font-medium: .8rem; $font-normal: .6rem; $font-small: .45rem; +p{ + font-size: $font-normal; +} +h3{ + font-size: $font-big; +} \ No newline at end of file diff --git a/web/themes/custom/quartiers_de_demain/src/assets/scss/pages/home.scss b/web/themes/custom/quartiers_de_demain/src/assets/scss/pages/home.scss index f11a23e..b001a70 100644 --- a/web/themes/custom/quartiers_de_demain/src/assets/scss/pages/home.scss +++ b/web/themes/custom/quartiers_de_demain/src/assets/scss/pages/home.scss @@ -34,13 +34,13 @@ } #paragraph-id--1{ ///// Les enjeux background-color: #edefe8; - padding-top: 4rem; - padding-bottom: 4rem; + padding-top: 2rem; + padding-bottom: 2rem; .field_field_picto{ display: none; } .field_field_texte{ - width: 65%; + width: 50%; margin: auto; .colone-picto{ display: flex; @@ -48,11 +48,10 @@ flex-wrap: wrap; justify-content: flex-start; h3{ - flex: 1 90%; + flex: 1 100%; color: #0833c2ff; - font-size: 1.5rem; // width: 80%; - padding-right: 3rem; + // padding-right: 3rem; display: flex; flex-direction: column; &:nth-of-type(2){ @@ -70,52 +69,42 @@ &:nth-of-type(1)::before{ content: url("../img/fanion.svg"); padding-bottom: 1rem; - height: 120px; } &:nth-of-type(2)::before{ content: url("../img/pouce.svg"); padding-bottom: 1rem; - height: 120px; } &:nth-of-type(3)::before{ content: url("../img/planete.svg"); padding-bottom: 1rem; - height: 120px; } &:nth-of-type(4)::before{ content: url("../img/puzzle.svg"); padding-bottom: 1rem; - height: 120px; } &:nth-of-type(5)::before{ content: url("../img/cube.svg"); padding-bottom: 1rem; - height: 120px; } &:nth-of-type(6)::before{ content: url("../img/ampoule.svg"); padding-bottom: 1rem; - height: 120px; } &:nth-of-type(7)::before{ content: url("../img/bonhome.svg"); padding-bottom: 1rem; - height: 120px; } &:nth-of-type(8)::before{ content: url("../img/feuilles.svg"); padding-bottom: 1rem; - height: 120px; } &:nth-of-type(9)::before{ content: url("../img/calendrier.svg"); padding-bottom: 1rem; - height: 120px; } &:nth-of-type(10)::before{ content: url("../img/crayons.svg"); padding-bottom: 1rem; - height: 120px; } } } diff --git a/web/themes/custom/quartiers_de_demain/src/assets/scss/partials/_header.scss b/web/themes/custom/quartiers_de_demain/src/assets/scss/partials/_header.scss index 0fdf284..0202c99 100644 --- a/web/themes/custom/quartiers_de_demain/src/assets/scss/partials/_header.scss +++ b/web/themes/custom/quartiers_de_demain/src/assets/scss/partials/_header.scss @@ -6,22 +6,22 @@ header{ height: $header-height; background-color: $white-header; z-index: 99; - width: 100vw; + width: 38vw; max-width: 100vw; - position: fixed; + // position: fixed; top: 0; - border-bottom: 1px solid #808080; - @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; - } + border: 1px solid #808080; + // @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; } @@ -39,13 +39,13 @@ header{ } #block-quartiers-de-demain-logorepu-2{ - + display: none; @media(max-width: 891px){ height: $header-height-pad; } } #block-quartiers-de-demain-logoepau-2{ - + display: none; height: $header-height; @media(max-width: 891px){ height: $header-height-pad; @@ -53,12 +53,14 @@ header{ } #block-quartiers-de-demain-logoquartiersdedemain{ - margin-left: auto; + // margin-left: auto; padding-right: 5%; + margin: auto; } img{ width: auto; + margin: auto; height: $header-height; @media(max-width: 891px){ height: $header-height-pad; @@ -115,7 +117,7 @@ header{ display: none; grid-row: 3; grid-column: 1 /span 12; - position: absolute; + // position: absolute; top: 100%; width: 100%; background: $bleu_fond_header;