page home modul central + page static (insertion motif)

web/themes/custom/popsu/css/styles.css

@@ -1244,7 +1244,8 @@ iframe {
   display: grid;
   grid-template-columns: 20% minmax(0, 1fr) 20%;
   column-gap: 3rem;
-  row-gap: 1rem; }
+  row-gap: 1rem;
+  position: relative; }
 
 .layout__region--bottom {
   grid-column: 1 /span 3; }
@@ -1468,6 +1469,7 @@ footer {
     text-decoration: none; }
 
 .main_logo {
+  z-index: 10;
   height: 7rem;
   background: center/contain no-repeat url(../images/popsu-home-logo.png);
   margin: -5rem 0 3rem 0; }
@@ -1559,7 +1561,59 @@ footer {
 
 #home_prog_container {
   display: grid;
-  grid-template-columns: repeat(3, 1fr); }
+  grid-template-columns: repeat(3, 1fr);
+  align-items: center;
+  justify-items: center;
+  margin-top: 1rem; }
+  #home_prog_container .views-row {
+    background-clip: content-box;
+    height: 8rem;
+    width: 100%;
+    display: grid;
+    align-items: center;
+    padding: 1rem; }
+    #home_prog_container .views-row:hover .views-field-title {
+      display: none; }
+  #home_prog_container .views-field-field-diaporama {
+    display: none; }
+  #home_prog_container .views-field-title {
+    margin: 3rem; }
+  #home_prog_container .programme-2 {
+    background: center/contain no-repeat url(../images/POPSU_1.svg); }
+    #home_prog_container .programme-2 .views-field-title {
+      font-size: 0; }
+    #home_prog_container .programme-2:hover {
+      background: #4dabc1; }
+  #home_prog_container .programme-2 {
+    background: center/contain no-repeat url(../images/POPSU_2.svg); }
+    #home_prog_container .programme-2 .views-field-title {
+      font-size: 0; }
+    #home_prog_container .programme-2:hover {
+      background: #61ab32; }
+  #home_prog_container .programme-3 {
+    background: center/contain no-repeat url(../images/POPSU_Europe.svg); }
+    #home_prog_container .programme-3 .views-field-title {
+      font-size: 0; }
+    #home_prog_container .programme-3:hover {
+      background: #646578; }
+  #home_prog_container .programme-5 {
+    background: center/contain no-repeat url(../images/POPSU_monde.svg); }
+    #home_prog_container .programme-5 .views-field-title {
+      font-size: 0; }
+    #home_prog_container .programme-5:hover {
+      background: #ab9569; }
+  #home_prog_container .programme-6 {
+    background: center/contain no-repeat url(../images/POPSU_territoires.svg); }
+    #home_prog_container .programme-6 .views-field-title {
+      font-size: 0; }
+    #home_prog_container .programme-6:hover {
+      background: #e01a35; }
+  #home_prog_container .programme-7 {
+    background: center/contain no-repeat url(../images/POPSU_metropoles.svg); }
+    #home_prog_container .programme-7 .views-field-title {
+      font-size: 0; }
+    #home_prog_container .programme-7:hover {
+      background: #28429f; }
 
 #home_theme_container .slick-arrow {
   position: absolute;
@@ -1615,10 +1669,11 @@ footer {
 #villes-block_1 header, #home_themes-block_1 header, #programmes-block_4 header {
   text-align: center;
   font-family: 'duke';
-  font-size: 2.3rem;
+  font-size: 3.5rem;
   line-height: 1;
   opacity: .3;
-  cursor: pointer; }
+  cursor: pointer;
+  padding: .8rem; }
   #villes-block_1 header .arrow, #home_themes-block_1 header .arrow, #programmes-block_4 header .arrow {
     font-size: 1.6rem;
     display: block;
@@ -1760,6 +1815,16 @@ article p, .paragraph p {
     font-size: 1rem;
     padding: .3rem .5rem; }
 
+.page-node-type-static .layout__region--top {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100vw;
+  height: 40vh;
+  background: url(../images/motif_croix.svg);
+  box-shadow: inset 0 -5rem 8rem white;
+  z-index: -1; }
+
 .page-node-type-programme .layout-content {
   position: relative; }
 

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

@@ -15,7 +15,6 @@ $(function(){
   		centerPadding: '60px',
 		infinite: false,
 	});
