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