✨ Site > Improve responsive

2018-01-01 16:18:53 +01:00
parent fe0648a36f
commit 70a393b57f
6 changed files with 36 additions and 24 deletions
@@ -34,7 +34,6 @@
        <meta name="apple-mobile-web-app-title" content="Keppler">
        <meta name="application-name" content="Keppler">
        <meta name="theme-color" content="#ffffff">
-
    </head>
    <body>
        <!-- Header -->
@@ -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

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