This commit is contained in:
Robin Hägg 2015-09-11 13:57:40 +02:00
parent 181795fcb2
commit 0c7e0693d3
9 changed files with 62 additions and 21 deletions

View File

@ -11,6 +11,11 @@
<meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta charset="utf-8" /> <meta charset="utf-8" />
<meta name="description" content="We design, install and support modern technology for the modern home. We offer many services including but not limited to Home Entertainment, Security and Intergation">
<meta name="keywords" content="Technology,Automation,Integration,Home">
<meta name="author" content="HomeTechnology">
<title>HomeTechnology</title>
<link type="text/css" rel="stylesheet" href="/css/main.css" /> <link type="text/css" rel="stylesheet" href="/css/main.css" />
<link href='//fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800' rel='stylesheet' type='text/css'> <link href='//fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800' rel='stylesheet' type='text/css'>
</head> </head>

View File

@ -13,8 +13,8 @@
<div class="col m-6 ratio-port"> <div class="col m-6 ratio-port">
<h2>Preparing your home for the future</h2> <h2>Preparing your home for the future</h2>
<h3>Working together to help you understand whats possible.</h3> <h3>Working together to help you understand whats possible.</h3>
<a class="bluebutton mtb nav" href="/services">What we do</a> <a class="bluebutton mtb nav" href="/services">Our Services</a>
<a class="bluebutton mtb nav" href="/process">How we do it</a> <a class="bluebutton mtb nav" href="/contact">Contact Us</a>
</div> </div>
<div class="col m-6 ratio-port"> <div class="col m-6 ratio-port">
<h4>Flexible and reliable</h4> <h4>Flexible and reliable</h4>

View File

@ -21,7 +21,7 @@
<li><a class="nav" href="/services/integration">Integration</a></li> <li><a class="nav" href="/services/integration">Integration</a></li>
</ul> </ul>
</div> </div>
<div class="col s-4 m-2 contact"> <div class="col s-4 m-3 contact">
<h3><a class="nav" href="/contact">Contact</a></h3> <h3><a class="nav" href="/contact">Contact</a></h3>
<ul> <ul>
<li><a class="nav" href="/contact">Email &amp; Phone</a></li> <li><a class="nav" href="/contact">Email &amp; Phone</a></li>

View File

@ -5,14 +5,17 @@ module.exports = {
"click nav": "toggle" "click nav": "toggle"
}, },
attach: function(){ attach: function(){
console.log("att")
$('.coverer').scroll(function(e){ $('.coverer').scroll(function(e){
console.log("Scroll")
e.preventDefault() e.preventDefault()
}) })
}, },
toggle: function() { toggle: function() {
$(window).scrollTop(); $(window).scrollTop();
this.$el.toggleClass('visible'); this.$el.toggleClass('visible');
if(this.$el.hasClass('visible')) {
$(document.body).css('overflow-y','hidden')
}else{
$(document.body).css('overflow-y','scroll')
}
} }
} }

View File

@ -3,8 +3,8 @@ module.exports = {
var thisView = this; var thisView = this;
this.ipadImgEl = $('img', this.el); this.ipadImgEl = $('img', this.el);
$(window).scroll(function(){ $(window).scroll(function(){
thisView.ipadImgEl.css('top', thisView.$el.height() - Math.min(Math.max(window.pageYOffset+(window.innerHeight/1.1) - thisView.$el.offset().top, 0),thisView.$el.height())) thisView.ipadImgEl.css('top', Math.max(thisView.$el.height() - Math.min(Math.max(window.pageYOffset+(window.innerHeight/1.1) - thisView.$el.offset().top, 0),thisView.$el.height()), thisView.$el.height() - thisView.ipadImgEl.height()))
console.log(Math.max(thisView.$el.height() - thisView.ipadImgEl.height(),0))
}) })
} }
}; };

Binary file not shown.

Before

Width:  |  Height:  |  Size: 113 KiB

After

Width:  |  Height:  |  Size: 99 KiB

View File

