Amélioration du pied de page

assets/css/main.css

@@ -198,7 +198,7 @@ input, select, textarea {
 			padding-bottom: 0.5rem;
 			margin: 0 0 2rem 0;
 		}
-		
+
 		h1.submajor, h2.submajor, h3.submajor, h4.submajor, h5.submajor, h6.submajor {
 			border-bottom: solid 1px #ffffff;
 			width: -moz-max-content;
@@ -628,6 +628,7 @@ input, select, textarea {
 		}
 
 /* Image */
+
 	.images .image {
 		float: none !important;
 	}
@@ -642,7 +643,7 @@ input, select, textarea {
 		.image:before {
 			pointer-events: none;
 			background-image: url("../../images/overlay.png");
-		/*	background-color: rgba(19, 21, 25, 0.5);	*/
+			background-color: rgba(19, 21, 25, 0.5);
 			border-radius: 4px;
 			content: '';
 			display: block;
@@ -660,8 +661,8 @@ input, select, textarea {
 		}
 
 		.image.left, .image.right {
-			max-width: 49%;
 			vertical-align: middle;
+			max-width: 49%;
 		}
 
 			.image.left img, .image.right img {
@@ -1367,7 +1368,6 @@ input, select, textarea {
 						background-color: rgba(255, 255, 255, 0.175);
 					}
 
-		
 		#header nav.use-middle:after {
 			content: '';
 			display: block;
@@ -1382,7 +1382,6 @@ input, select, textarea {
 		#header nav.use-middle ul li.is-middle {
 			border-left: 0;
 		}
-		
 
 		body.is-article-visible #header {
 			-moz-transform: scale(0.95);
@@ -1422,7 +1421,7 @@ input, select, textarea {
 
 		}
 
-		@media screen and (max-width: 980px) {
+		@media screen and (max-width: 736px) {
 
 			#header > * {
 				margin-top: 2rem;
@@ -1451,6 +1450,10 @@ input, select, textarea {
 				line-height: 1.875;
 			}
 
+		}
+
+		@media screen and (max-width: 480px) {
+
 			#header {
 				padding: 1.5rem 0;
 			}
@@ -1531,9 +1534,9 @@ input, select, textarea {
 			-webkit-transition: opacity 0.325s ease-in-out, -webkit-transform 0.325s ease-in-out;
 			-ms-transition: opacity 0.325s ease-in-out, -ms-transform 0.325s ease-in-out;
 			transition: opacity 0.325s ease-in-out, transform 0.325s ease-in-out;
-			padding: 4.5rem 2rem 1.5rem 2rem ;
+			padding: 4.5rem 2.5rem 1.5rem 2.5rem ;
 			position: relative;
-			width: 60rem;
+			width: 40rem;
 			max-width: 100%;
 			background-color: rgba(27, 31, 34, 0.85);
 			border-radius: 4px;
@@ -1607,7 +1610,7 @@ input, select, textarea {
 		@media screen and (max-width: 480px) {
 
 			#main article {
-				padding: 3rem 1rem 0.5rem 1rem ;
+				padding: 3rem 1.5rem 0.5rem 1.5rem ;
 			}
 
 		}

assets/css/perso.css

@@ -13,35 +13,35 @@
 	border-radius: 0 4px 4px 0;
 }
 
-#header nav ul li {
+	#header nav ul li {
-	display: block;
+		display: block;
-	position: relative;
+		position: relative;
-	width: intrinsic;
+		width: intrinsic;
-	width: -moz-max-content;
+		width: -moz-max-content;
-	width: -webkit-max-content;
+		width: -webkit-max-content;
-}
+	}
 
-#header nav ul li ul {
+		#header nav ul li ul {
-	display: none;
+			display: none;
-	z-index: 1000;
+			z-index: 1000;
-	position: absolute;
+			position: absolute;
-	width: 100%;
+			width: 100%;
-	border-radius: 0 0 4px 4px;
+			border-radius: 0 0 4px 4px;
-}
+		}
 
-#header nav ul li ul li {
+			#header nav ul li ul li {
-	border-left: 0;
+				border-left: 0;
-	border-top: solid 1px #ffffff;
+				border-top: solid 1px #ffffff;
-	width: 100%;
+				width: 100%;
-}
+			}
 
-#header nav ul li ul li:first-child {
+			#header nav ul li ul li:first-child {
-	border-top: 0;
+				border-top: 0;
-}
+			}
 
-#header nav ul li:hover ul {
+		#header nav ul li:hover ul {
-	display: block;
+			display: block;
-}
+		}
 
 
 
@@ -59,40 +59,29 @@
 
 
 
-/* Footer */
+/* Soutien */
 
-#footer::before {
+#header .soutien {
-	content: '';
-	display: block;
-	position: absolute;
-	top: calc(40rem - 1px);
-	left: calc(50% - 1px);
-	width: 1px;
-	height: calc(7rem - 1px);
-	background: #ffffff;
-}
-
-#footer .soutien {
 	background-color: rgba(27, 31, 34, 0.85);
 	height: 100%;
 	border-top: solid 1px #ffffff;
 	border-bottom: solid 1px #ffffff;
+	margin-top: calc(2.75rem + 3.5rem);
 }
 
-#footer .soutien .left, #footer .soutien .right {
+	#header .soutien .left, #header .soutien .right {
-	width: 50%;
+		margin: 0 2rem;
-	margin-bottom: -1rem;
+	}
-}
 
-#footer .soutien span {
+	#header .soutien span {
-	vertical-align: middle;
+		vertical-align: middle;
-}
+	}
 
-#footer .soutien img {
+	#header .soutien img {
-	height: 130px;
+		height: 130px;
-	vertical-align: middle;
+		vertical-align: middle;
-	padding: 10px;
+		padding: 10px;
-}
+	}
 
 .left {
 	float: left;

index.html

@@ -71,6 +71,17 @@
 								<li><a href="#events">Foyers et évènements</a></li>
 							</ul>
 						</nav>
+						<div class="soutien">
+							<div class="left">
+								<span>Avec le soutien de</span>
+								<img src="images/crous.png" />
+								<img src="images/universite_ps.png" />
+							</div>
+							<div class="right">
+								<span>Membre de</span>
+								<img src="images/federez.png" />
+							</div>
+						</div>
 					</header>
 
 				<!-- Main -->
@@ -558,17 +569,6 @@ print 'It took ' + i + ' iterations to sort the deck.';</code></pre>
 
 				<!-- Footer -->
 				<footer id="footer">
-					<div class="soutien">
-						<div class="left">
-							<span>Avec le soutien de</span>
-							<img src="images/crous.png" />
-							<img src="images/universite_ps.png" />
-						</div>
-						<div class="right">
-							<span>Membre de</span>
-							<img src="images/federez.png" />
-						</div>
-					</div>
 					<p class="copyright">&copy; Aurore. Design: <a href="https://html5up.net">HTML5 UP</a>.</p>
 				</footer>