2
1
Fork 0
mirror of https://github.com/TryGhost/Ghost.git synced 2023-12-13 21:00:40 +01:00

Fixes login box being off centred on small screens

Accounted for top offset to keep login container centred. Login container fades in on load.
Tested on a variety of window sizes and appears to be centred on all of them (measured it to make sure).
This commit is contained in:
Matthew Harrison-Jones 2013-06-13 09:38:40 +01:00
parent 94c8c94ad1
commit de09e7d19c
2 changed files with 5 additions and 4 deletions

View file

@ -23,8 +23,8 @@
$(window).resize(function () {
var loginContainer = $(".js-login-container"),
marginTop = Math.round(($(window).height() / 2) - loginContainer.outerHeight());
loginContainer.css('margin-top', marginTop);
marginTop = Math.floor((loginContainer.parent().height() - loginContainer.height()) / 2) - 15;
loginContainer.css('margin-top', marginTop).fadeIn(400);
});

View file

@ -19,15 +19,16 @@
}
main {
top: 15px;
top: 15px;
@include breakpoint($mobile) { top: 0; }
}
}//.ghost-login
.login-box {
max-width: 530px;
margin: 240px auto; // TODO: Change this to proper vertical centering with JS
margin: 0 auto;
padding: 0;
display: none;
@include breakpoint(630px) {
max-width: 264px;