Fixed mobile homepage

* Fixed the overflow problem
* Logo should now resize appropriately
* Tagline hidden on mobile
This commit is contained in:
Amadeus Demarzi 2014-07-27 18:31:30 -07:00
parent bf52c81454
commit fc24ee6f9c
5 changed files with 27 additions and 10 deletions

View File

@ -115,6 +115,12 @@ Engine = Base.extend({
}, },
setupEvents: function(){ setupEvents: function(){
if (window.innerWidth < 570) {
this.height = 560;
} else {
this.height = 700;
}
this.resize = this.resize.bind(this); this.resize = this.resize.bind(this);
this.resize(); this.resize();
window.addEventListener('resize', this.resize, false); window.addEventListener('resize', this.resize, false);
@ -134,16 +140,19 @@ Engine = Base.extend({
}, },
setupTessellation: function(canvas){ setupTessellation: function(canvas){
var size; var size, offset;
this.shapes = []; this.shapes = [];
if (window.innerWidth < 570) { if (window.innerWidth < 570) {
size = 300; size = 300;
offset = 0;
} else { } else {
size = 360; size = 360;
offset = 40;
} }
this.logo = new Engine.Shape( this.logo = new Engine.Shape(
-(size / 2), -(size / 2),
-(size / 2 + 40), -(size / 2 + offset),
size, size,
size, size,
Logo.points, Logo.points,
@ -184,7 +193,7 @@ Engine = Base.extend({
return; return;
} }
if (this.scrollY > 700) { if (this.scrollY > this.height) {
window.requestAnimationFrame(this.render); window.requestAnimationFrame(this.render);
return; return;
} }
@ -284,7 +293,6 @@ Engine = Base.extend({
var scale = this.scale; var scale = this.scale;
this.width = window.innerWidth; this.width = window.innerWidth;
this.height = 700;
this.canvas.width = this.width * scale; this.canvas.width = this.width * scale;
this.canvas.height = this.height * scale; this.canvas.height = this.height * scale;

View File

@ -350,6 +350,7 @@
font-family: "Courier New", Monaco, Menlo, Consolas, monospace; font-family: "Courier New", Monaco, Menlo, Consolas, monospace;
color: @white; color: @white;
background-color: transparent; background-color: transparent;
overflow:auto;
.txt-r { .txt-r {
color: lighten(@red, 8%);; color: lighten(@red, 8%);;

View File

@ -5,14 +5,14 @@
#jumbotron-mask{ #jumbotron-mask{
position:relative; position:relative;
z-index:0; z-index:0;
height: @jumbotron-total-height; height:700px;
margin-top: @negative-hero-margin; margin-top: @negative-hero-margin;
background-color: black; background-color: black;
} }
#jumbotron { #jumbotron {
position: relative; position: relative;
height: @jumbotron-total-height; height:700px;
padding-top: 0; padding-top: 0;
padding-bottom: 0; padding-bottom: 0;
color: @jumbotron-color; color: @jumbotron-color;
@ -431,7 +431,11 @@
} }
.animated-logo { .animated-logo {
margin-top:-72px; margin:-15px 0 0 -113px;
}
} }
#jumbotron-mask,
#jumbotron {
height:560px;
}
}

View File

@ -8,7 +8,6 @@
@jumbotron-height: 804px; @jumbotron-height: 804px;
@header-height: 90px; @header-height: 90px;
@jumbotron-total-height: 700px; //jumbo+header
@jumbotron-color: #fff; @jumbotron-color: #fff;
@btn-border-radius: 4px; @btn-border-radius: 4px;
@el-border-radius: 6px; @el-border-radius: 6px;

View File

@ -933,7 +933,11 @@ body.page-home #footer {
transform: translate3d(0, 0, 0) scale(0.8); transform: translate3d(0, 0, 0) scale(0.8);
} }
.animated-logo { .animated-logo {
margin-top: -72px; margin: -15px 0 0 -113px;
}
#jumbotron-mask,
#jumbotron {
height: 560px;
} }
} }
.outline-btn { .outline-btn {
@ -1329,6 +1333,7 @@ body.page-home #footer {
font-family: "Courier New", Monaco, Menlo, Consolas, monospace; font-family: "Courier New", Monaco, Menlo, Consolas, monospace;
color: #ffffff; color: #ffffff;
background-color: transparent; background-color: transparent;
overflow: auto;
} }
#demos .terminals .terminal-item .terminal .terminal-window .txt-r { #demos .terminals .terminal-item .terminal .terminal-window .txt-r {
color: #e47078; color: #e47078;