Simplify Errors (404 & 403)

TODO: Use a generic error template and pass error/text

src/styles/_error.sass

@@ -1,180 +1,73 @@
-body.error
+#error-container
-	width: 100%
+	display: flex
+	justify-content: center
+	align-items: center
 	height: 100%
-
-.error-watchamissing
 	padding: 0 15px
 
-	h2
+	#error-box
-		color: $color-danger
-		font-size: 1.5em
-
-	h3
-		margin-top: 5px
-		font-size: 1.4em
-	p
-		color: $color-text-light-primary
-		font-size: .95em
-
-	a:hover
-		text-decoration: none
-		h3
-			color: lighten($color-primary, 10%)
-		p
-			color: $color-text-light
-
-#error_container
 		display: flex
 		justify-content: center
-	align-items: center
-	position: absolute
-	top: 0
-	left: 0
-	right: 0
-	bottom: 0
-
-	&.standalone
-		width: 100%
-		height: 100%
-		position: fixed
-
-		#error_box
-			padding: 25px
-			.error-lead
-				padding: 10px 10px
-
-				p
-					display: block
-
-				&.extra
-					padding-top: 0
-
-	a
-		color: $color-primary
-
-	#error_box
-		min-width: 60%
-		width: 100%
-		max-width: 800px
-		display: flex
-		justify-content: center
-		align-items: center
 		flex-direction: column
+		min-width: 300px
 
-		+container-box
+		border: thin solid $color-background-dark
-
+		background-color: $color-background-light
-		box-shadow: 0 0 15px rgba(black, .2)
+		box-shadow: 1px 1px 2px rgba(black, .1)
-		padding: 0
+		border-radius: 3px
-		background-color: $color-background-nav
-		border-top-left-radius: 3px
-		border-top-right-radius: 3px
-		overflow: hidden
 
 		.error-top-container
 			position: relative
-			width: 100%
+			padding: 25px 25px 0
-			background-color: $color-background-nav
-
-		.error-top-header-overlay
-			background: repeating-linear-gradient(-45deg, rgba(white, .1), rgba(white, .1) 10px, transparent 10px, transparent 20px)
-			position: absolute
-			top: 0
-			left: 0
-			right: 0
-			bottom: 0
-			width: 100%
-			z-index: 1
-
-
-		.error-top-header
-			width: 100%
-			position: absolute
-			top: 0
-			bottom: 0
-			background:
-				size: cover
-				position-y: 12%
-			z-index: 0
 
 		.error-title
-			position: relative
-			z-index: 2
-			width: auto
-			display: flex
-			margin: 0 auto
-			padding: 25px 0 10px 0
-			color: white
 			font:
 				size: 1.8em
 				weight: 300
 
-			span.icon
-				display: flex
-				align-items: center
-				font-size: 2em
-
-			span.text
-				display: flex
-				align-items: center
-				text-align: left
-				line-height: 1.2em
-				margin-right: auto
-
-
 		.error-lead
-			position: relative
-			z-index: 1
-			display: block
-			width: 100%
 			line-height: 1.6em
 
-			color: $color-text-light-secondary
-			font:
-				size: .9em
-				weight: 300
-
 			a
 				text-decoration: none
 				&:hover
 					text-decoration: underline
 
 			&.extra
-				padding: 15px
+				color: $color-text-dark-primary
+				border-top: thin solid $color-background-dark
+				background-color: lighten($color-background, 2%)
+				padding: 10px 25px
 				font-size: .9em
-				color: $color-text-light-secondary
-
 
 		hr
-			margin: 0 0
+			margin: 10px 0
 			width: 100%
 			border: none
-			height: 3px
+			height: 1px
-			background-color: lighten($color-background-nav, 5%)
+			background-color: $color-background-dark
-
-		.buttons
-			position: relative
-			z-index: 2
-			margin: 5px 0 20px 5px
 
+		.error-cta
+			padding: 10px 25px
 			a
-				font-size: 1.2em
+				margin: 0 15px 0 0
-				margin: 0 15px
+				padding: 5px
+				text-decoration: none
 				&.sign-up
 					+button($color-primary, 3px, true)
 				&.sign-in
