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-12 15:06:40 +02:00
parent 23879f81e5
commit bdbf73f9fc
12 changed files with 259 additions and 130 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
server/templates/master.dust
View File

@ -29,9 +29,9 @@
{>"partials/navigation":navigation page=page /} {>"partials/navigation":navigation page=page /}
</header> </header>
<div class="snap-top-menu snap-top-persistant" data-view="SnapTop"> <div class="snap-top-menu snap-top-persistant" data-view="SnapTop">
<a class="nav entertainment col m-3" href="services/entertainment">Entertainment</a> <div class="col s-3"><a class="nav entertainment" href="services/entertainment">Entertainment</a></div>
<a class="nav security col m-3" href="services/security">Security</a> <div class="col s-3"><a class="nav security" href="services/security">Security</a></div>
<a class="nav integration col m-3" href="services/integration">Integration</a> <div class="col s-3"><a class="nav integration" href="services/integration">Integration</a></div>
</div> </div>
<div class="prev-next" data-view="PrevNext"> <div class="prev-next" data-view="PrevNext">
<a class="next arrow"></a> <a class="next arrow"></a>

8
server/templates/pages/about.dust
View File

@ -17,7 +17,13 @@
</div> </div>
</div> </div>
<div class="col"> <div class="col">
SLideshow here <div class="row">
<div class="col m-8 l-7 xl-6 s-centered testimonials t1" data-view="TestimonialSlide">
<p>”We recently moved into our new house and invited three home entertainment companies to have a look at the set-up and come up with a proposal that fitted our needs. We chose HomeTechnology as they demonstrated the most enthusiasm and came up with innovative solutions where the other two companies only saw problems... the end product was of exceptional quality and HomeTechnology's attention to detail was clearly evident.”</p>
<img class="prevbtn" src="/img/prevbtn.svg">
<img class="nextbtn" src="/img/nextbtn.svg">
</div>
</div>
</div> </div>
<div class="col"> <div class="col">
{>"partials/footer"/} {>"partials/footer"/}

8
server/templates/pages/services.dust
View File

@ -1,9 +1,11 @@
<div class="row page services"> <div class="row page services">
<h1><span>Our Services</span></h1> <h1><span>Our Services</span></h1>
<div class="snap-top-static snap-top-menu"> <div class="snap-top-static snap-top-menu">
<a class="nav entertainment col m-3" href="services/entertainment">Entertainment</a> <div class="col s-3"><a class="nav entertainment" href="services/entertainment">Entertainment</a></div>
<a class="nav security col m-3" href="services/security">Security</a> <div class="col s-3"><a class="nav security" href="services/security">Security</a></div>
<a class="nav integration col m-3" href="services/integration">Integration</a> <div class="col s-3"><a class="nav integration" href="services/integration">Integration</a>
</div>
</div> </div>
<div class="biggie cinema"></div> <div class="biggie cinema"></div>
<div class="describe-service r"> <div class="describe-service r">

122
server/templates/pages/services/entertainment.dust
View File

