forked from pablocubico/reveal.js
-
Notifications
You must be signed in to change notification settings - Fork 2
/
Copy pathdemo.html
193 lines (163 loc) · 8.19 KB
/
demo.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>moz-reveal.js – Mozilla flavored Reveal</title>
<meta name="description" content="Mozilla Themes for reveal.js">
<meta name="author" content="Hakim El Hattab">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<link rel="stylesheet" href="css/reveal.css">
<link rel="stylesheet" href="css/theme/mozilla-poly.css" id="theme">
<!-- Theme used for syntax highlighting of code -->
<link rel="stylesheet" href="lib/css/zenburn.css">
<!-- Printing and PDF exports -->
<script>
var link = document.createElement('link');
link.rel = 'stylesheet';
link.type = 'text/css';
link.href = window.location.search.match(/print-pdf/gi) ? 'css/print/pdf.css' : 'css/print/paper.css';
document.getElementsByTagName('head')[0].appendChild(link);
</script>
<!--[if lt IE 9]>
<script src="lib/js/html5shiv.js"></script>
<![endif]-->
</head>
<body>
<div class="outer">
<a href="https://www.mozilla.org/">Mozilla</a>
</div>
<div class="reveal">
<!-- Any section element inside of this container is displayed as a slide -->
<div class="slides">
<section>
<h1>Moz-reveal</h1>
<h3>Mozilla flavored Reveal.js</h3>
</section>
<section>
<h2>What's in this Fork?</h2>
<p>
This fork contains the usual features and themes offered by revealjs
whith the addition of Mozilla themes based on the <a href='https://www.mozilla.org/en-US/styleguide/'>official styleguides</a>.
</p>
</section>
<section>
<h2>Themes</h2>
<p>
For now, we have added these themes (Clic to preview): <br>
<!-- Hacks to swap themes after the page has loaded. Not flexible and only intended for the reveal.js demo deck. -->
<a href="#" onclick="document.getElementById('theme').setAttribute('href', 'css/theme/mozilla-poly.css');
return false;">Polychromatic</a> -
<a href="#" onclick="document.getElementById('theme').setAttribute('href', 'css/theme/mozilla-mono.css');
return false;">Monochromatic</a> -
<a href="#" onclick="document.getElementById('theme').setAttribute('href', 'css/theme/one-mozilla.css');
return false;">One Mozilla (legacy)</a>
</p>
</section>
<section>
<h2>Usage</h2>
<p>you can use this fork by running :</p>
<pre>
<code class="sh">
$ bower install moz-reveal.js
</code>
</pre>
</section>
<section>
<section>
<h2>Contributing</h2>
<p>
Please consider contributing to this repository with matters
that concerns the Mozilla themes, for global features you would
prefer to pull request to <a href="https://github.com/hakimel/reveal.js">hakimel/reveal.js</a>
</p>
</section>
<section>
<ol>
<li>Install Node.js (1.0.0 or later)</li>
<li>Clone the moz-reveal.js repository</li>
<pre><code class="sh">$ git clone https://github.com/moztn/reveal.js</code></pre>
<li>Navigate to the reveal.js folder</li>
<pre><code class="sh">$ cd reveal.js</code></pre>
<li>Install dependencies</li>
<pre><code class="sh">$ npm install</code></pre>
<li>Serve the presentation and monitor source files for changes</li>
<pre><code class="sh">$ npm start</code></pre>
<li>Open http://localhost:8000/demo.html to view your presentation</li>
</ol>
</section>
<section>
<p>File and dirs architecture</p>
<pre>
<code class="sh">
css/theme/mozilla #Mozilla specific style
├── fonts #Open Sans
├── images #Branding Logo and icons
├── settings.scss #Declaration of Mozilla Branding colors and styles
├── styles #Css call to the fonts
└── theme.scss #Overrides to include the tabzilla
css/theme/source/ #scss implentation of the themes
├── mozilla-poly.scss #scss of polychromatic theme
├── ... #More themes goes here
├── ...
└── one-mozilla.scss #scss of legacy theme
</code>
</pre>
</section>
<section>
<p>
Create a mozilla-mytheme.scss file under css/theme/source/, alter any of the Mozilla- prefixed
variables.
</p>
in demo.html change <pre><code class="html"><link rel="stylesheet" href="css/theme/mozilla-poly.css" id="theme"></code></pre>
by <pre><code class="html"><link rel="stylesheet" href="css/theme/mozilla-mytheme.css" id="theme"></code></pre>
<p>
revisit <a href="http://localhost:8000/demo.html">http://localhost:8000/demo.html</a>
</p>
</section>
</section>
<section style="text-align: left;">
<h1>Feedback</h1>
<p>
Feedbacks are really aprecaited, please let us know
about your thoughts <a href="mailto:[email protected]">by email </a>.
</p>
<p>
If you spot any issue or incompatibity please do not hesitate to
open an issue at <a href="https://github.com/moztn/reveal.js/issues">moztn/reveal.js</a>
</p>
</section>
</div>
</div>
<script src="lib/js/head.min.js"></script>
<script src="js/reveal.js"></script>
<script>
// More info https://github.com/hakimel/reveal.js#configuration
Reveal.initialize({
controls: true,
progress: true,
history: true,
center: true,
transition: 'slide', // none/fade/slide/convex/concave/zoom
// More info https://github.com/hakimel/reveal.js#dependencies
dependencies: [
{src: 'lib/js/classList.js', condition: function () {
return !document.body.classList;
}},
{src: 'plugin/markdown/marked.js', condition: function () {
return !!document.querySelector('[data-markdown]');
}},
{src: 'plugin/markdown/markdown.js', condition: function () {
return !!document.querySelector('[data-markdown]');
}},
{src: 'plugin/highlight/highlight.js', async: true, callback: function () {
hljs.initHighlightingOnLoad();
}},
{src: 'plugin/zoom-js/zoom.js', async: true},
{src: 'plugin/notes/notes.js', async: true}
]
});
</script>
</body>
</html>