From 859e702235cb162dfb06cce5e88a90466d200585 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Robin=20H=C3=A4gg?= Date: Sun, 13 Sep 2015 14:13:54 +0200 Subject: [PATCH] fuck --- server/templates/pages/about.dust | 2 +- .../pages/services/entertainment.dust | 24 ++-- .../templates/pages/services/integration.dust | 8 +- server/templates/pages/services/security.dust | 2 +- src/js/views/entertainment-slider.js | 22 ++- src/sass/_content.scss | 128 +++++++++++------- src/sass/_layout.scss | 14 +- 7 files changed, 121 insertions(+), 79 deletions(-) diff --git a/server/templates/pages/about.dust b/server/templates/pages/about.dust index bab115b..4a51e75 100644 --- a/server/templates/pages/about.dust +++ b/server/templates/pages/about.dust @@ -2,7 +2,7 @@
-

Fresh new ideas &
ways of thinking

+

Fresh new ideas &
ways of thinking

Remaining at the forefront of home technology is an integral aspect of providing a great service. This allows us to offer cutting-edge solutions to a variety of applications, future-proofing yourself and your property for years to come. We thrive on challenging ourselves to design systems that not only meet your expectations, but blows them away.

diff --git a/server/templates/pages/services/entertainment.dust b/server/templates/pages/services/entertainment.dust index 7338e7b..ce221a9 100644 --- a/server/templates/pages/services/entertainment.dust +++ b/server/templates/pages/services/entertainment.dust @@ -15,7 +15,7 @@
-
+

Entertainment

There are many different elements that make for great entertainment. Our expertise in perfectly matching the correct level of technology to the application leaves you with a personalised, unique setup that you’ll never want to turn off. Have a look at what we do below.

@@ -58,7 +58,7 @@
-
+

Bespoke Design

@@ -82,7 +82,7 @@
-
+

Control

@@ -131,13 +131,17 @@

Entertainment technology, expertly tailored to your project

-
-

Immersion through design

-

Entertainment technology can be perfectly crafted and professionally delivered to provide you and your property with a system that will grab your attention and not let go of it until the end. Captivation is key, contact us to experience it for yourself.

-
-
-

Personalised support

-

Every installation we complete comes with unlimited support for one year, free of charge. Our dedicated helpline is always open, even on weekends, so whatever your query, we’re always happy to help. To learn more about our aftercare services, get in touch.

+
+
+
+

Immersion through design

+

Entertainment technology can be perfectly crafted and professionally delivered to provide you and your property with a system that will grab your attention and not let go of it until the end. Captivation is key, contact us to experience it for yourself.

+
+
+

Personalised support

+

Every installation we complete comes with unlimited support for one year, free of charge. Our dedicated helpline is always open, even on weekends, so whatever your query, we’re always happy to help. To learn more about our aftercare services, get in touch.

+
+
Get Started diff --git a/server/templates/pages/services/integration.dust b/server/templates/pages/services/integration.dust index c94ed2d..ab3638d 100644 --- a/server/templates/pages/services/integration.dust +++ b/server/templates/pages/services/integration.dust @@ -15,7 +15,7 @@
-
+

Integration

We’re working closely with homeowners, property developers and interior designers to future-proof the next generation of housing. Integration is a process that enables audio, video, security, lighting and much more to interact together in harmony; increasing usability, reliability, energy efficiency and saleability in the process.

@@ -49,13 +49,13 @@

Whole home control, single app

Audio Visual

- Choose your room, select what you want to watch or listen to and sit back and enjoy your entertainment, at the touch of a button. +

Choose your room, select what you want to watch or listen to and sit back and enjoy your entertainment, at the touch of a button.

Security

- View live camera feeds, lockup remotely or speak with someone at the gate. We can help keep your home within reach, wherever you are in the world. +

View live camera feeds, lockup remotely or speak with someone at the gate. We can help keep your home within reach, wherever you are in the world.

Lighting & Climate

- Discover the wonders of intelligent lighting and smart climate control, drastically improving your home’s energy efficiency in the process. +

Discover the wonders of intelligent lighting and smart climate control, drastically improving your home’s energy efficiency in the process.

Contact Us
diff --git a/server/templates/pages/services/security.dust b/server/templates/pages/services/security.dust index 90d0ddf..49474ce 100644 --- a/server/templates/pages/services/security.dust +++ b/server/templates/pages/services/security.dust @@ -15,7 +15,7 @@
-
+

Security

Whole home security is all about correct coverage, ensuring your home has the right detection mechanisms for the property type. The security systems we supply, install and look after are designed to interact with one another, offering unbeatable protection whilst keeping you fully informed.

