Merge pull request #11 from jh3y/develop

Resolve #10

package.json

@@ -1,6 +1,6 @@
 {
   "name": "doormat",
-  "version": "3.0.0",
+  "version": "3.1.0",
   "description": "an alternative way to navigate through your site content",
   "devDependencies": {
     "autoprefixer": "^6.0.3",
@@ -25,7 +25,7 @@
     "watch:markup": "jade -wP src/jade -O doormat.config.json -o public",
     "build:markup": "jade -P src/jade -O doormat.config.json -o public",
     "publish:markup": "jade src/jade/index.jade -O doormat.config.json -o public",
-    "prewatch:dev": "mkdir public public/css",
+    "setup": "npm install && mkdir public public/css",
     "watch:dev": "npm run watch:markup & npm run watch:scripts & npm run watch:styles",
     "build:dev": "npm run build:scripts && npm run build:styles && npm run build:markup",
     "serve": "browser-sync start --port 1987 --files public/ --server public",

src/coffee/doormat.coffee

@@ -36,16 +36,18 @@ Doormat = window.Doormat = (delay) ->
     sumHeight = 0
     i         = 0
 
+    clientHeight = if ('onorientationchange' of window) then screen.height else window.innerHeight
+
     while i < doormat.panels.length
       panel = doormat.panels[i]
       # NOTE:: Required for window resizing behaviour but also so
       # we can use the ~ selector in our CSS to stop content flashing
       panel.style.display   = 'block'
-      panel.style.minHeight = window.innerHeight + 'px'
+      panel.style.minHeight = clientHeight + 'px'
       panel.style.top       = '0px'
       panel.DOORMAT_HEIGHT  = panel.offsetHeight
       if (i + 1) isnt doormat.panels.length and props.DELAY isnt 0
-        panel.DOORMAT_HEIGHT = panel.DOORMAT_HEIGHT + (window.innerHeight * (props.DELAY / 100))
+        panel.DOORMAT_HEIGHT = panel.DOORMAT_HEIGHT + (clientHeight * (props.DELAY / 100))
       panel.DOORMAT_POS     = sumHeight
       sumHeight = sumHeight + panel.DOORMAT_HEIGHT
       i++
@@ -70,7 +72,10 @@ Doormat = window.Doormat = (delay) ->
         setNew props.PREVIOUS
 
   # Bind window interaction events
-  window.onresize = calibratePanels
+  if ('onorientationchange' of window)
+    window.onorientationchange = calibratePanels
+  else
+    window.onresize = calibratePanels
   window.onscroll = handleScroll
 
   # Initialize doormat instance.

src/stylus/dev.styl

@@ -33,18 +33,12 @@ body
 code
   color $red
 
-.cntnt-wrppr
-  display flex
-  align-items center
-  justify-content center
-  position absolute
-  top 0
-  right 0
-  bottom 0
-  left 0
+
 
 .cntnt
   max-width 90%
+  padding   50px
+  margin    0 auto
 
 .fa
   position absolute