change design for small screen

css/design.css

@@ -57,34 +57,34 @@ h2{
 	margin: 0;
 	padding: 0;
 	font-size: 1.5em;
-	font-weight: normal;
-	display: inline-block;
 	max-width: 280px;
-	white-space: nowrap;
 	overflow: hidden;
+	font-weight: normal;
+	white-space: nowrap;
+	display: inline-block;
 	text-overflow: ellipsis;
 }
 
 h3 a{
 	text-decoration: none;
-	text-shadow: 0 0 1px #69f;
 	transition: color 0.3s;
+	text-shadow: 0 0 1px #69f;
 }
 
 h3 a:hover{
 	color: #47476b;
-	text-shadow: 0 0 1px #69f;
 	transition: color 0.3s;
+	text-shadow: 0 0 1px #69f;
 }
 
 #listMenu{
 	padding: 0;
 	display: flex;
 	margin: 15px 0;
+	flex-wrap: wrap;
 	flex-direction: row;
 	list-style-type: none;
 	justify-content: space-around;
-	flex-wrap: wrap;
 }
 
 #listMenu a{
@@ -107,9 +107,9 @@ h3 a:hover{
 article{
 	margin: 20px 0;
 	padding: 5px 15px;
+	overflow-wrap: anywhere;
 	background-color: #f0f0f0;
 	border-bottom: 3px solid #ccc;
-	overflow-wrap: anywhere;
 }
 
 #listMenu .selected{
@@ -141,8 +141,8 @@ a:hover{
 
 #editContent{
 	margin-top: 5px;
-	white-space: pre-wrap;
 	min-height: 1em;
+	white-space: pre-wrap;
 	display: inline-block;
 }
 
@@ -167,8 +167,8 @@ input, textarea, .wysiwyg{
 
 .wysiwyg{
 	display: flex;
-	flex-direction: column;
 	align-items: center;
+	flex-direction: column;
 }
 
 .wysiwyg button{
@@ -194,8 +194,8 @@ input:hover, input:focus, textarea:hover, textarea:focus{
 
 
 input[type="submit"]{
-	padding-left: 13px;
 	border: none;
+	padding-left: 13px;
 	background-color: #ccc;
 	transition: background-color 0.3s;
 }
@@ -206,9 +206,9 @@ input[type="submit"]:hover{
 }
 
 label{
-	display: inline-block;
 	width: 250px;
 	padding: 10px;
+	display: inline-block;
 	background-color: #d9d9d9;
 }
 
@@ -222,9 +222,9 @@ form .small{
 
 .input{
 	display: flex;
+	flex-wrap: wrap;
 	align-items: flex-start;
 	justify-content: center;
-	flex-wrap: wrap;
 }
 
 #listAdmin{
@@ -233,8 +233,8 @@ form .small{
 }
 
 #listAdmin article{
-	box-sizing: border-box;
 	flex: 50%;
+	box-sizing: border-box;
 }
 
 #listAdmin h3{
@@ -268,10 +268,10 @@ form .small{
 }
 
 .button{
+	padding: 5px;
 	margin-left: 2px;
 	text-decoration: none;
 	background-color: #d9d9d9;
-	padding: 5px;
 	transition: background-color 0.3s, color 0.3s;
 }
 
@@ -354,7 +354,7 @@ form .small{
 }
 
 img{
-	max-width: 100%;
+	max-width: 75%;
 }
 
 /*
@@ -364,16 +364,16 @@ Media Queries
 
 @media all and (max-width: 1500px){
 	*{
-		font-size: 1em;
+		font-size: 0.9em;
 	}
 
 	#title{
+		font-size: 1.3em;
 		justify-content: space-around;
-		font-size: 1.2em;
 	}
 
-	section p{
-		font-size: 0.8em;
+	#header{
+		font-size: 1.2em;
 	}
 }
 
@@ -381,19 +381,12 @@ Media Queries
 	#logo{
 		margin: 0;
 	}
-	#page{
-		font-size: 1.2em;
-	}
-	#header{
-		font-size: 1em;
-	}
 	#header, #title{
 		padding-top: 5px;
 		flex-direction: column;
 	}
 	#title{
 		margin: 0;
-		font-size: 1.4em;
 		text-align: center;
 	}
 	#logo{
@@ -406,28 +399,34 @@ Media Queries
 	input, textarea, label, #editContent, .wysiwyg{
 		width: 100%;
 	}
+	
 	label{
 		margin-right: 20px;
 	}
+
 	#menu{
 		width: 100%;
 	}
+
 	#listMenu{
 		flex-direction: column;
 		justify-content: center;
 	}
+
 	#listMenu a{
-		white-space: nowrap;
 		overflow: hidden;
+		white-space: nowrap;
 		text-overflow: ellipsis;
 	}
+
 	#listMenu li, #listMenu h2, #listMenu a{
-		display: block;
+		padding: 0;
 		width: 90%;
+		display: block;
 		margin: 2px auto;
 		text-align: center;
-		padding: 0;
 	}
+
 	#listMenu a:hover{
 		padding-bottom: 2px;
 	}
@@ -439,13 +438,11 @@ Media Queries
 		padding:5px;
 	}
 
-	#page{
-		font-size: 1em;
-	}
 	#logo{
 		width: 45px;
 		height: 45px;
 	}
+	
 	#header{
 		margin-top: 30px;
 	}
@@ -453,42 +450,42 @@ Media Queries
 	/* hamburger menu - taken on https://actudiant.fr/ - from an old version of https://scotch.io/tutorials/building-a-morphing-hamburger-menu-with-css */
 
 	#toggle{
-		position: absolute;
 		left: -9999px;
+		position: absolute;
 	}
 
 	.nav-label{
-		position: fixed;
 		top: 0;
-		display: inline-block;
+		padding: 0;
 		width: 50px;
 		height: 50px;
-		padding: 0;
 		opacity: 0.6;
-		background-image: url('/img/mobile-menu-icon.png');
+		position: fixed;
+		display: inline-block;
 		background-size: 50px 50px;
-		transition: transform 0.3s ease;
 		background-size: 50px 50px;
+		transition: transform 0.3s ease;
+		background-image: url('/img/mobile-menu-icon.png');
 	}
 
 	#listMenu{
+		top: 0;
 		width: 100%;
 		margin: auto;
-		background-color: #f0f0f0;
 		position: fixed;
-		top: 0;
+		background-color: #f0f0f0;
 		transition: border-bottom 0.3s;
 	}
 	#listMenu li{
-		margin: 0 auto;
 		max-height: 0;
+		margin: 0 auto;
 		transition: max-height 0.45s;
 	}
 	#listMenu a{
-		max-height: 0;
-		overflow: hidden;
 		opacity: 0;
 		padding: 0;
+		max-height: 0;
+		overflow: hidden;
 		transition: max-height 0.3s ease, opacity 0.3s, padding 0.3s;
 	}
 	#listMenu a:hover{
@@ -497,15 +494,15 @@ Media Queries
 	}
 
 	#listMenu .selected{
-		border-bottom: 0px solid black;
-		max-height: 300px;
 		padding: 0;
 		opacity: 0.5;
+		max-height: 300px;
+		border-bottom: 0px solid black;
 	}
 
 	#listMenu .selected:hover{
-		border-bottom: 0px solid black;
 		padding: 0;
+		border-bottom: 0px solid black;
 	}
 
 	#toggle:checked ~ #listMenu{
@@ -519,17 +516,17 @@ Media Queries
 	}
 
 	#toggle:checked ~ #listMenu a{
+		opacity: 1;
 		padding: 3px 0;
 		max-height: 300px;
-		opacity: 1;
 		transition: max-height 0.3s, opacity 0.3s, padding 0.3s;
 	}
 
 	#toggle:checked ~ .nav-label{
-		background-image: url('/img/mobile-menu-icon-close.png');
 		transform: rotate(180deg);
-		transition: transform 0.3s ease;
 		background-size: 50px 50px;
+		transition: transform 0.3s ease;
+		background-image: url('/img/mobile-menu-icon-close.png');
 	}
 
 	#toggle:checked ~ #listMenu .selected{