new home.scss

This commit is contained in:
2023-06-20 10:29:59 +02:00
parent e22689ac5a
commit 954ffe2c8c
3 changed files with 582 additions and 442 deletions
@@ -0,0 +1,396 @@
.path-frontpage{
.block-region-content{
display: grid;
grid-template-areas: "presentation presentation presentation presentation presentation presentation"
"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"
"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;
// 1er bandeau home
.block-config-pages-block{
grid-area: presentation;
width: 100%;
height: 78vh;
background: url("../images/pictos/rosace_coupee.svg");
// background: url("../images/carre_site.mp4");
background-position-y: top;
background-position-x: center;
background-repeat: no-repeat;
background-size: cover;
// padding-bottom: 3rem;
@media (max-width: 428px){
height: 66vh;
background-size: cover;
background-position-y: top;
background-position-x: left;
}
.config_pages--type--home-front{
// width:20vw;
// min-width: fit-content;
// height: 20vw;
width: 400px;
height: 340px;
min-height: fit-content;
margin: auto;
background-color: white;
margin-top: 5rem;
margin-left: 22%;
// margin-bottom: 5rem;
padding: 4rem 2rem 4rem 2rem;
// padding-left: 5%;
// padding-right: 5%;
// padding-bottom: 4rem;
// padding-top: 4rem;
@media (max-width: 428px){
width: 300px;
height: 200px;
margin-left: 10%;
padding: 3rem 5% 4rem 5%;
margin-top: 5rem;
}
.field--name-field-titre{
// font-size: 5rem;
// font-weight: 900;
// color: $blue-light;
// line-height: 5.7rem;
// margin-top: 4rem;
// margin-bottom: 2rem;
// width: fit-content;
color: #e1000f;
font-weight: 900;
font-size: 1.5rem;
text-transform: uppercase;
font-family: "Source Code Pro";
@media (max-width: 428px){
font-size: 1.2rem;;
}
}
.field--name-field-sous-titre{
// color: #e1000f;
// font-weight: 900;
// font-size: 1.8rem;
// text-transform: uppercase;
// font-family: "Source Code Pro";
font-size: 3rem;
font-weight: 900;
color: $blue-light;
line-height: 4rem;
margin-top: 3rem;
margin-bottom: 2rem;
width: fit-content;
@media (max-width: 428px){
font-size: 2.5rem;
line-height: 3rem;
margin-top: 1rem;
}
}
.field--name-field-punchline{
color: $blue-light;
font-weight: 900;
font-size: 1.5rem;
text-transform: uppercase;
font-family: "Source Code Pro";
padding-bottom: 3rem;
}
.field--name-field-lien{
position: relative;
background-color: $white;
border: 2px solid $blue-light;
width: fit-content;
height: 1.5rem;
padding: 0.4rem 1rem;
text-align: center !important;
float: right;
bottom: 0;
a{
display: inline-flex;
text-transform: uppercase;
font-weight: 700;
color: $blue-light;
align-items: center;
&: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>');
}
}
}
}
}
.block-block-content9448ca2a-90e3-488b-89cf-8ec6a986a9ca{
display: none;
}
.block-block-content1bb9024b-d95f-4137-894c-362abf10a483{
display: none;
}
// bandeau actus
.block-views-blockactus-blocks-pages-block-1{
grid-area: actus;
width: 100vw;
border-bottom: 5px solid $blue-light;
border-top: 5px solid $blue-light;
background: $background-actus;
.view-actus-blocks-pages{
.view-content{
display: grid;
grid-template-columns: 1fr repeat(4, 2fr) 1fr;
margin: auto;
padding-top: 2rem;
padding-bottom: 4rem;
@media (max-width: 479px){
display: flex;
flex-direction: column;
// padding-left: 1rem;
width: 80%;
}
.views-row:nth-of-type(1) { grid-column: 2; }
.node-type-actualite{
color: $black;
line-height: 1.5rem;
padding: 0.5rem;
div:first-child{ // block actu dans le bandeau
display: flex;
flex-direction: column;
// :nth-child(1) { order: 1; }
// :nth-child(4) { order: 2; }
// :nth-child(5) { order: 3; }
}
.field--name-field-images {
order: 1;
.field__item img{
max-width: 95%;
max-height: 150px;
object-fit: cover;
width: 100%;
padding-bottom: 1rem;
}
}
.field--name-field-date{
order: 2;
display: flex;
flex-direction: row;
justify-content: flex-start;
&:not(:last-child):after{
padding-right: 1rem;
content: "|";
}
time{
font-size: 0.9rem;
font-weight: 800;
padding-right: 1rem;
width: fit-content;
// :not(:last-child):after{
// padding-left: 0.5rem;
// content: "|";
// }
}
}
.field--name-title{
order:3;
}
.field--name-field-sous-titre{
order:4;
margin-top: 0.3rem;
font-weight: 800;
}
.field:not(.field--name-field-images){
width: 100%;
}
h2{ margin:0; }
a{ color: $black; }
.inline.links{
padding-top: none !important;
list-style: none;
width: fit-content;
align-self: flex-end;
padding-right: 1rem;
a{
display: none;
}
}
.field--name-field-actu-type{
order:5;
padding-top: 1rem;
}
}
}
}
}
// bouton voir toutes actus du bandeau bleu
.block-block-content3ee1f633-aaa7-4b4c-a42a-02206e26d3a2{
grid-area: actus;
grid-row: 6;
grid-column: 5 / span 6;
max-width: 50%;
min-width: fit-content;
margin-bottom: 2rem;
align-self: flex-end;
@media (max-width: 479px){
grid-column: 2 / span 4;
max-width: 80%;
margin: auto;
margin-top: 1rem;
margin-bottom: 1.5rem;
}
.field--type-link {
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;
display: inline-flex;
a{
text-transform: uppercase;
font-weight: 700;
color: $blue-light;
display: inline-flex;
align-items: center;
}
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>');
}
}
}
// 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('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;
.node-type-static{
width: 70%;
margin: auto;
@media (max-width: 479px) {
width: 80%;
}
div:first-child:not(.field__item):not(.field){
display: flex;
flex-direction: row;
flex-wrap: wrap;
:nth-child(4) { order: 3; }
}
.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;
display: inline-flex;
align-items: center;
&: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;
@media (max-width: 479px){
padding-left: 0em;
}
p{
background-color: $white;
font-size: 1.5rem;
width: 110%;
padding-bottom: 2rem;
margin-block-start: 0;
text-align: start !important;
@media (max-width: 479px){
font-size: 1.2rem;
width: 100%;
}
}
}
.field--name-field-videos{
flex: 0 0 80%;
padding-top: 4rem;
margin: auto;
@media (max-width: 479px){
flex: 0 0 100%;
}
.field__items {
.field__item:nth-of-type(1){
display: none;
}
}
}
}
}
}
}
}
+60 -194
View File
@@ -1,155 +1,12 @@
// home juin 2023
.path-frontpage{
.block-region-content{
display: grid;
grid-template-areas: "presentation presentation presentation presentation presentation presentation"
"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"
"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;
// 1er bandeau home
.block-config-pages-block{
grid-area: presentation;
width: 100%;
height: 78vh;
background: url("../images/pictos/rosace_coupee.svg");
// background: url("../images/carre_site.mp4");
background-position-y: top;
background-position-x: center;
background-repeat: no-repeat;
background-size: cover;
// padding-bottom: 3rem;
@media (max-width: 428px){
height: 66vh;
background-size: cover;
background-position-y: top;
background-position-x: left;
}
.config_pages--type--home-front{
// width:20vw;
// min-width: fit-content;
// height: 20vw;
width: 400px;
height: 340px;
min-height: fit-content;
margin: auto;
background-color: white;
margin-top: 5rem;
margin-left: 22%;
// margin-bottom: 5rem;
padding: 4rem 2rem 4rem 2rem;
// padding-left: 5%;
// padding-right: 5%;
// padding-bottom: 4rem;
// padding-top: 4rem;
@media (max-width: 428px){
width: 300px;
height: 200px;
margin-left: 10%;
padding: 3rem 5% 4rem 5%;
margin-top: 5rem;
}
.field--name-field-titre{
// font-size: 5rem;
// font-weight: 900;
// color: $blue-light;
// line-height: 5.7rem;
// margin-top: 4rem;
// margin-bottom: 2rem;
// width: fit-content;
color: #e1000f;
font-weight: 900;
font-size: 1.5rem;
text-transform: uppercase;
font-family: "Source Code Pro";
@media (max-width: 428px){
font-size: 1.2rem;;
}
}
.field--name-field-sous-titre{
// color: #e1000f;
// font-weight: 900;
// font-size: 1.8rem;
// text-transform: uppercase;
// font-family: "Source Code Pro";
font-size: 3rem;
font-weight: 900;
color: $blue-light;
line-height: 4rem;
margin-top: 3rem;
margin-bottom: 2rem;
width: fit-content;
@media (max-width: 428px){
font-size: 2.5rem;
line-height: 3rem;
margin-top: 1rem;
}
}
.field--name-field-punchline{
color: $blue-light;
font-weight: 900;
font-size: 1.5rem;
text-transform: uppercase;
font-family: "Source Code Pro";
padding-bottom: 3rem;
}
.field--name-field-lien{
position: relative;
background-color: $white;
border: 2px solid $blue-light;
width: fit-content;
height: 1.5rem;
padding: 0.4rem 1rem;
text-align: center !important;
float: right;
bottom: 0;
a{
display: inline-flex;
text-transform: uppercase;
font-weight: 700;
color: $blue-light;
align-items: center;
&: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>');
}
}
}
}
}
.block-block-content9448ca2a-90e3-488b-89cf-8ec6a986a9ca{
display: none;
}
.block-block-content1bb9024b-d95f-4137-894c-362abf10a483{
display: none;
}
// bandeau actus
.block-views-blockactus-blocks-pages-block-1{
grid-area: actus;
// grid-area: actus;
width: 100vw;
border-bottom: 5px solid $blue-light;
border-top: 5px solid $blue-light;
// border-top: 5px solid $blue-light;
background: $background-actus;
.view-actus-blocks-pages{
.view-content{
@@ -187,7 +44,7 @@
padding-bottom: 1rem;
}
}
.field--name-field-date{
order: 2;
display: flex;
@@ -206,7 +63,7 @@
// padding-left: 0.5rem;
// content: "|";
// }
}
}
@@ -243,62 +100,63 @@
}
}
}
// bouton voir toutes actus du bandeau bleu
.block-block-content3ee1f633-aaa7-4b4c-a42a-02206e26d3a2{
grid-area: actus;
grid-row: 6;
grid-column: 5 / span 6;
max-width: 50%;
min-width: fit-content;
margin-bottom: 2rem;
align-self: flex-end;
@media (max-width: 479px){
grid-column: 2 / span 4;
max-width: 80%;
margin: auto;
margin-top: 1rem;
margin-bottom: 1.5rem;
}
visibility: hidden;
// grid-area: actus;
// grid-row: 6;
// grid-column: 5 / span 6;
// max-width: 50%;
// min-width: fit-content;
// margin-bottom: 2rem;
// align-self: flex-end;
// @media (max-width: 479px){
// grid-column: 2 / span 4;
// max-width: 80%;
// margin: auto;
// margin-top: 1rem;
// margin-bottom: 1.5rem;
// }
.field--type-link {
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;
display: inline-flex;
// .field--type-link {
// 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;
// display: inline-flex;
a{
text-transform: uppercase;
font-weight: 700;
color: $blue-light;
display: inline-flex;
align-items: center;
// a{
// text-transform: uppercase;
// font-weight: 700;
// color: $blue-light;
// display: inline-flex;
// align-items: center;
}
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>');
// }
// 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>');
}
}
// }
// }
}
// présentation programme
.block-views-blockhome-nodes-block-2{
grid-area: programme;
// grid-area: programme;
.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;
// // 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;
.node-type-static{
@@ -312,7 +170,7 @@
flex-direction: row;
flex-wrap: wrap;
:nth-child(4) { order: 3; }
}
}
.inline.links{
z-index: 95;
@@ -392,5 +250,13 @@
}
}
}
// Zoom sur les projets
.block-views-blockprojets-block-4{
border-top: 5px solid $blue-light;
background: $background-actus;
}
}