lkm/stomping-grounds
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

fuck

Browse Source
This commit is contained in:
Robin Hägg 2015-09-11 17:20:26 +02:00
parent efce4fa2dc
commit 23879f81e5
7 changed files with 113 additions and 61 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
server/templates/master.dust
View File

@ -7,7 +7,7 @@
<meta property="og: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 property="og: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 property="og:type" content="website" /> <meta property="og:type" content="website" />
<meta name="viewport" content="width=device-width,initial-scale=1" /> <meta name="viewport" content="initial-scale=1" />
<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" />
@ -33,7 +33,10 @@
<a class="nav security col m-3" href="services/security">Security</a> <a class="nav security col m-3" href="services/security">Security</a>
<a class="nav integration col m-3" href="services/integration">Integration</a> <a class="nav integration col m-3" href="services/integration">Integration</a>
</div> </div>
<div class="prev-next" data-view="PrevNext"></div> <div class="prev-next" data-view="PrevNext">
<a class="next arrow"></a>
<a class="prev arrow"></a>
</div>
<main> <main>
{?error} {?error}

88
server/templates/pages/markets.dust
View File

@ -8,60 +8,54 @@
</nav> </nav>
</div> </div>
<div class="slide-container col s-12 m-10 l-8 s-centered"> <div class="slide-container col s-12 m-10 l-8 s-centered">
<div class="col s-12 homeowners slide active"> <div class="homeowners slide active">
<div class="row"> <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 what’s possible.</h3>
<h3>Working together to help you understand what’s possible.</h3> <a class="bluebutton mtb nav" href="/services">Our Services</a>
<a class="bluebutton mtb nav" href="/services">Our Services</a> <a class="bluebutton mtb nav" href="/contact">Contact Us</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> <p>We design our systems to adapt to your requirements whist ensuring dependability, and we work to the same exacting standards.</p>
<p>We design our systems to adapt to your requirements whist ensuring dependability, and we work to the same exacting standards.</p> <h4>Communication is key</h4>
<h4>Communication is key</h4> <p>Full disclosure at every stage of your project allow us to be more efficient and effective at what we do, and keeps you better informed in the process.</p>
<p>Full disclosure at every stage of your project allow us to be more efficient and effective at what we do, and keeps you better informed in the process.</p> <h4>Unrivalled support</h4>
<h4>Unrivalled support</h4> <p>Looking after your equipment once we’ve finished is an integral part of our service, keeping you and your system fully up to date.</p>
<p>Looking after your equipment once we’ve finished is an integral part of our service, keeping you and your system fully up to date.</p>
</div>
</div> </div>
</div> </div>
<div class="col s-12 developers slide"> <div class="developers slide">
<div class="row"> <div class="col m-6 ratio-port">
<div class="col m-6 ratio-port"> <h2>Taking projects from inception to completion</h2>
<h2>Taking projects from inception to completion</h2> <h3>Our ability to work alongside your team increases efficiency.</h3>
<h3>Our ability to work alongside your team increases efficiency.</h3> <a class="bluebutton mtb nav" href="/contact">Contact us</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>Spanning all markets</h4>
<h4>Spanning all markets</h4> <p>We work in a variety of demanding sectors, transferring the comfort, usability and functionally that you would expect at home, to projects all over the world.</p>
<p>We work in a variety of demanding sectors, transferring the comfort, usability and functionally that you would expect at home, to projects all over the world.</p> <h4>Time management</h4>
<h4>Time management</h4> <p>Diligent planning and effective communication allows us to deliver the required technology on schedule, increasing job efficiency and productivity.</p>
<p>Diligent planning and effective communication allows us to deliver the required technology on schedule, increasing job efficiency and productivity.</p> <h4>Exceptional results</h4>
<h4>Exceptional results</h4> <p>Good quality cabling infrastructure is at the heart of our installs, and gives you the capacity to raise or lower the specification, whilst future-proofing the property in process.</p>
<p>Good quality cabling infrastructure is at the heart of our installs, and gives you the capacity to raise or lower the specification, whilst future-proofing the property in process.</p>
</div>
</div> </div>
</div> </div>
<div class="col s-12 designers slide"> <div class="designers slide">
<div class="row"> <div class="col m-6 ratio-port">
<div class="col m-6 ratio-port"> <h2>Beautiful system design, seamlessly integrated</h2>
<h2>Beautiful system design, seamlessly integrated</h2> <h3>Even cables can look good, whether visible or hidden</h3>
<h3>Even cables can look good, whether visible or hidden</h3> <a class="bluebutton mtb nav" href="/contact">Contact us</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>Complimenting your vision</h4>
<h4>Complimenting your vision</h4> <p>We work closely with interior designers to ensure that the technology perfectly matches the decor, for a modern look and sleek finish.</p>
<p>We work closely with interior designers to ensure that the technology perfectly matches the decor, for a modern look and sleek finish.</p> <h4>Client consultation</h4>
<h4>Client consultation</h4> <p>Technology exists in a variety of different styles, it’s important that it not only looks great but functions exactly as intended - this is achieved through detailed client consultation at every stage of the project.</p>
<p>Technology exists in a variety of different styles, it’s important that it not only looks great but functions exactly as intended - this is achieved through detailed client consultation at every stage of the project.</p> <h4>Quality through design</h4>
<h4>Quality through design</h4> <p>Our experience in selecting the correct products for the desired application paired with meticulous attention to detail results in immaculate installations, perfectly placed.</p>
<p>Our experience in selecting the correct products for the desired application paired with meticulous attention to detail results in immaculate installations, perfectly placed.</p>
</div>
</div> </div>
</div> </div>
</div> </div>
<div class="col"> <div class="col">
{>"partials/footer"/} {>"partials/footer"/}
</div> </div>
</div> </div>

