Closes #78: login page design

docs-web/src/main/webapp/src/partial/docs/login.html

@@ -1,5 +1,11 @@
-<div class="row">
-  <div class="col-sm-offset-5 col-sm-3">
+<style>
+  /* No navbar in login screen */
+  .navbar {
+    display: none;
+  }
+</style>
+<div class="row vertical-center login-box-container">
+  <div class="col-sm-offset-5 col-sm-2 login-box">
     <form>
       <div class="form-group">
         <label class="sr-only" for="inputUsername">Username</label>

docs-web/src/main/webapp/src/style/main.less

@@ -208,4 +208,34 @@ input[readonly].share-link {
       white-space: nowrap;
     }
   }
+}
+
+// Vertical alignment
+.vertical-center {
+  min-height: 100vh;
+
+  /* Make it a flex container */
+  display: -webkit-box;
+  display: -moz-box;
+  display: -ms-flexbox;
+  display: -webkit-flex;
+  display: flex;
+
+  /* Align the bootstrap's container vertically */
+  -webkit-box-align : center;
+  -webkit-align-items : center;
+  -moz-box-align : center;
+  -ms-flex-align : center;
+  align-items : center;
+}
+
+// Login
+.login-box-container {
+  background: url('../img/background.jpg') no-repeat center;
+}
+
+.login-box {
+  background: rgba(255, 255, 255, 0.5);
+  padding: 20px;
+  border-radius: 4px
 }