Task #17 - Redesign login page w/ forms.

app/assets/auth/forms.css

@@ -2,27 +2,40 @@
     --input-padding-x: 1.5rem;
     --input-padding-y: 0.75rem;
 }
-
+body {
+    background-image: url('https://images.unsplash.com/photo-1501618669935-18b6ecb13d6d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1464&q=80');
+    background-position: 60% 20%;
+}
+@media all and (max-width: 768px) {
+    body {
+        background-image: none;
+        background-color: #F1EFE7;
+    }
+}
 .login,
 .image {
     min-height: 100vh;
 }
-
-.bg-image {
-    background-image: url('https://source.unsplash.com/4812YdII6W0/2592x1728');
-    background-size: cover;
-    background-position: center;
+.name-banner{
+    font-family: 'Merienda', cursive;
 }
-
 .login-heading {
     font-weight: 300;
 }
 
 .btn-login {
-    font-size: 0.9rem;
-    letter-spacing: 0.05rem;
-    padding: 0.75rem 1rem;
-    border-radius: 2rem;
+    border: solid 7px #41403E;
+    align-self: center;
+    background: transparent;
+    padding: 1rem 1rem;
+    -webkit-transition: all .5s ease;
+    transition: all .5s ease;
+    color: #41403E;
+    font-size: 2rem;
+    letter-spacing: 1px;
+    outline: none;
+    box-shadow: 20px 38px 34px -26px rgba(0, 0, 0, 0.2);
+    border-radius: 255px 15px 225px 15px/15px 225px 15px 255px;
 }
 
 .form-label-group {
@@ -92,7 +105,7 @@
 }
 
 .form-submit-button {
-    margin-top: 50px;
+    margin-top: 30px;
     margin-bottom: 50px;
 }
 

app/views/auth/auth_page.pug

@@ -4,14 +4,16 @@ html
         meta(name='viewport' content='width=device-width initial-scale=1')
         link(rel='stylesheet' href='https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css')
         link(rel='stylesheet' href='/assets/auth/forms.css')
+        link(href="https://fonts.googleapis.com/css?family=Merienda:700&display=swap" rel="stylesheet")
     body
         .container-fluid
             .row.no-gutter
-                .d-none.d-md-flex.col-md-6.col-lg-8.bg-image
-                .col-md-6.col-lg-4
+                .d-none.d-md-flex.col-md-5
+                .col-md-5
                     .login.d-flex.align-items-center.py-5
                         .container
                             .row
                                 .col-md-9.col-lg-8.mx-auto
+                                    h2.name-banner #{_app.name}
                                     block content
         script(src='https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css')

app/views/login.pug

@@ -7,6 +7,8 @@ html
         script(src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous")
         script(src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous")
         script(src="https://kit.fontawesome.com/5043ba9cc5.js" crossorigin="anonymous")
+        link(href="https://fonts.googleapis.com/css?family=Merienda:700&display=swap" rel="stylesheet")
+
         style(type="text/css").
             @import url('https://fonts.googleapis.com/css?family=Rajdhani');
             html,
@@ -17,6 +19,9 @@ html
                 color: #cccccc;
                 text-align: center;
             }
+            #name {
+                font-family: 'Merienda', cursive;
+            }
             #login {
                 width: 50em;
             }
@@ -37,7 +42,8 @@ html
 
     body
     .container#intro
-        h1 Hi, Welcome to #{app_name}. 
+        h1 Hi, Welcome to 
+            span#name #{app_name}. 
         h2 Choose your login method.
 
     .container#login