Style login page

src/styles/_user.sass

@@ -1,58 +1,58 @@
-#login-container
-	width: 60%
-	margin: 40px auto
-	padding: 15px 35px 25px 35px
+.login-container
+  align-items: center
+  display: flex
+  // height: 100%
+  justify-content: center
+  // width: 100%
+  position: fixed
+  top: 0
+  bottom: 0
+  left: 0
+  right: 0
 
+.login-box
   +container-box
+  margin: 15px
+  max-width: 600px
+  min-width: 300px
+  padding: 15px 35px
 
   .login-title,
   .settings-title
-		text-align: center
     color: $color-primary
     font:
       size: 2.2em
       weight: 300
-
-		padding: 15px 0
+    padding: 15px
+    text-align: center
 
   .login-info
-		font:
-			weight: 300
-
     color: $color-text-dark-primary
+    font-weight: 300
     text-align: center
-		padding-bottom: 25px
 
-	.buttons
-		display: flex
-		margin: 35px auto 35px auto
-		width: 100%
+  .login-providers
     align-items: center
+    display: flex
+    flex-direction: column
     justify-content: center
+    margin: 15px
 
-		.login-button-container
-			margin: 0 25px
-			text-align: center
-			position: relative
-
-			a.forgot
-				width: 100%
-				position: absolute
-				bottom: -25px
-				left: 50%
-				transform: translateX(-50%)
+    .login-provider-button
+      background-color: $color-primary
+      border: thin solid $color-primary
+      border-radius: 3px
+      color: #fff
       display: block
-				font-size: .8em
-				color: $color-text-dark-secondary
-
-		.button-login,
-		.button-submit
+      margin-bottom: 10px
       min-width: 200px
-			+button($color-primary, 3px, true)
+      padding: 5px 10px
+      text-align: center
 
-		.button-register
-			min-width: 150px
-			+button($color-primary, 3px)
+      &.facebook
+        background-color: #3b5998
+        border-color: transparent
+        color: #fff
 
 #settings
   display: flex

src/templates/login.jade

@@ -2,16 +2,30 @@
 | {% block page_title %}Login{% endblock %}
 
 | {% block body %}
-h1 Logins
-| {% for login_provider, login_provider_conf in config['OAUTH_CREDENTIALS'].items() %}
-| {% if login_provider == 'blender_id' %}
-| {{login_provider}} button
-| {% elif login_provider == 'facebook' %}
-| {{login_provider}} button
-| {% elif login_provider == 'google' %}
-| {% endif %}
-p
-	a(href="{{url_for('users.oauth_authorize', provider=login_provider)}}") Login
 
-| {% endfor %}
+.login-container
+	.login-box
+		.login-title Welcome
+
+		.login-info
+			| Login using one of the following providers:
+
+		.login-providers
+			| {% for login_provider, login_provider_conf in config['OAUTH_CREDENTIALS'].items() %}
+
+			| 	{% set login_provider_name = login_provider | undertitle %}
+
+			| 	{% if 'name' in login_provider_conf %}
+			| 	{% set login_provider_name = login_provider_conf['name'] %}
+			| 	{% endif %}
+
+			a(class="{{login_provider}} login-provider-button",
+				title="Login using {{ login_provider_name }}",
+				href="{{url_for('users.oauth_authorize', provider=login_provider)}}")
+				| {{ login_provider_name }}
+
+			| 	{% endfor %}
+
 | {% endblock body %}
+
+| {% block footer_container %}{% endblock footer_container %}