From 70a393b57f10db63c1305aff560f3e8f40e3b3ff Mon Sep 17 00:00:00 2001 From: brunosimon Date: Mon, 1 Jan 2018 16:18:53 +0100 Subject: [PATCH] :sparkles: Site > Improve responsive --- site/index.html | 1 - site/src/javascript/Demo.js | 6 ++++++ site/src/javascript/index.js | 3 +++ site/src/style/base.styl | 33 +++++++++++++++++---------------- site/src/style/get-started.styl | 2 ++ site/src/style/header.styl | 15 ++++++++------- 6 files changed, 36 insertions(+), 24 deletions(-) diff --git a/site/index.html b/site/index.html index 662fd5f..675d238 100644 --- a/site/index.html +++ b/site/index.html @@ -34,7 +34,6 @@ - diff --git a/site/src/javascript/Demo.js b/site/src/javascript/Demo.js index 425b14e..c66c9d5 100644 --- a/site/src/javascript/Demo.js +++ b/site/src/javascript/Demo.js @@ -12,6 +12,9 @@ export default class Demo this.$speaker = this.$container.querySelector('.js-speaker') this.$speakerVideo = document.createElement('video') + this.$speakerVideo.playsinline = true + this.$speakerVideo.webkitPlaysinline = true + this.$speakerVideo.muted = true this.$speakerVideo.src = speaker this.$speakerVideo.height = 300 @@ -23,6 +26,9 @@ export default class Demo this.$audience = this.$container.querySelector('.js-audience') this.$audienceVideo = document.createElement('video') + this.$audienceVideo.playsinline = true + this.$audienceVideo.webkitPlaysinline = true + this.$audienceVideo.muted = true this.$audienceVideo.src = audience this.$audienceVideo.height = 300 diff --git a/site/src/javascript/index.js b/site/src/javascript/index.js index 8446f07..ef5a25a 100644 --- a/site/src/javascript/index.js +++ b/site/src/javascript/index.js @@ -5,6 +5,9 @@ export default class Site { constructor() { + this.isTouch = 'ontouchstart' in window || navigator.maxTouchPoints + document.documentElement.classList.add(this.isTouch ? 'touch' : 'no-touch') + this.demo = new Demo() this.scroll = new Scroll() } diff --git a/site/src/style/base.styl b/site/src/style/base.styl index 0bc5337..8dffe43 100644 --- a/site/src/style/base.styl +++ b/site/src/style/base.styl @@ -11,20 +11,21 @@ a .underline position relative - &::after - content '' - position absolute - display block - right 0 - bottom 0 - left 0 - height 1px - background #ffffff - transform scaleX(0) - transform-origin 0 0 - transition transform 0.3s cubic-bezier(0.75, 0, 0.58, 1) - will-change transform - - &:hover + .no-touch & &::after - transform scaleX(1) \ No newline at end of file + content '' + position absolute + display block + right 0 + bottom 0 + left 0 + height 1px + background #ffffff + transform scaleX(0) + transform-origin 0 0 + transition transform 0.3s cubic-bezier(0.75, 0, 0.58, 1) + will-change transform + + &:hover + &::after + transform scaleX(1) \ No newline at end of file diff --git a/site/src/style/get-started.styl b/site/src/style/get-started.styl index 25577e9..5668be3 100644 --- a/site/src/style/get-started.styl +++ b/site/src/style/get-started.styl @@ -179,10 +179,12 @@ section.get-started transform-origin 100% 50% @media (max-width: $breakpoints.l) + width 125% opacity 0.3 transform scale(0.75) @media (max-width: $breakpoints.m) + width 150% transform scale(0.5) .center diff --git a/site/src/style/header.styl b/site/src/style/header.styl index a4b9c1f..2077fb2 100644 --- a/site/src/style/header.styl +++ b/site/src/style/header.styl @@ -174,11 +174,11 @@ section.header transform scale(0.8) @media (max-width: $breakpoints.l) - top 455px + top 445px transform scale(0.6) @media (max-width: $breakpoints.m) - top 435px + top 425px transform scale(0.5) @media (max-width: $breakpoints.s) @@ -433,13 +433,14 @@ section.header transition transform 0.5s cubic-bezier(0.75, 0, 0.25, 1) will-change transform - &:hover - .hover - transform translateX(0%) - - .inner + .no-touch & + &:hover + .hover transform translateX(0%) + .inner + transform translateX(0%) + .scroll-button display block position absolute