Introducing main.sass stylesheet

Blender Cloud used main.css from Pillar

As we try to strip Blender Cloud-specific content from Pillar,
this commit brings three .sass files over to this repository.

There are still plenty of Blender Cloud classes all over Pillar,
they will be brought here over time.

src/styles/_services.sass

@@ -0,0 +1,39 @@
+.services
+	#page-header
+		text-shadow: 1px 1px 0 rgba(black, .2)
+		border-bottom: none
+		align-items: initial
+
+		.page-title
+			text-align: left
+			font-size: 3em
+			margin: 0
+
+		.page-title-summary
+			max-width: 900px
+			text-align: left
+			font-size: 1.4em
+
+	.page-card-side
+		img
+			max-width: 100%
+			border-radius: 3px
+
+	.tip
+		margin-top: 15px
+		color: $color-text-dark-secondary
+		font-size: .8em
+
+		a
+			color: $color-primary
+			text-decoration: underline
+
+	span.text-background
+		+text-background(white, #358, 2px, 5px 0)
+
+	.navbar-backdrop-overlay
+		background-image: linear-gradient(rgba(black, .3), rgba(black, .8))
+
+	#blender-sync
+		small strong
+			color: $color-success

src/styles/_welcome.sass

@@ -0,0 +1,270 @@
+.join
+	position: relative
+
+	nav.navbar
+		background-color: white
+
+		.navbar-brand
+			color: $color-text
+
+		li a.navbar-item
+			color: $color-text
+
+		.navbar-container
+			+container-behavior
+
+	#page-header
+		+media-lg
+			min-height: 600px
+		+media-xs
+			background-size: cover
+			background-position: right
+		min-height: 500px
+
+		.page-title,
+		.page-title-summary
+			line-height: 1.2em
+			text-align: left
+			text-shadow: 1px 1px 0 rgba(black, .5), 0 0 25px rgba(black, .5)
+
+		.page-title-summary
+			font-size: 1.4em
+
+	li.special
+		color: $color-success
+		font-weight: bold
+
+	.page-card
+		&:nth-child(even)
+			background-color: white
+
+		&-header
+			margin-bottom: 0
+
+		&-side
+			+media-xs
+				width: 100%
+				max-width: 100%
+
+			&.text
+				+media-xs
+					padding-left: 50px
+				padding:
+					bottom: 150px
+					top: 150px
+
+		&.right
+			background-color: $color-background-light
+
+			.page-card-title,
+			.page-card-summary
+				padding-left: 25px
+
+			.page-card-title:after
+				left: 25px
+
+			.text
+				+media-xs
+					padding-left: 25px
+
+		&.intro
+			+media-xs
+				margin-left: 50px
+
+			.page-card-side
+				+media-sm
+					max-width: 500px
+				max-width: 600px
+
+			padding:
+				bottom: 0
+				top: 50px
+
+			&+.page-card-header
+				padding-top: 0
+
+			.page-card-summary
+				font-size: 1.2em
+
+			.page-card-image
+				align-items: center
+				display: flex
+				height: 100%
+				justify-content: center
+
+		&.light
+			overflow: hidden
+			position: relative
+
+			.learn
+				color: white
+				text-decoration: underline
+
+			.page-card
+				&-title
+					color: white
+					font-weight: bold
+
+					&:after
+						border-color: white
+
+				&-summary
+					color: white
+					position: relative
+					text-shadow: 1px 1px 0 rgba(black, .5), 0 0 25px rgba(black, .2)
+					z-index: 1
+
+					p
+						font-size: .9em
+
+						&.summary-action
+							font-size: .8em
+
+							a.page-card-cta
+								font-size: .9em
+
+					a
+						color: white
+						text-decoration: underline
+
+
+			a.page-card-cta
+				background: #ff4970
+				border-radius: 3px
+				border: none
+				box-shadow: 1px 1px 0 rgba(black, .2)
+				font-weight: bold
+				margin-right: 15px
+				margin-top: 25px
+				padding: 7px 20px
+				text-decoration: none
+				text-shadow: none
+
+				&:hover
+					background: lighten(#ff4970, 5%)
+
+			.page-card-image
+				img
+					+media-xs
+						display: none
+					max-width: initial
+					position: absolute
+					width: initial
+					z-index: 0
+
+		&.training
+			margin-top: 45px
+
+			a.page-card-cta
+				background: #0082ff
+
+			.page-card-image
+				img
+					right: 50px
+					top: 50%
+					transform: translateY(-50%)
+
+		&.open-movies
+			.page-card-image
+				img
+					top: 50px
+					left: 50px
+
+		&.services
+			.page-card-image
+				img
+					left: 50px
+
+		&.subscribe
+			padding: 40px 0
+			text-align: center
+
+			span strong
+				color: $color-danger
+
+			.page-card-side
+				width: 100%
+				max-width: 100%
+
+			.page-card-title
+				line-height: 1.5em
+				color: white
+				text-align: center
+				padding-bottom: 15px
+
+				&:after
+					border: none
+
+			.page-card-summary
+				color: $color-text-light-primary
+
+			.page-card-cta
+				text-align: center
+				font-size: 1.3em
+				padding: 7px 35px
+				margin-right: initial
+				border: thin solid rgba(white, .8)
+				border-radius: 3px
+
+
+	.training-other
+		color: $color-text-dark-secondary
+		font-size: .9em
+		padding: 30px
+		text-align: center
+
+		a
+			color: $color-text-dark-secondary
+			text-decoration: underline
+
+			&:hover
+				color: $color-text-dark-primary
+
+	.pricing
+		+media-xs
+			padding-top: 30px
+		margin-bottom: 0
+		padding-bottom: 100px
+
+	.supported-by
+		img
+			max-width: 100%
+
+	.assets
+		padding-bottom: 80px
+
+	.flex
+		+media-xs
+			flex-direction: column
+
+		display: flex
+
+		.box
+			flex: 1
+			margin: 20px
+
+	.page-triplet-container
+		.triplet-card
+			+media-xs
+				margin-top: 20px
+
+	.navbar
+		.nav-item-sign-in
+			a.navbar-item
+				background-color: $color-primary
+				border: none
+				border-radius: 3px
+				color: white
+				height: auto
+				font-weight: bold
+				margin-top: 5px
+				margin-left: 10px
+				padding: 10px 20px
+
+				&:hover
+					background-color: lighten($color-primary, 10%)
+					box-shadow: none
+
+.container.wide-on-sm
+	+media-sm
+		width: 100%

src/styles/main.sass

@@ -0,0 +1,26 @@
+@import ../../../pillar/src/styles/_normalize
+@import ../../../pillar/src/styles/_config
+@import ../../../pillar/src/styles/_utils
+
+/* Generic styles (comments, notifications, etc) come from base.css */
+
+/* Blender Cloud specific styles */
+@import ../../../pillar/src/styles/_project
+@import ../../../pillar/src/styles/_project-sharing
+@import ../../../pillar/src/styles/_project-dashboard
+@import ../../../pillar/src/styles/_user
+@import _welcome
+@import _homepage
+@import _services
+@import _stats
+@import ../../../pillar/src/styles/_search
+@import ../../../pillar/src/styles/_organizations
+
+/* services, about, etc */
+@import ../../../pillar/src/styles/_pages
+
+/* plugins are included here, don't include in base unless needed by other pillar apps */
+@import ../../../pillar/src/styles/plugins/_jstree
+@import ../../../pillar/src/styles/plugins/_js_select2
+
+/* CSS for pillar-font comes from fontello.com using static/assets/font/config.json */

src/templates/layout.pug

@@ -55,7 +55,7 @@ html(lang="en")
 		| {% if title == 'blog' %}
 		link(href="{{ url_for('static_pillar', filename='assets/css/blog.css', v=17320171) }}", rel="stylesheet")
 		| {% else %}
-		link(href="{{ url_for('static_pillar', filename='assets/css/main.css', v=17320171) }}", rel="stylesheet")
+		link(href="{{ url_for('static', filename='cloud/assets/css/main.css', v=17320171) }}", rel="stylesheet")
 		| {% endif %}
 		| {% endblock css %}