d9-eql/web/themes/custom/eql/scss/pages/_home.scss

// home juin 2023
// @import "../partials/_slick-slider.scss";

.path-frontpage{
        // bandeau actus
        .block-views-blockactus-blocks-pages-block-1{
            // grid-area: actus;
            width: 100vw;
            height: 600px;
            border-bottom: 5px solid $blue-light;
            background: $background-actus;

            // @media(max-width: 810px){
            //     max-height: fit-content;
            // }
            @media(max-width:792px){
                max-height: 500px;
            }
            @media(max-width:724px){
                max-height: 470px;
            }
            @media(max-width: 479px){
                max-height: fit-content;
            }
            
            div{
                height: 100%;
                .view-actus-blocks-pages{
                    height: 100%;
                    .view-content{
                        height: 90%;
                        .slick-list{
                            @media(max-width: 810px){
                                height: fit-content !important;
                                } 
                            @media(max-width: 479px){
                            height: fit-content !important;
                            }   
                        }
                        .views-row{
                            .node-type-actualite{
                                color: $black;
                                line-height: 1.5rem;
                                width: 80%;
                                height: 600px;
                                margin: auto;
                                @media (max-width: 810px){ 

                                // @media (max-width: 680px){
                                    width: 65%;
                                }
                                div:first-child{           // block actu dans le bandeau
                                    display: grid;
                                    grid-template-columns: 1fr repeat(9, 1fr) 1fr;
                                    @media (max-width: 810px){ 

                                    // @media (max-width: 680px){ 
                                        display: flex;
                                        flex-direction: column;
                                        height: fit-content;
                                        
                                    }
                                    .field--name-field-images {
                                        order: 1;
                                        grid-column: 1 /span 9;
                                        grid-row: 1 / span 6;
                                        
                                        .field__item img{  
                                            width: inherit;
                                            max-height: 550px;
                                            object-fit: cover;
                                            padding-left: 1rem;
                                            @media(max-width:852px){
                                                max-height: 310px;
                                                max-width: 100%;
                                                object-fit: contain;
                                                padding-left: 0;
                                                margin-bottom: 1rem;
                                            }
                                            @media(max-width:792px){
                                                max-height: 450px;
                                            }
                                            @media(max-width:724px){
                                                max-height: 400px;
                                            }
                                            @media (max-width: 680px){ 
                                                height: 200px;
                                                object-fit: contain;
                                                max-width: 70vw;
                                                margin: auto;
                                                padding-left: 0;
                                                padding-bottom: 1rem;
                                                
                                            }
                                        }
                                    }
                                    
                                    .field--name-field-date{
                                        grid-column: 9 / span 9;
                                        grid-row: 2;
                                        order: 2;
                                        div{
                                            display: flex !important;
                                            flex-direction: row;
                                        }
                                        time{ 
                                            display: flex;
                                            flex-direction: row;
                                            font-size: 0.9rem;
                                            font-weight: 800;
                                            padding-right: 1rem;
                                            width: fit-content;            
                                        }
                                    }
    
                                    .field--name-field-lieu{
                                        display: flex !important;
                                        flex-direction: row;
                                        div.field__item{
                                        }
                                        .field__label{
                                            display: none;
                                        }
                                        grid-column: 10 / span 12;
                                        grid-row: 2;
                                        &::before{
                                            content: " | ";
                                            margin-right: 2rem;
                                            @media (max-width: 534px){
                                                display: none;
                                            }
                                        }
                                        @media (max-width: 534px){
                                            order: 2;
                                        }
                                        
                                    }
                                    .field--name-title{
                                        display: inline-flex;
                                        grid-column: 9 / span 9;
                                        grid-row: 3;
                                        order:3;
                                        h2 a{
                                            color: $blue-light !important;
                                        }
                                    }
                                    .field--name-field-sous-titre{
                                        display: inline-block;
                                        grid-column: 9 / span 9;
                                        grid-row: 4;
                                        order:4;
                                        margin-top: 0.3rem;
                                        font-weight: 800;
                                    }
                                    
                                    .field:not(.field--name-field-images){
                                        width: 100%;
                                    }
                                    h2{ margin:0; }
                                    a{ 
                                        color: $black; 
                                        grid-column: 1/span 8;
                                    } 
                        
                                    .inline.links{
                                        // grid-column: 5;
                                        // grid-row: 4;
                                        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{
                                        display: inline-block;
    
                                        grid-column: 9 / span 7;
                                        grid-row: 5;
                                        order:5;
                                        padding-top: 1rem;
                                    }
                                }

                            }
                        }
                       

                    }
                }
            }

        }
    
        // bouton voir toutes actus du bandeau bleu
        .block-block-content3ee1f633-aaa7-4b4c-a42a-02206e26d3a2{
            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;
              
            //     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;
                padding-bottom: 4rem;
                // // 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: 80%;
                    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;
                        @media (max-width: 810px) {
                            width: 100%;
                        }
                        .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: 810px){ 
                            padding-left: 0em;
                            flex: 1 1 100%;
                            padding-right: 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: 810px){ 
                                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;
                            }
                        }
                    }
                }

            }
        }


        // Zoom sur les projets
        .block-views-blockprojets-block-4{
            border-top: 5px solid $blue-light;
            background: $background-actus;
            padding-top: 2rem;
            padding-bottom: 4rem;
            span h2{
                width: 80%;
                margin: auto;
                padding-top: 1rem;
                padding-bottom: 5rem;
                text-transform: uppercase;
                color: $red;
                font-family: 'Source Code Pro';
                font-weight: 1000;
                @media (max-width: 479px){
                    padding-bottom: 1rem;
                }
            }
            .view-projets{
                width: 80%;
                margin: auto;
                .view-content{
                    display: flex;
                    flex-direction: row;
                    justify-content: space-between;
                    @media(max-width: 810px){
                        flex-direction: column;
                    }
                    
                    .views-row{
                        width: 49%;
                        @media(max-width: 810px){
                            width: 100%;
                            margin-bottom: 3rem;
                        }
                        
                        .node-type-projet{
                            color: $blue-dark;
                            line-height: 1.5rem;
                            @media (max-width: 479px){
                                padding-left: 0rem;
                                padding-right: 0rem;
                                padding-top: 2rem;
                            }
                            div:first-child{                
                                display: flex;
                                flex-direction: column;
                                max-height: fit-content;
                                a{
                                    color: $blue-dark;
                                } 
                                .field--name-field-photo {   
                                    order:1;
                                    .field__item{
                                        display:none;
                                    }
                                    .field__item:first-child{
                                        display:block;
                                    }
                                    img{  
                                        width: 100%; 
                                        // object-fit: cover;
                                        // height: fit-content;
                                        height: auto;
                                        max-height: 400px;
                                        object-fit: contain;
                                    }
                                    // &::after{ 
                                    //     display: block;
                                    //     content:url('data:image/svg+xml,<svg width="160" height="25" xmlns="http://www.w3.org/2000/svg" version="1.1"> <line x1="0" x2="80" y1="20" y2="20" stroke-linecap="cube" stroke="rgb(9,57,139)" stroke-width="2.5"/></svg>');
                                    // }
                                }
                                .field--name-field-adresse{
                                    order:2;
                                    display: flex;
                                    text-transform: uppercase;
                                    font-size: 0.9rem;
                                    font-weight: 800;
                                    margin-top: 0.8rem;
                                    line-height: 0.6rem;
                                    .address{
                                        display: flex;
                                        flex-direction: row;
                                        margin: 0;
                                        .locality{
                                            padding-top: 0 !important;
                                            padding-bottom: 0 !important;
                                            &::after{
                                                content:",";
                                                margin-right: 0.3rem;
                                            }
                                        }  
                                        .country{
                                            padding-top: 0 !important;
                                            padding-bottom: 0 !important;
                                        }                                      }
                                }
                                .field--name-field-sous-titre{
                                    margin-top: 0.5rem;
                                    font-size: 0.9rem;
                                    font-weight: 800;
                                    order: 4;
                                }
                                .field--name-title{
                                    order: 3;
                                    margin-top: 0.5rem;
                                    font-size: 0.9rem;
                                    font-weight: 800;
                                    h2{margin: 0;}
                                }
    
                                .field--name-field-incube{
                                    order:4;
                                    color: $red;
                                    margin-top: 0.8rem;
                                    font-size: 0.7rem;
                                }
                                .field--name-field-region{
                                    display: none;
                                    order: 5;
                                    color: $black;
                                    font-size: 0.7rem;
                                }
                                .field--name-field-type-de-moa{
                                    display: none;
                                    order:6;
                                    a{
                                        color: $black;
                                        font-size: 0.7rem;
                                    }
                                }
                                .field--name-field-type-de-projet{
                                    display: none;
                                    order:7;
                                    a {
                                        color: $black;
                                        font-size: 0.7rem;
                                    }
                                }
                                .field--name-field-etape-du-projet{
                                    display: none;
                                    order: 8;
                                    color: $black;
                                    font-size: 0.7rem;
                                }
                            }
                        }
                    }
                }

            }
        }

        // bouton voir tous les projets du bandeau bleu
        .block-block-contentbfb4368c-4f85-4329-88f1-8769161aa66f{
            display: flex;
            flex-flow: row-reverse;
            background: $background-actus;
            padding-right:10%;   
            padding-top: 2rem;
            padding-bottom: 4rem;
            @media(max-width:479px) {
                padding-top: 2rem;
                padding-bottom: 2rem;

            }
            .field--type-text-with-summary{
                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;
                p{margin: 0;}
                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>');
            
                }
            }
        }

        //carte
        .block-views-blockprojets-block-2{
            #leaflet-map-view-projets-block-2{
                height: 500px !important;
            }
        }

        
    }