Fixed mobile homepage
* Fixed the overflow problem * Logo should now resize appropriately * Tagline hidden on mobile
This commit is contained in:
parent
bf52c81454
commit
fc24ee6f9c
|
@ -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;
|
||||||
|
|
|
@ -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%);;
|
||||||
|
|
|
@ -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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
|
@ -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;
|
||||||
|
|
|
@ -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;
|
||||||
|
|
Loading…
Reference in New Issue