✨ 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,6 +11,7 @@ a
 .underline
    position relative

+    .no-touch &
        &::after
            content ''
            position absolute
@@ -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,6 +433,7 @@ section.header
                transition transform 0.5s cubic-bezier(0.75, 0, 0.25, 1)
                will-change transform

+        .no-touch &
            &:hover
                .hover
                    transform translateX(0%)