Correcting login screen markup/styling issues, fixes TryGhost#133

jcarrharris · Jun 11, 2013 · 501e869 · 501e869
1 parent 0a00398
commit 501e869
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 13 deletions.
diff --git a/core/admin/assets/sass/layouts/login.scss b/core/admin/assets/sass/layouts/login.scss
@@ -17,9 +17,14 @@
         background: $lightbrown;
     }
 
-    main {
+    main { 
+        top: 15px; 
+        @include breakpoint($mobile) { top: 0; }
+    }
+
+    .login-box {
         max-width: 530px;
-        margin: 240px auto;
+        margin: 240px auto; // TODO: Change this to proper vertical centering with JS
         padding: 0;
         text-align: center;
         background: #fff;

diff --git a/core/admin/views/login.hbs b/core/admin/views/login.hbs
@@ -1,12 +1,14 @@
 {{!< default}}
-<img class="login-logo" src="/core/admin/assets/img/logo.png" alt="" />
-<form id="login" method="post">
-    <div class="email-wrap">
-        <input class="email" type="text" placeholder="Email Address" name="email">
-    </div>
-    <div class="password-wrap">
-        <input class="password" type="password" placeholder="Password" name="password">
-    </div>
-    <button class="button-save" type="submit">Log in</button>
-    <a href="/ghost/register/">Register</a>
-</form>
+<section class="login-box">
+    <img class="login-logo" src="/core/admin/assets/img/logo.png" alt="" />
+    <form id="login" method="post">
+        <div class="email-wrap">
+            <input class="email" type="text" placeholder="Email Address" name="email">
+        </div>
+        <div class="password-wrap">
+            <input class="password" type="password" placeholder="Password" name="password">
+        </div>
+        <button class="button-save" type="submit">Log in</button>
+        <a href="/ghost/register/">Register</a>
+    </form>
+</section>