furk4ngg/keppler
1
1
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

✨ Site > Improve responsive

Browse Source
This commit is contained in:
brunosimon
2018-01-01 16:18:53 +01:00
parent fe0648a36f
commit 70a393b57f
6 changed files with 36 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files
site/index.html
-1
View File
@@ -34,7 +34,6 @@
<meta name="apple-mobile-web-app-title" content="Keppler"> <meta name="apple-mobile-web-app-title" content="Keppler">
<meta name="application-name" content="Keppler"> <meta name="application-name" content="Keppler">
<meta name="theme-color" content="#ffffff"> <meta name="theme-color" content="#ffffff">
</head> </head>
<body> <body>
<!-- Header --> <!-- Header -->
site/src/javascript/Demo.js
+6
View File
@@ -12,6 +12,9 @@ export default class Demo
this.$speaker = this.$container.querySelector('.js-speaker') this.$speaker = this.$container.querySelector('.js-speaker')
this.$speakerVideo = document.createElement('video') this.$speakerVideo = document.createElement('video')
this.$speakerVideo.playsinline = true
this.$speakerVideo.webkitPlaysinline = true
this.$speakerVideo.muted = true
this.$speakerVideo.src = speaker this.$speakerVideo.src = speaker
this.$speakerVideo.height = 300 this.$speakerVideo.height = 300
@@ -23,6 +26,9 @@ export default class Demo
this.$audience = this.$container.querySelector('.js-audience') this.$audience = this.$container.querySelector('.js-audience')
this.$audienceVideo = document.createElement('video') this.$audienceVideo = document.createElement('video')
this.$audienceVideo.playsinline = true
this.$audienceVideo.webkitPlaysinline = true
this.$audienceVideo.muted = true
this.$audienceVideo.src = audience this.$audienceVideo.src = audience
this.$audienceVideo.height = 300 this.$audienceVideo.height = 300
site/src/javascript/index.js
+3
View File
@@ -5,6 +5,9 @@ export default class Site
{ {
constructor() constructor()
{ {
this.isTouch = 'ontouchstart' in window || navigator.maxTouchPoints
document.documentElement.classList.add(this.isTouch ? 'touch' : 'no-touch')
this.demo = new Demo() this.demo = new Demo()
this.scroll = new Scroll() this.scroll = new Scroll()
} }
site/src/style/base.styl
+17 -16
View File
@@ -11,20 +11,21 @@ a
.underline .underline
position relative position relative
&::after .no-touch &
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 &::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
+2
View File
@@ -179,10 +179,12 @@ section.get-started
transform-origin 100% 50% transform-origin 100% 50%
@media (max-width: $breakpoints.l) @media (max-width: $breakpoints.l)
width 125%
opacity 0.3 opacity 0.3
transform scale(0.75) transform scale(0.75)
@media (max-width: $breakpoints.m) @media (max-width: $breakpoints.m)
width 150%
transform scale(0.5) transform scale(0.5)
.center .center
site/src/style/header.styl
+8 -7
View File
@@ -174,11 +174,11 @@ section.header
transform scale(0.8) transform scale(0.8)
@media (max-width: $breakpoints.l) @media (max-width: $breakpoints.l)
top 455px top 445px
transform scale(0.6) transform scale(0.6)
@media (max-width: $breakpoints.m) @media (max-width: $breakpoints.m)
top 435px top 425px
transform scale(0.5) transform scale(0.5)
@media (max-width: $breakpoints.s) @media (max-width: $breakpoints.s)
@@ -433,13 +433,14 @@ section.header
transition transform 0.5s cubic-bezier(0.75, 0, 0.25, 1) transition transform 0.5s cubic-bezier(0.75, 0, 0.25, 1)
will-change transform will-change transform
&:hover .no-touch &
.hover &:hover
transform translateX(0%) .hover
.inner
transform translateX(0%) transform translateX(0%)
.inner
transform translateX(0%)
.scroll-button .scroll-button
display block display block
position absolute position absolute