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

Пофиксил разметку, добавил отступы и не только

Browse source
This commit is contained in:
Данил 2024-09-18 21:31:23 +03:00
parent 912f70eddb
commit a9b4751aca
1 changed files with 53 additions and 20 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

73
src/web/static/css/wallpaper.css
View file

@ -4,15 +4,22 @@ body {
font-family: 'Roboto', serif; font-family: 'Roboto', serif;
} }
@media (min-width: 0) {
.wallpaper img { img {
width: 90%;
border-radius: 2%;
display: flex;
cursor: pointer; cursor: pointer;
}
@media (min-width: 0) {
.wallpaper-img{
width: 85%;
border-radius: 16px;
display: block;
margin-left: auto;
margin-right: auto
} }
.wallpaper h1 {
.title {
text-align: center; text-align: center;
} }
@ -39,8 +46,14 @@ body {
.get-it-on { .get-it-on {
display: flex; display: flex;
width: 50%; justify-content: center;
margin: 0 auto 0 auto; margin-left: auto;
margin-right: auto;
margin-top: 2%
}
.get-it-on img {
max-width: 45%;
} }
} }
@ -61,23 +74,42 @@ body {
font-size: 125%; font-size: 125%;
width: 90%; width: 90%;
} }
.get-it-on img {
width: 100%;
}
} }
@media (min-width: 992px) { @media (min-width: 992px) {
.wallpaper-img { html, body {
width: calc(100% - 16px);
height: 100%; height: 100%;
border-radius: 16px; overflow: hidden;
margin: 0 auto 0 auto; }
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.wallpaper-img {
height: 100%;
border-radius: 8px;
display: flex; display: flex;
cursor: pointer;
object-fit: cover; object-fit: cover;
} }
.wallpaper {
display: flex;
height: 100vh;
padding: 32px;
}
.desc { .desc {
font-size: 200%; font-size: 200%;
line-height: 45px; line-height: 45px;
width: 90%; width: 90%;
margin-top: 2%;
} }
.copyright { .copyright {
@ -85,19 +117,22 @@ body {
width: 90%; width: 90%;
} }
.wallpaper h1 { .title {
text-align: center; text-align: center;
font-size: 250%; font-size: 250%;
} }
.get-it-on img {
width: 100%;
}
} }
@media (min-width: 1200px) { @media (min-width: 1200px) {
.wallpaper-img { .wallpaper-img {
width: 40%; width: 30%;
border-radius: 8px; border-radius: 8px;
float: left; float: left;
cursor: pointer;
} }
.wallpaper-text { .wallpaper-text {
@ -116,14 +151,12 @@ body {
} }
.get-it-on { .get-it-on {
display: flex; max-width: 45%;
width: 50%;
} }
} }
@media (min-width: 1400px) { @media (min-width: 1400px) {
.wallpaper-img { .wallpaper-img {
max-width: 27%; max-width: 30%;
cursor: pointer;
} }
} }