Site

- Add responsive :
     - Lobby page
     - Fix bug profil/login/settings'

docker-compose/requirements/nginx/static/style/lobbyPage/lobbyPage.css

@@ -67,7 +67,7 @@ body {
 	padding-inline: 150px;
 	display: flex;
 	flex-direction: row;
-	gap: 12rem;
+	gap: 9vw;
 }
 
 .skin-select{
@@ -263,6 +263,18 @@ body {
 	gap: 20px;
 }
 
+#tournament-line2{
+	display: none;
+    width: 100%;
+    height: 2px;
+	justify-content: center;
+	align-items: center;
+    background-color: rgb(255, 255, 255);
+    margin: 20px 0;
+	justify-content: center;
+	align-items: center;
+}
+
 .select-keys {
 	display: flex;
 	flex-direction: row;
@@ -342,6 +354,7 @@ body {
 	justify-content: flex-start;
 	width: 300px;
 	height: 550px;
+	align-items: center;
 }
 
 .mode-card {
@@ -349,7 +362,7 @@ body {
 	height: 100px;
 	background-color: white;
 	color: #020202;
-	padding: 20px;
+	padding-block: 20px;
 	margin-block: 20px;
 	display: flex;
 	justify-content: center;
@@ -364,7 +377,7 @@ body {
 	background-color: transparent;
 	color: white;
 	border: 5px solid white;
-	padding: 20px;
+	padding-block: 20px;
 	margin-block: 20px;
 	display: flex;
 	justify-content: center;
@@ -501,7 +514,7 @@ body {
 .menuSelected {
 	display: flex;
 	flex-direction: row;
-	gap: 12rem;
+	gap: 9vw;
 }
 
 .menuSelected {
@@ -527,4 +540,73 @@ body {
 #tournamentCode {
 	width: 94%;
 	font-size: 0.8rem;
+}
+
+@media (max-aspect-ratio: 1/1){
+	.main {
+		flex-direction: column;
+		display: unset;
+		padding-inline: inherit;
+	}
+	.search-container {
+		display: none;
+	}
+	.menuSelected {
+		flex-direction: column;
+	}
+	#whatGame {
+		/* display: none; */
+		margin-inline: 20px;
+		margin-left: auto;
+		margin-right: auto;
+		width: 90vw;
+	}
+	.game-mode {
+		margin-left: auto;
+		margin-right: auto;
+	}
+	.skin-select {
+		display: flex;
+	}
+	.barSelection {
+		width: 150px;
+		height: 150px;
+		margin: 5px;
+	}
+	.goalSelection {
+		width: 150px;
+		height: 150px;
+		margin: 5px;
+	}
+	#chatDiv {
+		width: 80%;
+	}
+	.keys{
+		display: none;
+	}
+	.select-line {
+		display: none;
+	}
+	.menuSelected {
+		gap: 0;
+	}
+	#tournament-line1 {
+		display: none;
+	}
+	#tournament-line2 {
+		display: block;	
+		margin-top: 30px;
+	}
+	.popup-skin {
+		width: 70%;
+	}
+	.color-grid {
+		grid-template-columns: repeat(2, 90px);
+		justify-content: center;
+		align-items: center;
+	}
+	.color-box {
+		width: 90px;
+		height: 90px;
+	}
 }