2
src/js/app.js
View File

@ -15,6 +15,6 @@ $(function() {
app.burger = new app.views.BurgerHover({ el: $('header') }); app.burger = new app.views.BurgerHover({ el: $('header') });
Backbone.history.start({ silent: true, pushState: true }); Backbone.history.start({ silent: true, pushState: true });
$(document.head).append('<style> .splash,.splashspacer{height: ' + Math.max(window.innerHeight, window.innerWidth) + 'px !important;}</style>') $(document.head).append('<style> .splash,.splashspacer{height: ' + Math.max(window.innerHeight) + 'px !important;}</style>')
}); });

2
src/js/views/burger-hover.js
View File

@ -12,7 +12,7 @@ module.exports = {
toggle: function() { toggle: function() {
$(window).scrollTop(); $(window).scrollTop();
this.$el.toggleClass('visible'); this.$el.toggleClass('visible');
if(this.$el.hasClass('visible')) { if(this.$el.hasClass('visible') && window.innerWidth <= 800) {
$(document.body).css('overflow-y','hidden') $(document.body).css('overflow-y','hidden')
}else{ }else{
$(document.body).css('overflow-y','scroll') $(document.body).css('overflow-y','scroll')

2
src/js/views/prev-next.js
View File

@ -22,6 +22,8 @@ module.exports = {
thisView.next() thisView.next()
} }
}); });
}, },
attach: function() attach: function()
{ {

36
src/sass/_content.scss
View File

@ -19,15 +19,37 @@
* { color:$softwhite; } * { color:$softwhite; }
h1 { h1 {
margin-top:0; margin-top:0;
font-size:7vw;
font-weight: 600; font-weight: 600;
@media all and(max-width:800px){font-size:10vw;} font-size: 5em;
@media all and (min-width:100px){font-size:10px;}
@media all and (min-width:150px){font-size:12px;}
@media all and (min-width:200px){font-size:16px;}
@media all and (min-width:250px){font-size:20px;}
@media all and (min-width:300px){font-size:30px;}
@media all and (min-width:400px){font-size:40px;}
@media all and (min-width:500px){font-size:50px;}
@media all and (min-width:640px){font-size:50px;}
@media all and (min-width:740px){font-size:60px;}
@media all and (min-width:880px){font-size:70px;}
@media all and (min-width:1000px){font-size:80px;}
@media all and (min-width:1440px){font-size:120px;}
} }
h2 { h2 {
font-size:3vw;
border-right:2px solid $htblue; border-right:2px solid $htblue;
padding-right:2%; padding-right:2%;
@media all and(max-width:800px){font-size:5vw;} font-size: 3em;
@media all and (min-width:100px){font-size:5px;}
@media all and (min-width:150px){font-size:6px;}
@media all and (min-width:200px){font-size:8px;}
@media all and (min-width:250px){font-size:10px;}
@media all and (min-width:300px){font-size:15px;}
@media all and (min-width:400px){font-size:20px;}
@media all and (min-width:500px){font-size:25px;}
@media all and (min-width:640px){font-size:25px;}
@media all and (min-width:740px){font-size:30px;}
@media all and (min-width:880px){font-size:35px;}
@media all and (min-width:1000px){font-size:40px;}
@media all and (min-width:1440px){font-size:60px;}
} }
} }
@ -183,7 +205,7 @@
} }
} }
.splashspacer{ .splashspacer{
margin-top:-50px; margin-top:-75px;
min-height:600px; min-height:600px;
width:100%; width:100%;
} }
@ -561,9 +583,7 @@
.slide { .slide {
opacity:0; opacity:0;
transition: opacity 1s ease,z-index 0s linear 1s; transition: opacity 1s ease,z-index 0s linear 1s;
margin:auto; &.homeowners,&.developers {position:absolute;top:0;}
&.homeowners, &.developers {position:absolute;top:0;}
&.active { &.active {
opacity:1; opacity:1;
z-index:1; z-index:1;

37
src/sass/_layout.scss
View File

@ -59,7 +59,41 @@ html {
} }
} }
} }
.prev-next {
.arrow {
cursor: pointer;
position:absolute;
top:50vh;
height:60px;
width:60px;
border-radius:100%;
text-align: center;
opacity: 0.6;
transition: transform 0.3s linear;
z-index:2;
}
.prev {
left:40px;
background:url(/img/prev-arrow.svg) center/cover;
}
.next {
right:40px;
background:url(/img/next-arrow.svg) center/cover;
}
@media all and(orientation:portrait) {
.prev{transform:rotateX(90deg) !important}
.next{transform:rotateX(90deg) !important}
}
@media all and(max-width:1440px) {
.prev{transform:rotateX(90deg) !important}
.next{transform:rotateX(90deg) !important}
}
.hidden {
&.prev{transform:rotateX(90deg) !important}
&.next{transform:rotateX(90deg) !important}
}
}
.snap-top-menu { .snap-top-menu {
@media all and(min-height:900px){ @media all and(min-height:900px){
margin-top:60px; margin-top:60px;
@ -94,7 +128,6 @@ html {
&.snap-top-static.hidden { &.snap-top-static.hidden {
opacity:0; opacity:0;
} }
display:none;
} }
//Header //Header
@ -264,7 +297,7 @@ body {
} }
&.anim-fade .page { &.anim-fade .page {
&.animate { &.animate {
transition: opacity 0.5s ease-out; transition: opacity 0.5s linear;
position: absolute; position: absolute;
} }
&.leave { &.leave {