✨ Site > Improve responsive

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
 

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()
     }

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)
+            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)

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

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