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