Make notifications appear on top instead of inline

Currently notifications reflow the document which causes the interface
to jump twice which can be frustrating if you're trying to click
something.

This change makes the notification appear at the top of the form as
such:

client/src/css/01-main.css

@@ -19,9 +19,10 @@ body {
 /* notifications */
 .notification {
   padding: 10px;
-  margin: 10px 0px;
+  margin: 15px 0px;
   border-radius: 6px;
   display: none;
+  position: absolute;
 }
 .notification img {
   width: 24px;
@@ -63,4 +64,4 @@ body {
 }
 h1 {
   font-size: 25px;
-}
+}

server/src/views/firstfactor.pug

@@ -7,9 +7,9 @@ block form-header
   h1 Sign in
 
 block content
+  div(class="notification")
   img(class="header-img" src="/img/user.png" alt="user profile")
   p Enter your credentials to sign in
-  div(class="notification")
   form(class="form-signin")
     div(class="form-inputs")
       input(type="text" class="form-control" id="username" placeholder="Username" required autofocus)

server/src/views/password-reset-form.pug

@@ -7,12 +7,12 @@ block form-header
   h1 Reset password
 
 block content
+  div(class="notification")
   img(class="header-img" src="/img/password.png" alt="password")
   p Set your new password and confirm it.
-  div(class="notification")
   form(class="form-signin")
     div(class="form-inputs")
       input(class="form-control" type="password" name="password1" id="password1" placeholder="New password" required="required")
       input(class="form-control" type="password" name="password2" id="password2" placeholder="Password confirmation" required="required")
     button(id="reset-password-button" class="btn btn-lg btn-primary btn-block" type="submit") Reset Password
-    span(class="clearfix")
+    span(class="clearfix")

server/src/views/password-reset-request.pug

@@ -7,12 +7,12 @@ block form-header
   h1 Reset password
 
 block content
+  div(class="notification")
   div
     img(class="header-img" src="/img/password.png" alt="password")
     p After giving your username, you will receive an email to change your password.
-  div(class="notification")
   form(class="form-signin")
     div(class="form-inputs")
       input(type="text" class="form-control" name="username" id="username" placeholder="Your username" required="required")
     button(id="reset-password-button" class="btn btn-lg btn-primary btn-block" type="submit") Reset Password
-    span(class="clearfix")
+    span(class="clearfix")

server/src/views/secondfactor.pug

@@ -7,16 +7,16 @@ block form-header
   h1 Sign in
 
 block content
-  div 
+  div
+    div(class="notification notification-totp")
     h3 Hi <b>#{username}</b>
   div(class="row")
     div(class="u2f-token")
       img(src="/img/pendrive.png", alt="security key")
-    p 
+    p
       | Please, touch your <a href="https://www.yubico.com/products/yubikey-hardware/fido-u2f-security-key/">security key</a><br/>
       b Or<br/>
       | Get a one-time password
-    div(class="notification notification-totp")
     form(class="form-signin totp")
       div(class="form-inputs")
         input(type="text" autocomplete="off" class="form-control" id="token" placeholder="Token" required autofocus)
@@ -25,7 +25,7 @@ block content
         div Need to register?
         div
           a(href=u2f_identity_start_endpoint, class="link register-u2f", data-toggle="tooltip", title="A security key is required to register.") Security key
-          |  | 
+          |  |
           a(href=totp_identity_start_endpoint, class="link register-totp") Google Authenticator
           span(class="clearfix")
-  script(src="/js/u2f-api.js", type="text/javascript")
+  script(src="/js/u2f-api.js", type="text/javascript")