-	// console.log($('#centre_de_ressources-block_2 .item-list ul'));
 	$('#centre_de_ressources-block_2 .item-list ul').slick({
 		slidesToShow: 3,
   		slidesToScroll: 1,
@@ -25,9 +24,9 @@ $(function(){
 	});
 	
 	
-	if($('.path-centre-de-ressources').length > 0){
-		$("header > div").slick();
-	}
+	// if($('.path-centre-de-ressources').length > 0){
+	// 	$("header > div").slick();
+	// }
 	
 
 	$('.close-block').click(function(){
@@ -61,13 +60,12 @@ $(function(){
 				$("#home_theme_container").fadeIn(function(){
 					$("#home_theme_container").slick('refresh');
 					$("#home_theme_container").find(".views-row").css("opacity","1");
-				});
-				
-				
+				});	
+			}
+			if($(this).parents().eq(2).attr("id") == "villes-block_1" ){
+				//console.log("squik")
+				$("#home_map_container").fadeIn();
 			}
-			// if($(this).parents().eq(2).attr("id") == "villes-block_1" ){
-			// 	$("#home_map_container").empty().append(inner_rows).fadeIn();
-			// }
 			
 
 			
@@ -82,12 +80,14 @@ $(function(){
 
 	// HOME PAGE 
 	if($(".path-frontpage").length > 0){
+
 		let elem = "<div class='main_logo'></div>"
 		console.log(elem);
 		$(".about .views-row").prepend(elem);
 
 		//reconstruction header 
 		var header = $('.views-element-container').find("header");
+
 		$(header).each(element => {
 			let words = $(header[element]).text().trim().split(" ");
 			let newcontent = words.join('<br>');
@@ -104,32 +104,33 @@ $(function(){
 			slidesToShow: 5,
 			slidesToScroll: 4,
 			centerMode: true,
-			centerPadding: '60px',
+			centerPadding: '10%',
 			infinite: false,
 		});
 		 inner_rows = $('#programmes-block_4').find(".views-row").clone();
 		 $("#home_prog_container").empty().append(inner_rows);
+		 $('#programmes-block_4 header').append('<span class="arrow"><br>▼</span>').addClass("active");
+		 
+		 let map = $('#villes-block_1').find("#leaflet-map-view-villes-block-1").clone();
+		 $("#home_map_container").empty().append(map);
 
 		 
 	}
 	
-
+	//ajout header motif in page static
+	if($(".page-node-type-static").length > 0){
+		let elem = "<div class='layout__region layout__region--top'></div>"
+		$(".layout--threecol-25-50-25").prepend(elem);
+	}
 	
 	
 });
 
-$(document).on('DOMNodeInserted', function(e) {
-	// console.log(e.target);
-    if ( $(e.target).attr("id") == "home_theme_container" ) {
-		//console.log(e.target);
-		// $(e.target).slick({
-		// 	slidesToShow: 1,
-		// 	slidesToScroll: 1,
-		// 	centerMode: true,
-		// 	centerPadding: '60px',
-		// 	infinite: false,
-		// });
-    }
-});
+// $(document).on('DOMNodeInserted', function(e) {
+// 	// console.log(e.target);
+//     if ( $(e.target).attr("id") == "home_theme_container" ) {
+
+//     }
+// });
 
 

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

@@ -30,4 +30,17 @@ article, .paragraph{
         font-size: $font-big;
         padding: .3rem .5rem;
     }
+}
+
+.page-node-type-static{
+    .layout__region--top{
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100vw;
+        height: 40vh;
+        background: $trame;
+        box-shadow: inset 0 -5rem 8rem white;
+        z-index: -1;
+    }
 }

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

@@ -75,6 +75,7 @@
 	}
 }
 .main_logo{
+	z-index: 10;
 	height: 7rem;
 	// background: red;
 	background: center / contain no-repeat url(../images/popsu-home-logo.png);
@@ -194,8 +195,93 @@
 #home_prog_container{
 	display: grid;
 	grid-template-columns: repeat( 3, 1fr);
+	align-items: center;
+	justify-items: center;
+	margin-top: 1rem;
+	.views-row{
+		background-clip: content-box;
+		height: 8rem;
+		width: 100%;
+		display: grid;
+		align-items: center;
+		padding: 1rem;
+		&:hover{
+			.views-field-title{
+				display: none;
+			}
+		}
+	}
 
+	//temp
+	.views-field-field-diaporama{
+		display: none;
+	}
+	//
 
+	.views-field-title{
+		margin: 3rem;
+	}
+	.programme-2{
+		background: center / contain no-repeat url(../images/POPSU_1.svg);
+		.views-field-title{
+			font-size: 0;
+			
+		}
+		&:hover{
+			background: $col-1;
+		}
+	}
+	.programme-2{
+		background: center / contain no-repeat url(../images/POPSU_2.svg);
+		.views-field-title{
+			font-size: 0;
+			
+		}
+		&:hover{
+			background: $col-2;
+		}
+	}
+	.programme-3{
+		background: center / contain no-repeat url(../images/POPSU_Europe.svg);
+		.views-field-title{
+			font-size: 0;
+			
+		}
+		&:hover{
+			background: $col-eur;
+		}
+	}
+	.programme-5{
+		background: center / contain no-repeat url(../images/POPSU_monde.svg);
+		.views-field-title{
+
+			font-size: 0;
+			
+		}
+		&:hover{
+			background: $col-mond;
+		}
+	}
+	.programme-6{
+		background: center / contain no-repeat url(../images/POPSU_territoires.svg);
+		.views-field-title{
+			font-size: 0;
+			
+		}
+		&:hover{
+			background: $col-ter;
+		}
+	}
+	.programme-7{
+		background: center / contain no-repeat url(../images/POPSU_metropoles.svg);
+		.views-field-title{
+			font-size: 0;
+			
+		}
+		&:hover{
+			background: $col-met;
+		}
+	}
 }
 #home_theme_container{
 	.slick-slide{
@@ -263,14 +349,15 @@
 }
 
 #villes-block_1, #home_themes-block_1, #programmes-block_4{
-	
+	// background-color: $bck-col;
 	header{
 		text-align: center;
 		font-family: 'duke';
-		font-size: $font-extra;
+		font-size: 3.5rem;
 		line-height: 1;
 		opacity: .3; 
 		cursor:pointer;
+		padding: .8rem;
 		.arrow{
 			font-size: $font-large;
 			display: block;

web/themes/custom/popsu/sass/setup/_layouts.scss

@@ -3,6 +3,7 @@
 	grid-template-columns: 20% minmax(0,1fr) 20%;
     column-gap: 3rem;
     row-gap: 1rem;
+    position: relative;
 }
 
 .layout__region--bottom{