-					+button($color-background, 3px)
+					+button($color-text-dark-primary, 3px)
-					border-color: transparent
-
 
 #node-overlay
-	#error_container
+	#error-container
-		@include overlay(rgba($color-background-nav, .8), 0%, transparent, 60%)
+		position: fixed
+		top: $navbar-height
+		align-items: flex-start
 
-		#error_box
+		#error-box
-			top: 50px
+			box-shadow: 0 0 25px rgba(black, .1), 0 0 50px rgba(black, .1)
-			position: absolute
+			width: auto
-			left: 50%
+			border-top-left-radius: 0
-			transform: translateX(-50%)
+			border-top-right-radius: 0
-			border-radius: 3px
+			position: relative
-			box-shadow: 0 0 100px rgba(black, .85)
+			width: 100%
-			overflow: hidden

src/styles/_project.sass

@@ -688,6 +688,7 @@ ul.project_nav-edit-list
 		transition: opacity 250ms ease-in-out
 		&.active
 			opacity: 1
+			display: block !important
 
 	#comments-embed
 		padding: 5px 20px 20px 20px

src/styles/_utils.sass

@@ -23,6 +23,7 @@
 		+clearfix
 
 @mixin button($mixin-color, $roundness, $filled: false)
+	display: inline-flex
 	font-family: $font-body
 	text-transform: uppercase
 	padding:

src/styles/base.sass

@@ -14,6 +14,7 @@ html
 	-moz-osx-font-smoothing: grayscale
 
 body
+	height: 100%
 	font:
 		family: $font-body, sans-serif
 		size: $font-size

src/templates/errors/403_embed.jade

@@ -1,75 +1,35 @@
-#error_container.403
+#error-container(class="error-403")
-	#error_box
+	#error-box
 		.error-top-container
-			.error-top-header-overlay
+			.error-title Forbidden.
-			.error-top-header(
+			.error-lead
-				style="background-image: url({{ url_for('static', filename='assets/img/backgrounds/background_agent327_02.jpg')}})")
+				p You don't have access to this content.
 
-			.error-title
+				| {% if current_user.is_authenticated %}
-				span.icon
+				| {% if current_user.has_role('demo') %}
-					i.pi-lock-open
+				| {% set subscription = 'demo' %}
-				span.text Get this and more with your<br/> Blender Cloud subscription.
+				| {% elif current_user.has_role('subscriber') %}
-
+				| {% set subscription = 'subscriber' %}
-			.buttons
+				| {% else %}
-				a.sign-up.btn.btn-outline(href="https://store.blender.org/product/membership/")
+				| {% set subscription = 'none' %}
-					i.pi-check
-					| Subscribe
-
-				| {% if not current_user.is_authenticated %}
-				a.sign-in.btn.btn-empty(href="{{ url_for('users.login') }}")
-					i.pi-log-in
-					| Log in
 				| {% endif %}
 
+				| {% if subscription == 'none' %}
 				hr
+				p
+					| Support Blender and get awesome stuff.&nbsp;
+					a(href="https://store.blender.org/product/membership/") Subscribe Now
+				| {% endif %}
 
-		section.error-watchamissing
+				| {% else %}
-			h2 Support Blender and get awesome stuff.
+				p
+					a(href="{{ url_for('users.login') }}") Login
+				| {% endif %}
 
-			.row
+		.error-lead.extra
-				.col-md-4
+			| {% if current_user.is_authenticated %}
-					a(href="{{ url_for('main.training') }}")
-						h3 Training &amp; Tutorials
 			p.