@ -8,6 +8,7 @@
background:$transblack; background:$transblack;
min-height:500px; min-height:500px;
height:100%; height:100%;
height:calc(100% - 150px);
.set-btm{ .set-btm{
width:100%; width:100%;
text-align: right; text-align: right;
@ -51,7 +52,15 @@
} }
.page.process { .page.process {
.bgel{position:fixed;top:0;width:100%;height:100%;@include backgrounder("process-background", "jpg", "no-repeat center/cover");} .bgel{
position:fixed;
top:0;
width:100%;
height:120vh;
@include backgrounder("process-background", "jpg", "no-repeat center/cover");
min-height:500px;
}
overflow:visible;
height:1%; height:1%;
width:100%; width:100%;
@ -162,7 +171,7 @@
* { color:$softwhite; } * { color:$softwhite; }
.splash { .splash {
height:100%; height:105vh;
min-height:500px; min-height:500px;
width:100%; width:100%;
position:fixed; position:fixed;
@ -172,7 +181,7 @@
} }
.splash-text { .splash-text {
position:absolute; position:absolute;
bottom:20%; bottom:23%;
left:0; left:0;
right:0; right:0;
text-align: center; text-align: center;
@ -183,7 +192,7 @@
} }
} }
.splashspacer{ .splashspacer{
height:100%; height:105vh;
min-height:500px; min-height:500px;
width:100%; width:100%;
} }
@ -588,7 +597,7 @@
} }
} }
.customers-say { .customers-say {
background:url(../img/customers-say.jpg) top/cover no-repeat; background:url(../img/customers-say.jpg) top left/cover no-repeat;
min-height:600px; min-height:600px;
height:50%; height:50%;
@include std-shadow-in; @include std-shadow-in;
@ -597,9 +606,11 @@
h2 { h2 {
@include std-shadow-text; @include std-shadow-text;
position:absolute; position:absolute;
bottom:5%; bottom:3%;
padding:5%; padding:3%;
color:$softwhite; color:$softwhite;
font-size:4em;
@media all and(max-width:900px){font-size: 2.8em;}
text-transform: uppercase; text-transform: uppercase;
} }
} }

View File

@ -62,7 +62,7 @@ html {
.snap-top-menu { .snap-top-menu {
@media all and(min-height:900px){ @media all and(min-height:900px){
margin-top:53px; margin-top:60px;
} }
padding:0 0 0 0; padding:0 0 0 0;
@ -99,6 +99,7 @@ html {
//Header //Header
header { header {
position:absolute; position:absolute;
top:0;
@media all and(min-height:900px){ @media all and(min-height:900px){
position:fixed; position:fixed;
} }
@ -106,7 +107,6 @@ header {
@include std-shadow; @include std-shadow;
background:$softblack; background:$softblack;
width:100%; width:100%;
padding-top:2px;
height:60px; height:60px;
display:inline-block; display:inline-block;
padding-right:3%; padding-right:3%;
@ -123,6 +123,27 @@ header {
padding: 0 15px; padding: 0 15px;
vertical-align:-50%; vertical-align:-50%;
&.current > a:before {
opacity:1;
}
> a {
font-variant:small-caps;
font-size: 1.1em;
font-weight:600 !important;
position:relative;
&:before {
position:absolute;
bottom:-3px;
left:5px;
right:5px;
content:" ";
border-bottom:1.7px solid $softwhite;
opacity:0;
transition:opacity 0.5s ease;
}
}
a { a {
font-weight: 600 !important; font-weight: 600 !important;
font-size: 1.1em; font-size: 1.1em;
@ -162,7 +183,7 @@ header {
position:fixed; position:fixed;
width:100%; width:100%;
height:100%; height:100%;
top:53px; top:60px;
left:0; left:0;
background:$transblack; background:$transblack;
} }
@ -172,9 +193,9 @@ header {
z-index:12; z-index:12;
display:block; display:block;
position:fixed; position:fixed;
top:53px; top:60px;
height:100%; height:100%;
background:tomato; background:$softerblack;
right:-100%; right:-100%;
transition:right 0.5s ease; transition:right 0.5s ease;
min-width:200px; min-width:200px;
@ -214,7 +235,7 @@ header {
//Default body styles //Default body styles
html,body{position:relative; height:100%;width:100%;} html,body{position:absolute; min-height:110vh;width:100%;}
body { body {
overflow-x: hidden; overflow-x: hidden;
overflow-y: scroll; overflow-y: scroll;
@ -224,6 +245,7 @@ body {
width: 100%; width: 100%;
min-height: 100%; min-height: 100%;
min-height: calc(100% - 60px); min-height: calc(100% - 60px);
min-height:110vh;
margin: -7px auto; margin: -7px auto;
> .page { > .page {
position:absolute; position:absolute;

View File

@ -69,7 +69,7 @@
box-shadow: 3px 3px 30px 0 rgba(0,0,0,.1); box-shadow: 3px 3px 30px 0 rgba(0,0,0,.1);
} }
@mixin std-shadow-text { @mixin std-shadow-text {
text-shadow: 3px 3px 30px rgba(0,0,0,.1); text-shadow: 3px 3px 10px rgba(0,0,0,.1);
} }
@mixin std-shadow-in { @mixin std-shadow-in {
box-shadow: inset 3px 3px 30px 0 rgba(0,0,0,.1); box-shadow: inset 3px 3px 30px 0 rgba(0,0,0,.1);