smartphone home

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

@@ -1394,6 +1394,11 @@ iframe {
         align-items: center; }
         .header_top_middle_container .views-element-container > div:first-child > div:first-child > div:first-child {
           grid-column-start: 2; }
+        @media print, screen and (max-width: 39.99875em) {
+          .header_top_middle_container .views-element-container > div:first-child > div:first-child {
+            grid-template-columns: repeat(3, 1fr); }
+            .header_top_middle_container .views-element-container > div:first-child > div:first-child > div:first-child {
+              grid-column-start: 1; } }
   .header_top_middle_container .views-row {
     display: inline-block;
     width: auto; }
@@ -1430,6 +1435,11 @@ iframe {
     transform: translateY(57%) rotate(45deg); }
   .close-block > div > span:nth-child(2) {
     transform: rotate(-45deg); }
+  @media print, screen and (max-width: 39.99875em) {
+    .close-block {
+      position: absolute;
+      top: 1rem;
+      right: 1rem; } }
 
 .open-block {
   height: 100%;
@@ -1450,8 +1460,18 @@ iframe {
   padding: 1rem 0;
   z-index: 140;
   line-height: 2; }
+  @media print, screen and (max-width: 39.99875em) {
+    #header-top-right .header_top_right_container {
+      grid-template-columns: 1fr;
+      align-content: center;
+      text-align: center;
+      height: 100vh;
+      font-size: 0.8rem; } }
   #header-top-right .header_top_right_container nav {
     grid-column-start: 2; }
+    @media print, screen and (max-width: 39.99875em) {
+      #header-top-right .header_top_right_container nav {
+        grid-column-start: 1; } }
   #header-top-right .header_top_right_container a {
     text-decoration: none;
     font-weight: 400; }
@@ -1533,6 +1553,10 @@ footer {
       font-size: 0;
       color: transparent;
       background: left/contain no-repeat url(../images/yt.svg); }
+  @media print, screen and (max-width: 39.99875em) {
+    #footer-bottom .footer_bottom_right_container {
+      text-align: center;
+      margin-top: 1rem; } }
 
 .path-frontpage .header_top_left_container div:nth-child(2) img {
   width: 77%; }
@@ -1727,6 +1751,9 @@ footer {
     color: black; }
   .about .views-row div {
     margin: 0 5%; }
