use mq to reduce font size for low resultions, max limit on width for slides set to 900px (closes #49)
This commit is contained in:
parent
6e91411054
commit
4821c7b814
3 changed files with 26 additions and 15 deletions
|
@ -205,6 +205,7 @@ You can change the appearance of the speaker notes by editing the file at `plugi
|
||||||
- IE8 support
|
- IE8 support
|
||||||
- Fixed bug where hovering 3D links in Chrome caused them to disappear
|
- Fixed bug where hovering 3D links in Chrome caused them to disappear
|
||||||
- Disable 3D links in IE and more accurate CSS feature detection
|
- 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
|
#### 1.4
|
||||||
- Main ```#reveal container``` is now selected via a class instead of ID
|
- Main ```#reveal container``` is now selected via a class instead of ID
|
||||||
|
|
34
css/main.css
34
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%);
|
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
|
* HEADERS
|
||||||
*********************************************/
|
*********************************************/
|
||||||
|
@ -73,10 +79,10 @@ body {
|
||||||
text-shadow: 0px 0px 6px rgba(0,0,0,0.2);
|
text-shadow: 0px 0px 6px rgba(0,0,0,0.2);
|
||||||
}
|
}
|
||||||
|
|
||||||
.reveal h1 { font-size: 136px; }
|
.reveal h1 { font-size: 3.77em; }
|
||||||
.reveal h2 { font-size: 76px; }
|
.reveal h2 { font-size: 2.11em; }
|
||||||
.reveal h3 { font-size: 56px; }
|
.reveal h3 { font-size: 1.55em; }
|
||||||
.reveal h4 { font-size: 36px; }
|
.reveal h4 { font-size: 1em; }
|
||||||
|
|
||||||
.reveal h1.inverted,
|
.reveal h1.inverted,
|
||||||
.reveal h2.inverted,
|
.reveal h2.inverted,
|
||||||
|
@ -199,7 +205,7 @@ body {
|
||||||
margin: 10px auto;
|
margin: 10px auto;
|
||||||
|
|
||||||
text-align: left;
|
text-align: left;
|
||||||
font-size: 20px;
|
font-size: 0.55em;
|
||||||
font-family: monospace;
|
font-family: monospace;
|
||||||
line-height: 1.2em;
|
line-height: 1.2em;
|
||||||
|
|
||||||
|
@ -230,7 +236,7 @@ body {
|
||||||
}
|
}
|
||||||
|
|
||||||
.reveal small {
|
.reveal small {
|
||||||
font-size: 60%;
|
font-size: 0.6em;
|
||||||
line-height: 1em;
|
line-height: 1em;
|
||||||
vertical-align: top;
|
vertical-align: top;
|
||||||
}
|
}
|
||||||
|
@ -310,7 +316,7 @@ body {
|
||||||
}
|
}
|
||||||
|
|
||||||
.reveal .controls a {
|
.reveal .controls a {
|
||||||
font-size: 30px;
|
font-size: 0.83em;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
opacity: 0.1;
|
opacity: 0.1;
|
||||||
color: #fff;
|
color: #fff;
|
||||||
|
@ -461,11 +467,11 @@ body {
|
||||||
|
|
||||||
.reveal .slides {
|
.reveal .slides {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
|
max-width: 900px;
|
||||||
width: 60%;
|
width: 60%;
|
||||||
height: 60%;
|
height: 60%;
|
||||||
left: 50%;
|
left: 50%;
|
||||||
top: 50%;
|
top: 50%;
|
||||||
margin-left: -30%;
|
|
||||||
margin-top: -320px;
|
margin-top: -320px;
|
||||||
padding: 20px 0px;
|
padding: 20px 0px;
|
||||||
|
|
||||||
|
@ -482,10 +488,10 @@ body {
|
||||||
-ms-perspective: 600px;
|
-ms-perspective: 600px;
|
||||||
perspective: 600px;
|
perspective: 600px;
|
||||||
|
|
||||||
-webkit-perspective-origin: 50% 25%;
|
-webkit-perspective-origin: 0% 25%;
|
||||||
-moz-perspective-origin: 50% 25%;
|
-moz-perspective-origin: 0% 25%;
|
||||||
-ms-perspective-origin: 50% 25%;
|
-ms-perspective-origin: 0% 25%;
|
||||||
perspective-origin: 50% 25%;
|
perspective-origin: 0% 25%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.reveal .slides>section,
|
.reveal .slides>section,
|
||||||
|
@ -515,6 +521,10 @@ body {
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.reveal .slides>section {
|
||||||
|
margin-left: -50%;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
/*********************************************
|
/*********************************************
|
||||||
* DEFAULT TRANSITION
|
* DEFAULT TRANSITION
|
||||||
|
|
|
@ -1,5 +1,5 @@
|
||||||
/*!
|
/*!
|
||||||
* reveal.js 1.5 r11
|
* reveal.js 1.5 r12
|
||||||
* http://lab.hakim.se/reveal-js
|
* http://lab.hakim.se/reveal-js
|
||||||
* MIT licensed
|
* MIT licensed
|
||||||
*
|
*
|
||||||
|
@ -476,7 +476,7 @@ var Reveal = (function(){
|
||||||
htransform = 'translateZ(-2500px) translate(' + ( ( i - indexh ) * 105 ) + '%, 0%)';
|
htransform = 'translateZ(-2500px) translate(' + ( ( i - indexh ) * 105 ) + '%, 0%)';
|
||||||
|
|
||||||
hslide.setAttribute( 'data-index-h', i );
|
hslide.setAttribute( 'data-index-h', i );
|
||||||
hslide.style.display = 'block';
|
hslide.style.display = 'inline-block';
|
||||||
hslide.style.WebkitTransform = htransform;
|
hslide.style.WebkitTransform = htransform;
|
||||||
hslide.style.MozTransform = htransform;
|
hslide.style.MozTransform = htransform;
|
||||||
hslide.style.msTransform = htransform;
|
hslide.style.msTransform = htransform;
|
||||||
|
@ -496,7 +496,7 @@ var Reveal = (function(){
|
||||||
|
|
||||||
vslide.setAttribute( 'data-index-h', i );
|
vslide.setAttribute( 'data-index-h', i );
|
||||||
vslide.setAttribute( 'data-index-v', j );
|
vslide.setAttribute( 'data-index-v', j );
|
||||||
vslide.style.display = 'block';
|
vslide.style.display = 'inline-block';
|
||||||
vslide.style.WebkitTransform = vtransform;
|
vslide.style.WebkitTransform = vtransform;
|
||||||
vslide.style.MozTransform = vtransform;
|
vslide.style.MozTransform = vtransform;
|
||||||
vslide.style.msTransform = vtransform;
|
vslide.style.msTransform = vtransform;
|
||||||
|
|
Loading…
Reference in a new issue