use mq to reduce font size for low resultions, max limit on width for slides set...

diff --git a/README.md b/README.md
index 0e6da25ce688fc9304adb58e42eb5ad93c42a615..b03fbb01b3ca39675051726d843e84d0761a269a 100644 (file)
--- a/README.md
+++ b/README.md
@@ -205,6 +205,7 @@ You can change the appearance of the speaker notes by editing the file at `plugi
 - IE8 support
 - Fixed bug where hovering 3D links in Chrome caused them to disappear
 - Disable 3D links in IE and more accurate CSS feature detection
+- CSS is more relative in sizing to allow for low resolutions. Thanks [StereotypicalApps](https://github.com/StereotypicalApps)
 
 #### 1.4
 - Main ```#reveal container``` is now selected via a class instead of ID

diff --git a/css/main.css b/css/main.css
index 444a65910e23eb5e3b1897030c67b62fa9508ca9..7c3a3b656926732dce294a57dc8ed3f6a7ba098f 100644 (file)
--- a/css/main.css
+++ b/css/main.css
@@ -54,6 +54,12 @@ body {
        background: radial-gradient(center, ellipse cover,  rgba(85,90,95,1) 0%,rgba(28,30,32,1) 100%);
 }
 
+@media screen and (max-width: 900px) {
+       body {
+               font-size: 30px;
+       }
+}
+
 /*********************************************
  * HEADERS
  *********************************************/
@@ -73,10 +79,10 @@ body {
        text-shadow: 0px 0px 6px rgba(0,0,0,0.2);
 }
 
-.reveal h1 { font-size: 136px;         }
-.reveal h2 { font-size: 76px;  }
-.reveal h3 { font-size: 56px;  }
-.reveal h4 { font-size: 36px;  }
+.reveal h1 { font-size: 3.77em;        }
+.reveal h2 { font-size: 2.11em;        }
+.reveal h3 { font-size: 1.55em;        }
+.reveal h4 { font-size: 1em;   }
 
 .reveal h1.inverted,
 .reveal h2.inverted,
@@ -199,7 +205,7 @@ body {
        margin: 10px auto;
 
        text-align: left;
-       font-size: 20px;
+       font-size: 0.55em;
        font-family: monospace;
        line-height: 1.2em;
 
@@ -230,7 +236,7 @@ body {
 }
 
 .reveal small {
-       font-size: 60%;
+       font-size: 0.6em;
        line-height: 1em;
        vertical-align: top;
 }
@@ -310,7 +316,7 @@ body {
 }
        
        .reveal .controls a {
-               font-size: 30px;
+               font-size: 0.83em;
                position: absolute;
                opacity: 0.1;
                color: #fff;
@@ -461,11 +467,11 @@ body {
 
 .reveal .slides {
        position: absolute;
+       max-width: 900px;
        width: 60%;
        height: 60%;
        left: 50%;
        top: 50%;
-       margin-left: -30%;
        margin-top: -320px;
        padding: 20px 0px;
        
@@ -482,10 +488,10 @@ body {
            -ms-perspective: 600px;
                perspective: 600px;
 
-       -webkit-perspective-origin: 50% 25%;
-          -moz-perspective-origin: 50% 25%;
-           -ms-perspective-origin: 50% 25%;
-               perspective-origin: 50% 25%;
+       -webkit-perspective-origin: 0% 25%;
+          -moz-perspective-origin: 0% 25%;
+           -ms-perspective-origin: 0% 25%;
+               perspective-origin: 0% 25%;
 }
 
 .reveal .slides>section,
@@ -515,6 +521,10 @@ body {
        opacity: 1;
 }
 
+.reveal .slides>section {
+       margin-left: -50%;
+}
+
 
 /*********************************************
  * DEFAULT TRANSITION

diff --git a/js/reveal.js b/js/reveal.js
index 2d7752cae938892f5746bb5ce9e7c514f1e35b50..c25e4119c029fcac58e4b5a782c41c446c56cc0b 100644 (file)
--- a/js/reveal.js
+++ b/js/reveal.js
@@ -1,5 +1,5 @@
 /*!
- * reveal.js 1.5 r11
+ * reveal.js 1.5 r12
  * http://lab.hakim.se/reveal-js
  * MIT licensed
  * 
@@ -476,7 +476,7 @@ var Reveal = (function(){
                                htransform = 'translateZ(-2500px) translate(' + ( ( i - indexh ) * 105 ) + '%, 0%)';
                        
                        hslide.setAttribute( 'data-index-h', i );
-                       hslide.style.display = 'block';
+                       hslide.style.display = 'inline-block';
                        hslide.style.WebkitTransform = htransform;
                        hslide.style.MozTransform = htransform;
                        hslide.style.msTransform = htransform;
@@ -496,7 +496,7 @@ var Reveal = (function(){
 
                                vslide.setAttribute( 'data-index-h', i );
                                vslide.setAttribute( 'data-index-v', j );
-                               vslide.style.display = 'block';
+                               vslide.style.display = 'inline-block';
                                vslide.style.WebkitTransform = vtransform;
                                vslide.style.MozTransform = vtransform;
                                vslide.style.msTransform = vtransform;