Starlio/Starlio-web
1
0
Fork 0
mirror of https://github.com/Starlio-app/Starlio-web.git synced 2024-11-22 00:36:20 +03:00
Code Issues Projects Releases Packages Wiki Activity Actions

added optimization for all screens

Browse source
This commit is contained in:
Данил 2022-11-02 13:42:00 +03:00
parent 8a90465b0e
commit b0dbd88b3f
1 changed files with 161 additions and 25 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

186
static/css/main.css
View file

@ -10,41 +10,177 @@ body {
user-select: none; user-select: none;
} }
#devices {
width: 840px;
height: 357px;
margin: 260px 40px;
}
#content p { #content p {
font-family: 'Roboto', sans-serif; font-family: 'Roboto', sans-serif;
} }
#title { #devices {
font-size: 4em; display: block;
margin-top: -33%; width: 90%;
margin-left: 65%; height: 90%;
} }
#subtitle { @media (min-width: 0) {
font-size: 2em; #devices {
margin-left: 58%; margin: 65% auto;
margin-top: -1.3%; }
#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 { @media (min-width: 576px) {
font-size: 1.5em; #devices {
margin-left: 58%; margin: 50% auto;
width: 600px; }
height: 114px;
#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 { @media (min-width: 768px) {
width: 315px; #devices {
height: 114px; margin: 39% auto;
} }
#get-it-on { #title {
margin-left: 57%; 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%; margin-top: 1%;
text-align: center;
}
}
@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%;
}
} }