Respect du Responsive Design

assets/css/main.css

@@ -78,7 +78,7 @@ input, select, textarea {
 		width: device-width;
 	}
 
-	@media screen and (max-width: 480px) {
+	@media screen and (max-width: 824px) {
 
 		html, body {
 			min-width: 320px;
@@ -123,7 +123,7 @@ input, select, textarea {
 
 		}
 
-		@media screen and (max-width: 736px) {
+		@media screen and (max-width: 940px) {
 
 			html {
 				font-size: 11pt;
@@ -131,7 +131,7 @@ input, select, textarea {
 
 		}
 
-		@media screen and (max-width: 360px) {
+		@media screen and (max-width: 376px) {
 
 			html {
 				font-size: 10pt;
@@ -238,7 +238,7 @@ input, select, textarea {
 		font-size: 0.6rem;
 	}
 
-	@media screen and (max-width: 736px) {
+	@media screen and (max-width: 940px) {
 
 		h1 {
 			font-size: 1.75rem;
@@ -360,7 +360,7 @@ input, select, textarea {
 					width: calc(25% - 0.375rem);
 				}
 
-		@media screen and (max-width: 480px) {
+		@media screen and (max-width: 824px) {
 
 			form > .fields {
 				width: calc(100% + 3rem);
@@ -701,7 +701,7 @@ input, select, textarea {
 				width: 100%;
 			}
 
-		@media screen and (max-width: 736px) {
+		@media screen and (max-width: 940px) {
 
 			.image.main {
 				margin: 2rem 0;
@@ -709,7 +709,7 @@ input, select, textarea {
 
 		}
 
-		@media screen and (max-width: 480px) {
+		@media screen and (max-width: 824px) {
 
 			.image.main {
 				margin: 1.5rem 0;
@@ -839,7 +839,7 @@ input, select, textarea {
 				width: 100%;
 			}
 
-		@media screen and (max-width: 480px) {
+		@media screen and (max-width: 824px) {
 
 			ul.actions:not(.fixed) {
 				-moz-flex-direction: column;
@@ -1213,7 +1213,7 @@ input, select, textarea {
 
 		}
 
-		@media screen and (max-width: 736px) {
+		@media screen and (max-width: 940px) {
 
 			#wrapper {
 				padding: 2rem 1rem;
@@ -1221,7 +1221,7 @@ input, select, textarea {
 
 		}
 
-		@media screen and (max-width: 480px) {
+		@media screen and (max-width: 824px) {
 
 			#wrapper {
 				padding: 1rem;
@@ -1421,7 +1421,7 @@ input, select, textarea {
 
 		}
 
-		@media screen and (max-width: 736px) {
+		@media screen and (max-width: 940px) {
 
 			#header > * {
 				margin-top: 2rem;
@@ -1452,7 +1452,7 @@ input, select, textarea {
 
 		}
 
-		@media screen and (max-width: 480px) {
+		@media screen and (max-width: 824px) {
 
 			#header {
 				padding: 1.5rem 0;
@@ -1591,7 +1591,7 @@ input, select, textarea {
 					background-color: rgba(255, 255, 255, 0.175);
 				}
 
-		@media screen and (max-width: 736px) {
+		@media screen and (max-width: 940px) {
 
 			#main article {
 				padding: 3.5rem 2rem 0.5rem 2rem ;
@@ -1607,7 +1607,7 @@ input, select, textarea {
 
 		}
 
-		@media screen and (max-width: 480px) {
+		@media screen and (max-width: 824px) {
 
 			#main article {
 				padding: 3rem 1.5rem 0.5rem 1.5rem ;

assets/css/perso.css

@@ -13,6 +13,10 @@
 	border-radius: 0 4px 4px 0;
 }
 
+#header nav ul.simple {
+	display: none;
+}
+
 	#header nav ul li {
 		display: block;
 		position: relative;
@@ -43,6 +47,34 @@
 			display: block;
 		}
 
+@media screen and (max-width: 824px) {
+
+	#header nav ul {
+		max-width: none;
+		width: -moz-max-content;
+		width: -webkit-max-content;
+		width: -ms-max-content;
+		width: max-content;
+	}
+
+		#header nav ul li {
+			width: 100%;
+		}
+
+}
+
+@media screen and (max-width: 528px) {
+	
+	#header nav ul.left, #header nav ul.right {
+		display: none;
+	}
+
+	#header nav ul.simple {
+		display: block;
+	}
+
+}
+
 
 
 
@@ -83,6 +115,42 @@
 		padding: 10px;
 	}
 
+@media screen and (max-width: 940px) {
+
+	#header .soutien {
+		margin-top: calc(2.75rem + 2rem);
+	}
+
+		#header .soutien img {
+			height: 100px;
+		}
+
+}
+
+@media screen and (max-width: 824px) {
+
+	#header .soutien {
+		margin-top: calc(2*3rem + 2rem);
+	}
+
+		#header .soutien .left, #header .soutien .right {
+			float: none;
+		}
+	
+}
+
+@media screen and (max-width: 528px) {
+
+	#header .soutien {
+		margin-top: calc(2rem);
+	}
+
+		#header .soutien img {
+			height: 70px;
+		}
+
+}
+
 .left {
 	float: left;
 }

assets/js/perso.js

@@ -0,0 +1,16 @@
+(function($) {
+
+	$(window).on('load', function() {
+		var $menu = $('#nav');
+
+		var $menu_simple = $("<ul class=\"simple\"></ul>");
+		$menu.children("ul").each(function(index) {
+			$(this).children("li").each(function(index) {
+				$menu_simple.append($(this).clone());
+			});
+		});
+
+		$menu.append($menu_simple);
+	});
+
+})(jQuery);

index.html

@@ -54,7 +54,7 @@
 								<p>Le fournisseur réseau de l'université Paris-Saclay.</p>
 							</div>
 						</div>
-						<nav>
+						<nav id="nav">
 							<ul class="left">
 								<li><a href="#presentation">Présentation</a></li>
 								<li><a href="#services">Services de l'association</a></li>
@@ -583,6 +583,7 @@ print 'It took ' + i + ' iterations to sort the deck.';</code></pre>
 			<script src="assets/js/breakpoints.min.js"></script>
 			<script src="assets/js/util.js"></script>
 			<script src="assets/js/main.js"></script>
+			<script src="assets/js/perso.js"></script>
 
 	</body>
 </html>