move over the stuff in the `login` branch from kdoh and we'll just deal with it here.

resources/frontend_client/app/auth/partials/login.html

@@ -17,19 +17,19 @@
 
                     <div class="FormError" ng-show="form.$error.message">{{form.$error.message}}</div>
 
-                    <div class="Form-group mb2" ng-class="{'Form-group--error': form.email.$error.message == undefined}">
+                    <div ng-class="{'Form-group--error': form.email.$error.message == undefined}">
                         <mb-form-label form="form" display-name="Email address" field-name="email"></mb-form-label>
                         <input class="Form-input py1" name="email" placeholder="youlooknicetoday@email.com" type="text" ng-model="email" autofocus>
                     </div>
 
-                    <div class="Form-group mb2" ng-class="{'Form-group--error': form.password.$error.message == undefined}">
+                    <div ng-class="{'Form-group--error': form.password.$error.message == undefined}">
                         <mb-form-label form="form" display-name="Password" field-name="password"></mb-form-label>
                         <input class="Form-input py1" name="password" placeholder="Shh..." type="password" ng-model="password">
                     </div>
 
-                    <div class="Form-group">
-                        <input id="id_remember" name="remember" type="checkbox" ng-init="remember_me = true" ng-model="remember_me" checked>
-                        <label class="Form-label inline-block">Remember Me:</label>
+                    <div>
+                        <input name="remember" type="checkbox" ng-init="remember_me = true" ng-model="remember_me" checked>
+                        <label class="inline-block">Remember Me:</label>
                     </div>
 
                     <div class="mt2">

resources/frontend_client/app/css/core/layout.css

@@ -59,6 +59,10 @@
   display: table;
 }
 
+.flex {
+  display: flex;
+}
+
 .table-cell {
   display: table-cell;
 }
@@ -91,11 +95,16 @@
 .left   { left: 0; }
 
 .layout-centered {
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-  transform-style: preserve-3d;
+  align-items: center;
+  justify-content: center;
+}
+
+.flex-column {
+  flex-direction: column;
+}
+
+.flex-row {
+  flex-direction: row;
 }
 
 /* grid */

resources/frontend_client/app/css/login.css

-.Login-page {
-  height: 420px;
+.brand-scene {
+  z-index: 4;
+  display: none;
 }
 
-.Login-greeting {
-  margin-top: 2em;
-  font-size: 3em;
+.brand-boat {
+  position: relative;
+  z-index: 6;
+  -webkit-animation: boat_trip 200s linear infinite;
+  margin-bottom: 0.5em;
 }
 
-@media screen and (--breakpoint-min-md) {
-  .Login-form {
-    border-left: 1px solid #d9d9d9;
+@-webkit-keyframes boat_trip {
+  0% {
+    margin-left: -2%;
+  }
+  10% {
+    margin-left: 5%;
+    transform: translate3d(0, 0, 2%);
+  }
+  100% {
+    margin-left: 120%;
   }
 }
 
-.Login-form .Form {
-  width: 100%;
+.Login-header {
+  color: #6A6A6A;
 }
 
+.brand-illustration {
+  position: absolute;
+  height: 202px;
+  bottom: 15px;
+  left: -100px;
+  right: -100px;
+  background-image: url('../img/bridge.png');
+  background-repeat: no-repeat;
+  background-size: 100% 100%;
+  z-index: 5;
+}

resources/frontend_client/index.html

@@ -191,8 +191,8 @@
             </nav>
         </div>
 
-        <div class="MainContent">
-            <div ng-view></div>
+        <div class="MainContent full-height">
+            <div class="full-height" ng-view></div>
         </div>
     </body>