+    @media print, screen and (max-width: 39.99875em) {
+      .about .views-row div {
+        margin: 0 3%; } }
   .about .views-row .views-field-view-node {
     display: inline-block;
     margin: 0 auto;
@@ -1770,6 +1797,11 @@ footer {
     .header_container header.active {
       opacity: 1;
       font-size: 4rem; }
+  @media print, screen and (max-width: 39.99875em) {
+    .header_container {
+      grid-template-columns: repeat(2, 1fr); }
+      .header_container header[data-dom="programmes-block_4"] {
+        display: none; } }
 
 #home_themes-block_1 {
   display: none; }

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

@@ -1,8 +1,11 @@
 import 'slick-carousel';
 
+var mobile = false;
 $(function(){
 	console.log("$ ready !!");
-	
+	if( navigator.userAgent.match(/Android/i) || navigator.userAgent.match(/webOS/i) || navigator.userAgent.match(/iPhone/i) || navigator.userAgent.match(/iPad/i) || navigator.userAgent.match(/iPod/i) || navigator.userAgent.match(/BlackBerry/i)){
+		mobile = true;
+   }
 
 	if($(".path-frontpage").length > 0){
 		$('.last-news').slick({
@@ -10,6 +13,13 @@ $(function(){
 			slidesToScroll: 1,
 			centerMode: true,
 			centerPadding: '300px',
+			responsive: [
+			{
+				breakpoint: 800,
+				settings: {
+					centerPadding: '0',
+				}
+			  }]
 		});
 		$('.last-ressources').slick({
 			slidesToShow: 3,
@@ -17,6 +27,21 @@ $(function(){
 			centerMode: true,
 			centerPadding: '60px',
 			infinite: true,
+			responsive: [
+				{
+					breakpoint: 800,
+					settings: {
+						slidesToShow: 2,
+						centerPadding: '0',
+					}	
+				},
+				{
+					breakpoint: 400,
+					settings: {
+						slidesToShow: 1,
+						centerPadding: '0',
+					}
+				}]
 		});
 	}
 
@@ -55,6 +80,7 @@ $(function(){
 			centerMode: false,
 			centerPadding: '60px',
 			infinite: false,
+			
 		});	
 		
 		$('#home_blocks-block_3>div>div').slick({
@@ -82,9 +108,15 @@ $(function(){
 
 	$('.close-block').click(function(){
 		$(this).parent().fadeOut();
+		if(mobile == true){
+			$("body").css("overflow","auto");
+		}
 	});
 	$('.open-block').click(function(){
 		$(this).prev().css("display","grid");
+		if(mobile == true){
+			$("body").css("overflow","hidden");
+		}
 	});
 	
 	$("body").on("click", ".header_container header", function(){
@@ -177,6 +209,15 @@ $(function(){
 			centerMode: false,
 			// centerPadding: '10%',
 			infinite: false,
+			responsive: [
+				{
+					breakpoint: 800,
+					settings: {
+						slidesToShow: 2,
+						slidesToScroll: 1,
+						centerPadding: '10px',
+					}
+				  }]
 		});
 		
 		// $('#programmes-block_4').after('<div id="home_map_container" class="home_info_container"></div><div id="home_theme_container" class="home_info_container"></div><div id="home_prog_container" class="home_info_container"></div>');

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

@@ -3,13 +3,13 @@
       {{ page.footer_top }}
     </section>
     <section id="footer-bottom" class="row">
-      <div id="footer-left" class="columns small-3 small-offset-1">
+      <div id="footer-left" class="columns small-5 small-offset-1 medium-3 medium-offset-1">
         {{ page.footer_bottom_left }}
       </div>
-      <div id="footer-middle" class="columns small-2 small-offset-0">
+      <div id="footer-middle" class="columns small-5 small-offset-1 medium-2 medium-offset-0">
         {{ page.footer_bottom_middle }}
       </div>
-      <div id="footer-right" class="columns small-4 small-offset-1">
+      <div id="footer-right" class="columns small-12 medium-4 medium-offset-1">
         {{ page.footer_bottom_right }}
       </div>
     </section>

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

@@ -302,6 +302,9 @@
 		}
 		div{
 			margin: 0 5%;
+			@include breakpoint(small down) {
+				margin: 0 3%;
+			}
 		}
 		.views-field-view-node{
 			display: inline-block;
@@ -357,6 +360,14 @@
 			font-size: 4rem;
 		}
 	}
+	@include breakpoint(small down) {
+		grid-template-columns: repeat(2, 1fr);
+		header[data-dom="programmes-block_4"]{
+			display:none;
+		}
+		
+
+	}
 
 }
 #home_themes-block_1{

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

@@ -173,6 +173,13 @@
                 &>div:first-child{
                     grid-column-start: 2;
                 }
+				@include breakpoint(small down) {
+					grid-template-columns: repeat(3, 1fr);
+					&>div:first-child{
+						grid-column-start: 1;
+					}
+			
+				}
 			}
 			
 		}
@@ -231,6 +238,12 @@
     &>div>span:nth-child(2){
         transform: rotate(-45deg);
     }
+	@include breakpoint(small down) {
+		position: absolute;
+		top: 1rem;
+		right: 1rem;
+	}
+
 }
 .open-block{
     height: 100%;
@@ -254,8 +267,19 @@
 		padding: 1rem 0;
 		z-index: 140;
 		line-height: 2;
+		@include breakpoint(small down) {
+			grid-template-columns: 1fr;
+			align-content: center;
+			text-align: center;
+			height: 100vh;
+			font-size: $font-medium;
+			
+		}
 		nav{
 			grid-column-start: 2;
+			@include breakpoint(small down) {
+				grid-column-start: 1;
+			}
 		}
 		// padding: 1rem .5rem 1rem .5rem;
 		a{
@@ -382,5 +406,9 @@ footer{
                 }
             }
         }
+		@include breakpoint(small down) {
+			text-align:center;
+			margin-top: 1rem;
+		}
     }
 }