Refactor + Restyle login/register screens. See TryGhost#134

jcarrharris · Jun 11, 2013 · 1267f91 · 1267f91
1 parent 7e1bd29
commit 1267f91
Show file tree

Hide file tree

Showing 3 changed files with 52 additions and 47 deletions.
diff --git a/core/admin/assets/sass/layouts/login.scss b/core/admin/assets/sass/layouts/login.scss
@@ -12,9 +12,10 @@
 
 .ghost-login {
     color: $midgrey;
+    background: $darkgrey;
 
     @include breakpoint($mobile) {
-        background: $lightbrown;
+        background: $darkgrey;
     }
 
     main { 
@@ -27,76 +28,61 @@
     max-width: 530px;
     margin: 240px auto; // TODO: Change this to proper vertical centering with JS
     padding: 0;
-    text-align: center;
-    background: #fff;
-    border-radius: 4px;
-    border-top: $darkgrey 15px solid;
-    box-shadow: $shadow;
 
     @include breakpoint(630px) {
         max-width: 264px;
-    }
-}
-
-.login-logo {
-    width: 100%;
-    max-width: 400px;
-    margin: 80px 0 70px 0;
-
-    @include breakpoint(630px) {
-        max-width: 235px;
-        margin: 40px 0;
+        text-align: center;
     }
 }
 
 #login {
     @include box-sizing(border-box);
     max-width: 530px;
-    padding: 15px;
-    background: $darkgrey;
-    border-radius: 0 0 4px 4px;
 
     @include breakpoint(630px) {
         max-width: 264px;
-        padding: 15px;
     }
 
-    div {
+    div { // Yes. Really. Every Div.
         position:relative;
         margin:0 0 5px 0;
-        background: lighten($darkgrey, 15%);
+        background: lighten($darkgrey, 10%);
         float: left;
+
+        @include breakpoint(630px) { margin-bottom: 1em; }
     }
 
     input {
         display:inline-block;
         clear:both;
         margin:0;
-        padding-left: 8px;
-        width: 168px;
+        padding: 8px 0 8px 8px;
+        width: 188px;
         position: relative;
         border: none;
         color: #fff;
         font-size: 1.1em;
+        font-weight: 200;
         background: transparent;
+        box-shadow: none;
         @include transition(none);
 
         &:focus {
-            background: lighten($darkgrey, 22%);
+            background: lighten($darkgrey, 15%);
             border-color: #000;
         }
 
         @include breakpoint(630px) {
-            width:201px;
+            width:236px;
             @include transition(none);
         }
 
     }
 
     .email-wrap {
         position:relative;
-        @include icon($i-mail, 12px) {position:absolute;bottom:8px;left:8px;z-index:100;};
-        margin-right: 2px;
+        @include icon($i-mail, 12px) {position:absolute;bottom:11px;left:8px;z-index:100;};
+        margin-right: 3px;
         border-radius: 2px 0 0 2px;
 
         @include breakpoint(630px) {
@@ -111,7 +97,7 @@
 
     .password-wrap {
         position:relative;
-        @include icon($i-lock, 10px) {position:absolute;bottom:9px;left:11px;z-index:100;};
+        @include icon($i-lock, 10px) {position:absolute;bottom:12px;left:11px;z-index:100;};
         border-radius: 0 2px 2px 0;
 
         @include breakpoint(630px) {
@@ -125,17 +111,32 @@
     }
 
     button {
-        width: 80px;
-        height: 30px;
-        margin:0 0 0 15px;
-        padding: 9px;
+        width: 85px;
+        height: 36px;
+        margin:0 0 0 10px;
+        padding: 0.5em 1.37em;
         min-height: 30px;
         min-width: 80px;
         box-shadow: rgba(255,255,255,0.15) 0 1px 0 inset;
 
         @include breakpoint(630px) {
             margin:0;
             width: 100%;
+            margin-bottom: 1em;
+        }
+    }
+
+    .meta {
+        clear:both;
+    }
+
+    a {
+        color: darken($midgrey, 10%);
+        font-size: 0.9em;
+
+        &:hover { 
+            color: $lightgrey;
+            text-decoration: none;
         }
     }
 

diff --git a/core/admin/views/login.hbs b/core/admin/views/login.hbs
@@ -1,6 +1,5 @@
 {{!< default}}
 <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">
@@ -9,6 +8,8 @@
             <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>
+        <section class="meta">
+            <a class="forgotten-password" href="#">Forgotten password?</a> &bull; <a href="/ghost/register/">Register new user</a>
+        </section>
     </form>
 </section>
diff --git a/core/admin/views/register.hbs b/core/admin/views/register.hbs
@@ -1,12 +1,15 @@
 {{!< default}}
-<img class="login-logo" src="/core/admin/assets/img/logo.png" alt="" />
-<form id="register" method="post">
-    <div class="email-wrap">
-        <input class="email_address" type="text" placeholder="Email Address" name="email_address">
-    </div>
-    <div class="password-wrap">
-        <input class="password" type="password" placeholder="Password" name="password">
-    </div>
-    <button class="button-save" type="submit">Register</button>
-    <a href="/ghost/login/">Log in</a>
-</form>
+<section class="login-box">
+    <form id="register" method="post">
+        <div class="email-wrap">
+            <input class="email_address" type="text" placeholder="Email Address" name="email_address">
+        </div>
+        <div class="password-wrap">
+            <input class="password" type="password" placeholder="Password" name="password">
+        </div>
+        <button class="button-save" type="submit">Register</button>
+        <section class="meta">
+            <a href="/ghost/login/">Log in</a>
+        </section>
+    </form>
+</section>