From b1fd0cdeff287e4cf0ec180ff9fee804cb2c8b8d Mon Sep 17 00:00:00 2001
From: Arda Serdar Pektezol <1669855+pektezol@users.noreply.github.com>
Date: Wed, 22 Oct 2025 01:52:05 +0400
Subject: feat/frontend: add general mobile support (#275)

---
 frontend/src/App.css | 53 +++++++++++++++++++++++++++++++++++++++-------------
 1 file changed, 40 insertions(+), 13 deletions(-)

(limited to 'frontend/src/App.css')

diff --git a/frontend/src/App.css b/frontend/src/App.css
index 14a9972..eb39d85 100644
--- a/frontend/src/App.css
+++ b/frontend/src/App.css
@@ -2,17 +2,14 @@ main {
     overflow: auto;
     overflow-x: hidden;
     position: relative;
-
-    width: calc(100% - 380px); 
+    width: calc(100% - 23.75rem);
     height: 100vh;
-    left: 350px;
-
-    padding-right: 30px;
-
-    font-size: 40px;
+    left: 21.875rem;
+    padding-right: 1.875rem;
+    font-size: 2.5rem;
     font-family: BarlowSemiCondensed-Regular;
     color: #cdcfdf;
-
+    transition: all 0.3s ease;
 }
 
 a {
@@ -39,7 +36,7 @@ body {
     background-image: linear-gradient(-90deg, #202232 0%, #202232 25%, #2a2c41 50%, #202232 75%, #202232 100%);
     user-select: none;
     color: #00000000;
-    border-radius: 1000px;
+    border-radius: 62.5rem;
 }
 
 @keyframes loader {
@@ -57,20 +54,21 @@ body {
 }
 
 .loader {
-    width: 48px;
-    height: 48px;
-    border: 5px solid #FFF;
+    width: 3rem;
+    height: 3rem;
+    border: 0.3125rem solid #FFF;
     border-bottom-color: transparent;
     border-radius: 50%;
     display: inline-block;
     box-sizing: border-box;
     animation: rotation 1s linear infinite;
-    }
+}
 
 @keyframes rotation {
     0% {
         transform: rotate(0deg);
     }
+
     100% {
         transform: rotate(360deg);
     }
@@ -95,3 +93,32 @@ body {
     font-family: 'BarlowSemiCondensed-SemiBold';
     src: local('BarlowSemiCondensed-Regular'), url(./fonts/BarlowSemiCondensed-SemiBold.ttf) format('truetype');
 }
+
+@media screen and (max-width: 768px) {
+    * {
+        box-sizing: border-box;
+    }
+
+    main {
+        width: 100%;
+        left: 0;
+        padding: 5rem 20px 1rem 20px;
+        height: auto;
+        min-height: 100vh;
+        font-size: 1.5rem;
+    }
+
+    .loader {
+        width: 2.5rem;
+        height: 2.5rem;
+        border: 0.25rem solid #FFF;
+    }
+}
+
+@media screen and (min-width: 1920px) {
+    main {
+        width: calc(100% - 25rem);
+        left: 23rem;
+        padding-right: 2rem;
+    }
+}
\ No newline at end of file
-- 
cgit v1.2.3