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

css home enjeux

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

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*/

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-small : 70px;
$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-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;
}

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

@@ -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;
}
}
}

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

@@ -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;