home page - sliders

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

@@ -999,6 +999,42 @@ table {
 .slick-arrow.slick-hidden {
   display: none; }
 
+.programme-2 .views-field-field-programme .field-content {
+  background: blue; }
+
+.programme-2 .views-field {
+  color: blue; }
+
+.programme-3 .views-field-field-programme .field-content {
+  background: blue; }
+
+.programme-3 .views-field {
+  color: blue; }
+
+.programme-4 .views-field-field-programme .field-content {
+  background: wheat; }
+
+.programme-4 .views-field {
+  color: wheat; }
+
+.programme-5 .views-field-field-programme .field-content {
+  background: wheat; }
+
+.programme-5 .views-field {
+  color: wheat; }
+
+.programme-7 .views-field-field-programme .field-content {
+  background: red; }
+
+.programme-7 .views-field {
+  color: red; }
+
+.programme-6 .views-field-field-programme .field-content {
+  background: red; }
+
+.programme-6 .views-field {
+  color: red; }
+
 @media (min-width: 48rem) {
   :root {
     font-size: calc(1rem + ((1vw - .48rem) * 1.389));
@@ -1162,6 +1198,9 @@ main h2 {
 a {
   color: inherit; }
 
+strong {
+  font-weight: 600; }
+
 iframe {
   display: none; }
 
@@ -1172,6 +1211,9 @@ iframe {
   row-gap: 1rem; }
 
 /*pages*/
+header {
+  margin-bottom: 2rem; }
+
 #header-top {
   height: 3rem;
   background: white; }
@@ -1212,19 +1254,19 @@ iframe {
       display: inline-block;
       width: auto;
       padding: .2rem .5rem; }
-  .header_top_middle_container .popsu-node-3 .views-field-title {
+  .header_top_middle_container .programme-3 .views-field-title {
     color: blue; }
-    .header_top_middle_container .popsu-node-3 .views-field-title:hover {
+    .header_top_middle_container .programme-3 .views-field-title:hover {
       background: blue;
       color: white; }
-  .header_top_middle_container .popsu-node-5 .views-field-title {
+  .header_top_middle_container .programme-5 .views-field-title {
     color: wheat; }
-    .header_top_middle_container .popsu-node-5 .views-field-title:hover {
+    .header_top_middle_container .programme-5 .views-field-title:hover {
       background: wheat;
       color: white; }
-  .header_top_middle_container .popsu-node-7 .views-field-title {
+  .header_top_middle_container .programme-7 .views-field-title {
     color: red; }
-    .header_top_middle_container .popsu-node-7 .views-field-title:hover {
+    .header_top_middle_container .programme-7 .views-field-title:hover {
       background: red;
       color: white; }
 
@@ -1342,9 +1384,124 @@ footer {
       color: transparent;
       background: left/contain no-repeat url(../images/yt.svg); }
 
+.last-news .slick-slide, .last-ressources .slick-slide {
+  margin: 0 1rem; }
+
+.last-news .slick-arrow, .last-ressources .slick-arrow {
+  position: absolute;
+  height: 100%;
+  cursor: pointer;
+  z-index: 100;
+  background-color: white;
+  opacity: 0;
+  transition: opacity 250ms;
+  width: 10%; }
+  .last-news .slick-arrow:hover, .last-ressources .slick-arrow:hover {
+    opacity: .5; }
+
+.last-news .slick-next, .last-ressources .slick-next {
+  right: 0;
+  top: 0; }
+
+.last-news .views-row, .last-ressources .views-row {
+  display: grid !important;
+  grid-template-columns: 1fr;
+  position: relative;
+  height: auto; }
+  .last-news .views-row .views-field-field-image, .last-ressources .views-row .views-field-field-image {
+    grid-column: 1;
+    grid-row: 1 / span 4;
+    z-index: -1;
+    padding-top: 1rem; }
+  .last-news .views-row .views-field:not(.views-field-field-image), .last-ressources .views-row .views-field:not(.views-field-field-image) {
+    background: blue;
+    width: 50%;
+    margin-left: 1rem;
+    padding-left: 1rem; }
+  .last-news .views-row .views-field-title, .last-ressources .views-row .views-field-title {
+    padding-bottom: 1rem;
+    grid-column: 1;
+    grid-row: 3;
+    font-weight: 600; }
+  .last-news .views-row .views-field-view-node, .last-ressources .views-row .views-field-view-node {
+    padding-top: 1rem;
+    grid-column: 1;
+    grid-row: 1; }
+  .last-news .views-row .views-field-field-programme, .last-ressources .views-row .views-field-field-programme {
+    text-transform: uppercase;
+    grid-column: 1;
+    grid-row: 2; }
+  .last-news .views-row a, .last-ressources .views-row a {
+    text-decoration: none; }
+
 .about {
-  background: lightblue;
-  text-align: center; }
+  background: #98d0d9;
+  text-align: center;
+  padding: 18rem 0 3rem 0;
+  margin-top: -15rem; }
+  .about article h2 {
+    font-family: "duke" !important;
+    font-size: 1.6rem;
+    color: black;
+    font-weight: 400; }
+    .about article h2 a {
+      text-decoration: none; }
+  .about article h3 {
+    color: black; }
+  .about article div {
+    margin: 0 5%; }
+
+#home_blocks-block_3 {
+  background: #98d0d9;
+  padding: 2rem; }
+  #home_blocks-block_3 h2 {
+    text-align: center;
+    margin: 0 0 1rem 0; }
+  #home_blocks-block_3 .last-ressources .views-field:not(.views-field-field-image) {
+    width: 80%; }
+  #home_blocks-block_3 .last-ressources .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; }
+  #home_blocks-block_3 .last-ressources .views-field-field-image {
+    grid-row: 3 / span 2;
+    margin-top: -1.5rem;
+    z-index: 0;
+    padding: .5rem; }
+  #home_blocks-block_3 .last-ressources .views-field:not(.views-field-field-image) {
+    background: transparent;
+    width: auto;
+    margin-left: 0;
+    padding-left: 0; }
+  #home_blocks-block_3 .last-ressources .views-field-title {
+    font-weight: 600;
+    grid-row: 3 / span 1;
+    grid-column: 2 / span 1; }
+  #home_blocks-block_3 .last-ressources .views-field-view-node {
+    grid-row: 2 / span 1;
+    grid-column: 2 / span 1; }
+  #home_blocks-block_3 .last-ressources .views-field-field-programme {
+    padding-left: .5rem !important;
+    grid-row: 1 / span 1;
+    grid-column: 1 / span 2;
+    text-transform: uppercase;
+    margin-top: -.5rem; }
+    #home_blocks-block_3 .last-ressources .views-field-field-programme .field-content {
+      display: inline-block;
+      width: auto;
+      background-color: blue !important;
+      padding: .3rem .5rem; }
+    #home_blocks-block_3 .last-ressources .views-field-field-programme .field-content {
+      font-weight: 600;
+      display: inline-block;
+      width: auto;
+      color: white;
+      padding: .02rem .3rem; }
 
 .path-centre-de-ressources {
   background-color: #f8f8fb; }
@@ -1393,7 +1550,8 @@ footer {
       display: grid;
       column-gap: 1rem;
       row-gap: 1rem;
-      grid-template-columns: calc(10% - 3em) repeat(3, 27.3%); }
+      grid-template-columns: calc(10% - 3em) repeat(3, 27.3%);
+      align-items: flex-start; }
       .path-centre-de-ressources .views-view-grid .views-row .views-col:first-child {
         grid-column-start: 2; }
     .path-centre-de-ressources .views-view-grid .views-col {
@@ -1401,7 +1559,6 @@ footer {
       grid-template-columns: 40%  60%;
       grid-auto-rows: min-content;
       background-color: white;
-      background-clip: content-box;
       width: 100% !important;
       padding: .3rem; }
       .path-centre-de-ressources .views-view-grid .views-col a {
@@ -1411,7 +1568,8 @@ footer {
       .path-centre-de-ressources .views-view-grid .views-col .views-field:not(:first-child) {
         padding: 0 0 0 .4rem; }
       .path-centre-de-ressources .views-view-grid .views-col .views-field-field-image {
-        grid-row: 2 / span 2; }
+        grid-row: 3 / span 2;
+        margin-top: -1.5rem; }
       .path-centre-de-ressources .views-view-grid .views-col .views-field-field-programme {
         grid-row: 1 / span 1;
         grid-column: 1 / span 2; }
@@ -1420,9 +1578,10 @@ footer {
           display: inline-block;
           width: auto;
           color: white;
-          background: red;
           padding: .15rem .3rem;
           margin-bottom: 1rem; }
+      .path-centre-de-ressources .views-view-grid .views-col .views-field-field-theme .field-content {
+        color: black; }
       .path-centre-de-ressources .views-view-grid .views-col .views-field-field-type-de-ressource {
         text-transform: uppercase;
         font-weight: 600;

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

@@ -2,8 +2,19 @@ import 'slick-carousel';
 
 $(function(){
 	console.log("$ ready !!");
-	$('.last-news').slick();
-	$('.last-ressources').slick();
+	$('.last-news').slick({
+		slidesToShow: 1,
+  		slidesToScroll: 1,
+		centerMode: true,
+  		centerPadding: '60px',
+	});
+	$('.last-ressources').slick({
+		slidesToShow: 3,
+  		slidesToScroll: 1,
+		centerMode: true,
+  		centerPadding: '60px',
+		infinite: false,
+	});
 
 	$('.close-block').click(function(){
 		$(this).parent().fadeOut();

web/themes/custom/popsu/popsu.theme

@@ -17,7 +17,7 @@ function popsu_preprocess_views_view_unformatted(&$variables) {
         foreach ($rows as $id => $row) {
             $variables['rows'][$id]['attributes'] = new Attribute();
             $c = $variables['rows'][$id]['content']["#row"]->nid;
-            $variables['rows'][$id]['attributes']->addClass("popsu-node-".$c);
+            $variables['rows'][$id]['attributes']->addClass("programme-".$c);
         }
   }
 
@@ -38,9 +38,29 @@ function popsu_preprocess_region(&$variables) {
  * Implements hook_preprocess_page().
  */
 
-// function popsu_preprocess_page(&$variables){
-//   $rows = $variables['rows'];
-// }
+function popsu_preprocess_views_view(&$variables){
+  $vars = $variables;
+  if(isset($variables['css_class']) &&  $variables['css_class'] == 'last-news'){
+
+    $rows =& $variables['rows'];
+    foreach ($rows as $i => &$row ){
+      foreach ($row['#rows'] as $j => &$elem) {
+        $entity = $elem["#row"]->_entity;
+        if ($entity->hasField('field_programme')) {
+          $prog_id = $entity->get('field_programme')->getString();
+          $class = "programme-".$prog_id;
+          $attributes = array(
+            "class" => $class
+          );
+        }
+
+        // $elem['id'] = new Attribute("socks");
+        //$elem['attributes']->addClass($class);
+      }
+    }
+  }
+  
+}
 
 function popsu_preprocess_views_view_grid(&$variables){
   // we pass all variables by reference

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

@@ -1,7 +1,158 @@
-.about{
 
-	background: lightblue;
-	text-align: center;
+.last-news, .last-ressources{
+	.slick-slide{
+		margin: 0 1rem;
+	}
+	.slick-arrow{
+		position: absolute;
+		height: 100%;
+		cursor: pointer;
+		z-index: 100;
+		background-color: white;
+		opacity: 0;
+		transition: opacity 250ms;
+		width: 10%;
+		&:hover{
+			opacity: .5;
+		}
+	}
+	.slick-next{
+		right: 0;
+		top: 0;
+	}
+	.views-row{
+		display: grid !important;
+		grid-template-columns: 1fr;
+		// flex-direction: column;
+		// flex-direction: column-reverse;
+		position: relative;
+		height: auto;
+		.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: blue;
+			width: 50%;
+			margin-left: 1rem;
+			padding-left: 1rem;
+			
+		}
+		.views-field-title{
+			padding-bottom: 1rem;
+			grid-column: 1;
+			grid-row: 3;
+			font-weight: 600;
+		}
+		.views-field-view-node{
+			padding-top: 1rem;
+			grid-column: 1;
+			grid-row: 1;
+		}
+		.views-field-field-programme{
+			text-transform: uppercase;
+			grid-column: 1;
+			grid-row: 2;
+		}
+		a{
+			text-decoration: none;
+		}
+	}
+}
 
+.about{
+	background: $lightblue;
+	text-align: center;	
+	padding: 18rem 0 3rem 0;
+	margin-top: -15rem;
+	article{
+		h2{
+			font-family: "duke" !important;
+			font-size: $font-large;
+			color:black;
+			font-weight: 400;
+			a{
+				text-decoration: none;
+			}
+		}
+		h3{
+			color: black;
+		}
+		div{
+			margin: 0 5%;
+		}
+	}
 	
+}
+
+#home_blocks-block_3{
+	background:  $lightblue;
+	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 2;
+			margin-top: -1.5rem;
+			z-index: 0;	
+			padding: .5rem;
+		}
+		.views-field:not(.views-field-field-image){
+			background: transparent;
+			width: auto;
+			margin-left: 0;
+			padding-left: 0;
+			
+		}
+		.views-field-title{
+			font-weight: 600;
+			grid-row: 3 / span 1;
+			grid-column: 2 / span 1;
+		}
+		.views-field-view-node{
+			// padding-top: 1rem;
+			// grid-column: 1;
+			// grid-row: 1;
+			grid-row: 2 / span 1;
+			grid-column: 2 / span 1;
+		}
+		.views-field-field-programme{
+			.field-content{
+				display: inline-block;
+				width: auto;
+				background-color: blue !important;
+				padding: .3rem .5rem;
+			}
+			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;
+			}
+		}
+	}
 }

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

@@ -3,13 +3,13 @@
 	.content_container{
 		&>div>h2:first-child{
 			text-align: center;
-			background-color: #98d0d9;
+			background-color: $lightblue;
 			padding: 1rem 0;
 		}
 	}
 	
 	form{
-		background-color: #98d0d9;
+		background-color: $lightblue;
 		display: grid;
 		padding: 0 0 5rem 0;
 		column-gap: 1rem;
@@ -67,6 +67,7 @@
 			column-gap: 1rem;
 			row-gap: 1rem;
 			grid-template-columns:  calc(10% - 3em) repeat(3, 27.3%);
+			align-items: flex-start;
 			.views-col:first-child{
 				grid-column-start: 2;
 			}
@@ -83,14 +84,15 @@
 				}
 			}
 			background-color: rgb(255, 255, 255);
-			background-clip: content-box;
+			// background-clip: content-box;
 			width: 100% !important;
 			padding: .3rem;
 			.views-field:not(:first-child){
 				padding: 0 0 0 .4rem;
 			}
 			.views-field-field-image{
-				grid-row: 2 / span 2;				
+				grid-row: 3 / span 2;
+				margin-top: -1.5rem;				
 			}
 
 			
@@ -102,12 +104,16 @@
 					display: inline-block;
 					width: auto;
 					color: white;
-					background: red;
 					padding: .15rem .3rem;
 					margin-bottom: 1rem;
 				}
 				
 			}
+			.views-field-field-theme{
+				.field-content{
+					color:black;
+				}
+			}
 			.views-field-field-type-de-ressource{
 				text-transform: uppercase;
 				font-weight: 600;
@@ -136,6 +142,8 @@
 			}
 		}
 
+		
+
 	}
 	
 	.js-pager__items{

web/themes/custom/popsu/sass/pages/partials/_header_footer.scss

@@ -1,4 +1,7 @@
 //header
+header{
+    margin-bottom: 2rem;
+}
 #header-top{
 	height: 3rem;
     background: white;
@@ -53,7 +56,7 @@
         }
         
 	}
