initial work for #552

2013-09-08 13:28:18 -04:00
12 changed files with 28 additions and 25 deletions
--- a/css/reveal.css
+++ b/css/reveal.css
@ -13,7 +13,7 @@
 * RESET STYLES
 *********************************************/

-html, body, .reveal div, .reveal span, .reveal applet, .reveal object, .reveal iframe,
+.reveal-viewport, .reveal div, .reveal span, .reveal applet, .reveal object, .reveal iframe,
 .reveal h1, .reveal h2, .reveal h3, .reveal h4, .reveal h5, .reveal h6, .reveal p, .reveal blockquote, .reveal pre,
 .reveal a, .reveal abbr, .reveal acronym, .reveal address, .reveal big, .reveal cite, .reveal code,
 .reveal del, .reveal dfn, .reveal em, .reveal img, .reveal ins, .reveal kbd, .reveal q, .reveal s, .reveal samp,
@ -44,15 +44,11 @@ html, body, .reveal div, .reveal span, .reveal applet, .reveal object, .reveal i
 * GLOBAL STYLES
 *********************************************/

-html,
-body {
+.reveal-viewport {
+	position: relative;
 	width: 100%;
 	height: 100%;
 	overflow: hidden;
-}
-
-body {
-	position: relative;
 	line-height: 1;
 }

@ -367,7 +363,7 @@ body {

 .reveal .controls {
 	display: none;
-	position: fixed;
+	position: absolute;
 	width: 110px;
 	height: 110px;
 	z-index: 30;
@ -448,7 +444,7 @@ body {
 *********************************************/

 .reveal .progress {
-	position: fixed;
+	position: absolute;
 	display: none;
 	height: 3px;
 	width: 100%;
--- a/css/theme/beige.css
+++ b/css/theme/beige.css
@ -14,7 +14,7 @@
 /*********************************************
 * GLOBAL STYLES
 *********************************************/
-body {
+.reveal-viewport {
  background: #f7f2d3;
  background: -moz-radial-gradient(center, circle cover, white 0%, #f7f2d3 100%);
  background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, white), color-stop(100%, #f7f2d3));
--- a/css/theme/default.css
+++ b/css/theme/default.css
@ -14,7 +14,7 @@
 /*********************************************
 * GLOBAL STYLES
 *********************************************/
-body {
+.reveal-viewport {
  background: #1c1e20;
  background: -moz-radial-gradient(center, circle cover, #555a5f 0%, #1c1e20 100%);
  background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, #555a5f), color-stop(100%, #1c1e20));
--- a/css/theme/moon.css
+++ b/css/theme/moon.css
@ -20,7 +20,7 @@ html * {
 /*********************************************
 * GLOBAL STYLES
 *********************************************/
-body {
+.reveal-viewport {
  background: #002b36;
  background-color: #002b36; }

--- a/css/theme/night.css
+++ b/css/theme/night.css
@ -8,7 +8,7 @@
 /*********************************************
 * GLOBAL STYLES
 *********************************************/
-body {
+.reveal-viewport {
  background: #111111;
  background-color: #111111; }

--- a/css/theme/serif.css
+++ b/css/theme/serif.css
@ -10,7 +10,7 @@
 /*********************************************
 * GLOBAL STYLES
 *********************************************/
-body {
+.reveal-viewport {
  background: #f0f1eb;
  background-color: #f0f1eb; }

--- a/css/theme/simple.css
+++ b/css/theme/simple.css
@ -10,7 +10,7 @@
 /*********************************************
 * GLOBAL STYLES
 *********************************************/
-body {
+.reveal-viewport {
  background: white;
  background-color: white; }

--- a/css/theme/sky.css
+++ b/css/theme/sky.css
@ -11,7 +11,7 @@
 /*********************************************
 * GLOBAL STYLES
 *********************************************/
-body {
+.reveal-viewport {
  background: #add9e4;
  background: -moz-radial-gradient(center, circle cover, #f7fbfc 0%, #add9e4 100%);
  background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, #f7fbfc), color-stop(100%, #add9e4));
--- a/css/theme/solarized.css
+++ b/css/theme/solarized.css
@ -20,7 +20,7 @@ html * {
 /*********************************************
 * GLOBAL STYLES
 *********************************************/
-body {
+.reveal-viewport {
  background: #fdf6e3;
  background-color: #fdf6e3; }

--- a/css/theme/template/theme.scss
+++ b/css/theme/template/theme.scss
@ -4,7 +4,7 @@
 * GLOBAL STYLES
 *********************************************/

-body {
+.reveal-viewport {
 	@include bodyBackground();
 	background-color: $backgroundColor;
 }
--- a/index.html
+++ b/index.html
@ -1,5 +1,5 @@
 <!doctype html>
-<html lang="en">
+<html lang="en" style="height: 100%;">

 	<head>
 		<meta charset="utf-8">
@ -30,7 +30,7 @@
 		<![endif]-->
 	</head>

-	<body>
+	<body class="reveal-viewport">

 		<div class="reveal">

--- a/js/reveal.js
+++ b/js/reveal.js
@ -165,11 +165,18 @@ var Reveal = (function(){

 		checkCapabilities();

-		if( !supports2DTransforms && !supports3DTransforms ) {
-			document.body.setAttribute( 'class', 'no-transforms' );
+		dom.viewport = document.querySelector( '.reveal-viewport' );

-			// If the browser doesn't support core features we won't be
-			// using JavaScript to control the presentation
+		// If there's viewport defined use the body element
+		if( !dom.viewport ) {
+			dom.viewport = document.body;
+			dom.viewport.className += ' reveal-viewport';
+		}
+
+		// If the browser doesn't support core features we fall back
+		// to a JavaScript-free mode without transforms
+		if( !supports2DTransforms && !supports3DTransforms ) {
+			dom.viewport.className += ' no-transforms';
 			return;
 		}

@ -1313,7 +1320,7 @@ var Reveal = (function(){
 	 */
 	function enterFullscreen() {

-		var element = document.body;
+		var element = dom.viewport;

 		// Check which implementation is available
 		var requestMethod = element.requestFullScreen ||