From 4821c7b814d95218e946f592fee2b657ef662f34 Mon Sep 17 00:00:00 2001
From: Hakim El Hattab <hakim.elhattab@gmail.com>
Date: Sat, 4 Aug 2012 13:54:17 -0400
Subject: [PATCH] use mq to reduce font size for low resultions, max limit on
width for slides set to 900px (closes #49)
---
README.md | 1 +
css/main.css | 34 ++++++++++++++++++++++------------
js/reveal.js | 6 +++---
3 files changed, 26 insertions(+), 15 deletions(-)
diff --git a/README.md b/README.md
index 0e6da25..b03fbb0 100644
--- 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 444a659..7c3a3b6 100644
--- 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 2d7752c..c25e411 100644
--- 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;
--
GitLab