rough support for vertical centering #70

1 files changed, 50 insertions, 23 deletions

diff --git a/css/reveal.css b/css/reveal.css
index 412e8ec..c654505 100644
--- a/css/reveal.css
+++ b/css/reveal.css
@@ -48,7 +48,6 @@ html,
 body {
 	width: 100%;
 	height: 100%;
-	min-height: 600px;
 	overflow: hidden;
 }
 
@@ -164,11 +163,6 @@ body {
  * DEFAULT ELEMENT STYLES
  *********************************************/
 
-.reveal .slides section {
-	line-height: 1.2em;
-	font-weight: normal;
-}
-
 .reveal img {
 	/* preserve aspect ratio and scale image so it's bound within the section */
 	max-width: 100%;
@@ -495,14 +489,20 @@ body {
  * SLIDES
  *********************************************/
 
+.reveal {
+	width: 100%;
+	height: 100%;
+	min-height: 600px;
+	position: relative;
+}
+
 .reveal .slides {
 	position: absolute;
 	max-width: 900px;
+	min-height: 600px;
 	width: 80%;
-	height: 60%;
 	left: 50%;
 	top: 50%;
-	margin-top: -320px;
 	padding: 20px 0px;
 	overflow: visible;
 	z-index: 1;
@@ -520,41 +520,60 @@ body {
 	    -ms-perspective: 600px;
 	        perspective: 600px;
 
-	-webkit-perspective-origin: 0% 25%;
-	   -moz-perspective-origin: 0% 25%;
-	    -ms-perspective-origin: 0% 25%;
-	        perspective-origin: 0% 25%;
+	-webkit-perspective-origin: 0% 0%;
+	   -moz-perspective-origin: 0% 0%;
+	    -ms-perspective-origin: 0% 0%;
+	        perspective-origin: 0% 0%;
 }
 
 .reveal .slides>section,
 .reveal .slides>section>section {
-	display: none;
+	visibility: hidden;
 	position: absolute;
 	width: 100%;
-	min-height: 600px;
 
 	z-index: 10;
+	line-height: 1.2em;
+	font-weight: normal;
 
 	-webkit-transform-style: preserve-3d;
 	   -moz-transform-style: preserve-3d;
 	    -ms-transform-style: preserve-3d;
 	        transform-style: preserve-3d;
 
-	-webkit-transition: all 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985);
-	   -moz-transition: all 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985);
-	    -ms-transition: all 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985);
-	     -o-transition: all 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985);
-	        transition: all 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985);
-}
-
-.reveal .slides>section.present {
-	display: block;
+	-webkit-transition: -webkit-transform 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985),
+	                    visibility 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985),
+	                    opacity 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985);
+	   -moz-transition: -moz-transform 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985),
+	                    visibility 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985),
+	                    opacity 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985);
+	    -ms-transition: -ms-transform 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985),
+	                    visibility 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985),
+	                    opacity 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985);
+	     -o-transition: -o-transform 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985),
+	                    visibility 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985),
+	                    opacity 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985);
+	        transition: transform 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985),
+	                    visibility 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985),
+	                    opacity 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985);
+}
+
+.reveal .slides>section.present,
+.reveal .slides>section>section.present {
+	visibility: visible;
 	z-index: 11;
 	opacity: 1;
 }
 
 .reveal .slides>section {
 	margin-left: -50%;
+	margin-top: -50%;
+}
+
+.reveal.center,
+.reveal.center .slides {
+	padding: 0;
+	min-height: auto;
 }
 
 
@@ -1113,6 +1132,14 @@ body {
 	        transform: none;
 }
 
+.no-transition {
+	-webkit-transition: none;
+	   -moz-transition: none;
+	    -ms-transition: none;
+	     -o-transition: none;
+	        transition: none;
+}
+
 
 /*********************************************
  * BACKGROUND STATES