@ -21,92 +21,94 @@
</div> </div>
</div> </div>
<div class="row six-display fade-mode t0-active" data-view="EntertainmentSlider"> <div class="row six-display fade-mode t0-active" data-view="EntertainmentSlider">
<div class="col s-12 m-6 l-4 t1 tt"> <div class="hover-wrap">
<div class="back"> <div class="col s-12 m-6 l-4 t1 tt">
<h3>Audio Visual</h3> <div class="back">
<p>From high fidelity audio to Ultra HD video, our team have a wealth of experience in supplying, installing and supporting the very best whole-home audio visual systems on the market. Ease of operation is an integral part of every setup, whilst maintaining a clean and unobtrusive design that will allow you to experience music and film exactly as the creators intended.</p> <h3>Audio Visual</h3>
<p>From high fidelity audio to Ultra HD video, our team have a wealth of experience in supplying, installing and supporting the very best whole-home audio visual systems on the market. Ease of operation is an integral part of every setup, whilst maintaining a clean and unobtrusive design that will allow you to experience music and film exactly as the creators intended.</p>
</div>
<div class="front">
<h3>Audio Visual</h3>
<p>Like you've never seen it before</p>
</div>
</div> </div>
<div class="front"> <div class="col s-12 m-6 l-4 t2 tt">
<h3>Audio Visual</h3> <div class="back">
<p>Like you've never seen it before</p> <h3>Multiroom Audio</h3>
<p>The ability to move freely around your home whilst listening to your favourite music is a fantastic addition to any property. Seamless incorporation of audio equipment with wireless functionality provides a refined listening experience that’s extremely simple to use, and enjoyable to share with friends and family.</p>
</div>
<div class="front">
<h3>Multiroom Audio</h3>
<p>Your music, all around your home</p>
</div>
</div> </div>
</div> <div class="col s-12 m-6 l-4 t3 tt">
<div class="col s-12 m-6 l-4 t2 tt"> <div class="back">
<div class="back"> <h3>Media</h3>
<h3>Multiroom Audio</h3> <p>The things we watch, listen to and share with friends and family define personal entertainment. We believe that these things should be available all the time and everywhere you go, and as such, develop our media distribution systems to present your favourite digital content, all around your home, at the touch of a button.</p>
<p>The ability to move freely around your home whilst listening to your favourite music is a fantastic addition to any property. Seamless incorporation of audio equipment with wireless functionality provides a refined listening experience that’s extremely simple to use, and enjoyable to share with friends and family.</p> </div>
<div class="front">
<h3>Media</h3>
<p>Access your favourite content, everywhere</p>
</div>
</div> </div>
<div class="front"> <div class="col s-12 m-6 l-4 t4 tt">
<h3>Multiroom Audio</h3> <div class="back">
<p>Your music, all around your home</p> <h3>Bespoke Design</h3>
<p>All of our entertainment services require detailed custom planning and support, but if you have something extraordinary in mind, we can work with you to make this a reality, the only limit is your imagination. Delivery has to be met with perfection, minimising spatial presence and maximising user enjoyment.</p>
</div>
<div class="front">
<h3>Bespoke Design</h3>
<p>Customised to perfection</p>
</div>
</div> </div>
</div> <div class="col s-12 m-6 l-4 t5 tt">
<div class="col s-12 m-6 l-4 t3 tt"> <div class="back">
<div class="back"> <h3>Cinema</h3>
<h3>Media</h3> <p>Our immersive media rooms combine awe-inspiring visuals with breathtaking audio to make sure you see every detail and feel every moment. By working with the finest suppliers of cinema equipment, perfectly suited to your budget, our team can deliver a system that not only impresses, but defies belief.</p>
<p>The things we watch, listen to and share with friends and family define personal entertainment. We believe that these things should be available all the time and everywhere you go, and as such, develop our media distribution systems to present your favourite digital content, all around your home, at the touch of a button.</p> </div>
<div class="front">
<h3>Cinema</h3>
<p>Ultra-HD is just the beginning</p>
</div>
</div> </div>
<div class="front"> <div class="col s-12 m-6 l-4 t6 tt">
<h3>Media</h3> <div class="back">
<p>Access your favourite content, everywhere</p> <h3>Control</h3>
</div> <p>Technology is only as useful as it is usable, and even complex systems can be intricately designed so that front-end control is simple and user-friendly. We offer varying levels of control with our entertainment setups and can supply you with a fully programmed ‘Smart Control’ or replace conventional remotes with dedicated app support, empowering your smartphone or tablet.</p>
</div> </div>
<div class="col s-12 m-6 l-4 t4 tt"> <div class="front">
<div class="back"> <h3>Control</h3>
<h3>Bespoke Design</h3> <p>Simple, yet powerful</p>
<p>All of our entertainment services require detailed custom planning and support, but if you have something extraordinary in mind, we can work with you to make this a reality, the only limit is your imagination. Delivery has to be met with perfection, minimising spatial presence and maximising user enjoyment.</p> </div>
</div>
<div class="front">
<h3>Bespoke Design</h3>
<p>Customised to perfection</p>
</div>
</div>
<div class="col s-12 m-6 l-4 t5 tt">
<div class="back">
<h3>Cinema</h3>
<p>Our immersive media rooms combine awe-inspiring visuals with breathtaking audio to make sure you see every detail and feel every moment. By working with the finest suppliers of cinema equipment, perfectly suited to your budget, our team can deliver a system that not only impresses, but defies belief.</p>
</div>
<div class="front">
<h3>Cinema</h3>
<p>Ultra-HD is just the beginning</p>
</div>
</div>
<div class="col s-12 m-6 l-4 t6 tt">
<div class="back">
<h3>Control</h3>
<p>Technology is only as useful as it is usable, and even complex systems can be intricately designed so that front-end control is simple and user-friendly. We offer varying levels of control with our entertainment setups and can supply you with a fully programmed ‘Smart Control’ or replace conventional remotes with dedicated app support, empowering your smartphone or tablet.</p>
</div>
<div class="front">
<h3>Control</h3>
<p>Simple, yet powerful</p>
</div> </div>
</div> </div>
<div class="col slide-container"> <div class="col slide-container">
<div class="t0-slide slide"> <div class="t0-slide slide">
<h3>Click any of the categories above</h3> <h3><span>Click any of the categories above</span></h3>
</div> </div>
<div class="t1-slide slide"> <div class="t1-slide slide">
<h3>Audio Visual</h3> <h3><span>Audio Visual</span></h3>
<p>From high fidelity audio to Ultra HD video, our team have a wealth of experience in supplying, installing and supporting the very best whole-home audio visual systems on the market. Ease of operation is an integral part of every setup, whilst maintaining a clean and unobtrusive design that will allow you to experience music and film exactly as the creators intended.</p> <p>From high fidelity audio to Ultra HD video, our team have a wealth of experience in supplying, installing and supporting the very best whole-home audio visual systems on the market. Ease of operation is an integral part of every setup, whilst maintaining a clean and unobtrusive design that will allow you to experience music and film exactly as the creators intended.</p>
</div> </div>
<div class="t2-slide slide"> <div class="t2-slide slide">
<h3>Multiroom Audio</h3> <h3><span>Multiroom Audio</span></h3>
<p>The ability to move freely around your home whilst listening to your favourite music is a fantastic addition to any property. Seamless incorporation of audio equipment with wireless functionality provides a refined listening experience that’s extremely simple to use, and enjoyable to share with friends and family.</p> <p>The ability to move freely around your home whilst listening to your favourite music is a fantastic addition to any property. Seamless incorporation of audio equipment with wireless functionality provides a refined listening experience that’s extremely simple to use, and enjoyable to share with friends and family.</p>
</div> </div>
<div class="t3-slide slide"> <div class="t3-slide slide">
<h3>Media</h3> <h3><span>Media</span></h3>
<p>The things we watch, listen to and share with friends and family define personal entertainment. We believe that these things should be available all the time and everywhere you go, and as such, develop our media distribution systems to present your favourite digital content, all around your home, at the touch of a button.</p> <p>The things we watch, listen to and share with friends and family define personal entertainment. We believe that these things should be available all the time and everywhere you go, and as such, develop our media distribution systems to present your favourite digital content, all around your home, at the touch of a button.</p>
</div> </div>
<div class="t4-slide slide"> <div class="t4-slide slide">
<h3>Bespoke Design</h3> <h3><span>Bespoke Design</span></h3>
<p>All of our entertainment services require detailed custom planning and support, but if you have something extraordinary in mind, we can work with you to make this a reality, the only limit is your imagination. Delivery has to be met with perfection, minimising spatial presence and maximising user enjoyment.</p> <p>All of our entertainment services require detailed custom planning and support, but if you have something extraordinary in mind, we can work with you to make this a reality, the only limit is your imagination. Delivery has to be met with perfection, minimising spatial presence and maximising user enjoyment.</p>
</div> </div>
<div class="t5-slide slide"> <div class="t5-slide slide">
<h3>Cinema</h3> <h3><span>Cinema</span></h3>
<p>Our immersive media rooms combine awe-inspiring visuals with breathtaking audio to make sure you see every detail and feel every moment. By working with the finest suppliers of cinema equipment, perfectly suited to your budget, our team can deliver a system that not only impresses, but defies belief.</p> <p>Our immersive media rooms combine awe-inspiring visuals with breathtaking audio to make sure you see every detail and feel every moment. By working with the finest suppliers of cinema equipment, perfectly suited to your budget, our team can deliver a system that not only impresses, but defies belief.</p>
</div> </div>
<div class="t6-slide slide"> <div class="t6-slide slide">
<h3>Control</h3> <h3><span>Control</span></h3>
<p>Technology is only as useful as it is usable, and even complex systems can be intricately designed so that front-end control is simple and user-friendly. We offer varying levels of control with our entertainment setups and can supply you with a fully programmed ‘Smart Control’ or replace conventional remotes with dedicated app support, empowering your smartphone or tablet.</p> <p>Technology is only as useful as it is usable, and even complex systems can be intricately designed so that front-end control is simple and user-friendly. We offer varying levels of control with our entertainment setups and can supply you with a fully programmed ‘Smart Control’ or replace conventional remotes with dedicated app support, empowering your smartphone or tablet.</p>
</div> </div>
</div> </div>

