initial login page is styled

pages/admin/login.md

@@ -4,10 +4,10 @@ title: Dashboard Login
 form:
     - name: username
       type: text
-      label: Username
+      placeholder: Username
 
     - name: password
       type: password
-      label: Password
+      placeholder: Password
 ---
 

themes/grav/css-compiled/template.css

@@ -1,17 +1,30 @@
-@import url(//fonts.googleapis.com/css?family=Montserrat:400|Raleway:300,400,600|Inconsolata);
-.button, .button-secondary {
+@import url(//fonts.googleapis.com/css?family=Montserrat:400|Lato:300,400,700);
+#admin-login {
+  position: relative;
+  top: 50%;
+  -webkit-transform: translateY(-50%);
+  -moz-transform: translateY(-50%);
+  -o-transform: translateY(-50%);
+  -ms-transform: translateY(-50%);
+  transform: translateY(-50%); }
+
+.button {
   display: inline-block;
-  padding: 7px 20px; }
-  .button-small.button, .button-small.button-secondary {
-    padding: 3px 10px;
-    font-size: 0.9rem; }
+  padding: 0.3rem 1.5rem;
+  font-size: 1.1rem;
+  font-weight: 300;
+  font-family: "Lato", "Helvetica", "Tahoma", "Geneva", "Arial", sans-serif; }
+  .button i {
+    padding-right: 5px; }
+  .button-small.button {
+    padding: 3px 10px; }
 
 html, body {
   height: 100%; }
 
 body {
-  background: white;
-  color: #444444;
+  background: #314d5b;
+  color: white;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale; }
 
@@ -23,11 +36,26 @@ a {
 b, strong, label, th {
   font-weight: 600; }
 
+.secondary-accent {
+  background: #349886;
+  color: white; }
+
+.info {
+  background: #9055af;
+  color: white;
+  font-size: 1.1rem; }
+
 .default-animation {
   -webkit-transition: all 0.5s ease;
   -moz-transition: all 0.5s ease;
   transition: all 0.5s ease; }
 
+.default-border-radius {
+  border-radius: 4px; }
+
+.default-glow-shadow {
+  box-shadow: 0 0 20px rgba(0, 0, 0, 0.2); }
+
 .padding-horiz {
   padding-left: 7rem;
   padding-right: 7rem; }
@@ -45,7 +73,7 @@ b, strong, label, th {
   padding-bottom: 3rem; }
 
 body {
-  font-family: "Raleway", "Helvetica", "Tahoma", "Geneva", "Arial", sans-serif;
+  font-family: "Lato", "Helvetica", "Tahoma", "Geneva", "Arial", sans-serif;
   font-weight: 400; }
 
 h1, h2, h3, h4, h5, h6 {
@@ -98,7 +126,7 @@ h1 + h2 {
   font-size: 2rem;
   line-height: 1;
   text-align: center;
-  font-family: "Raleway", "Helvetica", "Tahoma", "Geneva", "Arial", sans-serif;
+  font-family: "Lato", "Helvetica", "Tahoma", "Geneva", "Arial", sans-serif;
   font-weight: 300; }
   @media only all and (min-width: 48em) and (max-width: 59.938em) {
     h1 + h2 {
@@ -112,7 +140,7 @@ h2 + h3 {
   font-size: 2rem;
   line-height: 1;
   text-align: center;
-  font-family: "Raleway", "Helvetica", "Tahoma", "Geneva", "Arial", sans-serif;
+  font-family: "Lato", "Helvetica", "Tahoma", "Geneva", "Arial", sans-serif;
   font-weight: 300; }
   @media only all and (min-width: 48em) and (max-width: 59.938em) {
     h2 + h3 {
@@ -234,27 +262,24 @@ td {
   padding: 0.5rem;
   border: 1px solid #eaeaea; }
 
-.button {
-  background: white;
-  color: #1bb3e9;
-  border: 1px solid #1bb3e9;
-  border-radius: 3px; }
-  .button:hover {
-    background: #1bb3e9;
+.button.primary {
+  background: #41bea8;
+  color: rgba(255, 255, 255, 0.85);
+  border-radius: 4px; }
+  .button.primary:hover {
+    background: #54c5b0;
     color: white; }
-  .button:active {
-    box-shadow: 0 1px 0 #118ab5; }
-
-.button-secondary {
-  background: white;
-  color: #f6635e;
-  border: 1px solid #f6635e;
-  border-radius: 3px; }
-  .button-secondary:hover {
-    background: #f6635e;
+  .button.primary:active {
+    box-shadow: 0 1px 0 #31907f; }
+.button.secondary {
+  background: #29796b;
+  color: rgba(255, 255, 255, 0.85);
+  border-radius: 4px; }
+  .button.secondary:hover {
+    background: #2f8c7c;
     color: white; }
-  .button-secondary:active {
-    box-shadow: 0 1px 0 #f32b24; }
+  .button.secondary:active {
+    box-shadow: 0 1px 0 #1a4b43; }
 
 #error {
   text-align: center;
@@ -268,4 +293,43 @@ td {
   #error p {
     margin: 1rem 0; }
 
+#admin-login {
+  background: #253a47;
+  max-width: 28rem;
+  margin: 0 auto; }
+  #admin-login h1 {
+    background: #20333e url(../images/logo.png) 50% 50% no-repeat;
+    font-size: 0;
+    color: transparent;
+    height: 14rem;
+    margin: 0; }
+  #admin-login form {
+    padding: 3rem; }
+    #admin-login form input {
+      margin-bottom: 2rem;
+      background: #314d5b;
+      color: white;
+      font-size: 1.4rem;
+      line-height: 1.5;
+      text-align: center;
+      font-weight: 300;
+      border: 1px solid #1d2e38; }
+      #admin-login form input::-webkit-input-placeholder {
+        color: #83949c; }
+      #admin-login form input::-moz-placeholder {
+        color: #83949c; }
+      #admin-login form input:-moz-placeholder {
+        color: #83949c; }
+      #admin-login form input:-ms-input-placeholder {
+        color: #83949c; }
+    #admin-login form .form-actions {
+      text-align: center;
+      margin: 0 -3rem -3rem -3rem;
+      padding: 1.5rem 3rem; }
+      #admin-login form .form-actions button:first-child {
+        margin-right: 1rem; }
+  #admin-login .info {
+    text-align: center;
+    padding: 1rem 3rem; }
+
 /*# sourceMappingURL=template.css.map */

themes/grav/scss/configuration/template/_colors.scss

@@ -1,5 +1,5 @@
 // Core
-$core-text:						#444;
+$core-text:						#fff;
 $core-accent:					#1BB3E9;
 $secondary-link:				#F6635E;
 $white:							#fff;
@@ -7,6 +7,18 @@ $black:							#000;
 $light-gray:					#ddd;
 $border-color: 					#EEEEEE;
 
+// Admin colors
+$page-bg:                       #314D5B;
+$accent-bg:                     #253A47;
+$accent-fg:                     #fff;
+$darker-accent-bg:              shade($accent-bg,12%);
+$darker-accent-fg:              shade($accent-fg,10%);
+$secondary-accent-bg:           #349886;
+$secondary-accent-fg:           #fff;
+$info-bg:                       #9055AF;
+$info-fg:                       #fff;
+
+
 // Borders
 $core-border-color:				$light-gray;
 $core-border-color-hover: 		darken($core-border-color, 10);
@@ -16,8 +28,6 @@ $core-border-color-focus: 		$core-accent;
 $core-box-shadow: 				inset 0 1px 3px hsla(0, 0%, 0%, 0.06);
 $core-box-shadow-focus: 		$core-box-shadow, 0 0 5px rgba(darken($core-border-color-focus, 5), 0.7);
 
-// Background
-$page-bg:						#fff;
 
 // Header
 $header-text: 					#FFFFFF;

themes/grav/scss/configuration/template/_typography.scss

@@ -1,5 +1,5 @@
 // Font Family
-$font-family-default:  			"Raleway", "Helvetica", "Tahoma", "Geneva", "Arial", sans-serif;
+$font-family-default:  			"Lato", "Helvetica", "Tahoma", "Geneva", "Arial", sans-serif;
 $font-family-header:  			"Montserrat", "Helvetica", "Tahoma", "Geneva", "Arial", sans-serif;
 $font-family-mono: 				"Inconsolata", monospace;
 $font-family-serif:				"Georgia", "Times", "Times New Roman", serif;

themes/grav/scss/configuration/template/_variables.scss

@@ -1,7 +1,7 @@
 // Sizes
 $header-height: 5rem;
 $footer-height: 6rem;
-$border-radius: 3px;
+$border-radius: 4px;
 
 // Font Weights
 $font-weight-bold: 600;
@@ -9,5 +9,6 @@ $font-weight-regular: 400;
 $font-weight-light:300;
 
 // Global Paddings
+$padding-default: 3rem;
 $padding-horiz: 7rem;
 $padding-vert: 3rem;

themes/grav/scss/template.scss

@@ -45,6 +45,9 @@
 // Errors
 @import "template/errors";
 
+// Login
+@import "template/login";
+
 // Custom
 @import "template/custom";
 

themes/grav/scss/template/_buttons.scss

@@ -1,9 +1,12 @@
 .button {
 	@extend %button;
-	@include button-color($core-accent);
+
+    &.primary {
+        @include button-color(lighten($secondary-accent-bg, 10%));
+    }
+
+    &.secondary {
+        @include button-color(shade($secondary-accent-bg, 20%));
+    }
 }
 
-.button-secondary {
-	@extend %button;
-	@include button-color($secondary-link);
-}

themes/grav/scss/template/_core.scss

@@ -20,4 +20,14 @@ b, strong {
 	font-weight: $font-weight-bold
 }
 
+.secondary-accent {
+    background: $secondary-accent-bg;
+    color: $secondary-accent-fg;
+}
+
+.info {
+    background: $info-bg;
+    color: $info-fg;
+    font-size: 1.1rem;
+}
 

themes/grav/scss/template/_extensions.scss

@@ -2,6 +2,14 @@
 	@include transition(all 0.5s ease);
 }
 
+.default-border-radius {
+    border-radius: 4px;
+}
+
+.default-glow-shadow {
+    box-shadow: 0 0 20px rgba(0,0,0,0.2);
+}
+
 .padding-horiz {
 	padding-left: $padding-horiz;
 	padding-right: $padding-horiz;

themes/grav/scss/template/_fonts.scss

@@ -1,3 +1,3 @@
 // Import Google Web Fonts
-@import url(//fonts.googleapis.com/css?family=Montserrat:400|Raleway:300,400,600|Inconsolata);
+@import url(//fonts.googleapis.com/css?family=Montserrat:400|Lato:300,400,700);
 

themes/grav/scss/template/_login.scss

@@ -0,0 +1,46 @@
+#admin-login {
+    @extend %vertical-align;
+    background: $accent-bg;
+    max-width: 28rem;
+    margin: 0 auto;
+
+    h1 {
+        background: $darker-accent-bg url(../images/logo.png) 50% 50% no-repeat;
+        font-size: 0;
+        color: transparent;
+        height: 14rem;
+        margin: 0;
+    }
+
+    form {
+        padding: 3rem;
+        input {
+            margin-bottom: 2rem;
+            background: $page-bg;
+            color: $core-text;
+            font-size: 1.4rem;
+            line-height: 1.5;
+            text-align: center;
+            font-weight: 300;
+            border: 1px solid shade($accent-bg, 20%);
+            @include placeholder {
+                color: tint($page-bg,40%);
+            }
+        }
+
+        .form-actions {
+            text-align: center;
+            margin: 0 -3rem -3rem -3rem;
+            padding: 1.5rem 3rem;
+
+            button:first-child {
+                margin-right: 1rem;
+            }
+        }
+    }
+
+    .info {
+        text-align: center;
+        padding: 1rem 3rem;
+    }
+}

themes/grav/scss/template/modules/_buttons.scss

@@ -1,21 +1,28 @@
 %button {
 	display: inline-block;
-	padding: 7px 20px;
+	padding: 0.3rem 1.5rem;
+    font-size: 1.1rem;
+    font-weight: 300;
+
+    font-family: $font-family-default;
+
+    i {
+        padding-right: 5px;
+    }
 
     &.button-small {
         padding: 3px 10px;
-        font-size: $core-font-size - 0.1rem;
+
     }
 
 }
 
 @mixin button-color($color) {
-	background: $white;
-	color: $color;
-	border: 1px solid $color;
-	border-radius: 3px;
+	background: $color;
+	color: rgba($white, 0.85);
+	border-radius: $border-radius;
 	&:hover {
-		background: $color;
+		background: lighten($color,5%);
 		color: $white;
 	}
 	&:active {

themes/grav/templates/login.html.twig

@@ -1,9 +1,9 @@
 {% extends 'partials/base.html.twig' %}
 
 {% block page %}
-    <section id="admin-login">
+    <section id="admin-login" class="default-glow-shadow">
         <h1>
-            Login
+            Grav Login
         </h1>
 
         {% include 'partials/messages.html.twig' %}
@@ -16,7 +16,10 @@
                     </div>
                 {% endif %}
             {% endfor %}
-            <button name="task" value="login">Login</button>
+            <div class="form-actions secondary-accent">
+                <button class="button secondary" name="task" value="forgot"><i class="fa fa-exclamation-circle"></i> Forgot Password</button>
+                <button type="submit" class="button primary" name="task" value="login"><i class="fa fa-shield"></i> Login</button>
+            </div>
         </form>
     </section>
 {% endblock %}