Browse Source

1er bandeau home

ouidade 3 years ago
parent
commit
4b4ae05e29

File diff suppressed because it is too large
+ 0 - 0
web/themes/custom/eql/css-compiled/styles.css


+ 167 - 7
web/themes/custom/eql/scss/pages/_home.scss

@@ -3,7 +3,7 @@
         display: grid;
         display: grid;
         grid-template-areas: "presentation presentation presentation presentation presentation presentation" 
         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" 
+                            // "presentation presentation presentation presentation presentation presentation" 
                              "actus actus actus actus actus actus"
                              "actus actus actus actus actus actus"
                              "actus actus actus actus actus actus"
                              "actus actus actus actus actus actus"
                              "programme programme programme programme programme programme"
                              "programme programme programme programme programme programme"
@@ -11,17 +11,170 @@
                              "programme programme programme programme programme programme";
                              "programme programme programme programme programme programme";
         grid-template-rows: auto auto auto;
         grid-template-rows: auto auto auto;
         grid-template-columns: 1fr repeat(4, 2fr) 1fr;
         grid-template-columns: 1fr repeat(4, 2fr) 1fr;
+        min-height: 100vh;
     
     
 
 
         .block-views-blockhome-nodes-block-1{
         .block-views-blockhome-nodes-block-1{
             grid-area: presentation;
             grid-area: presentation;
+            grid-row: 1;
+            background: url("../images/pictos/carre-contour-bleu_contact.svg");
+            .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;
+                        grid-row: 2 / span 2;
+                        font-size: 5rem;
+                        font-weight: 800;
+                        color: $blue-light;
+                        line-height: 6rem;
+                        margin-bottom: 5rem;
+                        p{
+                            margin: 0;
+                        }
+                    }
+                    .field--name-title{
+                        grid-column: 4;
+                        grid-row: 1;
+                        margin-top: 2rem;
+        
+                        h2{ 
+                            a{
+                                color: #e1000f;
+                                font-weight: 900;
+                                text-transform: uppercase;
+                            }
+                        }
+                    }
+                    .links.inline{
+                        grid-column: 2;
+                        grid-row: 4;
+                        max-width: 70%;
+                        min-width: fit-content;
+                        height: 1.5rem;
+                        padding: 0.4rem 1rem;
+                        font-size: 0.8rem;
+                        margin-bottom: 2.5rem;
+                        background-color: $white;
+                        border: 2px solid $blue-light;  
+                        list-style: none;
+                        text-align: center !important;
+        
+                        a{
+                            display: inline-flex;
+                            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>');
+        
+                            }
+                        }
+                    }
+                }
+            }
         }
         }
+
+        // bouton déposer candidature
         .block-block-content9448ca2a-90e3-488b-89cf-8ec6a986a9ca{
         .block-block-content9448ca2a-90e3-488b-89cf-8ec6a986a9ca{
             grid-area: presentation;
             grid-area: presentation;
+            grid-column: 3 /span 4;
+            grid-row: 1;
+            align-self: end;
+            margin-bottom: 2.5rem;
+            width: fit-content;
+        
+            .field--type-link {
+                grid-column: 3;
+                // justify-self: end;
+                position: relative;
+                max-width: 70%;
+                min-width: fit-content;
+                height: 1.5rem;
+                padding: 0.4rem 1rem;
+                font-size: 0.8rem;
+                margin: 0;
+                background-color: $white;
+                border: 2px solid $blue-light;  
+                list-style: none; 
+                top: -200%;
+                text-align: center !important;
+              
+                a{
+                    display: inline-flex;
+                    text-transform: uppercase;
+                    font-weight: 700;
+                    color: $blue-light;
+        
+                } 
+                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>');
+            
+                }
+            }
         }
         }
