Commit 88210ee6 authored by Corentin Bettiol's avatar Corentin Bettiol 💻
Browse files

change design for small screen

parent e67d3a87

css/design.css

+46 −49
Original line number Diff line number Diff line
@@ -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{