1
src/js/app.js
View File

@ -16,5 +16,6 @@ $(function() {
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) + 'px !important;}</style>') $(document.head).append('<style> .splash,.splashspacer{height: ' + Math.max(window.innerHeight) + 'px !important;}</style>')
console.log(app)
}); });

11
src/js/views/entertainment-slider.js
View File

@ -28,5 +28,16 @@ module.exports = {
removeClass('t5-active'). removeClass('t5-active').
removeClass('t6-active'). removeClass('t6-active').
addClass(name + '-active') addClass(name + '-active')
//Scroll into view
if(window.innerHeight > 900){
$pct = $('.slide-container');
var $win = $('body,html,main');
var minScrollVal = $pct.offset().top + 200 - window.innerHeight;
$win.animate({scrollTop: minScrollVal}, 500)
}
},
initialize: function(){
this.$el.removeClass('fade-mode')
} }
}; };

3
src/js/views/index.js
View File

@ -9,5 +9,6 @@ module.exports = {
EntertainmentSlider: require('./entertainment-slider'), EntertainmentSlider: require('./entertainment-slider'),
PrevNext: require('./prev-next'), PrevNext: require('./prev-next'),
Scroll2Me: require('./scroll2me'), Scroll2Me: require('./scroll2me'),
BurgerHover: require('./burger-hover') BurgerHover: require('./burger-hover'),
TestimonialSlide: require('./testimonial-slide')
}; };

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