-							Character modeling, 3D printing, VFX, rigging and more. We offer
-							12 complete training series with +100 hours of training.
-
-				.col-md-4
-					a(href="{{ url_for('main.open_projects') }}")
-						h3 Open Projects
-						p.
-							The iconic Blender Institute Open Movies,
-							featuring all the production files, assets, artwork, and never-seen-before content.
-
-				.col-md-4
-					a(href="{{ url_for('main.services') }}")
-						h3 Services & Tools
-						p.
-							Create your personal projects, collaborate with other members, store
-							and sync your Blender settings across multiple workstations.
-
-			.row
-				.col-md-4
-					a(href="{{ url_for('projects.view', project_url='textures') }}")
-						h3 Textures
-						p.
-							More than 1500 texture maps to browse online or within Blender via our awesome add-on.
-							Create your own Texture libraries!
-
-				.col-md-4
-					a(href="{{ url_for('projects.view', project_url='hdri') }}")
-						h3 HDRI
-						p.
-							Up to 8K and 18 EVs (extremely high) HDR images to light your renders.
-
-				.col-md-4
-					a(href="{{ url_for('projects.view', project_url='characters') }}")
-						h3 Characters
-						p.
-							Production quality, fully rigged and shaded characters ready to animate.
-
-		hr
-
-		.error-lead.extra.
 				If you have just subscribed, please <a href="{{ url_for('users.logout') }}">log out</a> and in again.
-			For any other issue get in touch via <a href="mailto:cloudsupport@blender.org">cloudsupport@blender.org</a>
+			| {% endif %}
+			p.
+				Need help? Get in touch via <a href="mailto:cloudsupport@blender.org">e-mail</a>.

src/templates/errors/404.jade

@@ -1,17 +1,17 @@
 | {% extends "errors/layout.html" %}
 | {% block body %}
-#error_container.404.standalone
+#error-container(class="error-404")
-	#error_box
+	#error-box
 		.error-top-container
 			.error-title Not found.
 			.error-lead
-			p.
+				p Whatever you're looking for, it's not here.
-				The error has been logged and we're working on getting it fixed.
+
-			hr
+		.error-lead.extra
 			p.
 				Looking for the Open Movies? Check out <a href="https://www.youtube.com/BlenderFoundation">Blender Foundation's YouTube</a> channel. <br/> Were you looking for tutorials instead? <a href="http://www.blender.org/support/tutorials/">blender.org</a> has a good selection.
+			p.
+				Is this content missing? Let us know on <a href="https://twitter.com/Blender_Cloud">Twitter</a>
+				or <a href="mailto:cloudsupport@blender.org">e-mail</a>.
 
-
-		.error-lead.extra.
-			We'll be back soon, in the meantime follow <a href="https://twitter.com/Blender_Cloud">@Blender_Cloud</a> for updates.
 | {% endblock %}

src/templates/errors/404_embed.jade

@@ -1,12 +1,13 @@
-#error_container.404
+#error-container(class="error-404")
-	#error_box
+	#error-box
-		.error-title 404. Not Found.
+		.error-top-container
+			.error-title Not found.
+			.error-lead
+				p {{ description | default("Whatever you're looking for, it's not here.", True) }}
 
-		.error-lead.
+		.error-lead.extra
-			{{ description | default("Whatever you're looking for, it's not here.", True) }}
+			p.
-
+				Looking for the Open Movies? Check out <a href="https://www.youtube.com/BlenderFoundation">Blender Foundation's YouTube</a> channel. <br/> Were you looking for tutorials instead? <a href="http://www.blender.org/support/tutorials/">blender.org</a> has a good selection.
-		hr
+			p.
-
-		.error-lead.extra.
 				Is this content missing? Let us know on <a href="https://twitter.com/Blender_Cloud">Twitter</a>
-			or email <a href="mailto:cloudsupport@blender.org">cloudsupport@blender.org</a>
+				or <a href="mailto:cloudsupport@blender.org">e-mail</a>.

src/templates/errors/layout.jade

@@ -7,8 +7,8 @@ html(lang="en")
 
 		link(href="{{ url_for('static_pillar', filename='assets/ico/favicon.png') }}", rel="shortcut icon")
 		link(href="{{ url_for('static_pillar', filename='assets/ico/apple-touch-icon-precomposed.png') }}", rel="icon apple-touch-icon-precomposed", sizes="192x192")
+		link(href="{{ url_for('static_pillar', filename='assets/css/font-pillar.css') }}", rel="stylesheet")
 		link(href="{{ url_for('static_pillar', filename='assets/css/base.css') }}", rel="stylesheet")
-		link(href="{{ url_for('static_pillar', filename='assets/css/main.css') }}", rel="stylesheet")
 		link(href='//fonts.googleapis.com/css?family=Roboto:300,400', rel='stylesheet', type='text/css')
 
 	body.error