Starlio/Starlio-web
1
0
Fork 0
mirror of https://github.com/Starlio-app/Starlio-web.git synced 2024-11-06 01:13:57 +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;
}
#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%;
}
}