theme updates, normalized spacing between block-level elements

This commit is contained in:
Hakim El Hattab 2014-11-05 11:52:32 +01:00
parent a170ee8982
commit b09923551a
13 changed files with 38 additions and 37 deletions

View file

@ -71,7 +71,7 @@ body {
* OTHER * OTHER
*********************************************/ *********************************************/
.reveal p { .reveal p {
margin-bottom: 10px; margin: 20px 0;
line-height: 1.3; } line-height: 1.3; }
/* Ensure certain elements are never larger than the slide itself */ /* Ensure certain elements are never larger than the slide itself */
@ -119,7 +119,7 @@ body {
display: block; display: block;
position: relative; position: relative;
width: 70%; width: 70%;
margin: 5px auto; margin: 20px auto;
padding: 5px; padding: 5px;
font-style: italic; font-style: italic;
background: rgba(255, 255, 255, 0.05); background: rgba(255, 255, 255, 0.05);
@ -135,7 +135,7 @@ body {
display: block; display: block;
position: relative; position: relative;
width: 90%; width: 90%;
margin: 15px auto; margin: 20px auto;
text-align: left; text-align: left;
font-size: 0.55em; font-size: 0.55em;
font-family: monospace; font-family: monospace;

View file

@ -59,7 +59,7 @@ body {
* OTHER * OTHER
*********************************************/ *********************************************/
.reveal p { .reveal p {
margin-bottom: 10px; margin: 20px 0;
line-height: 1.3; } line-height: 1.3; }
/* Ensure certain elements are never larger than the slide itself */ /* Ensure certain elements are never larger than the slide itself */
@ -107,7 +107,7 @@ body {
display: block; display: block;
position: relative; position: relative;
width: 70%; width: 70%;
margin: 5px auto; margin: 20px auto;
padding: 5px; padding: 5px;
font-style: italic; font-style: italic;
background: rgba(255, 255, 255, 0.05); background: rgba(255, 255, 255, 0.05);
@ -123,7 +123,7 @@ body {
display: block; display: block;
position: relative; position: relative;
width: 90%; width: 90%;
margin: 15px auto; margin: 20px auto;
text-align: left; text-align: left;
font-size: 0.55em; font-size: 0.55em;
font-family: monospace; font-family: monospace;

View file

@ -70,7 +70,7 @@ body {
* OTHER * OTHER
*********************************************/ *********************************************/
.reveal p { .reveal p {
margin-bottom: 10px; margin: 20px 0;
line-height: 1.3; } line-height: 1.3; }
/* Ensure certain elements are never larger than the slide itself */ /* Ensure certain elements are never larger than the slide itself */
@ -118,7 +118,7 @@ body {
display: block; display: block;
position: relative; position: relative;
width: 70%; width: 70%;
margin: 5px auto; margin: 20px auto;
padding: 5px; padding: 5px;
font-style: italic; font-style: italic;
background: rgba(255, 255, 255, 0.05); background: rgba(255, 255, 255, 0.05);
@ -134,7 +134,7 @@ body {
display: block; display: block;
position: relative; position: relative;
width: 90%; width: 90%;
margin: 15px auto; margin: 20px auto;
text-align: left; text-align: left;
font-size: 0.55em; font-size: 0.55em;
font-family: monospace; font-family: monospace;

View file

@ -71,7 +71,7 @@ body {
* OTHER * OTHER
*********************************************/ *********************************************/
.reveal p { .reveal p {
margin-bottom: 10px; margin: 20px 0;
line-height: 1.3; } line-height: 1.3; }
/* Ensure certain elements are never larger than the slide itself */ /* Ensure certain elements are never larger than the slide itself */
@ -119,7 +119,7 @@ body {
display: block; display: block;
position: relative; position: relative;
width: 70%; width: 70%;
margin: 5px auto; margin: 20px auto;
padding: 5px; padding: 5px;
font-style: italic; font-style: italic;
background: rgba(255, 255, 255, 0.05); background: rgba(255, 255, 255, 0.05);
@ -135,7 +135,7 @@ body {
display: block; display: block;
position: relative; position: relative;
width: 90%; width: 90%;
margin: 15px auto; margin: 20px auto;
text-align: left; text-align: left;
font-size: 0.55em; font-size: 0.55em;
font-family: monospace; font-family: monospace;

View file

@ -71,7 +71,7 @@ body {
* OTHER * OTHER
*********************************************/ *********************************************/
.reveal p { .reveal p {
margin-bottom: 10px; margin: 20px 0;
line-height: 1.3; } line-height: 1.3; }
/* Ensure certain elements are never larger than the slide itself */ /* Ensure certain elements are never larger than the slide itself */
@ -119,7 +119,7 @@ body {
display: block; display: block;
position: relative; position: relative;
width: 70%; width: 70%;
margin: 5px auto; margin: 20px auto;
padding: 5px; padding: 5px;
font-style: italic; font-style: italic;
background: rgba(255, 255, 255, 0.05); background: rgba(255, 255, 255, 0.05);
@ -135,7 +135,7 @@ body {
display: block; display: block;
position: relative; position: relative;
width: 90%; width: 90%;
margin: 15px auto; margin: 20px auto;
text-align: left; text-align: left;
font-size: 0.55em; font-size: 0.55em;
font-family: monospace; font-family: monospace;

View file

@ -59,7 +59,7 @@ body {
* OTHER * OTHER
*********************************************/ *********************************************/
.reveal p { .reveal p {
margin-bottom: 10px; margin: 20px 0;
line-height: 1.3; } line-height: 1.3; }
/* Ensure certain elements are never larger than the slide itself */ /* Ensure certain elements are never larger than the slide itself */
@ -107,7 +107,7 @@ body {
display: block; display: block;
position: relative; position: relative;
width: 70%; width: 70%;
margin: 5px auto; margin: 20px auto;
padding: 5px; padding: 5px;
font-style: italic; font-style: italic;
background: rgba(255, 255, 255, 0.05); background: rgba(255, 255, 255, 0.05);
@ -123,7 +123,7 @@ body {
display: block; display: block;
position: relative; position: relative;
width: 90%; width: 90%;
margin: 15px auto; margin: 20px auto;
text-align: left; text-align: left;
font-size: 0.55em; font-size: 0.55em;
font-family: monospace; font-family: monospace;

View file

@ -61,7 +61,7 @@ body {
* OTHER * OTHER
*********************************************/ *********************************************/
.reveal p { .reveal p {
margin-bottom: 10px; margin: 20px 0;
line-height: 1.3; } line-height: 1.3; }
/* Ensure certain elements are never larger than the slide itself */ /* Ensure certain elements are never larger than the slide itself */
@ -109,7 +109,7 @@ body {
display: block; display: block;
position: relative; position: relative;
width: 70%; width: 70%;
margin: 5px auto; margin: 20px auto;
padding: 5px; padding: 5px;
font-style: italic; font-style: italic;
background: rgba(255, 255, 255, 0.05); background: rgba(255, 255, 255, 0.05);
@ -125,7 +125,7 @@ body {
display: block; display: block;
position: relative; position: relative;
width: 90%; width: 90%;
margin: 15px auto; margin: 20px auto;
text-align: left; text-align: left;
font-size: 0.55em; font-size: 0.55em;
font-family: monospace; font-family: monospace;

View file

@ -61,7 +61,7 @@ body {
* OTHER * OTHER
*********************************************/ *********************************************/
.reveal p { .reveal p {
margin-bottom: 10px; margin: 20px 0;
line-height: 1.3; } line-height: 1.3; }
/* Ensure certain elements are never larger than the slide itself */ /* Ensure certain elements are never larger than the slide itself */
@ -109,7 +109,7 @@ body {
display: block; display: block;
position: relative; position: relative;
width: 70%; width: 70%;
margin: 5px auto; margin: 20px auto;
padding: 5px; padding: 5px;
font-style: italic; font-style: italic;
background: rgba(255, 255, 255, 0.05); background: rgba(255, 255, 255, 0.05);
@ -125,7 +125,7 @@ body {
display: block; display: block;
position: relative; position: relative;
width: 90%; width: 90%;
margin: 15px auto; margin: 20px auto;
text-align: left; text-align: left;
font-size: 0.55em; font-size: 0.55em;
font-family: monospace; font-family: monospace;

View file

@ -68,7 +68,7 @@ body {
* OTHER * OTHER
*********************************************/ *********************************************/
.reveal p { .reveal p {
margin-bottom: 10px; margin: 20px 0;
line-height: 1.3; } line-height: 1.3; }
/* Ensure certain elements are never larger than the slide itself */ /* Ensure certain elements are never larger than the slide itself */
@ -116,7 +116,7 @@ body {
display: block; display: block;
position: relative; position: relative;
width: 70%; width: 70%;
margin: 5px auto; margin: 20px auto;
padding: 5px; padding: 5px;
font-style: italic; font-style: italic;
background: rgba(255, 255, 255, 0.05); background: rgba(255, 255, 255, 0.05);
@ -132,7 +132,7 @@ body {
display: block; display: block;
position: relative; position: relative;
width: 90%; width: 90%;
margin: 15px auto; margin: 20px auto;
text-align: left; text-align: left;
font-size: 0.55em; font-size: 0.55em;
font-family: monospace; font-family: monospace;

View file

@ -71,7 +71,7 @@ body {
* OTHER * OTHER
*********************************************/ *********************************************/
.reveal p { .reveal p {
margin-bottom: 10px; margin: 20px 0;
line-height: 1.3; } line-height: 1.3; }
/* Ensure certain elements are never larger than the slide itself */ /* Ensure certain elements are never larger than the slide itself */
@ -119,7 +119,7 @@ body {
display: block; display: block;
position: relative; position: relative;
width: 70%; width: 70%;
margin: 5px auto; margin: 20px auto;
padding: 5px; padding: 5px;
font-style: italic; font-style: italic;
background: rgba(255, 255, 255, 0.05); background: rgba(255, 255, 255, 0.05);
@ -135,7 +135,7 @@ body {
display: block; display: block;
position: relative; position: relative;
width: 90%; width: 90%;
margin: 15px auto; margin: 20px auto;
text-align: left; text-align: left;
font-size: 0.55em; font-size: 0.55em;
font-family: monospace; font-family: monospace;

View file

@ -9,8 +9,11 @@ $mainFont: 'Lato', sans-serif;
$mainFontSize: 36px; $mainFontSize: 36px;
$mainColor: #eee; $mainColor: #eee;
// Vertical spacing between blocks of text
$blockMargin: 20px;
// Headings // Headings
$headingMargin: 0 0 20px 0; $headingMargin: 0 0 $blockMargin 0;
$headingFont: 'League Gothic', Impact, sans-serif; $headingFont: 'League Gothic', Impact, sans-serif;
$headingColor: #eee; $headingColor: #eee;
$headingLineHeight: 1.2; $headingLineHeight: 1.2;

View file

@ -66,7 +66,7 @@ body {
*********************************************/ *********************************************/
.reveal p { .reveal p {
margin-bottom: 10px; margin: $blockMargin 0;
line-height: 1.3; line-height: 1.3;
} }
@ -136,7 +136,7 @@ body {
display: block; display: block;
position: relative; position: relative;
width: 70%; width: 70%;
margin: 5px auto; margin: $blockMargin auto;
padding: 5px; padding: 5px;
font-style: italic; font-style: italic;
@ -156,7 +156,7 @@ body {
display: block; display: block;
position: relative; position: relative;
width: 90%; width: 90%;
margin: 15px auto; margin: $blockMargin auto;
text-align: left; text-align: left;
font-size: 0.55em; font-size: 0.55em;

View file

@ -42,7 +42,7 @@
<div class="slides"> <div class="slides">
<section> <section>
<h1>Reveal.js</h1> <h1>Reveal.js</h1>
<h3>HTML Presentations Made Easy</h3> <h3>The HTML Presentation Framwork</h3>
<p> <p>
<small>Created by <a href="http://hakim.se">Hakim El Hattab</a> / <a href="http://twitter.com/hakimel">@hakimel</a></small> <small>Created by <a href="http://hakim.se">Hakim El Hattab</a> / <a href="http://twitter.com/hakimel">@hakimel</a></small>
</p> </p>
@ -326,8 +326,6 @@ function linkify( selector ) {
<p class="fragment roll-in">roll-in</p> <p class="fragment roll-in">roll-in</p>
<p class="fragment fade-out">fade-out</p> <p class="fragment fade-out">fade-out</p>
<p class="fragment highlight-red">highlight-red</p> <p class="fragment highlight-red">highlight-red</p>
<p class="fragment highlight-green">highlight-green</p>
<p class="fragment highlight-blue">highlight-blue</p>
<p class="fragment current-visible">current-visible</p> <p class="fragment current-visible">current-visible</p>
<p class="fragment highlight-current-blue">highlight-current-blue</p> <p class="fragment highlight-current-blue">highlight-current-blue</p>
</section> </section>