From 7f5cf36eb7a68071b2492925794a6669224a6c86 Mon Sep 17 00:00:00 2001 From: Mathis Degryck Date: Fri, 4 Oct 2024 19:51:04 +0200 Subject: [PATCH] Site : -Making responsive : - Home page (note finished) - Profil page - Settings page --- .../nginx/static/style/homePage/home.css | 58 +++++++++++- .../nginx/static/style/homePage/liveChat.css | 10 +- .../nginx/static/style/profilPage/profil.css | 91 +++++++++++++++++++ .../nginx/static/style/settings/settings.css | 16 ++++ 4 files changed, 172 insertions(+), 3 deletions(-) diff --git a/docker-compose/requirements/nginx/static/style/homePage/home.css b/docker-compose/requirements/nginx/static/style/homePage/home.css index bf2fb93..98cb709 100644 --- a/docker-compose/requirements/nginx/static/style/homePage/home.css +++ b/docker-compose/requirements/nginx/static/style/homePage/home.css @@ -6,7 +6,7 @@ /* By: madegryc +#+ +:+ +#+ */ /* +#+#+#+#+#+ +#+ */ /* 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; @@ -477,4 +478,59 @@ footer { #popMenuLoginButton p:hover { 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; + } } \ No newline at end of file diff --git a/docker-compose/requirements/nginx/static/style/homePage/liveChat.css b/docker-compose/requirements/nginx/static/style/homePage/liveChat.css index deb0e92..bd80f36 100644 --- a/docker-compose/requirements/nginx/static/style/homePage/liveChat.css +++ b/docker-compose/requirements/nginx/static/style/homePage/liveChat.css @@ -3,10 +3,10 @@ /* ::: :::::::: */ /* liveChat.css :+: :+: :+: */ /* +:+ +:+ +:+ */ -/* By: edbernar +#+ +:+ +#+ */ /* +#+#+#+#+#+ +#+ */ /* 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 */ /* */ /* ************************************************************************** */ @@ -268,4 +268,10 @@ .status img { object-fit: cover; object-position: center; +} + +@media (max-width: 700px){ + #chatButton { + left: 40px; + } } \ No newline at end of file diff --git a/docker-compose/requirements/nginx/static/style/profilPage/profil.css b/docker-compose/requirements/nginx/static/style/profilPage/profil.css index 0007bdb..869b4b8 100644 --- a/docker-compose/requirements/nginx/static/style/profilPage/profil.css +++ b/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; + } +} \ No newline at end of file diff --git a/docker-compose/requirements/nginx/static/style/settings/settings.css b/docker-compose/requirements/nginx/static/style/settings/settings.css index fc854b6..13f63bd 100644 --- a/docker-compose/requirements/nginx/static/style/settings/settings.css +++ b/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; + } +} \ No newline at end of file