-    .popsu-node-3{
+    .programme-3{
         .views-field-title{
             color: $col-eur;
             &:hover{
@@ -62,7 +65,7 @@
             }
         }
     }
-    .popsu-node-5{
+    .programme-5{
         .views-field-title{
             color: $col-mond;
             &:hover{
@@ -71,7 +74,7 @@
             }
         }
     }
-    .popsu-node-7{
+    .programme-7{
         .views-field-title{
             color: $col-met;
             &:hover{

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

@@ -15,6 +15,10 @@ a{
 	color:inherit;
 }
 
+strong{
+	font-weight: 600;
+}
+
 //TEMP
 iframe{
 	display: none;

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

@@ -8,6 +8,77 @@ $font-small: .45rem;
 $col-met: red; 
 $col-eur: blue;
 $col-mond: wheat; 
+
+
+$lightblue: #98d0d9;
+
+
+//programmes values
+.programme-2{
+	.views-field-field-programme{
+		.field-content{
+			background: $col-eur;
+		}
+		
+	}
+	.views-field{
+			color: $col-eur;
+	}
+}
+
+.programme-3{
+	.views-field-field-programme{
+		.field-content{
+			background: $col-eur;
+		}
+	}
+	.views-field{
+		color: $col-eur;
+	}
+}
+
+.programme-4{
+	.views-field-field-programme{
+		.field-content{
+			background: $col-mond;
+		}
+	}
+	.views-field{
+		color: $col-mond;
+	}
+}
+
+.programme-5{
+	.views-field-field-programme{
+		.field-content{
+			background: $col-mond;
+		}
+	}
+	.views-field{
+		color: $col-mond;
+	}
+}
+.programme-7{
+	.views-field-field-programme{
+		.field-content{
+			background: $col-met;
+		}
+	}
+	.views-field{
+		color: $col-met;
+	}
+}
+.programme-6{
+	.views-field-field-programme{
+		.field-content{
+			background: $col-met;
+		}
+	}
+	.views-field{
+		color: $col-met;
+	}
+}
+
 @media (min-width: 48rem) {
 	:root {
 	  font-size: calc(1rem + ((1vw - .48rem) * 1.389));