slider color and adjustement

This commit is contained in:
armansansd
2021-08-06 11:55:06 +02:00
parent 8b01ed0f6b
commit de700b385f
6 changed files with 521 additions and 152 deletions

View File

@@ -20,7 +20,7 @@
}
article{
h2{
color: white;
// color: white;
padding: 0;
a{
text-decoration: none;
@@ -51,6 +51,51 @@
}
}
#actus_blocks-block_1{
.programme-1{
*{
color: $col-1 !important;
}
}
.programme-2{
*{
color: $col-2 !important;
}
}
.programme-3{
*{
color: $col-eur !important;
}
}
.programme-4{
*{
color: black;
}
}
.programme-5{
*{
color: $col-mond !important;
}
}
.programme-6{
*{
color: $col-ter !important;
}
}
.programme-7{
*{
color: $col-met !important;
}
}
.views-row article{
display: grid !important;
grid-template-columns: repeat( 2, minmax(0, 1fr));
@@ -87,7 +132,7 @@
.slick-slide{
margin: 0 1rem;
background-color: $lightblue;
background-color: white;
padding: 1rem;
}
.slick-arrow{

View File

@@ -11,14 +11,7 @@
}
}
}
.last-news{
.views-field-field-image{
height: 25rem;
img{
width: 100%;
}
}
}
.last-news, .last-ressources{
.slick-slide{
margin: 0 1rem;
@@ -47,43 +40,195 @@
// flex-direction: column-reverse;
position: relative;
height: auto;
.views-field-field-image{
grid-column: 1;
grid-row: 1 / span 4;
z-index: -1;
padding-top: 1rem;
}
.views-field:not(.views-field-field-image){
background: black;
width: 50%;
margin-left: 1rem;
padding-left: 1rem;
color: white;
}
.views-field-title{
padding-bottom: 1rem;
grid-column: 1;
grid-row: 3;
font-weight: 600;
}
.views-field-view-node{
padding-top: 1rem;
grid-column: 1;
grid-row: 1;
}
.views-field-field-programme{
text-transform: uppercase;
grid-column: 1;
grid-row: 2;
}
a{
text-decoration: none;
}
}
}
.last-news .programme-1{
.views-field{
background: $col-1 !important;
}
}
.last-news .programme-2{
.views-field{
background: $col-2 !important;
}
}
.last-news .programme-3{
.views-field{
background: $col-eur !important;
}
}
.last-news .programme-4{
.views-field{
background: black;
}
}
.last-news .programme-5{
.views-field{
background: $col-mond !important;
}
}
.last-news .programme-6{
.views-field{
background: $col-ter !important;
}
}
.last-news .programme-7{
.views-field{
background: $col-met !important;
}
}
.last-news{
margin-top: 2rem;
.views-field-field-image{
height: 25rem;
img{
width: 100%;
}
}
.views-field-field-image{
grid-column: 1;
grid-row: auto;
z-index: -1;
margin-top: -15%;
}
.views-field:not(.views-field-field-image){
padding-right: .5rem;
padding-left: .5rem;
background-color: black;
width: 90%;
margin-left: 1rem;
color: white;
align-self: flex-start;
grid-column: 1;
grid-auto-rows: min-content;
font-size: $font-medium;
text-transform: uppercase;
}
// .views-field-field-type-evenement{
// grid-row: 4;
// }
.views-field-title{
// grid-row: 5;
font-size: $font-extra !important;
font-weight: 500;
line-height: 1.2;
padding-top: .3rem;
}
.views-field-field-sous-titre{
padding: .5rem 0 1rem 0;
}
.views-field-field-programme{
text-transform: uppercase;
grid-row: 1;
font-weight: 500;
padding: .5rem 0 .5rem 0;
}
}
.last-ressources{
.views-field{
color: black;
}
.views-field-field-image{
grid-column: 1;
grid-row: 1 / span 4;
z-index: -1;
// padding-top: 1rem;
}
.views-field:not(.views-field-field-image){
background: black;
width: 50%;
margin-left: 1rem;
padding-left: 1rem;
color: white;
}
.views-field-title-1, .views-field-title{
padding-bottom: 1rem;
grid-column: 2;
grid-row: 3;
font-weight: 600;
}
.views-field-view-node{
// padding-top: 1rem;
// grid-column: 1;
// grid-row: 1;
grid-row: 4 / span 1;
grid-column: 2 / span 1;
margin-bottom: 1rem;
}
.views-field-field-programme{
text-transform: uppercase;
grid-column: 1;
grid-row: 1;
font-weight: 500;
margin-bottom: 1rem;
}
.programme-1{
.views-field{
color: $col-1 !important;
}
}
.programme-2{
.views-field{
color: $col-2 !important;
}
}
.programme-3{
.views-field{
color: $col-eur !important;
}
}
.programme-4{
.views-field{
color: black;
}
}
.programme-5{
.views-field{
color: $col-mond !important;
}
}
.programme-6{
.views-field{
color: $col-ter !important;
}
}
.programme-7{
.views-field{
color: $col-met !important;
}
}
}
.main_logo{
z-index: 10;
height: 7rem;
@@ -95,11 +240,12 @@
.about{
box-shadow: inset 0 17rem 18rem $bck-col;
background: $trame;
font-size: $font-medium;
text-align: center;
padding: 18rem 0 3rem 0;
margin-top: -15rem;
article{
h2{
.views-row{
.views-field-title{
font-family: "duke" !important;
font-size: $font-large;
color:black;
@@ -114,7 +260,7 @@
div{
margin: 0 5%;
}
.links{
.views-field-view-node{
display: inline-block;
margin: 0 auto;
background: black;
@@ -159,7 +305,7 @@
}
.views-field-field-image{
grid-row: 3 / span 2;
margin-top: -1.5rem;
// margin-top: -1.5rem;
z-index: 0;
padding: .5rem;
}
@@ -168,26 +314,20 @@
width: auto;
margin-left: 0;
padding-left: 0;
color: black;
}
.views-field-title{
.views-field-title-1,.views-field-title{
font-weight: 600;
grid-row: 3 / span 1;
grid-column: 2 / span 1;
}
.views-field-view-node{
// padding-top: 1rem;
// grid-column: 1;
// grid-row: 1;
grid-row: 2 / span 1;
grid-column: 2 / span 1;
}
.views-field-field-programme{
.field-content{
display: inline-block;
width: auto;
background-color: $col-met;
padding: .3rem .5rem;
}
@@ -271,10 +411,8 @@
}
//
// .views-field-title{
// margin: 3rem;
// }
.programme-2{
.programme-1{
background: center / 60% no-repeat url(../images/POPSU_1.svg) white;
&:hover{
@@ -313,6 +451,7 @@
&:hover{
background: $col-met;
}
}
}
#home_theme_container{
@@ -372,12 +511,28 @@
width: 100%;
height: 100%;
position: absolute;
display: grid;
align-items: center;
img{
.field-content{
display: grid;
// justify-content: center;
// align-items: center;
padding: 0;
overflow: hidden;
width: 100%;
height: auto;
height: 100%;
// a{
// // margin-left: -50%;
img{
height: 100% !important;
width: inherit !important;
max-width: none;
}
// }
// &:hover{
// opacity: .6;
// }
}
}
}

View File

@@ -17,7 +17,7 @@ $lightblue: #98d0d9;
$trame: url(../images/motif_croix.svg);
//programmes values
.programme-2{
.programme-1{
.views-field-field-programme{
.field-content{
background: $col-1;
@@ -36,6 +36,25 @@ $trame: url(../images/motif_croix.svg);
}
}
.programme-2{
.views-field-field-programme{
.field-content{
background: $col-2;
}
}
.views-field{
color: $col-2;
}
.views-field-title{
color: $col-2;
&:hover{
background: $col-2;
color:white;
}
}
}
.programme-3{
.views-field-field-programme{
.field-content{