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(){
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;

View File

@ -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%);;

View File

@ -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;
}
}

View File

@ -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;

View File

@ -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;