diff --git a/src/js/views/entertainment-slider.js b/src/js/views/entertainment-slider.js index 8c827a9..b50d5f7 100644 --- a/src/js/views/entertainment-slider.js +++ b/src/js/views/entertainment-slider.js @@ -43,16 +43,26 @@ module.exports = { return (myNav.indexOf('msie') != -1) ? parseInt(myNav.split('msie')[1]) : false; } - if(window.innerHeight > 900 && window.innerWidth > 1024 && !isIE()){ - this.$el.removeClass('fade-mode') - } var thisView = this; - $( window ).resize(function() { - if(window.innerHeight > 900 && window.innerWidth > 1024 && !isIE()){ - thisView.$el.removeClass('fade-mode') + if(window.innerHeight > 900 && window.innerWidth > 1024){ + thisView.$el.removeClass('fade-mode').removeClass('flip-mode') + }else{ + if(!isIE()) { + thisView.$el.removeClass('fade-mode').addClass('flip-mode') }else{ thisView.$el.addClass('fade-mode') } + } + $( window ).resize(function() { + if(window.innerHeight > 900 && window.innerWidth > 1024){ + thisView.$el.removeClass('fade-mode').removeClass('flip-mode') + }else{ + if(!isIE()) { + thisView.$el.removeClass('fade-mode').addClass('flip-mode') + }else{ + thisView.$el.addClass('fade-mode') + } + } }) } }; diff --git a/src/sass/_content.scss b/src/sass/_content.scss index d4f836b..b98323a 100644 --- a/src/sass/_content.scss +++ b/src/sass/_content.scss @@ -75,6 +75,9 @@ .page.process { @include backgrounder("process-background", "jpg", "no-repeat center/cover"); + @media all and(orientation:portrait){ + @include backgrounder("process-background-portrait", "jpg", "no-repeat center/cover"); + } width:100%; min-height: 125%; @@ -131,9 +134,10 @@ .page.services { h1 { + margin-top:50px; text-align:center; text-transform: uppercase; - font-size: 2.7em; + font-size: 2.5em; span { @include underlineH(25%, $softblack); } @@ -193,8 +197,9 @@ position:absolute; } .splash-text { + *{@include std-shadow-text;} position:absolute; - bottom:23%; + bottom:20%; left:0; right:0; text-align: center; @@ -224,6 +229,19 @@ } } } + .content-row { + .intro{ + h2 { + font-weight:600; + color:$softerwhite; + } + p { + font-weight:600; + color:$softerwhite; + } + margin-bottom:5%; + } + } } .entertainment { @@ -234,16 +252,20 @@ background:$softwhite; border:1px solid $softwhite; .tt { - height:320px; + height:325px; border:1px solid transparent; padding:0; cursor:pointer; .front, .back { - height:320px; + height:325px; position:absolute; height:100%; width:100%; overflow:hidden; + p{ + padding-left:2%; + padding-right:2%; + } } .back *{color:$softblack;} .front { @@ -336,58 +358,44 @@ .t6:hover .front {opacity:0;} } .six-display.flip-mode { - .flip-container { - perspective: 1000; - } - .flip-container:hover .flipper, .flip-container.hover .flipper { - transform: rotateY(180deg); - } + .slide-container {display:none;} + .flip-container {perspective: 1000;} + // .flip-container:hover .flipper, .flip-container.hover .flipper {transform: rotateY(180deg);} + // .vertical.flip-container:hover .flipper {transform: rotateX(-180deg);} + &.t1-active {.t1 .flipper{transform: rotateY(180deg);}} + &.t2-active {.t2 .flipper{transform: rotateX(-180deg);}} + &.t3-active {.t3 .flipper{transform: rotateY(180deg);}} + &.t4-active {.t4 .flipper{transform: rotateX(-180deg);}} + &.t5-active {.t5 .flipper{transform: rotateY(180deg);}} + &.t6-active {.t6 .flipper{transform: rotateX(-180deg);}} .flipper { transition: 0.6s; transform-style: preserve-3d; - position: absolute; top:0; bottom:0; left:0; right:0; - } .front, .back { backface-visibility: hidden; - position: absolute; top: 0; left: 0; } .front { z-index: 2; - /* for firefox 31 */ transform: rotateY(0deg); } - .back { - transform: rotateY(180deg); - } + .back {transform: rotateY(180deg);} + .vertical.flip-container {position: relative;} + .vertical .back {transform: rotateX(180deg);} + .vertical.flip-container .flipper {transform-origin: 100% 50%; /* half of height */} - .vertical.flip-container { - position: relative; - } - - .vertical .back { - transform: rotateX(180deg); - } - - .vertical.flip-container .flipper { - transform-origin: 100% 50%; /* half of height */ - } - - .vertical.flip-container:hover .flipper { - transform: rotateX(-180deg); - } } - .six-display { + .six-display:not(.flip-mode) { .slide-container { padding:0; overflow:hidden; @@ -398,6 +406,8 @@ position:absolute; width:100%; transition:left 0.3s; + padding-left:9%; + padding-right:9%; h3{ text-transform: uppercase; span{@include underlineH(25%, $softblack);} @@ -509,16 +519,15 @@ * {color:$softblack;} h3 { @include underlineH(40%, $softblack); - margin-bottom:5%; + margin-bottom:9%; } } - .ff3 {background:url(/img/ff3.jpg) no-repeat center/cover;} - .ff4 {background:url(/img/ff4.jpg) no-repeat center/cover;} + .ff3 {background:url(/img/ff3.jpg) no-repeat top/cover;} + .ff4 {background:url(/img/ff4.jpg) no-repeat top left/cover;} .how-we-build { background:$softwhite; img { - margin-top:50px; width:50px; height:50px; border-radius:5px; @@ -527,7 +536,8 @@ * {color:$softblack;} h3{font-size:3.5em;} h4{font-size:2em;margin-bottom:50px;} - h5{font-size:1.5em;} + h5{font-size:1.5em;margin-top:10px;} + >.col {margin-bottom:25px;} } .whole-home-control { background:url(/img/room-integration.jpg) center/cover no-repeat; @@ -538,6 +548,14 @@ padding:3%; h3 { font-size:2.7em; + @include std-shadow-text; + } + h4 { + font-size:1.9em; + @include std-shadow-text; + } + p { + max-width:90%; } .ipad { min-height:450px; @@ -546,7 +564,7 @@ top:0; margin-top:50px; transition:top 1s; - width:80%; + width:95%; } } } @@ -627,13 +645,13 @@ text-align: left; h2 { font-weight:100; - font-size:2.7em; + font-size:2.5em; margin-bottom:50px; } *{color:$softblack;} } .bluebutton { - margin-top:100px; + margin-top:80px; } } } @@ -644,10 +662,11 @@ //@include backgrounder("markets-background-header", "jpg", "no-repeat top/cover"); @include std-shadow-in; background:url(../img/markets-background-full.jpg) no-repeat bottom/cover; - padding:4%; + padding:3.5%; text-align: center; h1,a{color:$softwhite;font-weight:600;} - h1{@include std-shadow-text;font-size:2.7em;} + h1{@include std-shadow-text;font-size:2.2em;} + .slide-picker { @include std-shadow; margin:auto; @@ -664,8 +683,8 @@ line-height:40px; border-radius: 9px; font-weight:600; - @media all and (max-width:400px){ - width:50%; + @media all and (max-width:450px){ + width:80%; } &.active { background:$hardblue; @@ -679,11 +698,15 @@ position:relative; .slide { opacity:0; - transition: opacity 1s ease,z-index 0s linear 1s; + transition: opacity 0.5s ease,z-index 0s linear 0.5s,transform 0.2s; + h2{font-weight:600;} + .bluebutton{margin-bottom:5px;} &.homeowners,&.developers {position:absolute;top:0;} + transform: scalex(98/100) scaley(98/100); &.active { opacity:1; z-index:1; + transform: scalex(1) scaley(1); } } } @@ -697,8 +720,7 @@ } } h1 { - font-size:2.7em; - margin-bottom:50px; + font-size:2.5em; strong { color: $htblue; font-weight: 500; @@ -717,15 +739,17 @@ bottom:0; padding:2%; color:$softwhite; - font-size:2.7em; + font-size:2.5em; } } .testimonials { padding:5%; p {font-style: italic;} .prevbtn,.nextbtn { - width:30px; - height:30px; + width:40px; + height:40px; + cursor:pointer; + margin-bottom:20px; @media all and(min-width:640px){ position:absolute; top:50%; @@ -737,7 +761,7 @@ @media all and(min-width:640px){right:-60px;} } .prevbtn { - float:right; + float:left; @media all and(min-width:640px){left:-60px;} } } diff --git a/src/sass/_layout.scss b/src/sass/_layout.scss index 1e34e72..6cb5bce 100644 --- a/src/sass/_layout.scss +++ b/src/sass/_layout.scss @@ -65,7 +65,7 @@ html { .arrow { cursor: pointer; position:absolute; - top:50vh; + top:55vh; height:60px; width:60px; border-radius:100%; @@ -102,13 +102,14 @@ html { } padding:0 0 0 0; - background:$softerwhite; + background:$softwhite; .col{ width:33%; margin:0 0; display:inline-block; text-align:center; height:40px; + padding:0; a { position:relative; line-height:40px; @@ -116,15 +117,16 @@ html { 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;} } + @media all and (max-width:600px) {font-size:20px;} + @media all and (max-width:500px) {font-size:15px;} + @media all and (max-width:400px) {font-size:12px;} + @media all and (max-width:321px) {font-size:10px;} } } &.fixed { @@ -134,6 +136,7 @@ html { } &.snap-top-persistant { z-index:9; + @include std-shadow; &:not(.fixed){ display:none; } @@ -198,6 +201,7 @@ header { line-height:55px; &:hover { color:$htblue-solid !important; + &:before{border-bottom:1.7px solid $htblue-solid;} } } &:first-child { padding-left: 0; }