fullscreen detection is dropped

scripts/script.js

-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

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 */
 

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 {