diff --git a/scripts/script.js b/scripts/script.js index 291618d..a924d99 100755 --- a/scripts/script.js +++ b/scripts/script.js @@ -1,9 +1,9 @@ -var domSlides = document.querySelectorAll('section.slide'), - url = document.location, - slides = [], - backhash = {}, +var url = document.location, + domSlides = document.querySelectorAll('section.slide'), + slides = [], backhash = {}, linkScreen = document.querySelector('link[title=screen]'), - linkProjection = document.querySelector('link[title=projection]'); + linkProjection = document.querySelector('link[title=projection]'), + fullscreen = false; for(var i = 0, len = domSlides.length; i < len; i++) { var id = domSlides[i].id; @@ -11,15 +11,20 @@ for(var i = 0, len = domSlides.length; i < len; i++) { backhash['#' + id] = i; } -function fullScreen() { - return window.screenX == 0 && - window.screenY == 0 && - screen.width == window.outerWidth && - screen.height == window.outerHeight; +function enterFull() { + fullscreen = true; + updateView(); +} + +function exitFull(e) { + if(e.which == 27) { + fullscreen = false; + updateView(); + } } function turnSlide(e) { - if(!fullScreen()) return; + if(!fullscreen) return; var current = backhash[url.hash], target, command; @@ -46,12 +51,11 @@ function turnSlide(e) { } function updateView() { - var fullscreen = fullScreen(); linkScreen.disabled = fullscreen; linkProjection.disabled = !fullscreen; if(fullscreen && !backhash[url.hash]) url.hash = slides[0]; } -window.addEventListener('DOMContentLoaded', updateView, false); -window.addEventListener('resize', updateView, false); -document.addEventListener('keyup', turnSlide, false); \ No newline at end of file +document.addEventListener('keyup', turnSlide, false); +domSlides[0].addEventListener('click', enterFull, false); +document.addEventListener('keyup', exitFull, false); \ No newline at end of file diff --git a/styles/projection.css b/styles/projection.css index 7af80ee..aa3d386 100755 --- a/styles/projection.css +++ b/styles/projection.css @@ -15,15 +15,15 @@ A { /* Basic Font-Size ---------------------------------------- */ -@media all and ( min-device-height:240px ) { BODY { font-size:15px } } -@media all and ( min-device-height:480px ) { BODY { font-size:30px } } -@media all and ( min-device-height:600px ) { BODY { font-size:38px } } -@media all and ( min-device-height:768px ) { BODY { font-size:48px } } -@media all and ( min-device-height:800px ) { BODY { font-size:50px } } -@media all and ( min-device-height:900px ) { BODY { font-size:56px } } -@media all and ( min-device-height:1024px ) { BODY { font-size:64px } } -@media all and ( min-device-height:1050px ) { BODY { font-size:66px } } -@media all and ( min-device-height:1200px ) { BODY { font-size:75px } } +@media ( min-height:240px ) { BODY { font-size:15px } } +@media ( min-height:480px ) { BODY { font-size:30px } } +@media ( min-height:600px ) { BODY { font-size:38px } } +@media ( min-height:768px ) { BODY { font-size:48px } } +@media ( min-height:800px ) { BODY { font-size:50px } } +@media ( min-height:900px ) { BODY { font-size:56px } } +@media ( min-height:1024px ) { BODY { font-size:64px } } +@media ( min-height:1050px ) { BODY { font-size:66px } } +@media ( min-height:1200px ) { BODY { font-size:75px } } /* H ÷ 16 ≈ Font-Size */ diff --git a/styles/screen.css b/styles/screen.css index c05768a..f0d77f0 100755 --- a/styles/screen.css +++ b/styles/screen.css @@ -29,6 +29,27 @@ A { -moz-border-radius:10px; border-radius:10px; } +.slide:first-child { + cursor:pointer; + } + .slide:first-child:after { + position:absolute; + top:50%; + left:50%; + margin:-75px 0 0 -75px; + width:150px; + height:150px; + background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAJYAAACWCAMAAAAL34HQAAABoVBMVEX///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////+lpaVRUVHt7e2urq4kJCT8/PwqKirz8/Ph4eHn5+fPz8+NjY0SEhI2NjYMDAzV1dV7e3tpaWmWlpZaWlpjY2Ofn5+3t7eEhIRISEhFRUUDAwPS0tK6urotLS0eHh4bGxu0tLQwMDDJyckPDw/AwMD29vb5+fkJCQne3t54eHhsbGzk5ORmZmaBgYFgYGCTk5OZmZldXV1XV1c/Pz9+fn7///8AAADb29tycnKcnJwGBgbw8PAYGBhLS0urRoz6AAAATXRSTlMA8+oemRjwhFr5A8P8zGn22xtUFWAGsQmBvUI/59iHk3gze8AnjQyWdVfeLckwxn7hJCFy7ZwSRbfk0opjn89vtKg2q5A81TlID126UUtzOooAAAUfSURBVHhezNfJjrJAFIZhC0sEBMUyxnmORKPGKMZh47DpTfdVffb0/1fdfQEaCqhT9LNh+6Y4p5LKpTUSQ85LnufZgP37KXE+FKNcdqrW4OjjCf84sKrak2qC+4jkc1HT17Tov0Bar7/Qck7hGTGdwwJtU2N+RSLXeYMsKggNJGaEAUnUvrlDKrviXv1ITRlSY1O1i1kfV6BEZVxXV3XoQZneQVFU4Qalbipuf+fCoBi7OGmrthMQmGzTVVkmSJhWmgXkIMMTr2R+CULLfLKqVRekuqskVR0GYqwTv0rYIGeLuFVlFxq45XhVTWiyjlO1Bv5gVxkaSf9H4UIj902uqm1DK7stdYua0MyUeLIVDGhnRD7YnBYy0HIisorIRDFi3F1kwm0TDBbdeMkPlv7xmiFDs2dVG4YMsc2TrFdI+f8OEq3HVRbk3L8+vkHBelQVnGSz7vd/nyBwCh5kNX+YN7eepoIoCu+2cNSQ2DaeFJPW8gI2UdPwwIuhfQN5opWrFryAqKgoVq33+xkV9Vcb4wkr6QtnZq8ZXL/gS3oya++1V5PsWMbsPw3zqJZzVljGbK3xv/qyDGsiscQym3efs7kmZEiFUzZYqfauskev4ZW2kVhgQV8ekCOAoQyy6IZldm91mVjFUZd5BlhQ/8OyrwlnPG+PBa08JE4S4wLFiQsW1OH5USzQmBLLHLxaJWGNgWoyccWCft0hcU0eYtUVWNAGx4/qh1jTKizo0zoBa1pSLSRaLPjRCz3XQoo1pcaClvR+NJVinSNgQfdvKLGupC6dcLDgR8rhtYA0i4AF9W4v6xOvCg0LevRMgVWRv8oTsaDOS3dfxBNPxzKDm6uah75FxoIeLzpitTCXErGgjWtOWA1MD1QsaHvdcYqIvGKZzev2fhThMWVjQUtPHB7Uqjcs6J6tH1UlDoBldi3DlFjO+sSCeh/t9p+2Xyxo38KP2lLxjQV9Xsvuis1wWGbwNWOY0pRSACxoL5sflaQWBAv6ksWPahIFwoK2uxme+VxwLNM/0o9ykoTDglZ2juDiYNFt8j/9ETmfPHsEiyTPwGIPrDXOc8oe70tyiYHFXoaaIa26Y2HVlMGGvWi3OWMgO5Y4EWhofm05NHNWDHbkVeUsZOyAsMBZX8lxauR92X/vtOyTohFyVN8gBUnkw0bLY+x2oIvdZEaPxT2azbAiXe6JseIpAO8zAnD+uaDLOBfIBTUW9dhfkn+aU2NRqxFzKda8GotaJJlnnzm33jDPnDKrxWKWlGbx90wtFrPSdZFZOPjOKhw0ifUMYl0w5pVZdphlFlL1B0EHv4c3WnTFetul9sqGOsQjllhIQqkaoZTwFuklPH1lcfDOf2VRysXjL3gWywLZ1pJwwWGrriwP98KVh4+/av2nmjvITRgGwjA6QELMhJTSqoLQIjlElQhqqEBKipIdbIAzsOUic/JyAUshxvbwVl56b3+/IjxNqZHrhYxIVd/4R+TQaMMyepCggik5kyLXoEbt6Co/Oj5jrAUYkgMh8g4B1fb2s8k9/8hUTdhNcjP2ATOfpjNgGcdPeU4J8BxeYDlTMYMWEtOjHgnPCRSmgzHtiQ4Z0RGgZRuSAestaMLl46eblgj6xgd6qMOY4SzY6x/XETX+k3P6yqBPWvpBCSacpM6c4eIEpkzEjlrZiQkY5cuK7lRJHyzI6zk1Nq9zsMbPigZPyasi88G23tmLlXdbxd65B85gIhZeEUVRRTfV7VB4vyJB0PMPrLSkIal8JSEAAAAASUVORK5CYII=) no-repeat; + content:''; + opacity:0.5; + -webkit-transition:opacity 0.3s linear; + -moz-transition:opacity 0.3s linear; + -ms-transition:opacity 0.3s linear; + -o-transition:opacity 0.3s linear; + } + .slide:first-child:hover:after { + opacity:0.8; + } .slide:before { position:absolute; top:-12px; @@ -181,33 +202,6 @@ A { content:''; } -/* Play ----------------------------------------- */ -.slide.play { - cursor:pointer; - } - .slide.play:after { - position:absolute; - top:50%; - left:50%; - margin:-75px 0 0 -75px; - width:150px; - height:150px; - -webkit-border-radius:75px; - -moz-border-radius:75px; - border-radius:75px; - background:#FFF url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEUAAABQCAYAAABPlrgBAAAB3ElEQVR42u3cPWdDYRjG8UMoIYRMoYSSKZRMWTOV0ilrplJK6dS1lFI6dSqlhFJCp0yhZMqaKYRMmULIFEIIIbQXj/Scnvs+3+D/8PsCF3l5nvsl0ulLNeL8Oz+ykxcpRpwQSsJSriKOwrDG0iAUX1cqhGJt5F7yhGLNpUUovqGcEoq1lzcpEYq1llvJEYo1lTNC8fWkSijWTp6lQCjWUi4JxTeSBqH4PqVMKNlXhiNCsWbSIhTfQGqEkn1lKBKKtZIbyRGKNZEmofh6ckIo1laepEAo1kLahOIbSZ1QfB0pE4q1kTs5IhRrJheE4vuWGqFY+0OjAKFYK7kmFN9YmoTi+5IKoVhbeZQ8oVhzaROKbyh1QvF1pEQo1vpwZSAUayrnhOLcowiFj0/22wxftMGIn+TYgj9vTmWAv/lBjwthbMLTgVOX5pEpPEe+8hwZG/BwneqKosSR6J+jGBb7oGya6smlwJ7o3qYVI9jRtONMhNDelZgdohEwWNMy6swj0lycmFylDT2YM7DgTMMz2hJ05ZghqGDMuFxqFwuDlYmtPYzgxvoMa6eq9Yz1pwrTLIAI3lkVkuoVY6lMoquQ9UPBVh5YVMVKs+yedpbfBSvWJLJQM/OEiSrO3/kF4ym94ekieP8AAAAASUVORK5CYII=) 50px 35px no-repeat; - content:''; - opacity:0.5; - -webkit-transition:opacity 0.5s ease-out; - -moz-transition:opacity 0.5s ease-out; - -ms-transition:opacity 0.5s ease-out; - -o-transition:opacity 0.5s ease-out; - } - .slide.play:hover:after { - opacity:0.8; - } - /* Back ---------------------------------------- */ .slide.back {