Login layout

app/partials/layout.jade

@@ -1,14 +1,14 @@
 doctype html
 html(lang="en")
   head
-    title= Taiga
+      title= Taiga
-    meta(http-equiv="content-type", content="text/html; charset=utf-8")
+      meta(http-equiv="content-type", content="text/html; charset=utf-8")
-    meta(name="description", content="Taiga Landing page")
+      meta(name="description", content="Taiga Landing page")
-    meta(name="keywords", content="Agile, Taiga, Management, Github")
+      meta(name="keywords", content="Agile, Taiga, Management, Github")
-    meta(name="viewport", content="width=device-width, user-scalable=no")
+      meta(name="viewport", content="width=device-width, user-scalable=no")
-    link(rel="stylesheet", href="/styles/main.css")
+      link(rel="stylesheet", href="/styles/main.css")
-    block head
+      block head
   body
-    include views/modules/nav
+      include views/modules/nav
-    div.master
+      div.master
-      block content
+          block content

app/partials/login-layout.jade

@@ -0,0 +1,13 @@
+doctype html
+html(lang="en")
+  head
+      title= Taiga
+      meta(http-equiv="content-type", content="text/html; charset=utf-8")
+      meta(name="description", content="Taiga Landing page")
+      meta(name="keywords", content="Agile, Taiga, Management, Github")
+      meta(name="viewport", content="width=device-width, user-scalable=no")
+      link(rel="stylesheet", href="/styles/main.css")
+      block head
+  body
+    div.master
+      block content

app/partials/login.jade

@@ -1,11 +1,18 @@
-extends dummy-layout
+extends login-layout
 
 block head
     title Taiga  Project management web application with scrum in mind!
 
 block content
     div.wrapper(ng-controller="AuthController as ctrl")
-        form(ng-submit="ctrl.submit()")
+        div.login-main
-            input(type="text", name="username", ng-model="form.username", placeholder="User name")
+            div.login-container
-            input(type="password", name="password", ng-model="form.password", placeholder="Password")
+                h1.logo
-            input(type="submit", value="Submit")
+                    img(src="/images/logo.png", alt="TAIGA")
+                p.tagline Project management web application with scrum in the mind!
+                form(ng-submit="ctrl.submit()")
+                    input(type="text", name="username", ng-model="form.username", placeholder="User name")
+                    input(type="password", name="password", ng-model="form.password")
+                    a.button.button-login.button-gray(href="", title="Log in") Log in
+                    a.button.button-signup(href="", title="Log in") Sign up
+                    input(type="submit", value="I am an horrible button to be deleted. Click me to login for the moment")

app/styles/dependencies/colors.scss

@@ -19,6 +19,8 @@ $very-light-gray: #e3e3e3;
 $red-light: #ff8282;
 $red: #f00;
 
+$orange: #d98a0b;
+
 $button-green: #699b05;
 $button-green-hover: #9dce0a;
 $button-gray: #585858;

app/styles/dependencies/forms.scss

@@ -7,6 +7,7 @@ fieldset {
 }
 
 input[type="text"],
+input[type="password"],
 input[type="email"],
 input[type="date"],
 select,
@@ -24,3 +25,6 @@ textarea {
         color: $white;
     }
 }
+input[type="password"] {
+    font-family: 'DroidSans';
+}

app/styles/layout/login.scss

@@ -0,0 +1,38 @@
+.login-main {
+    @include table-flex(center, center, flex, row, wrap, center);
+    background: url('/images/bg.png') no-repeat center center;
+    background-size: cover;
+    bottom: 0;
+    left: 0;
+    position: fixed;
+    right: 0;
+    top: 0;
+    z-index: 999;
+    .login-container {
+        @include table-flex-child(0, 400px, 0, 400px);
+    }
+    .logo,
+    .tagline {
+        margin-bottom: 1rem;
+        text-align: center;
+    }
+    .tagline {
+        @extend %xlarge;
+        color: $white;
+        font-family: 'ostrichSans';
+        line-height: 2rem;
+    }
+    input {
+        margin-bottom: 1rem;
+    }
+    .button-login,
+    .button-signup {
+        color: $white;
+        display: block;
+        margin-bottom: .5rem;
+        text-align: center;
+    }
+    .button-signup {
+        background: $orange;
+    }
+}

app/styles/main.scss

@@ -57,6 +57,7 @@ $prefix-for-spec:      true;
 
 //Layout
 @import 'layout/base';
+@import 'layout/login';
 @import 'layout/backlog';
 @import 'layout/taskboard';
 @import 'layout/us-detail';