page theme et villes

web/themes/custom/popsu/lib/script.js

@@ -184,7 +184,7 @@ $(function(){
 	
 //// PAGE POPSU ////
 // projets-block_2
-if($(".page-node-type-programme").length > 0){
+if($(".page-node-type-programme").length > 0 || $(".page-node-type-projet").length > 0 || $(".page-node-type-theme").length > 0){
 	$(".body").append('<footer><a class="more">Lire la suite</a></footer>');
 
 	let elem = "<div class='main_logo'></div>"
@@ -210,6 +210,7 @@ if($(".page-node-type-programme").length > 0){
 
 }
 
+
 //page about navigation : 
 if($(".page-node-type-static").length > 0){
 	$(".field_titre").on("click", function(){

web/themes/custom/popsu/partials/header.html.twig

@@ -1,9 +1,9 @@
 <header role="banner" class="columns small-12">
     <section id="header-top" class="row align-middle">
-      <div id="header-top-left" class="columns small-3">
+      <div id="header-top-left" class="columns small-4">
         {{ page.header_top_left }}
       </div>
-      <div id="header-top-middle" class="columns small-8">
+      <div id="header-top-middle" class="columns small-7">
         {{ page.header_top_middle }}
       </div>
       <div id="header-top-right" class="columns small-1">

web/themes/custom/popsu/popsu.theme

@@ -26,6 +26,14 @@ function popsu_preprocess_html(&$variables) {
   }
 }
 
+function popsu_preprocess_node(&$variables){
+  
+  $node = &$variables['node'];
+  if($node->hasField('field_programme') && $node->get('field_programme')->getString() != ""){
+    $variables['attributes']['class'][] = 'programme-' . $node->get('field_programme')->getString();
+  }
+}
+
 function popsu_preprocess_field(&$variables){
   $element = &$variables['element'];
   if (isset($element['#field_name'])) {

web/themes/custom/popsu/sass/pages/_programme.scss

@@ -416,6 +416,7 @@
         }
         .body_open{
             height: auto;
+            padding: 0 0 3rem 0;
             &:after{
                 opacity: 0;
                 -webkit-transition: all 250ms ease;
@@ -444,6 +445,9 @@
                     align-content: center;
                     // margin-top: 1rem;
                 }
+                p{
+                    margin-top: .5rem;
+                }
                 .field_titre:after{
                     content: '▼';
                     -webkit-transition: all 250ms ease;

web/themes/custom/popsu/sass/pages/_projet.scss

@@ -1,3 +1 @@
-.page-node-type-projet{
-    
-}
+//voir theme

web/themes/custom/popsu/sass/pages/_themes.scss

@@ -1,4 +1,41 @@
 .page-node-type-theme, .page-node-type-projet{
+    &.programme-1{
+        .field_programme{
+            background: $col-1;
+        }
+        
+    }
+    &.programme-2{
+        .field_programme{
+            background: $col-2;
+        }
+    }
+    &.programme-3{
+        
+        .field_programme{
+            background: $col-eur;
+        }
+    }
+    &.programme-4{
+        .field_programme{
+            background: $col-met;
+        }
+    }
+    &.programme-5{
+        .field_programme{
+                background: $col-mond;
+        }
+    }
+    &.programme-6{
+        .field_programme{
+                background: $col-ter;
+        }
+    }
+    &.programme-7{
+        .field_programme{
+                background: $col-met;
+        }
+    }
     //tmp hidden
     .block-region-first{
         visibility: hidden;
@@ -7,77 +44,165 @@
     .block-region-third{
         margin-top: 30rem;
     }
-    #node\:title:before{
-        clear: both;
-        display: block;
-        width: 100%;
-        font-size: $font-small;
-        text-transform: uppercase;
-        margin-bottom: .8rem;
-    }
-    ///
-    .field_programme{
-        display: inline-block;
-        background: gray;
-        margin-bottom: 1rem;
-        color: white;
-        font-weight: 600;
-        padding: .3rem .5rem;
-        a{
-            text-decoration: none;
-        }
-    }
-    &.programme-1{
-		.field_programme{
-			background: $col-1;
-		}
-		
-	}
-	&.programme-2{
-		.field_programme{
-			background: $col-2;
-		}
-	}
-	&.programme-3{
-		
-		.field_programme{
-			background: $col-eur;
-		}
-	}
-	&.programme-4{
-		.field_programme{
-			background: $col-met;
-		}
-	}
-	&.programme-5{
-		.field_programme{
-				background: $col-mond;
-		}
-	}
-	&.programme-6{
-		.field_programme{
-				background: $col-ter;
-		}
-	}
-	&.programme-7{
-		.field_programme{
-				background: $col-met;
-		}
-	}
-
-    ///
-    #node\:title{
-        margin: 0;
-        font-size: $font-large;
-        line-height: 1.3;
-        font-weight: 600;
-        margin-bottom: 1rem;
-    }
-    #node\:field_image,.field_diaporama{
-        width: 150%;
-        margin-bottom: 1rem;
-        img{
+    .block-region-second{
+        #node\:title:before{
+            clear: both;
+            display: block;
             width: 100%;
+            font-size: $font-small;
+            text-transform: uppercase;
+            margin-bottom: .8rem;
+        }
+        ///
+        .field_programme{
+            display: inline-block;
+            // background: gray;
+            margin-bottom: 1rem;
+            color: white;
+            font-weight: 600;
+            padding: .3rem .5rem;
+            a{
+                text-decoration: none;
+            }
+        }
+       
+
+        ///
+        #node\:title{
+            margin: 0;
+            font-size: $font-large;
+            line-height: 1.3;
+            font-weight: 600;
+            margin-bottom: 1rem;
+        }
+        #node\:field_image,.field_diaporama{
+            width: 150%;
+            margin-bottom: 1rem;
+            img{
+                width: 100%;
+            }
+        }
+        .body{
+            font-size: $font-medium;
+            height: 15rem;
+            overflow: hidden;
+            position: relative;
+            -webkit-transition: all 250ms ease;
+            -moz-transition: all 250ms ease;
+            -o-transition: all 250ms ease;
+            transition: all 250ms ease;
+            footer{
+                position:absolute;
+                bottom:0;
+                left:0;
+                z-index: 1;
+    
+                width: 100%;
+                text-align: center;
+    
+                
+                a{
+                    display: inline-block;
+                    margin: 0 auto;
+                    background: black;
+                    color: white;
+                    cursor:pointer;
+    
+                    font-family: "trueno";
+                    font-weight: 500;
+    
+                    padding: .3rem .5rem;
+                    font-size: $font-small;
+                    text-decoration: none;
+                    text-transform: uppercase;
+                    
+    
+                    &:hover{
+                        color:black;
+                        background: white;
+                    }
+                }
+            }
+        }
+        .body:after{
+            content: "";
+            opacity: 1;
+            position: absolute;
+            top: 0; bottom: 0; left: -15px; right: -15px;
+            box-shadow: inset white 0 -4rem 2rem;
+        }
+        .body_open{
+            height: auto;
+            padding: 0 0 3rem 0;
+            &:after{
+                opacity: 0;
+                -webkit-transition: all 250ms ease;
+                -moz-transition: all 250ms ease;
+                -o-transition: all 250ms ease;
+                transition: all 250ms ease;
+            }
+            -webkit-transition: all 250ms ease;
+            -moz-transition: all 250ms ease;
+            -o-transition: all 250ms ease;
+            transition: all 250ms ease;
+        }
+        .field_textes{
+          
+            .paragraph{
+                // border-top: 1px solid black;
+                border-bottom: 3px dotted gray;
+                padding: 1rem 0;
+                .field_titre{
+                    font-size: $font-big;
+                    font-weight: 600;
+                    text-transform: initial;
+                    cursor: pointer;
+                    display: grid;
+                    grid-template-columns: 95% 5%;
+                    align-content: center;
+                    // margin-top: 1rem;
+                }
+                .field_titre:after{
+                    content: '▼';
+                    -webkit-transition: all 250ms ease;
+                    -moz-transition: all 250ms ease;
+                    -o-transition: all 250ms ease;
+                    transition: all 250ms ease;
+                    align-self: center;
+                    justify-self: center;
+                }
+                .rotate:after{
+                    transform: rotate(180deg);
+                    -webkit-transition: all 250ms ease;
+                    -moz-transition: all 250ms ease;
+                    -o-transition: all 250ms ease;
+                    transition: all 250ms ease;
+                }
+                .field_texte{
+                    height: auto;
+                    position: relative;
+                    h2{
+                        text-transform: inherit;
+                    }
+                    p{
+                        margin-top: .5rem;
+                    }
+                    -webkit-transition: all 250ms ease;
+                    -moz-transition: all 250ms ease;
+                    -o-transition: all 250ms ease;
+                    transition: all 250ms ease;
+                }
+                
+                .crop{
+                    height: 0;
+                    overflow: hidden;
+                    display: none;
+                    -webkit-transition: all 250ms ease;
+                    -moz-transition: all 250ms ease;
+                    -o-transition: all 250ms ease;
+                    transition: all 250ms ease;
+                }
+            }
         }
     }
     
@@ -87,12 +212,14 @@
                 text-align: center;
             }
             .field_projets_lies{
+                margin-top: 1rem;
                 display: grid;
                 grid-template-columns: repeat(5, 1fr);
                 column-gap: 1rem;
                 padding: 0 10%;
             }
             article{
+                margin-bottom: 1.6rem;
                 .body{
                     display: none;
                 }
@@ -104,6 +231,11 @@
     //équipe tmp 
 
     #node\:field_equipes{
+        margin-top: 1rem;
+        h2{
+            color: black;
+            text-align: center;
+        }
         .field_equipes{
            .paragraph{
                 display: grid;
@@ -157,9 +289,74 @@
         }
     }
 
+&.programme-1{
+    .block-region-second{
+        h2,h3,h4,h5,h6,.field_titre{
+            color: $col-1;
+        }
+    }
+}
+&.programme-2{
+    .block-region-second{
+        h2,h3,h4,h5,h6,.field_titre{
+            color: $col-2;
+        }
+    }
+    
 
+}
+&.programme-3{
+    .block-region-second{
+        h2,h3,h4,h5,h6,.field_titre{
+            color: $col-eur;
+        }
+    }
+    
+}
+&.programme-4{
+    .block-region-second{
+        h2,h3,h4,h5,h6,.field_titre{
+            color: $col-met;
+        }
+    }
+    
+}
+&.programme-5{
+    .block-region-second{
+        h2,h3,h4,h5,h6,.field_titre{
+            color: $col-mond;
+        }
+    }
+    
+}
+&.programme-6{
+    .block-region-second{
+        h2,h3,h4,h5,h6,.field_titre{
+            color: $col-ter;
+        }
+    }
+           
+}
+&.programme-7{
+    .block-region-second{
+        h2,h3,h4,h5,h6,.field_titre{
+                color: $col-met;
+            }
+    }
+    
+}
+
+    // font-size: $font-small;
+    //temp hidden 
+    .computed_projets_references, .computed_themes_references, .field_logo{
+        display: none;
+    }
+    
+    
+    
 }
 
+
 .page-node-type-projet{
     #node\:title:before{
         content: "ville";
@@ -170,5 +367,140 @@
     #node\:title:before{
         content: "théme";
     }
+    #node\:field_equipes{
+        h2{
+            color: white !important;
+            text-align: left !important;
+            
+        }
+        
+    }
+    .field_projets_lies{
+        article{
+            display: grid;
+            h2{
+                grid-row: 2;
+                text-align: left !important;
+                text-transform: none !important;
+                line-height: 1.3;
+                margin: .5rem 0 0 0;
+                font-size: $font-normal;
+                font-weight: 400;
+                a{
+                    text-decoration: none;
+                    &:hover{
+                        text-decoration: underline;
+                    }
+                }
+            }
+            .field_diaporama {
+                position: relative;
+                width: 100%;
+                overflow: hidden;
+                a{
+                    position: absolute;
+                    height: 100%;
+                    width: 100%;
+                    object-fit: cover;
+                    img{
+                       height: 100% ;
+                       width: 100%;
+                       object-fit: cover;
+                    }
+                }
+            }
+            .field_diaporama:after {
+                content: "";
+                display: block;
+                padding-top: 100%;
+
+            }
+
+            .field_programme{
+                text-transform: uppercase;
+                display: inline-block;
+                font-weight: 600;
+                
+                padding: .02rem .3rem;
+                grid-column: 1;
+                grid-row: 1;
+                z-index: 1;
+                margin-bottom: -.5rem;
+                margin-left: .2rem;
+                
+                color: white;
+                a{
+                    text-decoration: none;
+                }
+            }
+
+        //// prog color
+        &.programme-1{
+            h2{ 
+                color: $col-1 !important;
+            }
+            .field_programme{
+                background: $col-1 ;
+            }
+        }
+        &.programme-2{
+            h2{
+                color: $col-2 !important;
+            }
+            .field_programme{
+                background: $col-2 ;
+            }
+        }
+        &.programme-3{
+
+            h2{
+                color: $col-eur !important;
+            }
+            .field_programme{
+                background: $col-eur ;
+                
+            }
+        }
+        &.programme-4{
+            h2{ 
+                color: black;
+            }
+            .field_programme{
+                background:black ;
+                
+            }
+        }
+        
+        &.programme-5{
+            
+            h2{
+                color: $col-mond !important;
+            }
+            .field_programme{
+                background: $col-mond ;
+            }
+        }
+        &.programme-6{
+
+            h2{
+                color: $col-ter !important;
+            }
+            .field_programme{
+                    background: $col-ter ;
+            }
+
+        }
+        &.programme-7{
+            h2{
+                color: $col-met !important;
+            }
+            .field_programme{
+                    background: $col-met ;                
+            }
+        }
+            
+            
+        }
+    }
 
 }