reveal-ck 0.1.2 → 0.1.3
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +8 -8
- data/README.md +13 -0
- data/bin/reveal-ck +23 -8
- data/lib/reveal-ck.rb +6 -0
- data/lib/reveal-ck/build_task.rb +14 -0
- data/lib/reveal-ck/builder.rb +21 -0
- data/lib/reveal-ck/config.rb +43 -0
- data/lib/reveal-ck/file_slicer.rb +19 -17
- data/lib/reveal-ck/file_splicer.rb +30 -28
- data/lib/reveal-ck/file_string_replacer.rb +17 -0
- data/lib/reveal-ck/haml_processor.rb +17 -15
- data/lib/reveal-ck/presentation_builder.rb +69 -0
- data/lib/reveal-ck/slide_builder.rb +66 -0
- data/lib/reveal-ck/version.rb +1 -1
- data/rakelib/cucumber.rake +14 -1
- data/reveal.js/Gruntfile.js +132 -0
- data/reveal.js/LICENSE +1 -1
- data/reveal.js/README.md +362 -50
- data/reveal.js/css/print/paper.css +14 -14
- data/reveal.js/css/print/pdf.css +60 -30
- data/reveal.js/css/reveal.css +444 -149
- data/reveal.js/css/reveal.min.css +2 -2
- data/reveal.js/css/theme/README.md +8 -10
- data/reveal.js/css/theme/beige.css +24 -45
- data/reveal.js/css/theme/default.css +24 -45
- data/reveal.js/css/theme/moon.css +142 -0
- data/reveal.js/css/theme/night.css +24 -44
- data/reveal.js/css/theme/serif.css +27 -45
- data/reveal.js/css/theme/simple.css +25 -45
- data/reveal.js/css/theme/sky.css +26 -43
- data/reveal.js/css/theme/solarized.css +142 -0
- data/reveal.js/css/theme/source/beige.scss +2 -2
- data/reveal.js/css/theme/source/default.scss +2 -2
- data/reveal.js/css/theme/source/moon.scss +68 -0
- data/reveal.js/css/theme/source/night.scss +4 -4
- data/reveal.js/css/theme/source/serif.scss +8 -6
- data/reveal.js/css/theme/source/simple.scss +5 -5
- data/reveal.js/css/theme/source/sky.scss +9 -4
- data/reveal.js/css/theme/source/solarized.scss +74 -0
- data/reveal.js/css/theme/template/settings.scss +2 -2
- data/reveal.js/examples/assets/image1.png +0 -0
- data/reveal.js/examples/assets/image2.png +0 -0
- data/reveal.js/examples/barebones.html +42 -0
- data/reveal.js/examples/embedded-media.html +49 -0
- data/reveal.js/examples/slide-backgrounds.html +101 -0
- data/reveal.js/index.html +63 -56
- data/reveal.js/js/reveal.js +997 -216
- data/reveal.js/js/reveal.min.js +3 -3
- data/reveal.js/package.json +43 -29
- data/reveal.js/plugin/highlight/highlight.js +28 -6
- data/reveal.js/plugin/markdown/example.html +97 -0
- data/reveal.js/plugin/markdown/example.md +29 -0
- data/reveal.js/plugin/markdown/markdown.js +164 -11
- data/reveal.js/plugin/markdown/marked.js +37 -0
- data/reveal.js/plugin/multiplex/client.js +13 -0
- data/reveal.js/plugin/multiplex/index.js +56 -0
- data/reveal.js/plugin/multiplex/master.js +50 -0
- data/reveal.js/plugin/notes-server/index.js +1 -0
- data/reveal.js/plugin/notes-server/notes.html +8 -5
- data/reveal.js/plugin/notes/notes.html +133 -44
- data/reveal.js/plugin/notes/notes.js +3 -1
- data/reveal.js/plugin/print-pdf/print-pdf.js +8 -3
- data/reveal.js/plugin/remotes/remotes.js +13 -4
- data/reveal.js/plugin/search/search.js +196 -0
- data/reveal.js/plugin/zoom-js/zoom.js +26 -21
- data/spec/data/config/config.toml +6 -0
- data/spec/data/string_replacer/after_replace +4 -0
- data/spec/data/string_replacer/before_replace +4 -0
- data/spec/lib/reveal-ck/config_spec.rb +50 -0
- data/spec/lib/reveal-ck/file_slicer_spec.rb +29 -27
- data/spec/lib/reveal-ck/file_splicer_spec.rb +28 -26
- data/spec/lib/reveal-ck/file_string_replacer_spec.rb +32 -0
- data/spec/lib/reveal-ck/haml_processor_spec.rb +28 -26
- metadata +82 -27
- data/rakelib/presentation.rake +0 -41
- data/rakelib/reveal.rake +0 -15
- data/reveal.js/css/shaders/tile-flip.fs +0 -64
- data/reveal.js/css/shaders/tile-flip.vs +0 -141
- data/reveal.js/grunt.js +0 -84
- data/reveal.js/plugin/markdown/showdown.js +0 -62
@@ -1,7 +1,7 @@
|
|
1
1
|
/**
|
2
|
-
* A simple theme for reveal.js presentations, similar
|
2
|
+
* A simple theme for reveal.js presentations, similar
|
3
3
|
* to the default theme. The accent color is darkblue.
|
4
|
-
*
|
4
|
+
*
|
5
5
|
* This theme is Copyright (C) 2012 Owen Versteeg, https://github.com/StereotypicalApps. It is MIT licensed.
|
6
6
|
* reveal.js is Copyright (C) 2011-2012 Hakim El Hattab, http://hakim.se
|
7
7
|
*/
|
@@ -15,12 +15,12 @@
|
|
15
15
|
|
16
16
|
|
17
17
|
// Include theme-specific fonts
|
18
|
-
@import url(
|
19
|
-
@import url(
|
18
|
+
@import url(https://fonts.googleapis.com/css?family=News+Cycle:400,700);
|
19
|
+
@import url(https://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic);
|
20
20
|
|
21
21
|
|
22
22
|
// Override theme settings (see ../template/settings.scss)
|
23
|
-
$mainFont: 'Lato',
|
23
|
+
$mainFont: 'Lato', sans-serif;
|
24
24
|
$mainColor: #000;
|
25
25
|
$headingFont: 'News Cycle', Impact, sans-serif;
|
26
26
|
$headingColor: #000;
|
@@ -1,6 +1,6 @@
|
|
1
1
|
/**
|
2
2
|
* Sky theme for reveal.js.
|
3
|
-
*
|
3
|
+
*
|
4
4
|
* Copyright (C) 2011-2012 Hakim El Hattab, http://hakim.se
|
5
5
|
*/
|
6
6
|
|
@@ -13,8 +13,8 @@
|
|
13
13
|
|
14
14
|
|
15
15
|
// Include theme-specific fonts
|
16
|
-
@import url(
|
17
|
-
@import url(
|
16
|
+
@import url(https://fonts.googleapis.com/css?family=Quicksand:400,700,400italic,700italic);
|
17
|
+
@import url(https://fonts.googleapis.com/css?family=Open+Sans:400italic,700italic,400,700);
|
18
18
|
|
19
19
|
|
20
20
|
// Override theme settings (see ../template/settings.scss)
|
@@ -29,6 +29,11 @@ $linkColor: #3b759e;
|
|
29
29
|
$linkColorHover: lighten( $linkColor, 20% );
|
30
30
|
$selectionBackgroundColor: #134674;
|
31
31
|
|
32
|
+
// Fix links so they are not cut off
|
33
|
+
.reveal a:not(.image) {
|
34
|
+
line-height: 1.3em;
|
35
|
+
}
|
36
|
+
|
32
37
|
// Background generator
|
33
38
|
@mixin bodyBackground() {
|
34
39
|
@include radial-gradient( #add9e4, #f7fbfc );
|
@@ -38,4 +43,4 @@ $selectionBackgroundColor: #134674;
|
|
38
43
|
|
39
44
|
// Theme template ------------------------------
|
40
45
|
@import "../template/theme";
|
41
|
-
// ---------------------------------------------
|
46
|
+
// ---------------------------------------------
|
@@ -0,0 +1,74 @@
|
|
1
|
+
/**
|
2
|
+
* Solarized Light theme for reveal.js.
|
3
|
+
* Author: Achim Staebler
|
4
|
+
*/
|
5
|
+
|
6
|
+
|
7
|
+
// Default mixins and settings -----------------
|
8
|
+
@import "../template/mixins";
|
9
|
+
@import "../template/settings";
|
10
|
+
// ---------------------------------------------
|
11
|
+
|
12
|
+
|
13
|
+
|
14
|
+
// Include theme-specific fonts
|
15
|
+
@font-face {
|
16
|
+
font-family: 'League Gothic';
|
17
|
+
src: url('../../lib/font/league_gothic-webfont.eot');
|
18
|
+
src: url('../../lib/font/league_gothic-webfont.eot?#iefix') format('embedded-opentype'),
|
19
|
+
url('../../lib/font/league_gothic-webfont.woff') format('woff'),
|
20
|
+
url('../../lib/font/league_gothic-webfont.ttf') format('truetype'),
|
21
|
+
url('../../lib/font/league_gothic-webfont.svg#LeagueGothicRegular') format('svg');
|
22
|
+
|
23
|
+
font-weight: normal;
|
24
|
+
font-style: normal;
|
25
|
+
}
|
26
|
+
|
27
|
+
@import url(https://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic);
|
28
|
+
|
29
|
+
|
30
|
+
/**
|
31
|
+
* Solarized colors by Ethan Schoonover
|
32
|
+
*/
|
33
|
+
html * {
|
34
|
+
color-profile: sRGB;
|
35
|
+
rendering-intent: auto;
|
36
|
+
}
|
37
|
+
|
38
|
+
// Solarized colors
|
39
|
+
$base03: #002b36;
|
40
|
+
$base02: #073642;
|
41
|
+
$base01: #586e75;
|
42
|
+
$base00: #657b83;
|
43
|
+
$base0: #839496;
|
44
|
+
$base1: #93a1a1;
|
45
|
+
$base2: #eee8d5;
|
46
|
+
$base3: #fdf6e3;
|
47
|
+
$yellow: #b58900;
|
48
|
+
$orange: #cb4b16;
|
49
|
+
$red: #dc322f;
|
50
|
+
$magenta: #d33682;
|
51
|
+
$violet: #6c71c4;
|
52
|
+
$blue: #268bd2;
|
53
|
+
$cyan: #2aa198;
|
54
|
+
$green: #859900;
|
55
|
+
|
56
|
+
// Override theme settings (see ../template/settings.scss)
|
57
|
+
$mainColor: $base00;
|
58
|
+
$headingColor: $base01;
|
59
|
+
$headingTextShadow: none;
|
60
|
+
$backgroundColor: $base3;
|
61
|
+
$linkColor: $blue;
|
62
|
+
$linkColorHover: lighten( $linkColor, 20% );
|
63
|
+
$selectionBackgroundColor: $magenta;
|
64
|
+
|
65
|
+
// Background generator
|
66
|
+
// @mixin bodyBackground() {
|
67
|
+
// @include radial-gradient( rgba($base3,1), rgba(lighten($base3, 20%),1) );
|
68
|
+
// }
|
69
|
+
|
70
|
+
|
71
|
+
|
72
|
+
// Theme template ------------------------------
|
73
|
+
@import "../template/theme";
|
74
|
+
// ---------------------------------------------
|
@@ -1,11 +1,11 @@
|
|
1
|
-
// Base settings for all themes that can optionally be
|
1
|
+
// Base settings for all themes that can optionally be
|
2
2
|
// overridden by the super-theme
|
3
3
|
|
4
4
|
// Background of the presentation
|
5
5
|
$backgroundColor: #2b2b2b;
|
6
6
|
|
7
7
|
// Primary/body text
|
8
|
-
$mainFont: 'Lato',
|
8
|
+
$mainFont: 'Lato', sans-serif;
|
9
9
|
$mainFontSize: 36px;
|
10
10
|
$mainColor: #eee;
|
11
11
|
|
Binary file
|
Binary file
|
@@ -0,0 +1,42 @@
|
|
1
|
+
<!doctype html>
|
2
|
+
<html lang="en">
|
3
|
+
|
4
|
+
<head>
|
5
|
+
<meta charset="utf-8">
|
6
|
+
|
7
|
+
<title>reveal.js - Barebones</title>
|
8
|
+
|
9
|
+
<link rel="stylesheet" href="../css/reveal.min.css">
|
10
|
+
</head>
|
11
|
+
|
12
|
+
<body>
|
13
|
+
|
14
|
+
<div class="reveal">
|
15
|
+
|
16
|
+
<div class="slides">
|
17
|
+
|
18
|
+
<section>
|
19
|
+
<h2>Barebones Presentation</h2>
|
20
|
+
<p>This example contains the bare minimum includes and markup required to run a reveal.js presentation.</p>
|
21
|
+
</section>
|
22
|
+
|
23
|
+
<section>
|
24
|
+
<h2>No Theme</h2>
|
25
|
+
<p>There's no theme included, so it will fall back on browser defaults.</p>
|
26
|
+
</section>
|
27
|
+
|
28
|
+
</div>
|
29
|
+
|
30
|
+
</div>
|
31
|
+
|
32
|
+
<script src="../lib/js/head.min.js"></script>
|
33
|
+
<script src="../js/reveal.min.js"></script>
|
34
|
+
|
35
|
+
<script>
|
36
|
+
|
37
|
+
Reveal.initialize();
|
38
|
+
|
39
|
+
</script>
|
40
|
+
|
41
|
+
</body>
|
42
|
+
</html>
|
@@ -0,0 +1,49 @@
|
|
1
|
+
<!doctype html>
|
2
|
+
<html lang="en">
|
3
|
+
|
4
|
+
<head>
|
5
|
+
<meta charset="utf-8">
|
6
|
+
|
7
|
+
<title>reveal.js - Embedded Media</title>
|
8
|
+
|
9
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
|
10
|
+
|
11
|
+
<link rel="stylesheet" href="../css/reveal.min.css">
|
12
|
+
<link rel="stylesheet" href="../css/theme/default.css" id="theme">
|
13
|
+
</head>
|
14
|
+
|
15
|
+
<body>
|
16
|
+
|
17
|
+
<div class="reveal">
|
18
|
+
|
19
|
+
<div class="slides">
|
20
|
+
|
21
|
+
<section>
|
22
|
+
<h2>Embedded Media Test</h2>
|
23
|
+
</section>
|
24
|
+
|
25
|
+
<section>
|
26
|
+
<iframe data-autoplay width="420" height="345" src="http://www.youtube.com/embed/l3RQZ4mcr1c"></iframe>
|
27
|
+
</section>
|
28
|
+
|
29
|
+
<section>
|
30
|
+
<h2>Empty Slide</h2>
|
31
|
+
</section>
|
32
|
+
|
33
|
+
</div>
|
34
|
+
|
35
|
+
</div>
|
36
|
+
|
37
|
+
<script src="../lib/js/head.min.js"></script>
|
38
|
+
<script src="../js/reveal.min.js"></script>
|
39
|
+
|
40
|
+
<script>
|
41
|
+
|
42
|
+
Reveal.initialize({
|
43
|
+
transition: 'linear'
|
44
|
+
});
|
45
|
+
|
46
|
+
</script>
|
47
|
+
|
48
|
+
</body>
|
49
|
+
</html>
|
@@ -0,0 +1,101 @@
|
|
1
|
+
<!doctype html>
|
2
|
+
<html lang="en">
|
3
|
+
|
4
|
+
<head>
|
5
|
+
<meta charset="utf-8">
|
6
|
+
|
7
|
+
<title>reveal.js - Slide Backgrounds</title>
|
8
|
+
|
9
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
|
10
|
+
|
11
|
+
<link rel="stylesheet" href="../css/reveal.min.css">
|
12
|
+
<link rel="stylesheet" href="../css/theme/serif.css" id="theme">
|
13
|
+
</head>
|
14
|
+
|
15
|
+
<body>
|
16
|
+
|
17
|
+
<div class="reveal">
|
18
|
+
|
19
|
+
<div class="slides">
|
20
|
+
|
21
|
+
<section data-background="#00ffff">
|
22
|
+
<h2>data-background: #00ffff</h2>
|
23
|
+
</section>
|
24
|
+
|
25
|
+
<section data-background="#bb00bb">
|
26
|
+
<h2>data-background: #bb00bb</h2>
|
27
|
+
</section>
|
28
|
+
|
29
|
+
<section>
|
30
|
+
<section data-background="#ff0000">
|
31
|
+
<h2>data-background: #ff0000</h2>
|
32
|
+
</section>
|
33
|
+
<section data-background="rgba(0, 0, 0, 0.2)">
|
34
|
+
<h2>data-background: rgba(0, 0, 0, 0.2)</h2>
|
35
|
+
</section>
|
36
|
+
<section data-background="salmon">
|
37
|
+
<h2>data-background: salmon</h2>
|
38
|
+
</section>
|
39
|
+
</section>
|
40
|
+
|
41
|
+
<section data-background="rgba(0, 100, 100, 0.2)">
|
42
|
+
<section>
|
43
|
+
<h2>Background applied to stack</h2>
|
44
|
+
</section>
|
45
|
+
<section>
|
46
|
+
<h2>Background applied to stack</h2>
|
47
|
+
</section>
|
48
|
+
<section data-background="rgba(100, 0, 0, 0.2)">
|
49
|
+
<h2>Background applied to slide inside of stack</h2>
|
50
|
+
</section>
|
51
|
+
</section>
|
52
|
+
|
53
|
+
<section data-background-transition="slide" data-background="assets/image1.png" style="background: rgba(255,255,255,0.9)">
|
54
|
+
<h2>Background image</h2>
|
55
|
+
</section>
|
56
|
+
|
57
|
+
<section>
|
58
|
+
<section data-background-transition="slide" data-background="assets/image1.png" style="background: rgba(255,255,255,0.9)">
|
59
|
+
<h2>Background image</h2>
|
60
|
+
</section>
|
61
|
+
<section data-background-transition="slide" data-background="assets/image1.png" style="background: rgba(255,255,255,0.9)">
|
62
|
+
<h2>Background image</h2>
|
63
|
+
</section>
|
64
|
+
</section>
|
65
|
+
|
66
|
+
<section data-background="assets/image2.png" data-background-size="100px" data-background-repeat="repeat" data-background-color="#111" style="background: rgba(255,255,255,0.9)">
|
67
|
+
<h2>Background image</h2>
|
68
|
+
<pre>data-background-size="100px" data-background-repeat="repeat" data-background-color="#111"</pre>
|
69
|
+
</section>
|
70
|
+
|
71
|
+
<section data-background="#888888">
|
72
|
+
<h2>Same background twice (1/2)</h2>
|
73
|
+
</section>
|
74
|
+
<section data-background="#888888">
|
75
|
+
<h2>Same background twice (2/2)</h2>
|
76
|
+
</section>
|
77
|
+
|
78
|
+
</div>
|
79
|
+
|
80
|
+
</div>
|
81
|
+
|
82
|
+
<script src="../lib/js/head.min.js"></script>
|
83
|
+
<script src="../js/reveal.min.js"></script>
|
84
|
+
|
85
|
+
<script>
|
86
|
+
|
87
|
+
// Full list of configuration options available here:
|
88
|
+
// https://github.com/hakimel/reveal.js#configuration
|
89
|
+
Reveal.initialize({
|
90
|
+
center: true,
|
91
|
+
// rtl: true,
|
92
|
+
|
93
|
+
transition: 'linear',
|
94
|
+
// transitionSpeed: 'slow',
|
95
|
+
// backgroundTransition: 'linear'
|
96
|
+
});
|
97
|
+
|
98
|
+
</script>
|
99
|
+
|
100
|
+
</body>
|
101
|
+
</html>
|
data/reveal.js/index.html
CHANGED
@@ -12,6 +12,8 @@
|
|
12
12
|
<meta name="apple-mobile-web-app-capable" content="yes" />
|
13
13
|
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
|
14
14
|
|
15
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
|
16
|
+
|
15
17
|
<link rel="stylesheet" href="css/reveal.min.css">
|
16
18
|
<link rel="stylesheet" href="css/theme/default.css" id="theme">
|
17
19
|
|
@@ -34,7 +36,6 @@
|
|
34
36
|
|
35
37
|
<!-- Any section element inside of this container is displayed as a slide -->
|
36
38
|
<div class="slides">
|
37
|
-
|
38
39
|
<section>
|
39
40
|
<h1>Reveal.js</h1>
|
40
41
|
<h3>HTML Presentations Made Easy</h3>
|
@@ -88,16 +89,19 @@
|
|
88
89
|
</section>
|
89
90
|
|
90
91
|
<section>
|
91
|
-
<h2>
|
92
|
+
<h2>Slides</h2>
|
92
93
|
<p>
|
93
|
-
|
94
|
+
Not a coder? No problem. There's a fully-featured visual editor for authoring these, try it out at <a href="http://slid.es" target="_blank">http://slid.es</a>.
|
94
95
|
</p>
|
95
96
|
</section>
|
96
97
|
|
97
98
|
<section>
|
98
|
-
<h2>
|
99
|
+
<h2>Point of View</h2>
|
100
|
+
<p>
|
101
|
+
Press <strong>ESC</strong> to enter the slide overview.
|
102
|
+
</p>
|
99
103
|
<p>
|
100
|
-
|
104
|
+
Hold down alt and click on any element to zoom in on it using <a href="http://lab.hakim.se/zoom-js">zoom.js</a>. Alt + click anywhere to zoom back out.
|
101
105
|
</p>
|
102
106
|
</section>
|
103
107
|
|
@@ -133,12 +137,14 @@
|
|
133
137
|
|
134
138
|
For those of you who like that sort of thing. Instructions and a bit more info available [here](https://github.com/hakimel/reveal.js#markdown).
|
135
139
|
|
136
|
-
|
137
|
-
|
140
|
+
```
|
141
|
+
<section data-markdown>
|
142
|
+
## Markdown support
|
138
143
|
|
139
|
-
|
140
|
-
|
141
|
-
|
144
|
+
For those of you who like that sort of thing.
|
145
|
+
Instructions and a bit more info available [here](https://github.com/hakimel/reveal.js#markdown).
|
146
|
+
</section>
|
147
|
+
```
|
142
148
|
</script>
|
143
149
|
</section>
|
144
150
|
|
@@ -176,57 +182,75 @@
|
|
176
182
|
</section>
|
177
183
|
|
178
184
|
<section>
|
179
|
-
<
|
180
|
-
|
185
|
+
<h2>Global State</h2>
|
186
|
+
<p>
|
187
|
+
Set <code>data-state="something"</code> on a slide and <code>"something"</code>
|
188
|
+
will be added as a class to the document element when the slide is open. This lets you
|
189
|
+
apply broader style changes, like switching the background.
|
190
|
+
</p>
|
191
|
+
</section>
|
192
|
+
|
193
|
+
<section data-state="customevent">
|
194
|
+
<h2>Custom Events</h2>
|
195
|
+
<p>
|
196
|
+
Additionally custom events can be triggered on a per slide basis by binding to the <code>data-state</code> name.
|
197
|
+
</p>
|
198
|
+
<pre><code data-trim contenteditable style="font-size: 18px; margin-top: 20px;">
|
199
|
+
Reveal.addEventListener( 'customevent', function() {
|
200
|
+
console.log( '"customevent" has fired' );
|
201
|
+
} );
|
202
|
+
</code></pre>
|
203
|
+
</section>
|
204
|
+
|
205
|
+
<section>
|
206
|
+
<section data-background="#007777">
|
207
|
+
<h2>Slide Backgrounds</h2>
|
181
208
|
<p>
|
182
|
-
Set <code>data-
|
183
|
-
will be added as a class to the document element when the slide is open. This lets you
|
184
|
-
apply broader style changes, like switching the background.
|
209
|
+
Set <code>data-background="#007777"</code> on a slide to change the full page background to the given color. All CSS color formats are supported.
|
185
210
|
</p>
|
186
211
|
<a href="#" class="image navigate-down">
|
187
212
|
<img width="178" height="238" src="https://s3.amazonaws.com/hakim-static/reveal-js/arrow.png" alt="Down arrow">
|
188
213
|
</a>
|
189
214
|
</section>
|
190
|
-
<section data-
|
191
|
-
<h2>
|
192
|
-
<
|
193
|
-
<img width="178" height="238" src="https://s3.amazonaws.com/hakim-static/reveal-js/arrow.png" alt="Down arrow">
|
194
|
-
</a>
|
215
|
+
<section data-background="https://s3.amazonaws.com/hakim-static/reveal-js/arrow.png">
|
216
|
+
<h2>Image Backgrounds</h2>
|
217
|
+
<pre><code><section data-background="image.png"></code></pre>
|
195
218
|
</section>
|
196
|
-
<section data-
|
197
|
-
<h2>
|
198
|
-
<
|
199
|
-
<img width="178" height="238" src="https://s3.amazonaws.com/hakim-static/reveal-js/arrow.png" alt="Up arrow" style="-webkit-transform: rotate(-90deg);">
|
200
|
-
</a>
|
219
|
+
<section data-background="https://s3.amazonaws.com/hakim-static/reveal-js/arrow.png" data-background-repeat="repeat" data-background-size="100px">
|
220
|
+
<h2>Repeated Image Backgrounds</h2>
|
221
|
+
<pre><code style="word-wrap: break-word;"><section data-background="image.png" data-background-repeat="repeat" data-background-size="100px"></code></pre>
|
201
222
|
</section>
|
202
223
|
</section>
|
203
224
|
|
204
|
-
<section data-
|
205
|
-
<h2>
|
225
|
+
<section data-transition="linear" data-background="#4d7e65" data-background-transition="slide">
|
226
|
+
<h2>Background Transitions</h2>
|
206
227
|
<p>
|
207
|
-
|
228
|
+
Pass reveal.js the <code>backgroundTransition: 'slide'</code> config argument to make backgrounds slide rather than fade.
|
229
|
+
</p>
|
230
|
+
</section>
|
231
|
+
|
232
|
+
<section data-transition="linear" data-background="#8c4738" data-background-transition="slide">
|
233
|
+
<h2>Background Transition Override</h2>
|
234
|
+
<p>
|
235
|
+
You can override background transitions per slide by using <code>data-background-transition="slide"</code>.
|
208
236
|
</p>
|
209
|
-
<pre><code contenteditable style="font-size: 18px; margin-top: 20px;">Reveal.addEventListener( 'customevent', function() {
|
210
|
-
console.log( '"customevent" has fired' );
|
211
|
-
} );
|
212
|
-
</code></pre>
|
213
237
|
</section>
|
214
238
|
|
215
239
|
<section>
|
216
240
|
<h2>Clever Quotes</h2>
|
217
241
|
<p>
|
218
242
|
These guys come in two forms, inline: <q cite="http://searchservervirtualization.techtarget.com/definition/Our-Favorite-Technology-Quotations">
|
219
|
-
The nice thing about standards is that there are so many to choose from
|
243
|
+
“The nice thing about standards is that there are so many to choose from”</q> and block:
|
220
244
|
</p>
|
221
245
|
<blockquote cite="http://searchservervirtualization.techtarget.com/definition/Our-Favorite-Technology-Quotations">
|
222
|
-
For years there has been a theory that millions of monkeys typing at random on millions of typewriters would
|
223
|
-
reproduce the entire works of Shakespeare. The Internet has proven this theory to be untrue
|
246
|
+
“For years there has been a theory that millions of monkeys typing at random on millions of typewriters would
|
247
|
+
reproduce the entire works of Shakespeare. The Internet has proven this theory to be untrue.”
|
224
248
|
</blockquote>
|
225
249
|
</section>
|
226
250
|
|
227
251
|
<section>
|
228
252
|
<h2>Pretty Code</h2>
|
229
|
-
<pre><code contenteditable>
|
253
|
+
<pre><code data-trim contenteditable>
|
230
254
|
function linkify( selector ) {
|
231
255
|
if( supports3DTransforms ) {
|
232
256
|
|
@@ -308,30 +332,12 @@ function linkify( selector ) {
|
|
308
332
|
<section>
|
309
333
|
<h2>Stellar Links</h2>
|
310
334
|
<ul>
|
335
|
+
<li><a href="http://slid.es">Try the online editor</a></li>
|
311
336
|
<li><a href="https://github.com/hakimel/reveal.js">Source code on GitHub</a></li>
|
312
|
-
<li><a href="http://hakim.se/projects/reveal-js">Leave feedback on my site</a></li>
|
313
337
|
<li><a href="http://twitter.com/hakimel">Follow me on Twitter</a></li>
|
314
338
|
</ul>
|
315
339
|
</section>
|
316
340
|
|
317
|
-
<section>
|
318
|
-
<h2>It's free</h2>
|
319
|
-
<p>
|
320
|
-
reveal.js and <a href="http://www.rvl.io">rvl.io</a> are entirely free but if you'd like to support the projects you can donate below.
|
321
|
-
Donations will go towards hosting and domain costs.
|
322
|
-
</p>
|
323
|
-
<form action="https://www.paypal.com/cgi-bin/webscr" method="post">
|
324
|
-
<input type="hidden" name="cmd" value="_donations">
|
325
|
-
<input type="hidden" name="business" value="hakim.elhattab@gmail.com">
|
326
|
-
<input type="hidden" name="lc" value="US">
|
327
|
-
<input type="hidden" name="item_name" value="reveal.js / rvl.io">
|
328
|
-
<input type="hidden" name="no_note" value="0">
|
329
|
-
<input type="hidden" name="currency_code" value="USD">
|
330
|
-
<input type="hidden" name="bn" value="PP-DonationsBF:btn_donate_LG.gif:NonHostedGuest">
|
331
|
-
<input type="image" src="https://www.paypalobjects.com/en_US/i/btn/btn_donate_LG.gif" border="0" name="submit" alt="PayPal - The safer, easier way to pay online!">
|
332
|
-
</form>
|
333
|
-
</section>
|
334
|
-
|
335
341
|
<section>
|
336
342
|
<h1>THE END</h1>
|
337
343
|
<h3>BY Hakim El Hattab / hakim.se</h3>
|
@@ -360,11 +366,12 @@ function linkify( selector ) {
|
|
360
366
|
// Optional libraries used to extend on reveal.js
|
361
367
|
dependencies: [
|
362
368
|
{ src: 'lib/js/classList.js', condition: function() { return !document.body.classList; } },
|
363
|
-
{ src: 'plugin/markdown/
|
369
|
+
{ src: 'plugin/markdown/marked.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } },
|
364
370
|
{ src: 'plugin/markdown/markdown.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } },
|
365
371
|
{ src: 'plugin/highlight/highlight.js', async: true, callback: function() { hljs.initHighlightingOnLoad(); } },
|
366
372
|
{ src: 'plugin/zoom-js/zoom.js', async: true, condition: function() { return !!document.body.classList; } },
|
367
373
|
{ src: 'plugin/notes/notes.js', async: true, condition: function() { return !!document.body.classList; } }
|
374
|
+
// { src: 'plugin/search/search.js', async: true, condition: function() { return !!document.body.classList; } }
|
368
375
|
// { src: 'plugin/remotes/remotes.js', async: true, condition: function() { return !!document.body.classList; } }
|
369
376
|
]
|
370
377
|
});
|