@ -44,15 +44,17 @@ module.exports = {
}, },
onRouteChange: function(route, params) onRouteChange: function(route, params)
{ {
var path = "/" + params[0]; var path = "/" + (params[0] || "");
if(this.notVisibleOn.indexOf(path) != -1) //If this is a subpage to services if(this.notVisibleOn.indexOf(path) != -1) //If this is a subpage to services
this.$el.hide() this.$el.hide()
else else
this.$el.show() this.$el.show()
console.log(this.lastPath)
//Valet shit //Valet shit
if((this.notVisibleOn.indexOf(path) != -1 || path == '/services') && (this.notVisibleOn.indexOf(this.lastPath) != -1 || this.lastPath == '/services')) if((this.notVisibleOn.indexOf(path) != -1 || path == '/services') && (this.notVisibleOn.indexOf(this.lastPath) != -1 || this.lastPath == '/services' || this.lastPath == '/'))
{ {
$(document.body).removeClass('anim-fade anim-neg anim-pos') $(document.body).removeClass('anim-fade anim-neg anim-pos')
$(document.body).addClass('anim-fade') $(document.body).addClass('anim-fade')

6
src/js/views/snap-top.js
View File

@ -15,7 +15,7 @@ module.exports = {
thisView.$el.addClass('fixed') thisView.$el.addClass('fixed')
$sts.addClass('hidden') $sts.addClass('hidden')
} }
else { else if(!thisView.blockRemove){
thisView.$el.removeClass('fixed') thisView.$el.removeClass('fixed')
$sts.removeClass('hidden') $sts.removeClass('hidden')
} }
@ -31,7 +31,9 @@ module.exports = {
this.forceHidden = false; this.forceHidden = false;
if(params[0] == 'services/integration' || params[0] == 'services/security' || params[0] == 'services/entertainment'){ if(params[0] == 'services/integration' || params[0] == 'services/security' || params[0] == 'services/entertainment'){
var thisView = this; var thisView = this;
setTimeout(function(){thisView.$el.addClass('fixed')},500) thisView.blockRemove = true;
thisView.$el.addClass('fixed')
setTimeout(function(){thisView.blockRemove = false},1000)
}else{ }else{
this.$el.removeClass('fixed') this.$el.removeClass('fixed')
} }

BIN
src/raster/customers-say.jpg
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 99 KiB

After

Width:  |  Height:  |  Size: 81 KiB

188
src/sass/_content.scss
View File

@ -75,8 +75,8 @@
.page.process { .page.process {
@include backgrounder("process-background", "jpg", "no-repeat center/cover"); @include backgrounder("process-background", "jpg", "no-repeat center/cover");
height:1%;
width:100%; width:100%;
min-height: 125%;
.process-band { .process-band {
@include std-shadow; @include std-shadow;
@ -98,7 +98,7 @@
line-height:70px; line-height:70px;
text-align:center; text-align:center;
text-transform:uppercase; text-transform:uppercase;
@include underlineH(33%, $softwhite); @include underlineH(40%, $softwhite);
} }
} }
@ -133,6 +133,7 @@
h1 { h1 {
text-align:center; text-align:center;
text-transform: uppercase; text-transform: uppercase;
font-size: 2.7em;
span { span {
@include underlineH(25%, $softblack); @include underlineH(25%, $softblack);
} }
@ -145,7 +146,6 @@
clear:both; clear:both;
@include std-shadow-in; @include std-shadow-in;
&.cinema {@include backgrounder("services-home-background-cinema", "jpg", "center/cover no-repeat");} &.cinema {@include backgrounder("services-home-background-cinema", "jpg", "center/cover no-repeat");}
&.audio {@include backgrounder("services-home-background-audio", "jpg", "center/cover no-repeat");} &.audio {@include backgrounder("services-home-background-audio", "jpg", "center/cover no-repeat");}
&.security {@include backgrounder("services-home-background-security", "jpg", "center/cover no-repeat");} &.security {@include backgrounder("services-home-background-security", "jpg", "center/cover no-repeat");}
@ -240,21 +240,24 @@
height:320px; height:320px;
border:1px solid $softwhite; border:1px solid $softwhite;
padding:0; padding:0;
cursor:pointer;
.front, .back { .front, .back {
height:320px; height:320px;
position:absolute; position:absolute;
height:100%; height:100%;
width:100%; width:100%;
overflow:hidden;
} }
.back *{color:$softblack;} .back *{color:$softblack;}
.front { .front {
h3, p{margin:0;background:$transblack;} h3, p{margin:0;background:$transblack;}
h3 { h3 {
margin-top:100px; margin-top:0;
padding-top:20px; padding-top:120px;
text-transform: uppercase;
} }
p { p {
padding-bottom:20px; padding-bottom:150px;
} }
} }
&.t1 .front{background:url(/img/t1.jpg) no-repeat center/cover;} &.t1 .front{background:url(/img/t1.jpg) no-repeat center/cover;}
@ -264,45 +267,107 @@
&.t5 .front{background:url(/img/t5.jpg) no-repeat center/cover;} &.t5 .front{background:url(/img/t5.jpg) no-repeat center/cover;}
&.t6 .front{background:url(/img/t6.jpg) no-repeat center/cover;} &.t6 .front{background:url(/img/t6.jpg) no-repeat center/cover;}
} }
} .hover-wrap:hover{
.tt:hover {
.six-display.flip-mode { h3 {
.slide-container {display:none;} margin-top:100px;
.back,.front { padding-top:20px;
//Flip animation }
backface-visibility:hidden; p {
transform-style: preserve-3d; padding-bottom:20px;
transition:transform 0.3s ease; }
transform:rotateX(0deg) rotateY(0deg); }
} }
.t1 .back,.t3 .back,.t5 .back {transform:rotateX(180deg);}
.t2 .back,.t4 .back,.t6 .back {transform:rotateY(180deg);}
&.t1-active { &.t1-active {
.t1 .front {transform:rotateX(180deg);} .hover-wrap:not(:hover){
.t1 .back {transform:rotateX(0deg);} .t1{
h3{margin-top:100px;padding-top:20px;}
p{padding-bottom:20px;}
}
}
} }
&.t2-active { &.t2-active {
.t2 .front {transform:rotateY(180deg);} .hover-wrap:not(:hover){
.t2 .back {transform:rotateY(0deg);} .t2{
h3{margin-top:100px;padding-top:20px;}
p{padding-bottom:20px;}
}
}
} }
&.t3-active { &.t3-active {
.t3 .front {transform:rotateX(180deg);} .hover-wrap:not(:hover){
.t3 .back {transform:rotateX(0deg);} .t3{
h3{margin-top:100px;padding-top:20px;}
p{padding-bottom:20px;}
}
}
} }
&.t4-active { &.t4-active {
.t4 .front {transform:rotateY(180deg);} .hover-wrap:not(:hover){
.t4 .back {transform:rotateY(0deg);} .t4{
h3{margin-top:100px;padding-top:20px;}
p{padding-bottom:20px;}
}
}
} }
&.t5-active { &.t5-active {
.t5 .front {transform:rotateX(180deg);} .hover-wrap:not(:hover){
.t5 .back {transform:rotateX(0deg);} .t5{
h3{margin-top:100px;padding-top:20px;}
p{padding-bottom:20px;}
}
}
} }
&.t6-active { &.t6-active {
.t6 .front {transform:rotateY(180deg);} .hover-wrap:not(:hover){
.t6 .back {transform:rotateY(0deg);} .t6{
h3{margin-top:100px;padding-top:20px;}
p{padding-bottom:20px;}
}
}
} }
} }
@media all and(max-height: 900px){
.six-display:not(.fade-mode) {
.slide-container {display:none;}
.back,.front {
//Flip animation
backface-visibility:hidden;
transform-style: preserve-3d;
transition:transform 0.3s ease;
transform:rotateX(0deg) rotateY(0deg);
}
.t1 .back,.t3 .back,.t5 .back {transform:rotateX(180deg);}
.t2 .back,.t4 .back,.t6 .back {transform:rotateY(180deg);}
&.t1-active {
.t1 .front {transform:rotateX(180deg);}
.t1 .back {transform:rotateX(0deg);}
}
&.t2-active {
.t2 .front {transform:rotateY(180deg);}
.t2 .back {transform:rotateY(0deg);}
}
&.t3-active {
.t3 .front {transform:rotateX(180deg);}
.t3 .back {transform:rotateX(0deg);}
}
&.t4-active {
.t4 .front {transform:rotateY(180deg);}
.t4 .back {transform:rotateY(0deg);}
}
&.t5-active {
.t5 .front {transform:rotateX(180deg);}
.t5 .back {transform:rotateX(0deg);}
}
&.t6-active {
.t6 .front {transform:rotateY(180deg);}
.t6 .back {transform:rotateY(0deg);}
}
}
}
.six-display.fade-mode { .six-display.fade-mode {
.slide-container {display:none;} .slide-container {display:none;}
.tt .front {transition:opacity 0.3s;} .tt .front {transition:opacity 0.3s;}
@ -314,7 +379,7 @@
.t6:hover .front {opacity:0;} .t6:hover .front {opacity:0;}
} }
.six-display.slide-mode { .six-display {
.slide-container { .slide-container {
padding:0; padding:0;
overflow:hidden; overflow:hidden;
@ -325,7 +390,12 @@
position:absolute; position:absolute;
width:100%; width:100%;
transition:left 0.3s; transition:left 0.3s;
> * { h3{
text-transform: uppercase;
span{@include underlineH(25%, $softblack);}
margin-bottom:25px;
}
* {
color:$softblack; color:$softblack;
text-align: center; text-align: center;
} }
@ -411,6 +481,9 @@
padding-right:5%; padding-right:5%;
margin-top:10%; margin-top:10%;
margin-bottom:10%; margin-bottom:10%;
h3 {
margin-top:10px;
}
} }
padding:5%; padding:5%;
} }
@ -476,6 +549,10 @@
* { * {
color:$softblack; color:$softblack;
} }
@media all and(max-width:640px){
&:nth-child(even) {background:$chillwhite !important;}
&:nth-child(odd) {background:$softwhite !important;}
}
h3 { h3 {
margin-top:0; margin-top:0;
font-size: 1em; font-size: 1em;
@ -491,7 +568,7 @@
} }
&:hover img { &:hover img {
margin-top:1%; margin-top:8%;
} }
&:hover p { &:hover p {
@ -522,6 +599,7 @@
} }
.camera { .camera {
padding:5%;
background:url(/img/axis-camera-big2.png) left top/contain no-repeat $softwhite; background:url(/img/axis-camera-big2.png) left top/contain no-repeat $softwhite;
.camera-space { .camera-space {
min-height:200px; min-height:200px;
@ -534,23 +612,16 @@
} }
} }
.page.markets { .page.markets {
height:1%; height:1%;
.head-splash { .head-splash {
//@include backgrounder("markets-background-header", "jpg", "no-repeat top/cover"); //@include backgrounder("markets-background-header", "jpg", "no-repeat top/cover");
@include std-shadow-in; @include std-shadow-in;
background:url(../img/testcover.jpg) no-repeat bottom/cover; background:url(../img/markets-background-full.jpg) no-repeat bottom/cover;
padding:4%; padding:4%;
text-align: center; text-align: center;
h1,a{color:$softwhite;font-weight:600;} h1,a{color:$softwhite;font-weight:600;}
h1{@include std-shadow-text;} h1{@include std-shadow-text;font-size:2.7em;}
.slide-picker { .slide-picker {
@include std-shadow; @include std-shadow;
margin:auto; margin:auto;
@ -600,7 +671,7 @@
} }
} }
h1 { h1 {
font-size:3.5em; font-size:2.7em;
margin-bottom:50px; margin-bottom:50px;
strong { strong {
color: $htblue; color: $htblue;
@ -617,12 +688,31 @@
h2 { h2 {
@include std-shadow-text; @include std-shadow-text;
position:absolute; position:absolute;
bottom:3%; bottom:0;
padding:3%; padding:2%;
color:$softwhite; color:$softwhite;
font-size:4em; font-size:2.7em;
@media all and(max-width:900px){font-size: 2.8em;} }
text-transform: uppercase; }
.testimonials {
padding:5%;
p {font-style: italic;}
.prevbtn,.nextbtn {
width:30px;
height:30px;
@media all and(min-width:640px){
position:absolute;
top:50%;
top:calc(50% - 15px);
}
}
.nextbtn {
float:right;
@media all and(min-width:640px){right:-60px;}
}
.prevbtn {
float:right;
@media all and(min-width:640px){left:-60px;}
} }
} }
} }
@ -635,7 +725,7 @@
} }
} }
h1 { h1 {
font-size:3.5em; font-size:2.7em;
margin-bottom:50px; margin-bottom:50px;
strong { strong {
color: $htblue; color: $htblue;

30
src/sass/_layout.scss
View File

@ -42,6 +42,7 @@ html {
cursor:pointer; cursor:pointer;
display:inline-block; display:inline-block;
width:150px; width:150px;
@media all and(max-width:400px){width:135px;}
line-height:45px; line-height:45px;
text-align: center; text-align: center;
font-size:1.1em; font-size:1.1em;
@ -101,17 +102,28 @@ html {
padding:0 0 0 0; padding:0 0 0 0;
background:$softerwhite; background:$softerwhite;
a { .col{
line-height:40px;
vertical-align:middle;
text-align:center;
width:33%; width:33%;
margin:0 0; margin:0 0;
display:inline-block; display:inline-block;
font-size:1.5em; text-align:center;
text-transform:uppercase; height:40px;
@media all and (max-width:640px) { a {
font-size:3.5vw; position:relative;
line-height:40px;
vertical-align:middle;
font-size:1.5em;
text-transform:uppercase;
img {display:none;}
@media all and (max-width:640px) {
font-size:3.5vw;
}
@media all and (min-width:800px) {
padding-left:35px;
&.entertainment{background:url(/img/icon-entertainment-black.svg) left/contain no-repeat;}
&.security{background:url(/img/icon-security-black.svg) left/contain no-repeat;}
&.integration{background:url(/img/icon-integration-black.svg) left/contain no-repeat;}
}
} }
} }
&.fixed { &.fixed {
@ -355,7 +367,7 @@ body {
footer { footer {
background:$softblack; background:$softblack;
border-top:2px solid $softwhite; border-top:2px solid $softwhite;
padding:2.5%; padding:2%;
*:not(.company-name):not(strong) {font-weight:500;} *:not(.company-name):not(strong) {font-weight:500;}
h3, h2, *:not(li) > a { h3, h2, *:not(li) > a {
color:$softwhite; color:$softwhite;