Add v2 homepage

Specific homepage filenames and redirect to login when not found

Move variables to shared file

Move circle image styling to shared file

Leaving float on plans page because of some layout differences

services/web/app/coffee/Features/StaticPages/HomeController.coffee

@@ -9,7 +9,8 @@ fs = require "fs"
 ErrorController = require "../Errors/ErrorController"
 AuthenticationController = require('../Authentication/AuthenticationController')
 
-homepageExists = fs.existsSync Path.resolve(__dirname + "/../../../views/external/home.pug")
+slHomepageExists = fs.existsSync Path.resolve(__dirname + "/../../../views/external/home/sl.pug")
+v2HomepageExists = fs.existsSync Path.resolve(__dirname + "/../../../views/external/home/v2.pug")
 
 module.exports = HomeController =
 	index : (req,res)->
@@ -21,11 +22,13 @@ module.exports = HomeController =
 		else
 			HomeController.home(req, res)
 
-	home: (req, res)->
-		if Features.hasFeature('homepage') and homepageExists
-			res.render 'external/home'
+	home: (req, res, next)->
+		if Features.hasFeature('homepage') and !Settings.overleaf and slHomepageExists
+			res.render 'external/home/sl'
+		else if Features.hasFeature('homepage') and Settings.overleaf and v2HomepageExists
+			res.render 'external/home/v2'
 		else
-			res.redirect "/login"
+			res.redirect '/login'
 
 	externalPage: (page, title) ->
 		return (req, res, next = (error) ->) ->

services/web/public/stylesheets/app/features.less

@@ -13,9 +13,6 @@
 	h3 {
 		margin: 0;
 	}
-	p {
-		color: @gray
-	}
 	i {
 		color: lighten(@blue, 15%);
 	}

services/web/public/stylesheets/app/homepage.less

@@ -38,15 +38,12 @@
 }
 
 .masthead {
-	display: inline-block;
-	width: 100%;
-	background-color: rgba(0,0,0,0.85);
-	background-image: -webkit-linear-gradient(left,rgba(153,93,179,0.6),rgba(44,155,219,0.6));
-	background-image: linear-gradient(to right,rgba(153,93,179,0.6),rgba(44,155,219,0.6));
+	background-image: -webkit-linear-gradient(to left, rgba(79,156,69,1.0), rgba(28,91,38,1.0));
+	background-image: linear-gradient(to left, rgba(79,156,69,1.0), rgba(28,91,38,1.0));
 	position: relative;
 	text-align: center;
 	overflow: hidden;
-	margin-top: @header-height;
+	padding-top: @header-height;
 	h1, p, label {
 		color: white;
 		text-align: center;
@@ -70,6 +67,9 @@
 		text-rendering: auto;
 		margin-bottom: @line-height-computed;
 	}
+	label {
+		display: block;
+	}
 	.register-banner {
 		background-image: -webkit-linear-gradient(top,rgba(0,0,0,0.7),rgba(0,0,0,0.9));
 		background-image: linear-gradient(to bottom,rgba(0,0,0,0.7),rgba(0,0,0,0.9));
@@ -97,7 +97,7 @@
 		max-width: 960px;
 		.img {
 			max-width: 960px;
-			background-image: url('/img/screen.png');
+			background-image: url('/img/homepage.png');
 			background-size: 100%;
 			background-repeat: no-repeat;
 			margin: auto;
@@ -111,38 +111,29 @@
 		only screen and (                min-resolution: 192dpi),
 		only screen and (                min-resolution: 2dppx) { 
 			.img {
-				background-image: url('/img/screen@2x.png');
+				background-image: url('/img/homepage@2x.png');
 			}
 		}
 	}
 	.btn-hero {
-		background-color: transparent;
-		border-color: white;
-		border-width: 3px;
-		color: white;
-		margin-right: @line-height-computed / 2;
-		&:hover {
-			background-color: white;
-			color: @gray-dark;
-		}
-		&.btn-primary {
-			border-color: lighten(@link-color, 10%);
-			color: lighten(@link-color, 10%);
-			&:hover {
-				background-color: lighten(@link-color, 10%);
-				color: white;
-			}
+		float: left;
+	}
+}
+@media only screen and (max-width: @screen-sm-max) {
+	.masthead {
+		.btn-hero {
+			float: none;
 		}
 	}
 }
 
 .universities {
-	padding-bottom: @line-height-computed;
+	border-bottom: 1px solid @gray-lighter;
 	text-align: center;
-	margin: 0 auto;
-	img {
-		max-width: 100%;
-		max-height: 60px;
+	.uni-logo {
+		display: inline-block;
+		padding: 0 @padding-md;
+		width: 20%;
 	}
 }
 
@@ -152,6 +143,12 @@
 	border-bottom: 1px solid @gray-lightest;
 }
 
+.pattern-grid {
+	background: url('/img/grid.png') repeat @content-alt-bg-color;
+	border-top: 1px solid @gray-lighter;
+	border-bottom: 1px solid @gray-lighter;
+}
+
 .real-time-example {
 	.cursor {
 		background-color: hsl(200, 70%, 70%);
@@ -212,3 +209,9 @@
 	}
 	box-shadow: 0 3px 5px rgba(0,0,0,.3);
 }
+
+@media only screen and (max-width: @screen-sm-max) {
+	.doc-history-example {
+		margin-bottom: @margin-md;
+	}
+}

services/web/public/stylesheets/app/plans.less

@@ -77,17 +77,7 @@
 		}
 	}
 	.circle-img {
-		border-radius: 50%;
 		float: right;
-		height: 100px;
-		overflow: hidden;
-		position: relative;
-		width: 100px;
-		img {
-			display: inline;
-			margin: 0 auto;
-			width: 100%;
-		}
 	}
 	.faq {
 		p {

services/web/public/stylesheets/components/icons.less

@@ -1,6 +1,6 @@
 // Colors
 .icon-accent {
-  color: @accent-color-secondary;
+  color: @accent-color-secondary!important;
 }
 
 // Sizes

services/web/public/stylesheets/components/images.less

@@ -0,0 +1,17 @@
+.circle-img {
+	border-radius: 50%;
+	float: left;
+	// float: right;
+	height: 100px;
+	overflow: hidden;
+	position: relative;
+	max-width: 100px;
+	img {
+		display: inline;
+		margin: 0 auto;
+		width: 100%;
+	}
+}
+.blockquote-with-img {
+	margin-left: 115px;
+}

services/web/public/stylesheets/core/_common-variables.less

@@ -82,6 +82,11 @@
 @padding-xs-vertical:       1px;
 @padding-xs-horizontal:     5px;
 
+@padding-sm: 10px;
+@padding-md: 20px;
+@padding-lg: 30px;
+@padding-xl: 40px;
+
 @line-height-large:         1.33;
 @line-height-small:         1.5;
 

services/web/public/stylesheets/core/ol-variables.less

@@ -82,11 +82,6 @@
 // Padding
 @padding-xs-horizontal   : 8px;
 
-@padding-sm: 10px;
-@padding-md: 20px;
-@padding-lg: 30px;
-@padding-xl: 40px;
-
 // Alerts
 @alert-padding : 15px;
 @alert-border-radius : @border-radius-base;

services/web/public/stylesheets/ol-style.less

@@ -8,6 +8,7 @@
 @import "_ol_style_includes.less";
 @import "components/embed-responsive.less";
 @import "components/icons.less";
+@import "components/images.less";
 @import "components/navs-ol.less";
 @import "components/pagination.less";
 @import "components/tabs.less";