commenting and preliminary login styling

2 files changed, 81 insertions, 16 deletions

diff --git a/views/login.pug b/views/login.pug
index 1ec799745..c5ece88e4 100644
--- a/views/login.pug
+++ b/views/login.pug
@@ -2,20 +2,23 @@
 extends ./layout
 
 block content
-  .page-header
-    h3 Can you log in? Let's find out...
-  form.form-horizontal(id='login-form', method='POST')
+    style
+        include ./stylesheets/authentication.css
+    form.form-horizontal(id='login-form', method='POST')
     input(type='hidden', name='_csrf', value=_csrf)
-    .form-group
-      label.col-sm-3.control-label(for='email') Email
-      .col-sm-7
-        input.form-control(type='email', name='email', id='email', placeholder='Email', autofocus, required)
-    .form-group
-      label.col-sm-3.control-label(for='password') Password
-      .col-sm-7
-        input.form-control(type='password', name='password', id='password', placeholder='Password', required)
-    .form-group
-      .col-sm-offset-3.col-sm-7
-        button.btn.btn-success(type='submit')
-          i.fa.fa-user-plus
-          | Login
\ No newline at end of file
+    .overlay
+        .inner
+            h3(id='login_label') Log In
+            .form-group
+                //- label.col-sm-3.control-label(for='email', id='email_label') Email
+                .col-sm-7
+                input.form-control(type='email', name='email', id='email', placeholder='Email', autofocus, required)
+            .form-group
+                //- label.col-sm-3.control-label(for='password') Password
+                .col-sm-7
+                input.form-control(type='password', name='password', id='password', placeholder='Password', required)
+            .form-group
+                .col-sm-offset-3.col-sm-7
+                button.btn.btn-success(id='submit', type='submit')
+                    i.fa.fa-user-plus
+                    | Submit
\ No newline at end of file
diff --git a/views/stylesheets/authentication.css b/views/stylesheets/authentication.css
new file mode 100644
index 000000000..dd49e31dc
--- /dev/null
+++ b/views/stylesheets/authentication.css
@@ -0,0 +1,62 @@
+#email_label {
+    color: blue;
+    margin-top: 10px;
+}
+
+h3,
+label {
+    font-family: Arial, Helvetica, sans-serif;
+}
+
+body {
+    background-color: lightslategray;
+}
+
+#login_label {
+    text-align: left;
+}
+
+#submit {
+    width: 224px;
+    height: 35px;
+    font-family: Arial, Helvetica, sans-serif;
+    font-size: 14px;
+    font-style: oblique;
+}
+
+.overlay {
+    text-align: center;
+    position: absolute;
+    margin: auto;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    width: 400px;
+    height: 300px;
+    background-color: white;
+    border-radius: 8px;
+    box-shadow: 10px 10px 10px #00000033;
+}
+
+.inner {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    width: 230px;
+    height: 230px;
+    margin: auto;
+}
+
+.form-control {
+    width: 200px;
+    margin-bottom: 15px;
+    height: 30px;
+    outline: none;
+    padding-left: 10px;
+    padding-right: 10px;
+    font-family: Arial, Helvetica, sans-serif;
+    font-size: 16px;
+}
\ No newline at end of file