Site :

-Making responsive :
     - Home page (note finished)
     - Profil page
     - Settings page

docker-compose/requirements/nginx/static/style/homePage/home.css

@@ -6,7 +6,7 @@
 /*   By: madegryc <madegryc@student.42.fr>          +#+  +:+       +#+        */
 /*                                                +#+#+#+#+#+   +#+           */
 /*   Created: 2024/08/07 12:00:55 by edbernar          #+#    #+#             */
-/*   Updated: 2024/10/01 17:17:24 by madegryc         ###   ########.fr       */
+/*   Updated: 2024/10/04 19:40:55 by madegryc         ###   ########.fr       */
 /*                                                                            */
 /* ************************************************************************** */
 
@@ -399,6 +399,7 @@ button {
 	position: absolute;
 	bottom: 65px;
 	left: 50%;
+	text-align: center;
 	transform: translateX(-50%);
 	font-size: 24px;
 	color: white;
@@ -478,3 +479,58 @@ footer {
 	background-color: #020202;
 	color: white;
 }
+
+@media (max-width: 700px){
+	#topButton {
+		display: none;
+	}
+	#firstText{
+		font-size: 30px;
+		padding-inline: 20px;
+		padding-top: 70px;
+	}
+	#secondText{
+		font-size: 30px;
+		padding-inline: 20px;
+		padding-top: 140px;
+	}
+	#firstBall{
+		position: absolute;
+		width: 250px;
+		transform-origin: center;
+		transform: translateX(-50%);
+		left: 0;
+	}
+	#secondBall{
+		position: absolute;
+		width: 250px;
+		transform-origin: center;
+		transform: translateX(50%);
+		top: 650px;
+		right: 0;
+	}
+	.containerHomePage {
+		width: 100%;
+		height: 100%;
+	}
+	.right-side {
+		padding-inline: 30px;
+	}
+	.right-side-register {
+		padding-inline: 30px;
+	}
+	.left-side {
+		display: none;
+	}
+
+	.team {
+		padding-inline: 30px;
+		padding-block: 50px;
+	}
+
+	.team-member {
+		max-width: 250px;
+		width: 100%;
+		height: auto;
+	}
+}

docker-compose/requirements/nginx/static/style/homePage/liveChat.css

@@ -3,10 +3,10 @@
 /*                                                        :::      ::::::::   */
 /*   liveChat.css                                       :+:      :+:    :+:   */
 /*                                                    +:+ +:+         +:+     */
-/*   By: edbernar <edbernar@student.42angouleme.    +#+  +:+       +#+        */
+/*   By: madegryc <madegryc@student.42.fr>          +#+  +:+       +#+        */
 /*                                                +#+#+#+#+#+   +#+           */
 /*   Created: 2024/07/30 13:53:39 by edbernar          #+#    #+#             */
-/*   Updated: 2024/09/29 03:24:21 by edbernar         ###   ########.fr       */
+/*   Updated: 2024/10/04 18:03:56 by madegryc         ###   ########.fr       */
 /*                                                                            */
 /* ************************************************************************** */
 
@@ -269,3 +269,9 @@
 	object-fit: cover;
 	object-position: center;
 }
+
+@media (max-width: 700px){
+	#chatButton {
+		left: 40px;
+	}
+}

docker-compose/requirements/nginx/static/style/profilPage/profil.css

@@ -260,3 +260,94 @@
     opacity: 1;
     cursor: pointer;
 }
+
+
+@media (max-width: 700px){
+    #profil .container {
+        width: 90%;
+    }
+
+    #profil .profile-section {
+        flex-direction: column;
+        
+    }
+
+    #profil .profile-image {
+        position: relative;
+        top: -120px;
+        left: 0;
+        margin-bottom: 20px;
+    }
+
+    #profil .profile-info {
+        margin-left: 0;
+        text-align: center;
+    }
+
+    #profil .content {
+        flex-direction: column;
+    }
+
+    #profil .dashboard {
+        width: 100%;
+        height: 50vh;
+        margin-bottom: 20px;
+    }
+
+    #profil .history {
+        width: 100%;
+        height: 50vh;
+        margin-bottom: 40px;
+    }
+
+    #profil .history-card {
+        height: 150px;
+    }
+
+    #profil .history-card #score-history {
+        font-size: 50px;
+    }
+
+    #profil .profile-img-history {
+        width: 80px;
+        height: 80px;
+    }
+
+    #profil .profile-img-history img {
+        width: 75px;
+        height: 75px;
+    }
+
+    #profil .profile-img-history-enemy {
+        width: 70px;
+        height: 70px;
+    }
+
+    #profil .container .rightButtonDiv {
+        margin-left: 50px;
+        margin-top: 20px;
+    }
+
+    #profil .container .rightButtonDiv img {
+        width: 40px;
+        height: 40px;
+    }
+
+    #profil .container .editPen {
+        top: 0;
+        right: 0;
+    }
+
+    #profil .container .editPenPfp {
+        width: 50%;
+        height: 50%;
+    }
+
+    #cross-profil{
+        top: 20px;
+        left: 35px;
+        width: 60px;
+        height: 60px;
+        position: relative;
+    }
+}

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

@@ -151,3 +151,19 @@
     margin-right: 10px;
     margin-top: 5px;
 }
+
+
+@media (max-width: 768px) {
+    #settingsBody .container-settings {
+        display: flex;
+        flex-direction: column;
+        width: 100%;
+        margin-top: 350px;
+        margin-inline: 30px;
+    }
+
+    #settingsBody .left-section,
+    #settingsBody .right-section {
+        margin-bottom: 20px;
+    }
+}