From fc24ee6f9c0739745bc7e295be191ab1d3d7c073 Mon Sep 17 00:00:00 2001
From: Amadeus Demarzi <amadeusdemarzi@gmail.com>
Date: Sun, 27 Jul 2014 18:31:30 -0700
Subject: [PATCH] Fixed mobile homepage

* Fixed the overflow problem
* Logo should now resize appropriately
* Tagline hidden on mobile
---
 website/source/javascripts/app/Engine.js   | 16 ++++++++++++----
 website/source/stylesheets/_home.less      |  1 +
 website/source/stylesheets/_jumbotron.less | 12 ++++++++----
 website/source/stylesheets/_variables.less |  1 -
 website/source/stylesheets/main.css        |  7 ++++++-
 5 files changed, 27 insertions(+), 10 deletions(-)

diff --git a/website/source/javascripts/app/Engine.js b/website/source/javascripts/app/Engine.js
index 420c10ea1..613378b33 100644
--- a/website/source/javascripts/app/Engine.js
+++ b/website/source/javascripts/app/Engine.js
@@ -115,6 +115,12 @@ Engine = Base.extend({
 	},
 
 	setupEvents: function(){
+		if (window.innerWidth < 570) {
+			this.height = 560;
+		} else {
+			this.height = 700;
+		}
+
 		this.resize = this.resize.bind(this);
 		this.resize();
 		window.addEventListener('resize', this.resize, false);
@@ -134,16 +140,19 @@ Engine = Base.extend({
 	},
 
 	setupTessellation: function(canvas){
-		var size;
+		var size, offset;
 		this.shapes = [];
 		if (window.innerWidth < 570) {
 			size = 300;
+			offset = 0;
 		} else {
 			size = 360;
+			offset = 40;
 		}
+
 		this.logo = new Engine.Shape(
 			-(size / 2),
-			-(size / 2 + 40),
+			-(size / 2 + offset),
 			size,
 			size,
 			Logo.points,
@@ -184,7 +193,7 @@ Engine = Base.extend({
 			return;
 		}
 
-		if (this.scrollY > 700) {
+		if (this.scrollY > this.height) {
 			window.requestAnimationFrame(this.render);
 			return;
 		}
@@ -284,7 +293,6 @@ Engine = Base.extend({
 		var scale = this.scale;
 
 		this.width  = window.innerWidth;
-		this.height = 700;
 
 		this.canvas.width  = this.width  * scale;
 		this.canvas.height = this.height * scale;
diff --git a/website/source/stylesheets/_home.less b/website/source/stylesheets/_home.less
index 43856142b..4a1824f82 100755
--- a/website/source/stylesheets/_home.less
+++ b/website/source/stylesheets/_home.less
@@ -350,6 +350,7 @@
 					font-family: "Courier New", Monaco, Menlo, Consolas, monospace;
 					color: @white;
 					background-color: transparent;
+					overflow:auto;
 
 					.txt-r {
 						color: lighten(@red, 8%);;
diff --git a/website/source/stylesheets/_jumbotron.less b/website/source/stylesheets/_jumbotron.less
index 2b5821956..21edba78a 100755
--- a/website/source/stylesheets/_jumbotron.less
+++ b/website/source/stylesheets/_jumbotron.less
@@ -5,14 +5,14 @@
 #jumbotron-mask{
   position:relative;
   z-index:0;
-  height: @jumbotron-total-height;
+  height:700px;
   margin-top: @negative-hero-margin;
   background-color: black;
 }
 
 #jumbotron {
   position: relative;
-  height: @jumbotron-total-height;
+  height:700px;
   padding-top: 0;
   padding-bottom: 0;
   color: @jumbotron-color;
@@ -431,7 +431,11 @@
   }
 
   .animated-logo {
-    margin-top:-72px;
+    margin:-15px 0 0 -113px;
+  }
+
+  #jumbotron-mask,
+  #jumbotron {
+    height:560px;
   }
 }
-
diff --git a/website/source/stylesheets/_variables.less b/website/source/stylesheets/_variables.less
index 56ed68cfa..b15013de1 100755
--- a/website/source/stylesheets/_variables.less
+++ b/website/source/stylesheets/_variables.less
@@ -8,7 +8,6 @@
 
 @jumbotron-height:  		    804px;
 @header-height:  		   	    90px;
-@jumbotron-total-height: 	  700px; //jumbo+header
 @jumbotron-color:  			    #fff;
 @btn-border-radius:   		  4px;
 @el-border-radius:   		    6px;
diff --git a/website/source/stylesheets/main.css b/website/source/stylesheets/main.css
index 992072179..466b00e4e 100644
--- a/website/source/stylesheets/main.css
+++ b/website/source/stylesheets/main.css
@@ -933,7 +933,11 @@ body.page-home #footer {
     transform: translate3d(0, 0, 0) scale(0.8);
   }
   .animated-logo {
-    margin-top: -72px;
+    margin: -15px 0 0 -113px;
+  }
+  #jumbotron-mask,
+  #jumbotron {
+    height: 560px;
   }
 }
 .outline-btn {
@@ -1329,6 +1333,7 @@ body.page-home #footer {
   font-family: "Courier New", Monaco, Menlo, Consolas, monospace;
   color: #ffffff;
   background-color: transparent;
+  overflow: auto;
 }
 #demos .terminals .terminal-item .terminal .terminal-window .txt-r {
   color: #e47078;