From 616d83dfb6b3dbbe6ad8f81cbaf783af7e7cb834 Mon Sep 17 00:00:00 2001 From: Alex Juarez Date: Wed, 4 Dec 2013 15:41:06 -0600 Subject: The index.html page had the simple theme listed twice. The duplicate was removed. For the Moon and Solarized themes they had .css appended to them which was causing them to not come up. --- index.html | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) (limited to 'index.html') diff --git a/index.html b/index.html index 76390e6..72bf08d 100644 --- a/index.html +++ b/index.html @@ -173,9 +173,8 @@ Simple - Serif - Night
- Moon - - Simple - - Solarized + Moon - + Solarized

-- cgit v1.2.3 From 929ace25ee447c249c20ca29cd9d07bab637b4f7 Mon Sep 17 00:00:00 2001 From: Wachiwi Date: Tue, 17 Dec 2013 14:53:36 +0100 Subject: Table Style --- css/reveal.css | 22 ++++++++++++++++++---- index.html | 30 ++++++++++++++++++++++++++++++ 2 files changed, 48 insertions(+), 4 deletions(-) (limited to 'index.html') diff --git a/css/reveal.css b/css/reveal.css index a9b3888..7e209fa 100644 --- a/css/reveal.css +++ b/css/reveal.css @@ -327,16 +327,30 @@ body { box-sizing: border-box; } +.reveal table{ + margin: auto; + border-collapse: collapse; + border-spacing: 0; +} + +.reveal table th{ + text-shadow: rgb(255,255,255) 1px 1px 2px; + font-weight: bold; +} + .reveal table th, .reveal table td { - text-align: left; - padding-right: .3em; + text-align: left; + padding-right: .3em; + border-bottom: 1px solid; } -.reveal table th { - text-shadow: rgb(255,255,255) 1px 1px 2px; +.reveal table tr:last-child td{ + border-bottom: none; } + + .reveal sup { vertical-align: super; } diff --git a/index.html b/index.html index a3bfd7d..b6e2dbd 100644 --- a/index.html +++ b/index.html @@ -131,6 +131,36 @@ +

+

Superb Tables

+ + + + + + + + + + + + + + + + + + + + + + + + + +
ItemValueQuantity
Apples$17
Lemonade$218
Bread$32
+
+
- + + - + - + - + - + diff --git a/test/test-markdown-slide-attributes.html b/test/test-markdown-slide-attributes.html index bd7b28f..ab6ece4 100644 --- a/test/test-markdown-slide-attributes.html +++ b/test/test-markdown-slide-attributes.html @@ -6,7 +6,7 @@ reveal.js - Test Markdown Attributes - + @@ -117,7 +117,7 @@ - + diff --git a/test/test-markdown.html b/test/test-markdown.html index 901b2de..7ff0efe 100644 --- a/test/test-markdown.html +++ b/test/test-markdown.html @@ -6,7 +6,7 @@ reveal.js - Test Markdown - + @@ -41,7 +41,7 @@ - + diff --git a/test/test.html b/test/test.html index 094f3c7..aa233c8 100644 --- a/test/test.html +++ b/test/test.html @@ -6,7 +6,7 @@ reveal.js - Tests - + @@ -72,7 +72,7 @@ - + -- cgit v1.2.3 From a3d4afeeed1aec725a42cb404e62f89739c8faa3 Mon Sep 17 00:00:00 2001 From: Hakim El Hattab Date: Sun, 6 Apr 2014 11:04:58 +0200 Subject: better transition names, fix background images in vertical slides --- README.md | 8 ++-- css/reveal.css | 123 +++++++++++++++++++++++++++++++++------------------------ index.html | 18 ++++----- js/reveal.js | 6 +-- 4 files changed, 85 insertions(+), 70 deletions(-) (limited to 'index.html') diff --git a/README.md b/README.md index 1236355..bd85726 100644 --- a/README.md +++ b/README.md @@ -154,13 +154,13 @@ Reveal.initialize({ previewLinks: false, // Transition style - transition: 'default', // default/cube/page/concave/zoom/linear/fade/none + transition: 'default', // none/fade/slide/convex/concave/zoom // Transition speed transitionSpeed: 'default', // default/fast/slow // Transition style for full page slide backgrounds - backgroundTransition: 'default', // default/none/slide/concave/convex/zoom + backgroundTransition: 'default', // none/fade/slide/convex/concave/zoom // Number of slides away from the current that are visible viewDistance: 3, @@ -175,8 +175,6 @@ Reveal.initialize({ }); ``` -Note that the new default vertical centering option will break compatibility with slides that were using transitions with backgrounds (`cube` and `page`). To restore the previous behavior, set `center` to `false`. - The configuration can be updated after initialization using the ```configure``` method: @@ -397,7 +395,7 @@ Reveal.initialize({ parallaxBackgroundSize: '', // CSS syntax, e.g. "2100px 900px" - currently only pixels are supported (don't use % or auto) // This slide transition gives best results: - transition: linear + transition: 'slide' }); ``` diff --git a/css/reveal.css b/css/reveal.css index 548aecc..8022b1e 100644 --- a/css/reveal.css +++ b/css/reveal.css @@ -683,18 +683,79 @@ body { /********************************************* - * DEFAULT TRANSITION + * SLIDE TRANSITION + * Aliased 'linear' for backwards compatibility + *********************************************/ + +.reveal.slide section. +.reveal.linear section { + -webkit-backface-visibility: hidden; + -moz-backface-visibility: hidden; + -ms-backface-visibility: hidden; + backface-visibility: hidden; +} + +.reveal .slides>section[data-transition=slide].past, +.reveal.slide .slides>section:not([data-transition]).past, +.reveal .slides>section[data-transition=linear].past, +.reveal.linear .slides>section:not([data-transition]).past { + -webkit-transform: translate(-150%, 0); + -moz-transform: translate(-150%, 0); + -ms-transform: translate(-150%, 0); + -o-transform: translate(-150%, 0); + transform: translate(-150%, 0); +} +.reveal .slides>section[data-transition=slide].future, +.reveal.slide .slides>section:not([data-transition]).future, +.reveal .slides>section[data-transition=linear].future, +.reveal.linear .slides>section:not([data-transition]).future { + -webkit-transform: translate(150%, 0); + -moz-transform: translate(150%, 0); + -ms-transform: translate(150%, 0); + -o-transform: translate(150%, 0); + transform: translate(150%, 0); +} + +.reveal .slides>section>section[data-transition=slide].past, +.reveal.slide .slides>section>section:not([data-transition]).past, +.reveal .slides>section>section[data-transition=linear].past, +.reveal.linear .slides>section>section:not([data-transition]).past { + -webkit-transform: translate(0, -150%); + -moz-transform: translate(0, -150%); + -ms-transform: translate(0, -150%); + -o-transform: translate(0, -150%); + transform: translate(0, -150%); +} +.reveal .slides>section>section[data-transition=slide].future, +.reveal.slide .slides>section>section:not([data-transition]).future, +.reveal .slides>section>section[data-transition=linear].future, +.reveal.linear .slides>section>section:not([data-transition]).future { + -webkit-transform: translate(0, 150%); + -moz-transform: translate(0, 150%); + -ms-transform: translate(0, 150%); + -o-transform: translate(0, 150%); + transform: translate(0, 150%); +} + + +/********************************************* + * CONVEX TRANSITION + * Aliased 'default' for backwards compatibility *********************************************/ .reveal .slides>section[data-transition=default].past, -.reveal.default .slides>section:not([data-transition]).past { +.reveal.default .slides>section:not([data-transition]).past, +.reveal .slides>section[data-transition=convex].past, +.reveal.convex .slides>section:not([data-transition]).past { -webkit-transform: translate3d(-100%, 0, 0) rotateY(-90deg) translate3d(-100%, 0, 0); -moz-transform: translate3d(-100%, 0, 0) rotateY(-90deg) translate3d(-100%, 0, 0); -ms-transform: translate3d(-100%, 0, 0) rotateY(-90deg) translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0) rotateY(-90deg) translate3d(-100%, 0, 0); } .reveal .slides>section[data-transition=default].future, -.reveal.default .slides>section:not([data-transition]).future { +.reveal.default .slides>section:not([data-transition]).future, +.reveal .slides>section[data-transition=convex].future, +.reveal.convex .slides>section:not([data-transition]).future { -webkit-transform: translate3d(100%, 0, 0) rotateY(90deg) translate3d(100%, 0, 0); -moz-transform: translate3d(100%, 0, 0) rotateY(90deg) translate3d(100%, 0, 0); -ms-transform: translate3d(100%, 0, 0) rotateY(90deg) translate3d(100%, 0, 0); @@ -702,14 +763,18 @@ body { } .reveal .slides>section>section[data-transition=default].past, -.reveal.default .slides>section>section:not([data-transition]).past { +.reveal.default .slides>section>section:not([data-transition]).past, +.reveal .slides>section>section[data-transition=convex].past, +.reveal.convex .slides>section>section:not([data-transition]).past { -webkit-transform: translate3d(0, -300px, 0) rotateX(70deg) translate3d(0, -300px, 0); -moz-transform: translate3d(0, -300px, 0) rotateX(70deg) translate3d(0, -300px, 0); -ms-transform: translate3d(0, -300px, 0) rotateX(70deg) translate3d(0, -300px, 0); transform: translate3d(0, -300px, 0) rotateX(70deg) translate3d(0, -300px, 0); } .reveal .slides>section>section[data-transition=default].future, -.reveal.default .slides>section>section:not([data-transition]).future { +.reveal.default .slides>section>section:not([data-transition]).future, +.reveal .slides>section>section[data-transition=convex].future, +.reveal.convex .slides>section>section:not([data-transition]).future { -webkit-transform: translate3d(0, 300px, 0) rotateX(-70deg) translate3d(0, 300px, 0); -moz-transform: translate3d(0, 300px, 0) rotateX(-70deg) translate3d(0, 300px, 0); -ms-transform: translate3d(0, 300px, 0) rotateX(-70deg) translate3d(0, 300px, 0); @@ -802,52 +867,6 @@ body { } -/********************************************* - * LINEAR TRANSITION - *********************************************/ - -.reveal.linear section { - -webkit-backface-visibility: hidden; - -moz-backface-visibility: hidden; - -ms-backface-visibility: hidden; - backface-visibility: hidden; -} - -.reveal .slides>section[data-transition=linear].past, -.reveal.linear .slides>section:not([data-transition]).past { - -webkit-transform: translate(-150%, 0); - -moz-transform: translate(-150%, 0); - -ms-transform: translate(-150%, 0); - -o-transform: translate(-150%, 0); - transform: translate(-150%, 0); -} -.reveal .slides>section[data-transition=linear].future, -.reveal.linear .slides>section:not([data-transition]).future { - -webkit-transform: translate(150%, 0); - -moz-transform: translate(150%, 0); - -ms-transform: translate(150%, 0); - -o-transform: translate(150%, 0); - transform: translate(150%, 0); -} - -.reveal .slides>section>section[data-transition=linear].past, -.reveal.linear .slides>section>section:not([data-transition]).past { - -webkit-transform: translate(0, -150%); - -moz-transform: translate(0, -150%); - -ms-transform: translate(0, -150%); - -o-transform: translate(0, -150%); - transform: translate(0, -150%); -} -.reveal .slides>section>section[data-transition=linear].future, -.reveal.linear .slides>section>section:not([data-transition]).future { - -webkit-transform: translate(0, 150%); - -moz-transform: translate(0, 150%); - -ms-transform: translate(0, 150%); - -o-transform: translate(0, 150%); - transform: translate(0, 150%); -} - - /********************************************* * CUBE TRANSITION *********************************************/ @@ -1360,7 +1379,7 @@ body { transition: none; } -/* 2D slide */ +/* Slide */ .reveal[data-background-transition=slide]>.backgrounds .slide-background, .reveal>.backgrounds .slide-background[data-background-transition=slide] { opacity: 1; diff --git a/index.html b/index.html index 993af44..25b0d76 100644 --- a/index.html +++ b/index.html @@ -188,14 +188,12 @@

Transition Styles

You can select from different transitions, like:
- Cube - - Page - - Concave - - Zoom - - Linear - - Fade - + Default - None - - Default + Fade - + Slide - + Concave - + Zoom

@@ -260,14 +258,14 @@ Reveal.addEventListener( 'customevent', function() { -
+

Background Transitions

Pass reveal.js the backgroundTransition: 'slide' config argument to make backgrounds slide rather than fade.

-
+

Background Transition Override

You can override background transitions per slide by using data-background-transition="slide". @@ -401,7 +399,7 @@ function linkify( selector ) { center: true, theme: Reveal.getQueryHash().theme, // available themes are in /css/theme - transition: Reveal.getQueryHash().transition || 'default', // default/cube/page/concave/zoom/linear/fade/none + transition: Reveal.getQueryHash().transition || 'default', // none/fade/slide/convex/concave/zoom // Parallax scrolling // parallaxBackgroundImage: 'https://s3.amazonaws.com/hakim-static/reveal-js/reveal-parallax-1.jpg', diff --git a/js/reveal.js b/js/reveal.js index 06b217b..6daa9f8 100644 --- a/js/reveal.js +++ b/js/reveal.js @@ -93,13 +93,13 @@ var Reveal = (function(){ theme: null, // Transition style - transition: 'default', // default/cube/page/concave/zoom/linear/fade/none + transition: 'default', // none/fade/slide/convex/concave/zoom // Transition speed transitionSpeed: 'default', // default/fast/slow // Transition style for full page slide backgrounds - backgroundTransition: 'default', // default/linear/none + backgroundTransition: 'default', // none/fade/slide/convex/concave/zoom // Parallax background image parallaxBackgroundImage: '', // CSS syntax, e.g. "a.jpg" @@ -2000,7 +2000,7 @@ var Reveal = (function(){ } if( includeAll || h === indexh ) { - toArray( backgroundh.querySelectorAll( 'section' ) ).forEach( function( backgroundv, v ) { + toArray( backgroundh.querySelectorAll( '.slide-background' ) ).forEach( function( backgroundv, v ) { if( v < indexv ) { backgroundv.className = 'slide-background past'; -- cgit v1.2.3 From fb7253187d1e7874bba702d9fd4cbdc620aa4955 Mon Sep 17 00:00:00 2001 From: Hakim El Hattab Date: Sun, 20 Apr 2014 11:29:44 +0200 Subject: correction to javascript code sample --- index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'index.html') diff --git a/index.html b/index.html index 25b0d76..0aece4c 100644 --- a/index.html +++ b/index.html @@ -231,7 +231,7 @@

Additionally custom events can be triggered on a per slide basis by binding to the data-state name.

- 

+					

 Reveal.addEventListener( 'customevent', function() {
 	console.log( '"customevent" has fired' );
 } );
-- 
cgit v1.2.3


From 9b2851376dee7a29e6142c011b3af80d6d917a87 Mon Sep 17 00:00:00 2001
From: Hakim El Hattab
Date: Sun, 20 Apr 2014 11:50:23 +0200
Subject: always indent html using tabs

---
 index.html | 58 +++++++++++++++++++++++++++++-----------------------------
 1 file changed, 29 insertions(+), 29 deletions(-)

(limited to 'index.html')

diff --git a/index.html b/index.html
index 0aece4c..49dbd51 100644
--- a/index.html
+++ b/index.html
@@ -137,35 +137,35 @@
-
-

Superb Tables

- - - - - - - - - - - - - - - - - - - - - - - - - -
ItemValueQuantity
Apples$17
Lemonade$218
Bread$32
-
+
+

Superb Tables

+ + + + + + + + + + + + + + + + + + + + + + + + + +
ItemValueQuantity
Apples$17
Lemonade$218
Bread$32
+
@@ -131,11 +131,7 @@

Fragments

Hit the next arrow...

... to step through ...

-
    -
  1. any type
    2. -
  2. of view
    3. -
  3. fragments
    4. -
+

... a fragmented slide.

Fragment Styles

-

There's a few styles of fragments, like:

+

There's different types of fragments, like:

grow

shrink

roll-in

fade-out

-

highlight-red

current-visible

-

highlight-current-blue

+

highlight-red

+

highlight-blue

@@ -170,7 +166,7 @@

Themes

- Reveal.js comes with a few themes built in:
+ reveal.js comes with a few themes built in:
Default - Sky - Beige - @@ -209,10 +205,10 @@ Reveal.addEventListener( 'customevent', function() {

-
+

Slide Backgrounds

- Set data-background="#007777" on a slide to change the full page background to the given color. All CSS color formats are supported. + Set data-background="#dddddd" on a slide to change the background color. All CSS color formats are supported.

Down arrow @@ -223,7 +219,7 @@ Reveal.addEventListener( 'customevent', function() { 
<section data-background="image.png">
-

Tile Backgrounds

+

Tiled Backgrounds

<section data-background="image.png" data-background-repeat="repeat" data-background-size="100px">
@@ -231,15 +227,17 @@ Reveal.addEventListener( 'customevent', function() {

Background Transitions

- Different background transitions are available via the backgroundTransition option. This one's called "zoom". + Different background transitions are available via the backgroundTransition option. This one's called "zoom".

+ 
Reveal.configure({ backgroundTransition: 'zoom' })
-
+

Background Transitions

- You can override background transitions per slide by using data-background-transition="zoom". + You can override background transitions per-slide.

+ 
<section data-background-transition="zoom">
@@ -262,7 +260,7 @@ Reveal.addEventListener( 'customevent', function() {
-

Superb Tables

+

Tabular Tables

@@ -351,7 +349,7 @@ function linkify( selector ) {

Take a Moment

- Press b or period on your keyboard to enter the 'paused' mode. This mode is helpful when you want to take distracting slides off the screen during a presentation. + Press B or . on your keyboard to pause the presentation. This is helpful when you're on stage and want to take distracting slides off the screen.

diff --git a/js/reveal.js b/js/reveal.js index ef3471c..9681694 100644 --- a/js/reveal.js +++ b/js/reveal.js @@ -43,7 +43,7 @@ // Bounds for smallest/largest possible scale to apply to content minScale: 0.2, - maxScale: 1.0, + maxScale: 1.5, // Display controls in the bottom right corner controls: true, -- cgit v1.2.3 From dc215a244174b88587ca032a68c172010235d154 Mon Sep 17 00:00:00 2001 From: Hakim El Hattab Date: Wed, 10 Dec 2014 18:28:14 +0100 Subject: rename previous default theme to league --- Gruntfile.js | 2 +- README.md | 5 +- css/theme/default.css | 270 ----------------------------------------- css/theme/league.css | 272 ++++++++++++++++++++++++++++++++++++++++++ css/theme/source/default.scss | 43 ------- css/theme/source/league.scss | 45 +++++++ index.html | 3 +- 7 files changed, 323 insertions(+), 317 deletions(-) delete mode 100644 css/theme/default.css create mode 100644 css/theme/league.css delete mode 100644 css/theme/source/default.scss create mode 100644 css/theme/source/league.scss (limited to 'index.html') diff --git a/Gruntfile.js b/Gruntfile.js index fbc2466..e3f017c 100644 --- a/Gruntfile.js +++ b/Gruntfile.js @@ -37,7 +37,7 @@ module.exports = function(grunt) { }, themes: { files: { - 'css/theme/default.css': 'css/theme/source/default.scss', + 'css/theme/league.css': 'css/theme/source/league.scss', 'css/theme/black.css': 'css/theme/source/black.scss', 'css/theme/beige.css': 'css/theme/source/beige.scss', 'css/theme/night.css': 'css/theme/source/night.scss', diff --git a/README.md b/README.md index abc059f..703fa07 100644 --- a/README.md +++ b/README.md @@ -608,7 +608,8 @@ Here's an example of an exported presentation that's been uploaded to SlideShare The framework comes with a few different themes included: -- default: Gray background, white text, blue links +- black: Black background, white text, blue links (default theme) +- league: Gray background, white text, blue links (default theme for reveal.js < 3.0.0) - beige: Beige background, dark text, brown links - sky: Blue background, thin white text, blue links - night: Black background, thick white text, orange links @@ -619,7 +620,7 @@ The framework comes with a few different themes included: Each theme is available as a separate stylesheet. To change theme you will need to replace **default** below with your desired theme name in index.html: ```html - + ``` If you want to add a theme of your own see the instructions here: [/css/theme/README.md](https://github.com/hakimel/reveal.js/blob/master/css/theme/README.md). diff --git a/css/theme/default.css b/css/theme/default.css deleted file mode 100644 index c3e5edf..0000000 --- a/css/theme/default.css +++ /dev/null @@ -1,270 +0,0 @@ -@import url(https://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic); -/** - * Default theme for reveal.js. - * - * Copyright (C) 2011-2012 Hakim El Hattab, http://hakim.se - */ -@font-face { - font-family: 'League Gothic'; - src: url('../../lib/font/league_gothic-webfont.eot'); - src: url('../../lib/font/league_gothic-webfont.eot?#iefix') format('embedded-opentype'), url('../../lib/font/league_gothic-webfont.woff') format('woff'), url('../../lib/font/league_gothic-webfont.ttf') format('truetype'), url('../../lib/font/league_gothic-webfont.svg#LeagueGothicRegular') format('svg'); - font-weight: normal; - font-style: normal; } - -/********************************************* - * GLOBAL STYLES - *********************************************/ -body { - background: #1c1e20; - background: -moz-radial-gradient(center, circle cover, #555a5f 0%, #1c1e20 100%); - background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, #555a5f), color-stop(100%, #1c1e20)); - background: -webkit-radial-gradient(center, circle cover, #555a5f 0%, #1c1e20 100%); - background: -o-radial-gradient(center, circle cover, #555a5f 0%, #1c1e20 100%); - background: -ms-radial-gradient(center, circle cover, #555a5f 0%, #1c1e20 100%); - background: radial-gradient(center, circle cover, #555a5f 0%, #1c1e20 100%); - background-color: #2b2b2b; } - -.reveal { - font-family: 'Lato', sans-serif; - font-size: 36px; - font-weight: normal; - color: #eee; } - -::selection { - color: #fff; - background: #FF5E99; - text-shadow: none; } - -.reveal .slides > section, .reveal .slides > section > section { - line-height: 1.3; - font-weight: inherit; } - -/********************************************* - * HEADERS - *********************************************/ -.reveal h1, .reveal h2, .reveal h3, .reveal h4, .reveal h5, .reveal h6 { - margin: 0 0 20px 0; - color: #eee; - font-family: 'League Gothic', Impact, sans-serif; - line-height: 1.2; - letter-spacing: normal; - text-transform: uppercase; - text-shadow: 0px 0px 6px rgba(0, 0, 0, 0.2); - word-wrap: break-word; } - -.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 { - text-shadow: 0 1px 0 #ccc, 0 2px 0 #c9c9c9, 0 3px 0 #bbb, 0 4px 0 #b9b9b9, 0 5px 0 #aaa, 0 6px 1px rgba(0, 0, 0, 0.1), 0 0 5px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.3), 0 3px 5px rgba(0, 0, 0, 0.2), 0 5px 10px rgba(0, 0, 0, 0.25), 0 20px 20px rgba(0, 0, 0, 0.15); } - -/********************************************* - * OTHER - *********************************************/ -.reveal p { - margin: 20px 0; - line-height: 1.3; } - -/* Ensure certain elements are never larger than the slide itself */ -.reveal img, .reveal video, .reveal iframe { - max-width: 95%; - max-height: 95%; } - -.reveal strong, .reveal b { - font-weight: bold; } - -.reveal em { - font-style: italic; } - -.reveal ol, .reveal dl, .reveal ul { - display: inline-block; - text-align: left; - margin: 0 0 0 1em; } - -.reveal ol { - list-style-type: decimal; } - -.reveal ul { - list-style-type: disc; } - -.reveal ul ul { - list-style-type: square; } - -.reveal ul ul ul { - list-style-type: circle; } - -.reveal ul ul, .reveal ul ol, .reveal ol ol, .reveal ol ul { - display: block; - margin-left: 40px; } - -.reveal dt { - font-weight: bold; } - -.reveal dd { - margin-left: 40px; } - -.reveal q, .reveal blockquote { - quotes: none; } - -.reveal blockquote { - display: block; - position: relative; - width: 70%; - margin: 20px auto; - padding: 5px; - font-style: italic; - background: rgba(255, 255, 255, 0.05); - box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.2); } - -.reveal blockquote p:first-child, .reveal blockquote p:last-child { - display: inline-block; } - -.reveal q { - font-style: italic; } - -.reveal pre { - display: block; - position: relative; - width: 90%; - margin: 20px auto; - text-align: left; - font-size: 0.55em; - font-family: monospace; - line-height: 1.2em; - word-wrap: break-word; - box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.3); } - -.reveal code { - font-family: monospace; } - -.reveal pre code { - display: block; - padding: 5px; - overflow: auto; - max-height: 400px; - word-wrap: normal; - background: #3F3F3F; - color: #DCDCDC; } - -.reveal table { - margin: auto; - border-collapse: collapse; - border-spacing: 0; } - -.reveal table th { - font-weight: bold; } - -.reveal table th, .reveal table td { - text-align: left; - padding: 0.2em 0.5em 0.2em 0.5em; - border-bottom: 1px solid; } - -.reveal table tr:last-child td { - border-bottom: none; } - -.reveal sup { - vertical-align: super; } - -.reveal sub { - vertical-align: sub; } - -.reveal small { - display: inline-block; - font-size: 0.6em; - line-height: 1.2em; - vertical-align: top; } - -.reveal small * { - vertical-align: top; } - -/********************************************* - * LINKS - *********************************************/ -.reveal a { - color: #13DAEC; - text-decoration: none; - -webkit-transition: color 0.15s ease; - -moz-transition: color 0.15s ease; - transition: color 0.15s ease; } - -.reveal a:hover { - color: #71ebf4; - text-shadow: none; - border: none; } - -.reveal .roll span:after { - color: #fff; - background: #0d9ba5; } - -/********************************************* - * IMAGES - *********************************************/ -.reveal section img { - margin: 15px 0px; - background: rgba(255, 255, 255, 0.12); - border: 4px solid #eee; - box-shadow: 0 0 10px rgba(0, 0, 0, 0.15); } - -.reveal a img { - -webkit-transition: all 0.15s linear; - -moz-transition: all 0.15s linear; - transition: all 0.15s linear; } - -.reveal a:hover img { - background: rgba(255, 255, 255, 0.2); - border-color: #13DAEC; - box-shadow: 0 0 20px rgba(0, 0, 0, 0.55); } - -/********************************************* - * NAVIGATION CONTROLS - *********************************************/ -.reveal .controls div.navigate-left, .reveal .controls div.navigate-left.enabled { - border-right-color: #13DAEC; } - -.reveal .controls div.navigate-right, .reveal .controls div.navigate-right.enabled { - border-left-color: #13DAEC; } - -.reveal .controls div.navigate-up, .reveal .controls div.navigate-up.enabled { - border-bottom-color: #13DAEC; } - -.reveal .controls div.navigate-down, .reveal .controls div.navigate-down.enabled { - border-top-color: #13DAEC; } - -.reveal .controls div.navigate-left.enabled:hover { - border-right-color: #71ebf4; } - -.reveal .controls div.navigate-right.enabled:hover { - border-left-color: #71ebf4; } - -.reveal .controls div.navigate-up.enabled:hover { - border-bottom-color: #71ebf4; } - -.reveal .controls div.navigate-down.enabled:hover { - border-top-color: #71ebf4; } - -/********************************************* - * PROGRESS BAR - *********************************************/ -.reveal .progress { - background: rgba(0, 0, 0, 0.2); } - -.reveal .progress span { - background: #13DAEC; - -webkit-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); - -moz-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); - transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); } - -/********************************************* - * SLIDE NUMBER - *********************************************/ -.reveal .slide-number { - color: #13DAEC; } diff --git a/css/theme/league.css b/css/theme/league.css new file mode 100644 index 0000000..80fb09e --- /dev/null +++ b/css/theme/league.css @@ -0,0 +1,272 @@ +@import url(https://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic); +/** + * League theme for reveal.js. + * + * This was the default theme pre-3.0.0. + * + * Copyright (C) 2011-2012 Hakim El Hattab, http://hakim.se + */ +@font-face { + font-family: 'League Gothic'; + src: url('../../lib/font/league_gothic-webfont.eot'); + src: url('../../lib/font/league_gothic-webfont.eot?#iefix') format('embedded-opentype'), url('../../lib/font/league_gothic-webfont.woff') format('woff'), url('../../lib/font/league_gothic-webfont.ttf') format('truetype'), url('../../lib/font/league_gothic-webfont.svg#LeagueGothicRegular') format('svg'); + font-weight: normal; + font-style: normal; } + +/********************************************* + * GLOBAL STYLES + *********************************************/ +body { + background: #1c1e20; + background: -moz-radial-gradient(center, circle cover, #555a5f 0%, #1c1e20 100%); + background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, #555a5f), color-stop(100%, #1c1e20)); + background: -webkit-radial-gradient(center, circle cover, #555a5f 0%, #1c1e20 100%); + background: -o-radial-gradient(center, circle cover, #555a5f 0%, #1c1e20 100%); + background: -ms-radial-gradient(center, circle cover, #555a5f 0%, #1c1e20 100%); + background: radial-gradient(center, circle cover, #555a5f 0%, #1c1e20 100%); + background-color: #2b2b2b; } + +.reveal { + font-family: 'Lato', sans-serif; + font-size: 36px; + font-weight: normal; + color: #eee; } + +::selection { + color: #fff; + background: #FF5E99; + text-shadow: none; } + +.reveal .slides > section, .reveal .slides > section > section { + line-height: 1.3; + font-weight: inherit; } + +/********************************************* + * HEADERS + *********************************************/ +.reveal h1, .reveal h2, .reveal h3, .reveal h4, .reveal h5, .reveal h6 { + margin: 0 0 20px 0; + color: #eee; + font-family: 'League Gothic', Impact, sans-serif; + line-height: 1.2; + letter-spacing: normal; + text-transform: uppercase; + text-shadow: 0px 0px 6px rgba(0, 0, 0, 0.2); + word-wrap: break-word; } + +.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 { + text-shadow: 0 1px 0 #ccc, 0 2px 0 #c9c9c9, 0 3px 0 #bbb, 0 4px 0 #b9b9b9, 0 5px 0 #aaa, 0 6px 1px rgba(0, 0, 0, 0.1), 0 0 5px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.3), 0 3px 5px rgba(0, 0, 0, 0.2), 0 5px 10px rgba(0, 0, 0, 0.25), 0 20px 20px rgba(0, 0, 0, 0.15); } + +/********************************************* + * OTHER + *********************************************/ +.reveal p { + margin: 20px 0; + line-height: 1.3; } + +/* Ensure certain elements are never larger than the slide itself */ +.reveal img, .reveal video, .reveal iframe { + max-width: 95%; + max-height: 95%; } + +.reveal strong, .reveal b { + font-weight: bold; } + +.reveal em { + font-style: italic; } + +.reveal ol, .reveal dl, .reveal ul { + display: inline-block; + text-align: left; + margin: 0 0 0 1em; } + +.reveal ol { + list-style-type: decimal; } + +.reveal ul { + list-style-type: disc; } + +.reveal ul ul { + list-style-type: square; } + +.reveal ul ul ul { + list-style-type: circle; } + +.reveal ul ul, .reveal ul ol, .reveal ol ol, .reveal ol ul { + display: block; + margin-left: 40px; } + +.reveal dt { + font-weight: bold; } + +.reveal dd { + margin-left: 40px; } + +.reveal q, .reveal blockquote { + quotes: none; } + +.reveal blockquote { + display: block; + position: relative; + width: 70%; + margin: 20px auto; + padding: 5px; + font-style: italic; + background: rgba(255, 255, 255, 0.05); + box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.2); } + +.reveal blockquote p:first-child, .reveal blockquote p:last-child { + display: inline-block; } + +.reveal q { + font-style: italic; } + +.reveal pre { + display: block; + position: relative; + width: 90%; + margin: 20px auto; + text-align: left; + font-size: 0.55em; + font-family: monospace; + line-height: 1.2em; + word-wrap: break-word; + box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.3); } + +.reveal code { + font-family: monospace; } + +.reveal pre code { + display: block; + padding: 5px; + overflow: auto; + max-height: 400px; + word-wrap: normal; + background: #3F3F3F; + color: #DCDCDC; } + +.reveal table { + margin: auto; + border-collapse: collapse; + border-spacing: 0; } + +.reveal table th { + font-weight: bold; } + +.reveal table th, .reveal table td { + text-align: left; + padding: 0.2em 0.5em 0.2em 0.5em; + border-bottom: 1px solid; } + +.reveal table tr:last-child td { + border-bottom: none; } + +.reveal sup { + vertical-align: super; } + +.reveal sub { + vertical-align: sub; } + +.reveal small { + display: inline-block; + font-size: 0.6em; + line-height: 1.2em; + vertical-align: top; } + +.reveal small * { + vertical-align: top; } + +/********************************************* + * LINKS + *********************************************/ +.reveal a { + color: #13DAEC; + text-decoration: none; + -webkit-transition: color 0.15s ease; + -moz-transition: color 0.15s ease; + transition: color 0.15s ease; } + +.reveal a:hover { + color: #71ebf4; + text-shadow: none; + border: none; } + +.reveal .roll span:after { + color: #fff; + background: #0d9ba5; } + +/********************************************* + * IMAGES + *********************************************/ +.reveal section img { + margin: 15px 0px; + background: rgba(255, 255, 255, 0.12); + border: 4px solid #eee; + box-shadow: 0 0 10px rgba(0, 0, 0, 0.15); } + +.reveal a img { + -webkit-transition: all 0.15s linear; + -moz-transition: all 0.15s linear; + transition: all 0.15s linear; } + +.reveal a:hover img { + background: rgba(255, 255, 255, 0.2); + border-color: #13DAEC; + box-shadow: 0 0 20px rgba(0, 0, 0, 0.55); } + +/********************************************* + * NAVIGATION CONTROLS + *********************************************/ +.reveal .controls div.navigate-left, .reveal .controls div.navigate-left.enabled { + border-right-color: #13DAEC; } + +.reveal .controls div.navigate-right, .reveal .controls div.navigate-right.enabled { + border-left-color: #13DAEC; } + +.reveal .controls div.navigate-up, .reveal .controls div.navigate-up.enabled { + border-bottom-color: #13DAEC; } + +.reveal .controls div.navigate-down, .reveal .controls div.navigate-down.enabled { + border-top-color: #13DAEC; } + +.reveal .controls div.navigate-left.enabled:hover { + border-right-color: #71ebf4; } + +.reveal .controls div.navigate-right.enabled:hover { + border-left-color: #71ebf4; } + +.reveal .controls div.navigate-up.enabled:hover { + border-bottom-color: #71ebf4; } + +.reveal .controls div.navigate-down.enabled:hover { + border-top-color: #71ebf4; } + +/********************************************* + * PROGRESS BAR + *********************************************/ +.reveal .progress { + background: rgba(0, 0, 0, 0.2); } + +.reveal .progress span { + background: #13DAEC; + -webkit-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); + -moz-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); + transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); } + +/********************************************* + * SLIDE NUMBER + *********************************************/ +.reveal .slide-number { + color: #13DAEC; } diff --git a/css/theme/source/default.scss b/css/theme/source/default.scss deleted file mode 100644 index 9c40485..0000000 --- a/css/theme/source/default.scss +++ /dev/null @@ -1,43 +0,0 @@ -/** - * Default theme for reveal.js. - * - * Copyright (C) 2011-2012 Hakim El Hattab, http://hakim.se - */ - - -// Default mixins and settings ----------------- -@import "../template/mixins"; -@import "../template/settings"; -// --------------------------------------------- - - - -// Include theme-specific fonts -@font-face { - font-family: 'League Gothic'; - src: url('../../lib/font/league_gothic-webfont.eot'); - src: url('../../lib/font/league_gothic-webfont.eot?#iefix') format('embedded-opentype'), - url('../../lib/font/league_gothic-webfont.woff') format('woff'), - url('../../lib/font/league_gothic-webfont.ttf') format('truetype'), - url('../../lib/font/league_gothic-webfont.svg#LeagueGothicRegular') format('svg'); - - font-weight: normal; - font-style: normal; -} - -@import url(https://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic); - -// Override theme settings (see ../template/settings.scss) -$headingTextShadow: 0px 0px 6px rgba(0,0,0,0.2); -$heading1TextShadow: 0 1px 0 #ccc, 0 2px 0 #c9c9c9, 0 3px 0 #bbb, 0 4px 0 #b9b9b9, 0 5px 0 #aaa, 0 6px 1px rgba(0,0,0,.1), 0 0 5px rgba(0,0,0,.1), 0 1px 3px rgba(0,0,0,.3), 0 3px 5px rgba(0,0,0,.2), 0 5px 10px rgba(0,0,0,.25), 0 20px 20px rgba(0,0,0,.15); - -// Background generator -@mixin bodyBackground() { - @include radial-gradient( rgba(28,30,32,1), rgba(85,90,95,1) ); -} - - - -// Theme template ------------------------------ -@import "../template/theme"; -// --------------------------------------------- \ No newline at end of file diff --git a/css/theme/source/league.scss b/css/theme/source/league.scss new file mode 100644 index 0000000..a21ef3c --- /dev/null +++ b/css/theme/source/league.scss @@ -0,0 +1,45 @@ +/** + * League theme for reveal.js. + * + * This was the default theme pre-3.0.0. + * + * Copyright (C) 2011-2012 Hakim El Hattab, http://hakim.se + */ + + +// Default mixins and settings ----------------- +@import "../template/mixins"; +@import "../template/settings"; +// --------------------------------------------- + + + +// Include theme-specific fonts +@font-face { + font-family: 'League Gothic'; + src: url('../../lib/font/league_gothic-webfont.eot'); + src: url('../../lib/font/league_gothic-webfont.eot?#iefix') format('embedded-opentype'), + url('../../lib/font/league_gothic-webfont.woff') format('woff'), + url('../../lib/font/league_gothic-webfont.ttf') format('truetype'), + url('../../lib/font/league_gothic-webfont.svg#LeagueGothicRegular') format('svg'); + + font-weight: normal; + font-style: normal; +} + +@import url(https://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic); + +// Override theme settings (see ../template/settings.scss) +$headingTextShadow: 0px 0px 6px rgba(0,0,0,0.2); +$heading1TextShadow: 0 1px 0 #ccc, 0 2px 0 #c9c9c9, 0 3px 0 #bbb, 0 4px 0 #b9b9b9, 0 5px 0 #aaa, 0 6px 1px rgba(0,0,0,.1), 0 0 5px rgba(0,0,0,.1), 0 1px 3px rgba(0,0,0,.3), 0 3px 5px rgba(0,0,0,.2), 0 5px 10px rgba(0,0,0,.25), 0 20px 20px rgba(0,0,0,.15); + +// Background generator +@mixin bodyBackground() { + @include radial-gradient( rgba(28,30,32,1), rgba(85,90,95,1) ); +} + + + +// Theme template ------------------------------ +@import "../template/theme"; +// --------------------------------------------- \ No newline at end of file diff --git a/index.html b/index.html index 6bf40f4..cf90a21 100644 --- a/index.html +++ b/index.html @@ -167,7 +167,8 @@

Themes

reveal.js comes with a few themes built in:
- Default - + Black (default) - + League - Sky - Beige - Simple - -- cgit v1.2.3 From b133468f3e02588230412c3a48624f3838bf9e7a Mon Sep 17 00:00:00 2001 From: Hakim El Hattab Date: Wed, 10 Dec 2014 20:18:11 +0100 Subject: include background video example in default presentation --- index.html | 6 ++++++ 1 file changed, 6 insertions(+) (limited to 'index.html') diff --git a/index.html b/index.html index cf90a21..012ebe6 100644 --- a/index.html +++ b/index.html @@ -223,6 +223,12 @@ Reveal.addEventListener( 'customevent', function() {

Tiled Backgrounds

<section data-background="image.png" data-background-repeat="repeat" data-background-size="100px">
+
+
+

Video Backgrounds

+ 
<section data-background-video="http://example.com/video.mp4,http://example.com/video.webm" data-background-color="#000000">
+
+
-- cgit v1.2.3 From 96b26514e6d397aba6b39589d510548ddb281fb8 Mon Sep 17 00:00:00 2001 From: Hakim El Hattab Date: Fri, 12 Dec 2014 15:52:25 +0100 Subject: default content update; remove image slide, add two new slides --- README.md | 2 +- index.html | 108 +++++++++++++++++++++++++++++++++---------------------------- 2 files changed, 59 insertions(+), 51 deletions(-) (limited to 'index.html') diff --git a/README.md b/README.md index 703fa07..4c040cf 100644 --- a/README.md +++ b/README.md @@ -617,7 +617,7 @@ The framework comes with a few different themes included: - simple: White background, black text, blue links - solarized: Cream-colored background, dark green text, blue links -Each theme is available as a separate stylesheet. To change theme you will need to replace **default** below with your desired theme name in index.html: +Each theme is available as a separate stylesheet. To change theme you will need to replace **black** below with your desired theme name in index.html: ```html diff --git a/index.html b/index.html index 012ebe6..6a8bd6d 100644 --- a/index.html +++ b/index.html @@ -53,10 +53,6 @@

reveal.js is a framework that enables you to create beautiful presentations using HTML. This demo presentation will tell you more about what you can do with it.

- -
@@ -184,27 +180,6 @@

-
-

Global State

-

- Set data-state="something" on a slide and "something" - will be added as a class to the document element when the slide is open. This lets you - apply broader style changes, like switching the page background. -

-
- -
-

State Events

-

- Additionally custom events can be triggered on a per slide basis by binding to the data-state name. -

- 

-Reveal.addEventListener( 'customevent', function() {
-	console.log( '"customevent" has fired' );
-} );
-
-
-

Slide Backgrounds

@@ -247,6 +222,27 @@ Reveal.addEventListener( 'customevent', function() { 
<section data-background-transition="zoom">
+
+

Pretty Code

+ 

+function linkify( selector ) {
+  if( supports3DTransforms ) {
+
+    var nodes = document.querySelectorAll( selector );
+
+    for( var i = 0, len = nodes.length; i < len; i++ ) {
+      var node = nodes[i];
+
+      if( !node.className ) {
+        node.className += ' roll';
+      }
+    }
+  }
+}
+
+

Courtesy of highlight.js.

+
+

Marvelous List

    @@ -308,27 +304,6 @@ Reveal.addEventListener( 'customevent', function() {
-
-

Pretty Code

- 

-function linkify( selector ) {
-  if( supports3DTransforms ) {
-
-    var nodes = document.querySelectorAll( selector );
-
-    for( var i = 0, len = nodes.length; i < len; i++ ) {
-      var node = nodes[i];
-
-      if( !node.className ) {
-        node.className += ' roll';
-      }
-    }
-  }
-}
-
-

Courtesy of highlight.js.

-
-

Intergalactic Interconnections

@@ -338,10 +313,13 @@ function linkify( selector ) {

-

Spectacular image!

- - Meny - +

Speaker View

+

There's a speaker view. It includes a timer, preview of the upcoming slide as well as your speaker notes.

+

Press the S key to try it out.

+ +
@@ -353,6 +331,27 @@ function linkify( selector ) {
+
+

Global State

+

+ Set data-state="something" on a slide and "something" + will be added as a class to the document element when the slide is open. This lets you + apply broader style changes, like switching the page background. +

+
+ +
+

State Events

+

+ Additionally custom events can be triggered on a per slide basis by binding to the data-state name. +

+ 

+Reveal.addEventListener( 'customevent', function() {
+	console.log( '"customevent" has fired' );
+} );
+
+
+

Take a Moment

@@ -360,6 +359,15 @@ function linkify( selector ) {

+
+

Much more

+ +
+

Stellar Links

    -- cgit v1.2.3 From c3f9aabe04660af9aad07ec47f559d52d215b742 Mon Sep 17 00:00:00 2001 From: Hakim El Hattab Date: Thu, 18 Dec 2014 17:29:51 +0100 Subject: add white theme, reverse of default theme #1018 --- Gruntfile.js | 3 +- README.md | 1 + css/theme/source/white.scss | 49 +++++++++ css/theme/white.css | 261 ++++++++++++++++++++++++++++++++++++++++++++ index.html | 5 +- 5 files changed, 316 insertions(+), 3 deletions(-) create mode 100644 css/theme/source/white.scss create mode 100644 css/theme/white.css (limited to 'index.html') diff --git a/Gruntfile.js b/Gruntfile.js index e3f017c..97976e4 100644 --- a/Gruntfile.js +++ b/Gruntfile.js @@ -37,8 +37,9 @@ module.exports = function(grunt) { }, themes: { files: { - 'css/theme/league.css': 'css/theme/source/league.scss', 'css/theme/black.css': 'css/theme/source/black.scss', + 'css/theme/white.css': 'css/theme/source/white.scss', + 'css/theme/league.css': 'css/theme/source/league.scss', 'css/theme/beige.css': 'css/theme/source/beige.scss', 'css/theme/night.css': 'css/theme/source/night.scss', 'css/theme/serif.css': 'css/theme/source/serif.scss', diff --git a/README.md b/README.md index 4c040cf..5143295 100644 --- a/README.md +++ b/README.md @@ -609,6 +609,7 @@ Here's an example of an exported presentation that's been uploaded to SlideShare The framework comes with a few different themes included: - black: Black background, white text, blue links (default theme) +- white: White background, black text, blue links - league: Gray background, white text, blue links (default theme for reveal.js < 3.0.0) - beige: Beige background, dark text, brown links - sky: Blue background, thin white text, blue links diff --git a/css/theme/source/white.scss b/css/theme/source/white.scss new file mode 100644 index 0000000..3b306ca --- /dev/null +++ b/css/theme/source/white.scss @@ -0,0 +1,49 @@ +/** + * White theme for reveal.js. + * + * Copyright (C) 2014 Hakim El Hattab, http://hakim.se + */ + + +// Default mixins and settings ----------------- +@import "../template/mixins"; +@import "../template/settings"; +// --------------------------------------------- + + +// Include theme-specific fonts +@import url(https://fonts.googleapis.com/css?family=Montserrat:400); +@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,700,400italic,700italic); + + +// Override theme settings (see ../template/settings.scss) +$backgroundColor: #fff; + +$mainColor: #222; +$headingColor: #222; + +$mainFont: 'Open Sans', Helvetica, sans-serif; +$mainFontSize: 34px; +$headingFont: 'Montserrat', Helvetica, sans-serif; +$headingTextShadow: none; +$headingLetterSpacing: normal; +$headingTextTransform: uppercase; +$linkColor: #3992fb; +$linkColorHover: lighten( $linkColor, 15% ); +$selectionBackgroundColor: lighten( $linkColor, 25% ); + +$heading1Size: 2.5em; +$heading2Size: 1.6em; +$heading3Size: 1.3em; +$heading4Size: 1.0em; + +section.has-light-background { + &, h1, h2, h3, h4, h5, h6 { + color: #222; + } +} + + +// Theme template ------------------------------ +@import "../template/theme"; +// --------------------------------------------- \ No newline at end of file diff --git a/css/theme/white.css b/css/theme/white.css new file mode 100644 index 0000000..c2dd565 --- /dev/null +++ b/css/theme/white.css @@ -0,0 +1,261 @@ +@import url(https://fonts.googleapis.com/css?family=Montserrat:400); +@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,700,400italic,700italic); +/** + * White theme for reveal.js. + * + * Copyright (C) 2014 Hakim El Hattab, http://hakim.se + */ +section.has-light-background, section.has-light-background h1, section.has-light-background h2, section.has-light-background h3, section.has-light-background h4, section.has-light-background h5, section.has-light-background h6 { + color: #222; } + +/********************************************* + * GLOBAL STYLES + *********************************************/ +body { + background: #fff; + background-color: #fff; } + +.reveal { + font-family: 'Open Sans', Helvetica, sans-serif; + font-size: 34px; + font-weight: normal; + color: #222; } + +::selection { + color: #fff; + background: #b6d7fe; + text-shadow: none; } + +.reveal .slides > section, .reveal .slides > section > section { + line-height: 1.3; + font-weight: inherit; } + +/********************************************* + * HEADERS + *********************************************/ +.reveal h1, .reveal h2, .reveal h3, .reveal h4, .reveal h5, .reveal h6 { + margin: 0 0 20px 0; + color: #222; + font-family: 'Montserrat', Helvetica, sans-serif; + line-height: 1.2; + letter-spacing: normal; + text-transform: uppercase; + text-shadow: none; + word-wrap: break-word; } + +.reveal h1 { + font-size: 2.5em; } + +.reveal h2 { + font-size: 1.6em; } + +.reveal h3 { + font-size: 1.3em; } + +.reveal h4 { + font-size: 1em; } + +.reveal h1 { + text-shadow: none; } + +/********************************************* + * OTHER + *********************************************/ +.reveal p { + margin: 20px 0; + line-height: 1.3; } + +/* Ensure certain elements are never larger than the slide itself */ +.reveal img, .reveal video, .reveal iframe { + max-width: 95%; + max-height: 95%; } + +.reveal strong, .reveal b { + font-weight: bold; } + +.reveal em { + font-style: italic; } + +.reveal ol, .reveal dl, .reveal ul { + display: inline-block; + text-align: left; + margin: 0 0 0 1em; } + +.reveal ol { + list-style-type: decimal; } + +.reveal ul { + list-style-type: disc; } + +.reveal ul ul { + list-style-type: square; } + +.reveal ul ul ul { + list-style-type: circle; } + +.reveal ul ul, .reveal ul ol, .reveal ol ol, .reveal ol ul { + display: block; + margin-left: 40px; } + +.reveal dt { + font-weight: bold; } + +.reveal dd { + margin-left: 40px; } + +.reveal q, .reveal blockquote { + quotes: none; } + +.reveal blockquote { + display: block; + position: relative; + width: 70%; + margin: 20px auto; + padding: 5px; + font-style: italic; + background: rgba(255, 255, 255, 0.05); + box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.2); } + +.reveal blockquote p:first-child, .reveal blockquote p:last-child { + display: inline-block; } + +.reveal q { + font-style: italic; } + +.reveal pre { + display: block; + position: relative; + width: 90%; + margin: 20px auto; + text-align: left; + font-size: 0.55em; + font-family: monospace; + line-height: 1.2em; + word-wrap: break-word; + box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.3); } + +.reveal code { + font-family: monospace; } + +.reveal pre code { + display: block; + padding: 5px; + overflow: auto; + max-height: 400px; + word-wrap: normal; + background: #3F3F3F; + color: #DCDCDC; } + +.reveal table { + margin: auto; + border-collapse: collapse; + border-spacing: 0; } + +.reveal table th { + font-weight: bold; } + +.reveal table th, .reveal table td { + text-align: left; + padding: 0.2em 0.5em 0.2em 0.5em; + border-bottom: 1px solid; } + +.reveal table tr:last-child td { + border-bottom: none; } + +.reveal sup { + vertical-align: super; } + +.reveal sub { + vertical-align: sub; } + +.reveal small { + display: inline-block; + font-size: 0.6em; + line-height: 1.2em; + vertical-align: top; } + +.reveal small * { + vertical-align: top; } + +/********************************************* + * LINKS + *********************************************/ +.reveal a { + color: #3992fb; + text-decoration: none; + -webkit-transition: color 0.15s ease; + -moz-transition: color 0.15s ease; + transition: color 0.15s ease; } + +.reveal a:hover { + color: #84bcfd; + text-shadow: none; + border: none; } + +.reveal .roll span:after { + color: #fff; + background: #056ce3; } + +/********************************************* + * IMAGES + *********************************************/ +.reveal section img { + margin: 15px 0px; + background: rgba(255, 255, 255, 0.12); + border: 4px solid #222; + box-shadow: 0 0 10px rgba(0, 0, 0, 0.15); } + +.reveal a img { + -webkit-transition: all 0.15s linear; + -moz-transition: all 0.15s linear; + transition: all 0.15s linear; } + +.reveal a:hover img { + background: rgba(255, 255, 255, 0.2); + border-color: #3992fb; + box-shadow: 0 0 20px rgba(0, 0, 0, 0.55); } + +/********************************************* + * NAVIGATION CONTROLS + *********************************************/ +.reveal .controls div.navigate-left, .reveal .controls div.navigate-left.enabled { + border-right-color: #3992fb; } + +.reveal .controls div.navigate-right, .reveal .controls div.navigate-right.enabled { + border-left-color: #3992fb; } + +.reveal .controls div.navigate-up, .reveal .controls div.navigate-up.enabled { + border-bottom-color: #3992fb; } + +.reveal .controls div.navigate-down, .reveal .controls div.navigate-down.enabled { + border-top-color: #3992fb; } + +.reveal .controls div.navigate-left.enabled:hover { + border-right-color: #84bcfd; } + +.reveal .controls div.navigate-right.enabled:hover { + border-left-color: #84bcfd; } + +.reveal .controls div.navigate-up.enabled:hover { + border-bottom-color: #84bcfd; } + +.reveal .controls div.navigate-down.enabled:hover { + border-top-color: #84bcfd; } + +/********************************************* + * PROGRESS BAR + *********************************************/ +.reveal .progress { + background: rgba(0, 0, 0, 0.2); } + +.reveal .progress span { + background: #3992fb; + -webkit-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); + -moz-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); + transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); } + +/********************************************* + * SLIDE NUMBER + *********************************************/ +.reveal .slide-number { + color: #3992fb; } diff --git a/index.html b/index.html index 6a8bd6d..cd588cd 100644 --- a/index.html +++ b/index.html @@ -164,12 +164,13 @@

    reveal.js comes with a few themes built in:
    Black (default) - + White - League - Sky - Beige - - Simple - + Simple
    Serif - - Night
    + Night - Moon - Solarized

    -- cgit v1.2.3 From 7c03d6018617a3430ae10fd855467175ad17c096 Mon Sep 17 00:00:00 2001 From: Hakim El Hattab Date: Thu, 18 Dec 2014 17:45:51 +0100 Subject: remove theme config option #1061 --- index.html | 21 +++++++++++---------- js/reveal.js | 15 --------------- 2 files changed, 11 insertions(+), 25 deletions(-) (limited to 'index.html') diff --git a/index.html b/index.html index cd588cd..7095b22 100644 --- a/index.html +++ b/index.html @@ -163,16 +163,17 @@

    Themes

    reveal.js comes with a few themes built in:
    - Black (default) - - White - - League - - Sky - - Beige - - Simple
    - Serif - - Night - - Moon - - Solarized + + Black (default) - + White - + League - + Sky - + Beige - + Simple
    + Serif - + Night - + Moon - + Solarized

    diff --git a/js/reveal.js b/js/reveal.js index 9681694..5690a27 100644 --- a/js/reveal.js +++ b/js/reveal.js @@ -121,9 +121,6 @@ // Focuses body when page changes visiblity to ensure keyboard shortcuts work focusBodyOnPageVisibilityChange: true, - // Theme (see /css/theme) - theme: null, - // Transition style transition: 'default', // none/fade/slide/convex/concave/zoom @@ -870,18 +867,6 @@ } ); } - // Load the theme in the config, if it's not already loaded - if( config.theme && dom.theme ) { - var themeURL = dom.theme.getAttribute( 'href' ); - var themeFinder = /[^\/]*?(?=\.css)/; - var themeName = themeURL.match(themeFinder)[0]; - - if( config.theme !== themeName ) { - themeURL = themeURL.replace(themeFinder, config.theme); - dom.theme.setAttribute( 'href', themeURL ); - } - } - sync(); } -- cgit v1.2.3 From 1bc1dd12e6671a811abba0397fc7402b7bac07ef Mon Sep 17 00:00:00 2001 From: Hakim El Hattab Date: Thu, 18 Dec 2014 17:53:08 +0100 Subject: bad theme name --- index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'index.html') diff --git a/index.html b/index.html index 7095b22..74953ca 100644 --- a/index.html +++ b/index.html @@ -164,7 +164,7 @@

    reveal.js comes with a few themes built in:
    - Black (default) - + Black (default) - White - League - Sky - -- cgit v1.2.3 From d4bdf29c813f27681f76de0d101fd7cb0e7b232e Mon Sep 17 00:00:00 2001 From: Hakim El Hattab Date: Thu, 18 Dec 2014 18:27:48 +0100 Subject: new pdf export example --- index.html | 7 ++----- 1 file changed, 2 insertions(+), 5 deletions(-) (limited to 'index.html') diff --git a/index.html b/index.html index 74953ca..389613c 100644 --- a/index.html +++ b/index.html @@ -326,11 +326,8 @@ function linkify( selector ) {

    Export to PDF

    -

    Presentations can be exported to PDF, below is an example that's been uploaded to SlideShare.

    - - +

    Presentations can be exported to PDF, here's an example:

    +
    -- cgit v1.2.3 From 9dbc9e77199e4848a30b3216bbee64e83048aa8a Mon Sep 17 00:00:00 2001 From: Hakim El Hattab Date: Sat, 27 Dec 2014 21:16:44 +0100 Subject: tweak comments --- index.html | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) (limited to 'index.html') diff --git a/index.html b/index.html index 389613c..4b1dda4 100644 --- a/index.html +++ b/index.html @@ -17,10 +17,10 @@ - + - +