.path-frontpage{ .home{ background-color: white; } .header_top_left_container{ div:nth-child(2){ img{ width: 77%; } } } .block-region-content{ display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); align-items: center; .views-element-container{ grid-column: 1 / span 3; // overflow: hidden; } >div:last-of-type{ grid-column: 1 / span 3; background: $trame; text-align: center; padding: 1rem; } } } .last-news, .last-ressources{ .slick-slide{ margin: 0 1rem; } .views-row{ display: grid !important; grid-template-columns: 1fr; // flex-direction: column; // flex-direction: column-reverse; position: relative; height: auto; a{ text-decoration: none; } } } .last-news .programme-1{ .views-field:not(.views-field-field-image){ background: $col-1 !important; } } .last-news .programme-2{ .views-field:not(.views-field-field-image){ background: $col-2 !important; } } .last-news .programme-3{ .views-field:not(.views-field-field-image){ background: $col-eur !important; } } .last-news .programme-4{ .views-field:not(.views-field-field-image){ background: $col-1; } } .last-news .programme-5{ .views-field:not(.views-field-field-image){ background: $col-mond !important; } } .last-news .programme-6{ .views-field:not(.views-field-field-image){ background: $col-ter !important; } } .last-news .programme-7{ .views-field:not(.views-field-field-image){ background: $col-met !important; } } .last-news{ margin-top: 2rem; height: auto; .slick-track{ height: 40vw; } .slick-slide > div{ height: 100%; } .views-row{ height: 100%; } .views-field-field-image{ height: 100%; margin-top: 1rem; // position: absolute; grid-column: 1; grid-row: 1 / span 7; z-index: -1; .field-content{ width: 100%; height: 100%; } img{ width: 100%; height: 100%; object-fit: cover; } } .views-field:not(.views-field-field-image){ grid-column: 1; 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-normal; text-transform: uppercase; } // .views-field-field-type-evenement{ // grid-row: 4; // } .views-field-title{ grid-row: 2; font-size: $font-big !important; font-weight: 500; line-height: 1.2; padding-top: .3rem; } .views-field-field-sous-titre{ grid-row: 5; } .views-field-field-type-evenement{ grid-row: 6; padding: .5rem 0 1rem 0; } .views-field-field-dates-actu{ grid-row: 4; } .views-field-field-date{ grid-row: 3; } .views-field-field-programme{ text-transform: uppercase; grid-row: 1; font-weight: 500; padding: .5rem 0 .5rem 0; } } // general à deplacer .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; display: none; } .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; } .views-field-field-programme{ .field-content{ background: $col-1 ; } } } .programme-2{ .views-field{ color: $col-2 !important; } .views-field-field-programme{ .field-content{ background: $col-2 ; } } } .programme-3{ .views-field{ color: $col-eur !important; } .views-field-field-programme{ .field-content{ background: $col-eur ; } } } .programme-4{ .views-field{ color: $col-1; } .views-field-field-programme{ .field-content{ background:$col-1 ; } } } .programme-5{ .views-field{ color: $col-mond !important; } .views-field-field-programme{ .field-content{ background: $col-mond ; } } } .programme-6{ .views-field{ color: $col-ter !important; } .views-field-field-programme{ .field-content{ background: $col-ter ; } } } .programme-7{ .views-field{ color: $col-met !important; } .views-field-field-programme{ .field-content{ background: $col-met ; } } } .programme-883{ .views-field{ color: $col-transition !important; } .views-field-field-programme{ .field-content{ background: $col-transition ; } } } } .main_logo{ z-index: 10; height: 7rem; position: relative; // background: red; background: center / contain no-repeat url(../../images/popsu-home-logo.svg); margin: -7% 0 3rem 0 !important; @include breakpoint(small down) { margin: -20% 0 3rem 0 !important; } } .programme-883{ .main_logo{ // background: red; margin: 0 0 3rem 0 !important; @include breakpoint(small down) { margin: 0 3rem 0 !important; } } } .about{ box-shadow: inset 0 5rem 4rem white; background: $trame_white; font-size: $font-medium; text-align: center; padding: 1rem 0 3rem 0; // margin-top: -16rem; .views-row{ .views-field-title{ font-family: "duke" !important; font-size: $font-large; color:black; font-weight: 400; a{ text-decoration: none; } } h3{ color: black; } div{ margin: 0 5%; @include breakpoint(small down) { margin: 0 3%; } } .views-field-view-node{ display: inline-block; margin: 0 auto; background: black; color: white; font-family: "trueno"; font-weight: 500; padding: .3rem .7rem; font-size: $font-normal; text-decoration: none; text-transform: uppercase; a{ text-decoration: none; &:hover{ text-decoration: underline; } } margin-top: 1rem; &:hover{ color: black; background: white; } } } } #projets-block_1, #home_themes-block_1, #programmes-block_4{ header{ display: none; } } .header_container{ background: $bck-col; display: grid; grid-template-columns: repeat(3, 1fr); grid-column: 1 / span 3; header{ text-align: center; font-family: 'duke'; font-size: 3.1rem; line-height: 1; opacity: .3; cursor: pointer; padding: .8rem; align-self: center; .arrow{ font-size: $font-large; display: block; margin-top: -1rem; } &.active{ opacity: 1; font-size: 4rem; } @include breakpoint(small down) { font-size: 2rem; &.active{ font-size: 2.8rem; } } } @include breakpoint(small down) { grid-template-columns: repeat(2, minmax(0, 1fr)); header[data-dom="programmes-block_4"]{ display:none; } } } #home_themes-block_1{ display: none; .slick-slide{ margin: 0 1rem; } .slick-arrow{ position: absolute; height: 100%; cursor: pointer; z-index: 100; // background-color: white; opacity: 0.2; transition: opacity 250ms; width: 10%; &:hover{ opacity: .5; } } .slick-next{ right: 0; top: 0; } .views-row{ background-clip: content-box; background-color: grey; // height: 10rem; width: 100% !important; position: relative; } .views-row:after{ content: ""; display: block; padding-bottom: 100%; } .views-field-title{ display: grid; top: 0; left: 0; width: 100%; height: 100%; z-index: 10; position: absolute; text-align: center; align-items: center; padding: .8rem 1rem; font-size: $font-medium; font-weight: 600; color: white; a{ margin-top: -.5rem; text-decoration: none; } } .views-field-field-image:before{ content: ""; display: block; position: absolute; background: black; opacity: .4; width: 100%; height: 100%; } .views-field-field-image{ top: 0; left: 0; width: 100%; height: 100%; position: absolute; .field-content{ display: grid; // justify-content: center; // align-items: center; padding: 0; overflow: hidden; width: 100%; height: 100%; // a{ // // margin-left: -50%; img{ height: 100% !important; width: inherit !important; max-width: none; } // } } } } #programmes-block_4{ display: none; grid-column: 1 / span 3; } #programmes-block_4>div>div{ display: flex; //grid-template-columns: repeat( 3, 1fr); align-items: center; justify-items: center; margin-top: 0; .views-row{ background-clip: content-box; min-height: 11rem; width: 100%; display: flex; flex-wrap: wrap; align-items: flex-start; align-content: center; padding: 1rem; .views-field{ flex-basis: 100%; } .views-field:not(.views-field-field-logo){ font-size: $font-medium; font-weight: 600; display: none; } .views-field-title{ margin-bottom: .7rem; } &:hover{ .views-field:not(.views-field-field-logo){ font-weight: 600; display: block; color: white; text-align: center; a{ text-decoration: none; } } } .views-field-field-logo{ text-align: center; } } //temp .views-field-field-diaporama{ display: none; } // .programme-1{ // background: center / 45% no-repeat url(../images/POPSU_1.svg) white; img{ width: 45%; @include breakpoint(small down) { width: 100%; } } &:hover{ background: $col-1; img{ display: none; } } } .programme-2{ // background: center / 45% no-repeat url(../images/POPSU_2.svg) white; img{ width: 45%; @include breakpoint(small down) { width: 100%; } } &:hover{ background: $col-2; img{ display: none; } } } .programme-3{ // background: center / 50% no-repeat url(../images/POPSU_Europe.svg) white; img{ width: 45%; @include breakpoint(small down) { width: 100%; } } &:hover{ background: $col-eur; img{ display: none; } } } .programme-4{ // background: center / 50% no-repeat url(../images/POPSU_Europe.svg) white; img{ width: 45%; @include breakpoint(small down) { width: 100%; } } &:hover{ background: $col-1; img{ display: none; } } } .programme-5{ // background: center / 45% no-repeat url(../images/POPSU_monde.svg) white; img{ width: 46%; @include breakpoint(small down) { width: 100%; } } &:hover{ background: $col-mond; img{ display: none; } } } .programme-6{ // background: center / 45% no-repeat url(../images/POPSU_territoires.svg) white; img{ width: 45%; @include breakpoint(small down) { width: 100%; } } &:hover{ background: $col-ter; img{ display: none; } } } .programme-7{ // background: center / 45% no-repeat url(../images/POPSU_metropoles.svg) white; img{ width: 45%; @include breakpoint(small down) { width: 100%; } } &:hover{ background: $col-met; img{ display: none; } } } .programme-883{ // background: center / 45% no-repeat url(../images/POPSU_metropoles.svg) white; img{ width: 45%; @include breakpoint(small down) { width: 100%; } } &:hover{ background: $col-transition; img{ display: none; } } } } #home_blocks-block_3{ background: $trame; padding: 2rem; h2{ text-align: center; margin: 0 0 1rem 0; } .last-ressources{ .views-field:not(.views-field-field-image){ width: 80%; } .views-row{ display: grid !important; grid-template-columns: 1fr 1fr; align-items: center; background: white; position: relative; height: auto; padding: 1rem; background-clip: content-box; } .views-field-field-image{ grid-row: 3 / span 3; // margin-top: -1.5rem; z-index: 0; padding: .5rem; margin-top: -1.3rem; } .views-field:not(.views-field-field-image){ background: transparent; width: auto; margin-left: 0; padding-left: 0; color: black; } .views-field-title-1,.views-field-title{ font-weight: 400; grid-row: 3 / span 1; grid-column: 2; font-style: italic; } .views-field-field-auteurs{ grid-row: 2 / span 1; font-weight: 600; grid-column: 2; } .views-field-field-edition{ grid-row: 4; grid-column: 2; } .views-field-field-programme{ .field-content{ display: inline-block; width: auto; padding: .3rem .5rem; } .empty { background-color: black; height: 1rem; // &::before{ // content: "POPSU"; // } } padding-left: .5rem !important; grid-row: 1 / span 1; grid-column: 1 / span 2; text-transform: uppercase; margin-top: -.5rem; .field-content{ font-weight: 600; display: inline-block; width: auto; color: white; padding: .02rem .3rem; // margin-bottom: 1rem; } } } } // #villes-block_1{ // grid-column: 1; // } // #home_themes-block_1{ // grid-column: 2; // } // #programmes-block_4{ // grid-column: 3; // } // .home_info_container{ // height: auto; // min-height: 5rem; // display: none; // grid-column: 1 / span 3; // } // #villes-block_1, #home_themes-block_1, #programmes-block_4{ // background: $bck-col; // height: 100%; // display: grid; // align-items: center; // header{ // text-align: center; // font-family: 'duke'; // font-size: 3.1rem; // line-height: 1; // opacity: .3; // cursor:pointer; // padding: .8rem; // .arrow{ // font-size: $font-large; // display: block; // margin-top: -1rem; // } // &.active{ // opacity: 1; // font-size: 4rem; // } // } // .views-row{ // display: none; // } // .leaflet-container{ // display: none; // } // }