+
+        // bouton foire aux questions
         .block-block-content1bb9024b-d95f-4137-894c-362abf10a483{
         .block-block-content1bb9024b-d95f-4137-894c-362abf10a483{
             grid-area: presentation;
             grid-area: presentation;
+            grid-column: 5;
+            grid-row: 1;
+            background-color: $blue-light;
+            height: fit-content;
+            align-self: end;
+            .field--name-field-lien{
+                &:before{
+                    margin-top: 1rem;
+                    display: block;
+                    content: url("../images/pictos/picto_faq.svg");
+                }
+                text-align: center;
+                a{
+                    font-size: 0.8rem;
+                    font-weight: 1000;
+                    color: $blue-dark;
+                    text-transform: uppercase;
+                }
+            }
+            .field--name-field-description{
+                p{
+                    margin-top: 0;
+                    margin-bottom: 0;
+                    margin-left: 1.5rem;
+                    margin-right: 1.5rem;
+                    text-align: center;
+                    a{
+                        font-weight: 800;
+                        color: $white;
+                        font-size: 1.3rem;
+                    } 
+                    &:after{
+                        display: block;
+                        content:url("../images/pictos/noun_Arrow_3771902.svg")
+    
+                    }   
+                }
+            }
         }
         }
+        
         // bandeau actus
         // bandeau actus
         .block-views-blockactus-blocks-pages-block-1{
         .block-views-blockactus-blocks-pages-block-1{
             grid-area: actus;
             grid-area: actus;
@@ -90,13 +243,15 @@
                 }
                 }
             }
             }
         }
         }
+        
         // bouton voir toutes actus du bandeau bleu
         // bouton voir toutes actus du bandeau bleu
         .block-block-content3ee1f633-aaa7-4b4c-a42a-02206e26d3a2{
         .block-block-content3ee1f633-aaa7-4b4c-a42a-02206e26d3a2{
             grid-area: actus;
             grid-area: actus;
-            grid-row: 5;
+            grid-row: 4;
             grid-column: 5 / span 6;
             grid-column: 5 / span 6;
             width: fit-content;
             width: fit-content;
-            margin-bottom: 2rem;                
+            margin-bottom: 2rem; 
+            align-self: end;               
             .field--type-link {
             .field--type-link {
                 width: fit-content;
                 width: fit-content;
                 height: fit-content;
                 height: fit-content;
@@ -119,6 +274,8 @@
                 }
                 }
             }
             }
         }
         }
+
+        // présentation programme
         .block-views-blockhome-nodes-block-2{
         .block-views-blockhome-nodes-block-2{
             grid-area: programme;
             grid-area: programme;
             .view-display-id-block_2:is(.view-id-home_nodes){
             .view-display-id-block_2:is(.view-id-home_nodes){
@@ -135,12 +292,12 @@
 
 
                     div:first-child:not(.field__item):not(.field){
                     div:first-child:not(.field__item):not(.field){
                         display: grid;
                         display: grid;
-                        grid-template-columns: 1fr repeat(4,2fr) 1fr;
-                        grid-template-rows: 1fr 1fr 1fr 0.5fr 6fr;
+                        grid-template-columns: 1fr repeat(4, 2fr) 1fr;
+                        grid-template-rows: 1fr 1fr 1fr 0.5fr 1fr 1fr;
                     }
                     }
             
             
                     .inline.links{
                     .inline.links{
-                        grid-row: 4;
+                        grid-row: 3;
                         grid-column: 5 / span 6;
                         grid-column: 5 / span 6;
                         width: fit-content;
                         width: fit-content;
                         height: fit-content;
                         height: fit-content;
@@ -150,6 +307,7 @@
                         background-color: $white;
                         background-color: $white;
                         border: 2px solid $blue-light;  
                         border: 2px solid $blue-light;  
                         list-style: none;
                         list-style: none;
+                        align-self: end;
             
             
                         a{
                         a{
                             text-transform: uppercase;
                             text-transform: uppercase;
@@ -190,8 +348,10 @@
             
             
                     }
                     }
                     .field--name-field-videos{
                     .field--name-field-videos{
+
                         grid-column: 1 / span 5;
                         grid-column: 1 / span 5;
-                        grid-row: 5;
+                        grid-row: 5 / span 6;
+                        height: fit-content;
                     }
                     }
                 }
                 }
             
             

Some files were not shown because too many files changed in this diff