bachir/d9-eql
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

grille 3e bandeau home

Browse Source
This commit is contained in:
ouidade
2021-12-02 14:09:46 +01:00
parent bea4581105
commit eec8fd6063
2 changed files with 104 additions and 110 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/themes/custom/eql/css-compiled/styles.css
+23 -22
View File
@@ -253,7 +253,7 @@ a {
.path-frontpage .block-region-content {
display: grid;
grid-template-areas: "presentation presentation presentation presentation presentation presentation" "presentation presentation presentation presentation presentation presentation" "actus actus actus actus actus actus" "actus actus actus actus actus actus" "programme programme programme programme programme programme" "programme programme programme programme programme programme" "programme programme programme programme programme programme";
grid-template-areas: "presentation presentation presentation presentation presentation presentation" "presentation presentation presentation presentation presentation presentation" "actus actus actus actus actus actus" "actus actus actus actus actus actus" "programme programme programme programme programme programme" "programme programme programme programme programme programme" "programme programme programme programme programme programme";
grid-template-rows: auto auto auto;
grid-template-columns: 1fr repeat(4, 2fr) 1fr;
min-height: 100vh; }
@@ -277,7 +277,9 @@ a {
line-height: 6rem;
margin-bottom: 5rem; }
.path-frontpage .block-region-content .block-views-blockhome-nodes-block-1 .node-type-static div:first-child .field--name-field-accroche p {
margin: 0; }
display: table;
margin: 0px auto 0px auto;
background-color: white; }
.path-frontpage .block-region-content .block-views-blockhome-nodes-block-1 .node-type-static div:first-child .field--name-title {
grid-column: 4;
grid-row: 1;
@@ -285,7 +287,10 @@ a {
.path-frontpage .block-region-content .block-views-blockhome-nodes-block-1 .node-type-static div:first-child .field--name-title h2 a {
color: #e1000f;
font-weight: 900;
text-transform: uppercase; }
text-transform: uppercase;
display: table;
margin: 0px auto 0px auto;
background-color: white; }
.path-frontpage .block-region-content .block-views-blockhome-nodes-block-1 .node-type-static div:first-child .links.inline {
grid-column: 2;
grid-row: 4;
@@ -455,12 +460,14 @@ a {
width: 70%;
margin: auto; }
.path-frontpage .block-region-content .block-views-blockhome-nodes-block-2 .view-display-id-block_2:is(.view-id-home_nodes) .node-type-static div:first-child:not(.field__item):not(.field) {
display: grid;
grid-template-columns: 1fr repeat(4, 2fr) 1fr;
grid-template-rows: 1fr 1fr 1fr 0.5fr 1fr 1fr; }
display: flex;
flex-direction: row;
flex-wrap: wrap; }
.path-frontpage .block-region-content .block-views-blockhome-nodes-block-2 .view-display-id-block_2:is(.view-id-home_nodes) .node-type-static div:first-child:not(.field__item):not(.field) :nth-child(4) {
order: 3; }
.path-frontpage .block-region-content .block-views-blockhome-nodes-block-2 .view-display-id-block_2:is(.view-id-home_nodes) .node-type-static .inline.links {
grid-row: 3;
grid-column: 5 / span 6;
z-index: 95;
align-self: flex-end;
width: fit-content;
height: fit-content;
padding: 0.4rem 1rem;
@@ -468,26 +475,20 @@ a {
margin: 0;
background-color: white;
border: 2px solid #009ee3;
list-style: none;
align-self: end; }
list-style: none; }
.path-frontpage .block-region-content .block-views-blockhome-nodes-block-2 .view-display-id-block_2:is(.view-id-home_nodes) .node-type-static .inline.links a {
text-transform: uppercase;
font-weight: 700;
color: #009ee3; }
.path-frontpage .block-region-content .block-views-blockhome-nodes-block-2 .view-display-id-block_2:is(.view-id-home_nodes) .node-type-static .inline.links a:after {
content: url('data:image/svg+xml,<svg width="40" height="20" xmlns="http://www.w3.org/2000/svg" version="1.1"><polyline points="71.9,49 24.3,49 24.3,51 71.9,51 58.1,64.8 59.5,66.2 75.7,50 59.5,33.8 58.1,35.2" transform="scale(0.5) translate(0,-25)" fill="rgb(0,158,227)" stroke="rgb(0,158,227)" stroke-width="0.7"/></svg>'); }
.path-frontpage .block-region-content .block-views-blockhome-nodes-block-2 .view-display-id-block_2:is(.view-id-home_nodes) .node-type-static .field--name-field-images {
grid-column: 1;
grid-row: 1;
width: fit-content; }
.path-frontpage .block-region-content .block-views-blockhome-nodes-block-2 .view-display-id-block_2:is(.view-id-home_nodes) .node-type-static .field--name-field-images .field__item img {
width: 15rem;
height: auto; }
.path-frontpage .block-region-content .block-views-blockhome-nodes-block-2 .view-display-id-block_2:is(.view-id-home_nodes) .node-type-static .field--name-field-images .field__item img {
width: 15rem;
height: auto; }
.path-frontpage .block-region-content .block-views-blockhome-nodes-block-2 .view-display-id-block_2:is(.view-id-home_nodes) .node-type-static .field--name-title {
display: none; }
.path-frontpage .block-region-content .block-views-blockhome-nodes-block-2 .view-display-id-block_2:is(.view-id-home_nodes) .node-type-static .field--name-field-accroche {
grid-column: 2 / 6;
grid-row: 1 /span 3;
flex: 1 1 50px;
padding-left: 1rem; }
.path-frontpage .block-region-content .block-views-blockhome-nodes-block-2 .view-display-id-block_2:is(.view-id-home_nodes) .node-type-static .field--name-field-accroche p {
background-color: white;
@@ -497,9 +498,9 @@ a {
padding-bottom: 2rem;
margin-block-start: 0; }
.path-frontpage .block-region-content .block-views-blockhome-nodes-block-2 .view-display-id-block_2:is(.view-id-home_nodes) .node-type-static .field--name-field-videos {
grid-column: 1 / span 5;
grid-row: 5 / span 6;
height: fit-content; }
flex: 0 0 80%;
padding-top: 4rem;
margin: auto; }
.node-id-20 {
background: url("../images/pictos/carre-contour-bleu_partenaire.svg");
web/themes/custom/eql/scss/pages/_home.scss
+81 -88
View File
@@ -3,7 +3,6 @@
display: grid;
grid-template-areas: "presentation presentation presentation presentation presentation presentation"
"presentation presentation presentation presentation presentation presentation"
// "presentation presentation presentation presentation presentation presentation"
"actus actus actus actus actus actus"
"actus actus actus actus actus actus"
"programme programme programme programme programme programme"
@@ -22,22 +21,11 @@
.node-type-static{
div:first-child{
display: grid;
// flex-direction: column;
grid-template-columns: 1fr repeat(4, 2fr) 1fr;
grid-template-rows: repeat(4, auto);
.field--name-field-images{
display: none;
// z-index: -99;
// filter: grayscale(100%);
// filter: brightness(0%);
// opacity: 0.5;
// // display: none;
// grid-column: 1 /span 10;
// grid-row: 1 / span 4;
// img{
// width: 100vw;
// height: auto;
// }
}
.field--name-field-accroche{
grid-column: 2 /span 3;
@@ -48,7 +36,9 @@
line-height: 6rem;
margin-bottom: 5rem;
p{
margin: 0;
display: table;
margin: 0px auto 0px auto;
background-color: $white;
}
}
.field--name-title{
@@ -61,6 +51,9 @@
color: #e1000f;
font-weight: 900;
text-transform: uppercase;
display: table;
margin: 0px auto 0px auto;
background-color: $white;
}
}
}
@@ -275,84 +268,84 @@
// présentation programme
.block-views-blockhome-nodes-block-2{
grid-area: programme;
.view-display-id-block_2:is(.view-id-home_nodes){
padding-top: 2rem;
background: url('../images/pictos/carre-contour-bleu.svg');
background-repeat: no-repeat;
max-width: 100vw;
background-size: cover;
.node-type-static{
width: 70%;
margin: auto;
.view-display-id-block_2:is(.view-id-home_nodes){
padding-top: 2rem;
// background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" version="1.1"><rect x="0" y="0" width="80" height="80" transform="rotate(35) translate(430, -800) scale(15)" fill="none" stroke="rgb(0,158,227)" stroke-width="0.4px"/></svg>');
background: url('../images/pictos/carre-contour-bleu.svg');
// background-position-y: 50%;
background-repeat: no-repeat;
max-width: 100vw;
background-size: cover;
div:first-child:not(.field__item):not(.field){
display: grid;
grid-template-columns: 1fr repeat(4, 2fr) 1fr;
grid-template-rows: 1fr 1fr 1fr 0.5fr 1fr 1fr;
}
.inline.links{
grid-row: 3;
grid-column: 5 / span 6;
width: fit-content;
height: fit-content;
padding: 0.4rem 1rem;
font-size: 0.8rem;
margin: 0;
background-color: $white;
border: 2px solid $blue-light;
list-style: none;
align-self: end;
a{
text-transform: uppercase;
font-weight: 700;
color: $blue-light;
&:after{
// display: block;
content: url('data:image/svg+xml,<svg width="40" height="20" xmlns="http://www.w3.org/2000/svg" version="1.1"><polyline points="71.9,49 24.3,49 24.3,51 71.9,51 58.1,64.8 59.5,66.2 75.7,50 59.5,33.8 58.1,35.2" transform="scale(0.5) translate(0,-25)" fill="rgb(0,158,227)" stroke="rgb(0,158,227)" stroke-width="0.7"/></svg>');
}
}
}
.field--name-field-images{
grid-column: 1;
grid-row: 1;
width: fit-content;
.field__item{
img{
width: 15rem;
height: auto;
}
}
}
.field--name-title{
display: none;
}
.field--name-field-accroche{
grid-column: 2 / 6;
grid-row: 1 /span 3;
padding-left: 1rem;
p{
background-color: $white;
font-size: 1.5rem;
width: 110%;
margin-bottom: 2rem;
padding-bottom: 2rem;
margin-block-start: 0;
}
}
.field--name-field-videos{
.node-type-static{
width: 70%;
margin: auto;
div:first-child:not(.field__item):not(.field){
display: flex;
flex-direction: row;
flex-wrap: wrap;
:nth-child(4) { order: 3; }
}
grid-column: 1 / span 5;
grid-row: 5 / span 6;
height: fit-content;
}
.inline.links{
z-index: 95;
align-self: flex-end;
width: fit-content;
height: fit-content;
padding: 0.4rem 1rem;
font-size: 0.8rem;
margin: 0;
background-color: $white;
border: 2px solid $blue-light;
list-style: none;
a{
text-transform: uppercase;
font-weight: 700;
color: $blue-light;
&:after{
// display: block;
content: url('data:image/svg+xml,<svg width="40" height="20" xmlns="http://www.w3.org/2000/svg" version="1.1"><polyline points="71.9,49 24.3,49 24.3,51 71.9,51 58.1,64.8 59.5,66.2 75.7,50 59.5,33.8 58.1,35.2" transform="scale(0.5) translate(0,-25)" fill="rgb(0,158,227)" stroke="rgb(0,158,227)" stroke-width="0.7"/></svg>');
}
}
}
.field--name-field-images{
// grid-column: 2 / 4;
.field__item{
img{
width: 15rem;
height: auto;
}
}
}
.field--name-title{
display: none;
}
.field--name-field-accroche{
flex: 1 1 50px;
// grid-column: 4 / 9;
padding-left: 1rem;
p{
background-color: $white;
font-size: 1.5rem;
width: 110%;
margin-bottom: 2rem;
padding-bottom: 2rem;
margin-block-start: 0;
}
}
.field--name-field-videos{
flex: 0 0 80%;
padding-top: 4rem;
margin: auto;
}
}
}
}
}
}