improved text optimization and text placement under screens

This commit is contained in:
Данил 2023-07-26 15:11:26 +03:00
parent 45f7fb3120
commit 4408d1aae1
No known key found for this signature in database
GPG key ID: 5051BCD5AB064A7B
2 changed files with 66 additions and 24 deletions

View file

@ -31,7 +31,7 @@ a {
#title { #title {
font-size: 2.5em; font-size: 2.5em;
margin-top: -160%; margin-top: -170%;
} }
#subtitle { #subtitle {
@ -60,7 +60,7 @@ a {
#title { #title {
font-size: 3em; font-size: 3em;
margin-top: -130%; margin-top: -140%;
} }
#google-play, #github { #google-play, #github {
@ -69,14 +69,14 @@ a {
} }
#get-it-on { #get-it-on {
margin-top: -6.7%; margin-top: -2%;
text-align: center; text-align: center;
} }
} }
@media (min-width: 768px) { @media (min-width: 768px) {
#devices { #devices {
margin: 39% auto; margin: 33% auto;
} }
#title { #title {
@ -84,6 +84,14 @@ a {
margin-top: -110%; margin-top: -110%;
} }
#subtitle {
font-size: 1.2em;
}
#description {
font-size: 1.5em;
}
#description { #description {
width: 90%; width: 90%;
margin: 0 auto; margin: 0 auto;
@ -95,24 +103,25 @@ a {
} }
#get-it-on { #get-it-on {
margin-top: 1%; margin-top: -6%;
text-align: center; text-align: center;
} }
} }
@media (min-width: 992px) { @media (min-width: 992px) {
#devices { #devices {
margin: 30% auto; margin: 33% auto;
} }
#title { #title {
font-size: 4em; font-size: 4em;
margin-top: -95%; margin-top: -106%;
} }
#description { #description {
width: 70%; width: 70%;
margin: 0 auto; margin: 0 auto;
font-size: 1.3em;
} }
#google-play, #github { #google-play, #github {
@ -121,14 +130,14 @@ a {
} }
#get-it-on { #get-it-on {
margin-top: -2%; margin-top: -5%;
text-align: center; text-align: center;
} }
} }
@media (min-width: 1200px) { @media (min-width: 1200px) {
#devices { #devices {
margin: 25% auto; margin: 13% auto;
} }
#title { #title {
@ -141,9 +150,21 @@ a {
margin: 0 auto; margin: 0 auto;
} }
#subtitle {
font-size: 1.5em;
}
#description {
font-size: 1.5em;
}
#google-play, #github { #google-play, #github {
width: 20%; width: 25%;
height: 20%; height: 25%;
}
#devices {
margin-top: 25%;
} }
#get-it-on { #get-it-on {
@ -184,7 +205,7 @@ a {
} }
#get-it-on { #get-it-on {
margin-top: -25%; margin-top: -35%;
margin-left: 47%; margin-left: 47%;
} }
} }

View file

@ -31,7 +31,7 @@ a {
#title { #title {
font-size: 2.5em; font-size: 2.5em;
margin-top: -160%; margin-top: -170%;
} }
#subtitle { #subtitle {
@ -60,7 +60,7 @@ a {
#title { #title {
font-size: 3em; font-size: 3em;
margin-top: -130%; margin-top: -140%;
} }
#google-play, #github { #google-play, #github {
@ -69,14 +69,14 @@ a {
} }
#get-it-on { #get-it-on {
margin-top: -6.7%; margin-top: -2%;
text-align: center; text-align: center;
} }
} }
@media (min-width: 768px) { @media (min-width: 768px) {
#devices { #devices {
margin: 39% auto; margin: 33% auto;
} }
#title { #title {
@ -84,6 +84,14 @@ a {
margin-top: -110%; margin-top: -110%;
} }
#subtitle {
font-size: 1.2em;
}
#description {
font-size: 1.5em;
}
#description { #description {
width: 90%; width: 90%;
margin: 0 auto; margin: 0 auto;
@ -95,24 +103,25 @@ a {
} }
#get-it-on { #get-it-on {
margin-top: 1%; margin-top: -6%;
text-align: center; text-align: center;
} }
} }
@media (min-width: 992px) { @media (min-width: 992px) {
#devices { #devices {
margin: 30% auto; margin: 33% auto;
} }
#title { #title {
font-size: 4em; font-size: 4em;
margin-top: -95%; margin-top: -106%;
} }
#description { #description {
width: 70%; width: 70%;
margin: 0 auto; margin: 0 auto;
font-size: 1.3em;
} }
#google-play, #github { #google-play, #github {
@ -121,14 +130,14 @@ a {
} }
#get-it-on { #get-it-on {
margin-top: -2%; margin-top: -5%;
text-align: center; text-align: center;
} }
} }
@media (min-width: 1200px) { @media (min-width: 1200px) {
#devices { #devices {
margin: 25% auto; margin: 13% auto;
} }
#title { #title {
@ -141,9 +150,21 @@ a {
margin: 0 auto; margin: 0 auto;
} }
#subtitle {
font-size: 1.5em;
}
#description {
font-size: 1.5em;
}
#google-play, #github { #google-play, #github {
width: 20%; width: 25%;
height: 20%; height: 25%;
}
#devices {
margin-top: 25%;
} }
#get-it-on { #get-it-on {
@ -184,7 +205,7 @@ a {
} }
#get-it-on { #get-it-on {
margin-top: -25%; margin-top: -35%;
margin-left: 47%; margin-left: 47%;
} }
} }