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 b178445..e70a01b 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 @@ -1539,7 +1539,9 @@ header #block-quartiers-de-demain-logoquartiersdedemain .field_field_logo .qdd-h #home article.node-type-static #paragraph-id--1 { background-color: #edefe8; position: relative; - padding-bottom: 6rem; +} +#home article.node-type-static #paragraph-id--1.paragraph--type--static-parts { + padding-bottom: 0 !important; } #home article.node-type-static #paragraph-id--1 .field_field_title { font-family: "gilroy-bold"; @@ -1575,10 +1577,6 @@ header #block-quartiers-de-demain-logoquartiersdedemain .field_field_logo .qdd-h flex-direction: column; font-size: 1rem; } -#home article.node-type-static #paragraph-id--1 .field_field_texte .colone-picto h3:nth-of-type(2) { - padding-top: 3rem; - border-top: solid 1px #0833c2; -} #home article.node-type-static #paragraph-id--1 .field_field_texte .colone-picto p { padding-right: 1rem; padding-bottom: 1rem; @@ -1680,7 +1678,67 @@ header #block-quartiers-de-demain-logoquartiersdedemain .field_field_logo .qdd-h background-size: 50px 50px; } } -#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--21 { + background-color: #edefe8; + position: relative; + padding-bottom: 6rem; +} +#home article.node-type-static #paragraph-id--21.paragraph--type--static-parts { + padding-top: 0 !important; +} +#home article.node-type-static #paragraph-id--21 .field_field_title { + font-family: "gilroy-bold"; +} +#home article.node-type-static #paragraph-id--21 .field_field_picto { + display: none; +} +#home article.node-type-static #paragraph-id--21 .field_field_texte { + width: 65%; + margin: auto; +} +@media (max-width: 1090px) { + #home article.node-type-static #paragraph-id--21 .field_field_texte { + width: 80%; + } +} +#home article.node-type-static #paragraph-id--21 .field_field_texte .colone-picto { + display: flex; + flex-direction: row; + flex-wrap: wrap; + justify-content: flex-start; + padding-left: 6rem; +} +@media (max-width: 1090px) { + #home article.node-type-static #paragraph-id--21 .field_field_texte .colone-picto { + padding-left: 1.5rem; + } +} +#home article.node-type-static #paragraph-id--21 .field_field_texte .colone-picto h3 { + flex: 0 80%; + color: #0833c2; + display: flex; + flex-direction: column; + font-size: 1rem; + padding-top: 3rem; + border-top: solid 1px #0833c2; +} +#home article.node-type-static #paragraph-id--21 .field_field_texte .colone-picto p { + padding-right: 1rem; + padding-bottom: 1rem; + flex: 1 30%; + max-width: 30%; + display: flex; + flex-direction: column; +} +@media (max-width: 1090px) { + #home article.node-type-static #paragraph-id--21 .field_field_texte .colone-picto p { + padding-right: 1rem; + flex: 1 30%; + max-width: 50%; + font-size: 0.9rem; + } +} +#home article.node-type-static #paragraph-id--21 .field_field_texte .colone-picto p:nth-of-type(1)::before { background-image: url("../img/ampoule.svg"); background-size: 90px 100px; background-repeat: no-repeat; @@ -1691,13 +1749,13 @@ header #block-quartiers-de-demain-logoquartiersdedemain .field_field_logo .qdd-h padding-bottom: 1rem; } @media (max-width: 500px) { - #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--21 .field_field_texte .colone-picto p:nth-of-type(1)::before { width: 50px; height: 50px; background-size: 50px 50px; } } -#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--21 .field_field_texte .colone-picto p:nth-of-type(2)::before { background-image: url("../img/bonhome.svg"); background-size: 90px 100px; background-repeat: no-repeat; @@ -1708,13 +1766,13 @@ header #block-quartiers-de-demain-logoquartiersdedemain .field_field_logo .qdd-h padding-bottom: 1rem; } @media (max-width: 500px) { - #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--21 .field_field_texte .colone-picto p:nth-of-type(2)::before { width: 50px; height: 50px; background-size: 50px 50px; } } -#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--21 .field_field_texte .colone-picto p:nth-of-type(3)::before { background-image: url("../img/feuilles.svg"); background-size: 90px 100px; background-repeat: no-repeat; @@ -1725,13 +1783,13 @@ header #block-quartiers-de-demain-logoquartiersdedemain .field_field_logo .qdd-h padding-bottom: 1rem; } @media (max-width: 500px) { - #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--21 .field_field_texte .colone-picto p:nth-of-type(3)::before { width: 50px; height: 50px; background-size: 50px 50px; } } -#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--21 .field_field_texte .colone-picto p:nth-of-type(4)::before { background-image: url("../img/calendrier.svg"); background-size: 90px 100px; background-repeat: no-repeat; @@ -1742,13 +1800,13 @@ header #block-quartiers-de-demain-logoquartiersdedemain .field_field_logo .qdd-h padding-bottom: 1rem; } @media (max-width: 500px) { - #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--21 .field_field_texte .colone-picto p:nth-of-type(4)::before { width: 50px; height: 50px; background-size: 50px 50px; } } -#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--21 .field_field_texte .colone-picto p:nth-of-type(5)::before { background-image: url("../img/crayons.svg"); background-size: 60px 100px; background-repeat: no-repeat; @@ -1759,7 +1817,7 @@ header #block-quartiers-de-demain-logoquartiersdedemain .field_field_logo .qdd-h padding-bottom: 1rem; } @media (max-width: 500px) { - #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--21 .field_field_texte .colone-picto p:nth-of-type(5)::before { width: 50px; height: 50px; background-size: 50px 50px; @@ -2376,7 +2434,7 @@ header #block-quartiers-de-demain-logoquartiersdedemain .field_field_logo .qdd-h .node-type-static .layout-content .content_container article.node-type-static div.field_body { width: 80%; padding-top: 2rem; - padding-bottom: 2rem; + padding-bottom: 4rem; margin: auto; justify-content: center; display: flex; @@ -2387,13 +2445,16 @@ header #block-quartiers-de-demain-logoquartiersdedemain .field_field_logo .qdd-h margin-bottom: 0; } .node-type-static .layout-content .content_container article.node-type-static div.field_body p { - margin-top: 0; + margin: 0; } .node-type-static .layout-content .content_container article.node-type-static div.field_body h4 { font-size: 1rem; + width: 70%; + margin: auto; } .node-type-static .layout-content .content_container article.node-type-static div.field_body h5 { font-size: 0.9rem; + margin-bottom: 0.2rem; } #page-node .content_container { 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 ed4c274..b5669c1 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 @@ -99,21 +99,11 @@ font-family: 'gilroy-bold'; padding-bottom: 1rem; } - #paragraph-id--1{ ///// Les enjeux + #paragraph-id--1{ ///// Les enjeux 1 background-color: #edefe8; position: relative; - padding-bottom: 6rem; - // &::after{ - // content: url('../img/formes-animees-3.svg'); - // display: block; - // position: absolute; - // z-index: 5; - // right: 15%; - // bottom: 45%; - // @media(max-width: 810px){ - // display: none; - // } - // } + &.paragraph--type--static-parts{padding-bottom: 0 !important;} + .field_field_title{ font-family: 'gilroy-bold'; } @@ -142,10 +132,6 @@ display: flex; flex-direction: column; font-size: 1rem; - &:nth-of-type(2){ - padding-top: 3rem; - border-top: solid 1px #0833c2ff; - } } p{ padding-right: 1rem; @@ -236,7 +222,64 @@ background-size: 50px 50px; } } - &:nth-of-type(6)::before{ + + } + } + } + } + #paragraph-id--21{ ///// Les enjeux 2 + &.paragraph--type--static-parts{padding-top: 0 !important;} + background-color: #edefe8; + position: relative; + padding-bottom: 6rem; + .field_field_title{ + font-family: 'gilroy-bold'; + } + .field_field_picto{ + display: none; + } + .field_field_texte{ + width: 65%; + margin: auto; + @media(max-width: 1090px){ + width: 80%; + } + .colone-picto{ + display: flex; + flex-direction: row; + flex-wrap: wrap; + justify-content: flex-start; + padding-left: 6rem; + @media(max-width: 1090px){ + padding-left: 1.5rem; + } + + h3{ + flex: 0 80%; + color: #0833c2ff; + display: flex; + flex-direction: column; + font-size: 1rem; + padding-top: 3rem; + border-top: solid 1px #0833c2ff; + + } + p{ + padding-right: 1rem; + padding-bottom: 1rem; + flex: 1 30%; + max-width: 30%; + display: flex; + flex-direction: column; + @media(max-width: 1090px){ + padding-right: 1rem; + flex: 1 30%; + max-width: 50%; + font-size: 0.9rem; + } + + ///////// + &:nth-of-type(1)::before{ background-image: url("../img/ampoule.svg"); background-size: 90px 100px; background-repeat: no-repeat; @@ -251,7 +294,7 @@ background-size: 50px 50px; } } - &:nth-of-type(7)::before{ + &:nth-of-type(2)::before{ background-image: url("../img/bonhome.svg"); background-size: 90px 100px; background-repeat: no-repeat; @@ -266,7 +309,7 @@ background-size: 50px 50px; } } - &:nth-of-type(8)::before{ + &:nth-of-type(3)::before{ background-image: url("../img/feuilles.svg"); background-size: 90px 100px; background-repeat: no-repeat; @@ -281,7 +324,7 @@ background-size: 50px 50px; } } - &:nth-of-type(9)::before{ + &:nth-of-type(4)::before{ background-image: url("../img/calendrier.svg"); background-size: 90px 100px; background-repeat: no-repeat; @@ -296,7 +339,7 @@ background-size: 50px 50px; } } - &:nth-of-type(10)::before{ + &:nth-of-type(5)::before{ background-image: url("../img/crayons.svg"); background-size: 60px 100px; background-repeat: no-repeat; @@ -316,6 +359,7 @@ } } + #paragraph-id--6{ /////// quartier 2030 display: flex; flex-direction: column; diff --git a/web/themes/custom/quartiers_de_demain/src/assets/scss/pages/static.scss b/web/themes/custom/quartiers_de_demain/src/assets/scss/pages/static.scss index 7c1abeb..b21d4cd 100644 --- a/web/themes/custom/quartiers_de_demain/src/assets/scss/pages/static.scss +++ b/web/themes/custom/quartiers_de_demain/src/assets/scss/pages/static.scss @@ -42,7 +42,7 @@ div.field_body{ width: 80%; padding-top: 2rem; - padding-bottom: 2rem; + padding-bottom: 4rem; margin: auto; justify-content: center; display: flex; @@ -54,13 +54,16 @@ margin-bottom: 0; } p{ - margin-top: 0; + margin: 0; } h4{ font-size: 1rem; + width: 70%; + margin: auto; } h5{ font-size: 0.9rem; + margin-bottom: 0.2rem; } } }