From b0dbd88b3fbd33835925e6bd5b83da34eadf393b Mon Sep 17 00:00:00 2001
From: Redume <Danilivasenko09@gmail.com>
Date: Wed, 2 Nov 2022 13:42:00 +0300
Subject: [PATCH] added optimization for all screens

---
 static/css/main.css | 186 ++++++++++++++++++++++++++++++++++++++------
 1 file changed, 161 insertions(+), 25 deletions(-)

diff --git a/static/css/main.css b/static/css/main.css
index b2c1ff0..df0915c 100644
--- a/static/css/main.css
+++ b/static/css/main.css
@@ -10,41 +10,177 @@ body {
     user-select: none;
 }
 
-#devices {
-    width: 840px;
-    height: 357px;
-    margin: 260px 40px;
-}
-
 #content p {
     font-family: 'Roboto', sans-serif;
 }
 
-#title {
-    font-size: 4em;
-    margin-top: -33%;
-    margin-left: 65%;
+#devices {
+    display: block;
+    width: 90%;
+    height: 90%;
 }
 
-#subtitle {
-    font-size: 2em;
-    margin-left: 58%;
-    margin-top: -1.3%;
+@media (min-width: 0) {
+    #devices {
+        margin: 65% auto;
+    }
+
+    #title {
+        font-size: 2.5em;
+        margin-top: -160%;
+    }
+
+    #subtitle {
+        margin-top: -5%;
+    }
+
+    #description, #subtitle, #title {
+        text-align: center;
+    }
+
+    #google-play, #github {
+        width: 45%;
+        height: 45%;
+    }
+
+    #google-play {
+        margin-top: 51%;
+        margin-left: 5%;
+    }
 }
 
-#description {
-    font-size: 1.5em;
-    margin-left: 58%;
-    width: 600px;
-    height: 114px;
+@media (min-width: 576px) {
+    #devices {
+        margin: 50% auto;
+    }
+
+    #title {
+        font-size: 3em;
+        margin-top: -130%;
+    }
+
+    #google-play, #github {
+        width: 37%;
+        height: 37%;
+    }
+
+    #get-it-on {
+        margin-top: 5%;
+        text-align: center;
+    }
 }
 
-#google-play, #github {
-    width: 315px;
-    height: 114px;
+@media (min-width: 768px) {
+    #devices {
+        margin: 39% auto;
+    }
+
+    #title {
+        font-size: 3.5em;
+        margin-top: -110%;
+    }
+
+    #description {
+        width: 90%;
+        margin: 0 auto;
+    }
+
+    #google-play, #github {
+        width: 30%;
+        height: 30%;
+    }
+
+    #get-it-on {
+        margin-top: 1%;
+        text-align: center;
+    }
 }
 
-#get-it-on {
-    margin-left: 57%;
-    margin-top: 1%;
+@media (min-width: 992px) {
+    #devices {
+        margin: 30% auto;
+    }
+
+    #title {
+        font-size: 4em;
+        margin-top: -95%;
+    }
+
+    #description {
+        width: 70%;
+        margin: 0 auto;
+    }
+
+    #google-play, #github {
+        width: 25%;
+        height: 25%;
+    }
+
+    #get-it-on {
+        margin-top: -2%;
+        text-align: center;
+    }
+}
+
+@media (min-width: 1200px) {
+    #devices {
+        margin: 25% auto;
+    }
+
+    #title {
+        font-size: 4.5em;
+        margin-top: -85%;
+    }
+
+    #description {
+        width: 55%;
+        margin: 0 auto;
+    }
+
+    #google-play, #github {
+        width: 20%;
+        height: 20%;
+    }
+
+    #get-it-on {
+        margin-top: -3%;
+        text-align: center;
+    }
+}
+
+
+@media (min-width: 1400px) {
+    #devices {
+        width: 50%;
+        height: 50%;
+        margin: 15% 2%;
+    }
+
+    #title {
+        font-size: 4em;
+        margin-top: -37%;
+        margin-left: 50%;
+    }
+
+    #subtitle {
+        font-size: 2em;
+        margin-top: -2%;
+        margin-left: 50%;
+    }
+
+    #description {
+        font-size: 1.1em;
+        width: 30%;
+        margin: 2% 60%;
+    }
+
+    #google-play, #github {
+        width: 35%;
+        height: 35%;
+    }
+
+    #get-it-on {
+        margin-top: -25%;
+        margin-left: 47%;
+    }
 }
\ No newline at end of file