rhet-butler 0.5.0

Sign up to get free protection for your applications and to get access to all the features.
Files changed (69) hide show
  1. data/bin/rhet-butler +5 -0
  2. data/default-configuration/assets/apple-touch-icon-precomposed.png +0 -0
  3. data/default-configuration/assets/apple-touch-icon.png +0 -0
  4. data/default-configuration/assets/favicon.ico +0 -0
  5. data/default-configuration/assets/fonts/opensans/v6/MTP_ySUJH_bn48VBG8sNSonF5uFdDttMLvmWuJdhhgs.ttf +0 -0
  6. data/default-configuration/assets/fonts/opensans/v6/PRmiXeptR36kaC0GEAetxi8cqLH4MEiSE0ROcU-qHOA.ttf +0 -0
  7. data/default-configuration/assets/fonts/opensans/v6/cJZKeOuBrn4kERxqtaUH3aCWcynf_cDxXwCLxiixG1c.ttf +0 -0
  8. data/default-configuration/assets/fonts/opensans/v6/xjAJXh38I15wypJXxuGMBp0EAVxt0G0biEntp43Qt6E.ttf +0 -0
  9. data/default-configuration/assets/fonts/ptsans/v5/0XxGQsSc1g4rdRdjJKZrNC3USBnSvpkopQaUR-2r7iU.ttf +0 -0
  10. data/default-configuration/assets/fonts/ptsans/v5/FUDHvzEKSJww3kCxuiAo2A.ttf +0 -0
  11. data/default-configuration/assets/fonts/ptsans/v5/PIPMHY90P7jtyjpXuZ2cLKCWcynf_cDxXwCLxiixG1c.ttf +0 -0
  12. data/default-configuration/assets/fonts/ptsans/v5/lILlYDvubYemzYzN7GbLkInF5uFdDttMLvmWuJdhhgs.ttf +0 -0
  13. data/default-configuration/assets/fonts/ptserif/v5/03aPdn7fFF3H6ngCgAlQzC3USBnSvpkopQaUR-2r7iU.ttf +0 -0
  14. data/default-configuration/assets/fonts/ptserif/v5/EgBlzoNBIHxNPCMwXaAhYPesZW2xOQ-xsNqO47m55DA.ttf +0 -0
  15. data/default-configuration/assets/fonts/ptserif/v5/Foydq9xJp--nfYIx2TBz9fEr6Hm6RMS0v1dtXsGir4g.ttf +0 -0
  16. data/default-configuration/assets/fonts/ptserif/v5/QABk9IxT-LFTJ_dQzv7xpJ0EAVxt0G0biEntp43Qt6E.ttf +0 -0
  17. data/default-configuration/assets/javascript/highlight.js/LICENSE +24 -0
  18. data/default-configuration/assets/javascript/highlight.js/README.md +143 -0
  19. data/default-configuration/assets/javascript/highlight.js/README.ru.md +149 -0
  20. data/default-configuration/assets/javascript/highlight.js/classref.txt +568 -0
  21. data/default-configuration/assets/javascript/highlight.pack.js +1 -0
  22. data/default-configuration/assets/javascript/impress.js +800 -0
  23. data/default-configuration/assets/javascript/sockjs-0.2.1.js +2014 -0
  24. data/default-configuration/assets/javascript/sockjs-0.3.js +2314 -0
  25. data/default-configuration/assets/rhet-butler.jpg +0 -0
  26. data/default-configuration/assets/stylesheets/google-open-sans.css +72 -0
  27. data/default-configuration/assets/stylesheets/highlight/solarized_dark.css +88 -0
  28. data/default-configuration/assets/stylesheets/presentation.css +483 -0
  29. data/default-configuration/assets/stylesheets/presenter/presentation.css +477 -0
  30. data/default-configuration/assets/stylesheets/setup.css +0 -0
  31. data/default-configuration/common/config.yaml +4 -0
  32. data/default-configuration/common/templates/header-javascript.html +3 -0
  33. data/default-configuration/common/templates/presentation.html.erb +44 -0
  34. data/default-configuration/common/templates/presenter-qr.html.erb +77 -0
  35. data/default-configuration/common/templates/stylesheets.html.erb +3 -0
  36. data/default-configuration/presenter/config.yaml +7 -0
  37. data/default-configuration/presenter/templates/live-javascript.html.erb +26 -0
  38. data/default-configuration/presenter/templates/slide-notes.html.erb +3 -0
  39. data/default-configuration/presenter/templates/stylesheets.html.erb +3 -0
  40. data/default-configuration/viewer/config.yaml +7 -0
  41. data/default-configuration/viewer/templates/live-javascript.html.erb +16 -0
  42. data/default-configuration/viewer/templates/slide-notes.html.erb +0 -0
  43. data/lib/rhet-butler/arrangement.rb +78 -0
  44. data/lib/rhet-butler/command-line.rb +49 -0
  45. data/lib/rhet-butler/configuration.rb +76 -0
  46. data/lib/rhet-butler/file-manager.rb +126 -0
  47. data/lib/rhet-butler/html-generator.rb +29 -0
  48. data/lib/rhet-butler/layout-rule.rb +57 -0
  49. data/lib/rhet-butler/messaging.rb +58 -0
  50. data/lib/rhet-butler/slide-group.rb +56 -0
  51. data/lib/rhet-butler/slide-includer.rb +34 -0
  52. data/lib/rhet-butler/slide-loader.rb +361 -0
  53. data/lib/rhet-butler/slide.rb +164 -0
  54. data/lib/rhet-butler/static-generator.rb +44 -0
  55. data/lib/rhet-butler/web/assets-app.rb +40 -0
  56. data/lib/rhet-butler/web/main-app.rb +139 -0
  57. data/lib/rhet-butler/web/presentation-app.rb +50 -0
  58. data/lib/rhet-butler/web/qr-display-app.rb +37 -0
  59. data/lib/rhet-butler/yaml-schema.rb +9 -0
  60. data/lib/rhet-butler/yaml-type.rb +23 -0
  61. data/lib/rhet-butler.rb +2 -0
  62. data/spec/arrangements.rb +76 -0
  63. data/spec/html-generation.rb +48 -0
  64. data/spec/presentation-view.rb +72 -0
  65. data/spec/rhet-butler.rb +59 -0
  66. data/spec/slide-loader.rb +51 -0
  67. data/spec/slide-processing.rb +73 -0
  68. data/spec_support/gem_test_suite.rb +17 -0
  69. metadata +324 -0
@@ -0,0 +1,72 @@
1
+ @font-face {
2
+ font-family: 'Open Sans';
3
+ font-style: normal;
4
+ font-weight: 400;
5
+ src: local('Open Sans'), local('OpenSans'), url(/assets/fonts/opensans/v6/cJZKeOuBrn4kERxqtaUH3aCWcynf_cDxXwCLxiixG1c.ttf) format('truetype');
6
+ }
7
+ @font-face {
8
+ font-family: 'Open Sans';
9
+ font-style: normal;
10
+ font-weight: 600;
11
+ src: local('Open Sans Semibold'), local('OpenSans-Semibold'), url(/assets/fonts/opensans/v6/MTP_ySUJH_bn48VBG8sNSonF5uFdDttMLvmWuJdhhgs.ttf) format('truetype');
12
+ }
13
+ @font-face {
14
+ font-family: 'Open Sans';
15
+ font-style: italic;
16
+ font-weight: 400;
17
+ src: local('Open Sans Italic'), local('OpenSans-Italic'), url(/assets/fonts/opensans/v6/xjAJXh38I15wypJXxuGMBp0EAVxt0G0biEntp43Qt6E.ttf) format('truetype');
18
+ }
19
+ @font-face {
20
+ font-family: 'Open Sans';
21
+ font-style: italic;
22
+ font-weight: 600;
23
+ src: local('Open Sans Semibold Italic'), local('OpenSans-SemiboldItalic'), url(/assets/fonts/opensans/v6/PRmiXeptR36kaC0GEAetxi8cqLH4MEiSE0ROcU-qHOA.ttf) format('truetype');
24
+ }
25
+ @font-face {
26
+ font-family: 'PT Sans';
27
+ font-style: normal;
28
+ font-weight: 400;
29
+ src: local('PT Sans'), local('PTSans-Regular'), url(/assets/fonts/ptsans/v5/FUDHvzEKSJww3kCxuiAo2A.ttf) format('truetype');
30
+ }
31
+ @font-face {
32
+ font-family: 'PT Sans';
33
+ font-style: normal;
34
+ font-weight: 700;
35
+ src: local('PT Sans Bold'), local('PTSans-Bold'), url(/assets/fonts/ptsans/v5/0XxGQsSc1g4rdRdjJKZrNC3USBnSvpkopQaUR-2r7iU.ttf) format('truetype');
36
+ }
37
+ @font-face {
38
+ font-family: 'PT Sans';
39
+ font-style: italic;
40
+ font-weight: 400;
41
+ src: local('PT Sans Italic'), local('PTSans-Italic'), url(/assets/fonts/ptsans/v5/PIPMHY90P7jtyjpXuZ2cLKCWcynf_cDxXwCLxiixG1c.ttf) format('truetype');
42
+ }
43
+ @font-face {
44
+ font-family: 'PT Sans';
45
+ font-style: italic;
46
+ font-weight: 700;
47
+ src: local('PT Sans Bold Italic'), local('PTSans-BoldItalic'), url(/assets/fonts/ptsans/v5/lILlYDvubYemzYzN7GbLkInF5uFdDttMLvmWuJdhhgs.ttf) format('truetype');
48
+ }
49
+ @font-face {
50
+ font-family: 'PT Serif';
51
+ font-style: normal;
52
+ font-weight: 400;
53
+ src: local('PT Serif'), local('PTSerif-Regular'), url(/assets/fonts/ptserif/v5/EgBlzoNBIHxNPCMwXaAhYPesZW2xOQ-xsNqO47m55DA.ttf) format('truetype');
54
+ }
55
+ @font-face {
56
+ font-family: 'PT Serif';
57
+ font-style: normal;
58
+ font-weight: 700;
59
+ src: local('PT Serif Bold'), local('PTSerif-Bold'), url(/assets/fonts/ptserif/v5/QABk9IxT-LFTJ_dQzv7xpJ0EAVxt0G0biEntp43Qt6E.ttf) format('truetype');
60
+ }
61
+ @font-face {
62
+ font-family: 'PT Serif';
63
+ font-style: italic;
64
+ font-weight: 400;
65
+ src: local('PT Serif Italic'), local('PTSerif-Italic'), url(/assets/fonts/ptserif/v5/03aPdn7fFF3H6ngCgAlQzC3USBnSvpkopQaUR-2r7iU.ttf) format('truetype');
66
+ }
67
+ @font-face {
68
+ font-family: 'PT Serif';
69
+ font-style: italic;
70
+ font-weight: 700;
71
+ src: local('PT Serif Bold Italic'), local('PTSerif-BoldItalic'), url(/assets/fonts/ptserif/v5/Foydq9xJp--nfYIx2TBz9fEr6Hm6RMS0v1dtXsGir4g.ttf) format('truetype');
72
+ }
@@ -0,0 +1,88 @@
1
+ /*
2
+
3
+ Orginal Style from ethanschoonover.com/solarized (c) Jeremy Hull <sourdrums@gmail.com>
4
+
5
+ */
6
+
7
+ pre code {
8
+ display: block; padding: 0.5em;
9
+ background: #002b36; color: #839496;
10
+ }
11
+
12
+ pre .comment,
13
+ pre .template_comment,
14
+ pre .diff .header,
15
+ pre .doctype,
16
+ pre .pi,
17
+ pre .lisp .string,
18
+ pre .javadoc {
19
+ color: #586e75;
20
+ font-style: italic;
21
+ }
22
+
23
+ pre .keyword,
24
+ pre .winutils,
25
+ pre .method,
26
+ pre .addition,
27
+ pre .css .tag,
28
+ pre .request,
29
+ pre .status,
30
+ pre .nginx .title {
31
+ color: #859900;
32
+ }
33
+
34
+ pre .number,
35
+ pre .command,
36
+ pre .string,
37
+ pre .tag .value,
38
+ pre .phpdoc,
39
+ pre .tex .formula,
40
+ pre .regexp,
41
+ pre .hexcolor {
42
+ color: #2aa198;
43
+ }
44
+
45
+ pre .title,
46
+ pre .localvars,
47
+ pre .chunk,
48
+ pre .decorator,
49
+ pre .built_in,
50
+ pre .identifier,
51
+ pre .vhdl .literal,
52
+ pre .id {
53
+ color: #268bd2;
54
+ }
55
+
56
+ pre .attribute,
57
+ pre .variable,
58
+ pre .lisp .body,
59
+ pre .smalltalk .number,
60
+ pre .constant,
61
+ pre .class .title,
62
+ pre .parent,
63
+ pre .haskell .type {
64
+ color: #b58900;
65
+ }
66
+
67
+ pre .preprocessor,
68
+ pre .preprocessor .keyword,
69
+ pre .shebang,
70
+ pre .symbol,
71
+ pre .symbol .string,
72
+ pre .diff .change,
73
+ pre .special,
74
+ pre .attr_selector,
75
+ pre .important,
76
+ pre .subst,
77
+ pre .cdata,
78
+ pre .clojure .title {
79
+ color: #cb4b16;
80
+ }
81
+
82
+ pre .deletion {
83
+ color: #dc322f;
84
+ }
85
+
86
+ pre .tex .formula {
87
+ background: #073642;
88
+ }
@@ -0,0 +1,483 @@
1
+ /*
2
+ So you like the style of impress.js demo?
3
+ Or maybe you are just curious how it was done?
4
+
5
+ You couldn't find a better place to find out!
6
+
7
+ Welcome to the stylesheet impress.js demo presentation.
8
+
9
+ Please remember that it is not meant to be a part of impress.js and is
10
+ not required by impress.js.
11
+ I expect that anyone creating a presentation for impress.js would create
12
+ their own set of styles.
13
+
14
+ But feel free to read through it and learn how to get the most of what
15
+ impress.js provides.
16
+
17
+ And let me be your guide.
18
+
19
+ Shall we begin?
20
+ */
21
+
22
+
23
+ /*
24
+ We start with a good ol' reset.
25
+ That's the one by Eric Meyer http://meyerweb.com/eric/tools/css/reset/
26
+
27
+ You can probably argue if it is needed here, or not, but for sure it
28
+ doesn't do any harm and gives us a fresh start.
29
+ */
30
+
31
+ html, body, div, span, applet, object, iframe,
32
+ h1, h2, h3, h4, h5, h6, p, blockquote, pre,
33
+ a, abbr, acronym, address, big, cite, code,
34
+ del, dfn, em, img, ins, kbd, q, s, samp,
35
+ small, strike, strong, sub, sup, tt, var,
36
+ b, u, i, center,
37
+ dl, dt, dd, ol, ul, li,
38
+ fieldset, form, label, legend,
39
+ table, caption, tbody, tfoot, thead, tr, th, td,
40
+ article, aside, canvas, details, embed,
41
+ figure, figcaption, footer, header, hgroup,
42
+ menu, nav, output, ruby, section, summary,
43
+ time, mark, audio, video {
44
+ margin: 0;
45
+ padding: 0;
46
+ border: 0;
47
+ font-size: 100%;
48
+ font: inherit;
49
+ vertical-align: baseline;
50
+ }
51
+
52
+ /* HTML5 display-role reset for older browsers */
53
+ article, aside, details, figcaption, figure,
54
+ footer, header, hgroup, menu, nav, section {
55
+ display: block;
56
+ }
57
+ body {
58
+ line-height: 1;
59
+ }
60
+ ol, ul {
61
+ list-style: none;
62
+ }
63
+ blockquote, q {
64
+ quotes: none;
65
+ }
66
+ blockquote:before, blockquote:after,
67
+ q:before, q:after {
68
+ content: '';
69
+ content: none;
70
+ }
71
+
72
+ table {
73
+ border-collapse: collapse;
74
+ border-spacing: 0;
75
+ }
76
+
77
+ /*
78
+ Now here is when interesting things start to appear.
79
+
80
+ We set up <body> styles with default font and nice gradient in the background.
81
+ And yes, there is a lot of repetition there because of -prefixes but we don't
82
+ want to leave anybody behind.
83
+ */
84
+ body {
85
+ font-family: 'PT Sans', sans-serif;
86
+ min-height: 740px;
87
+
88
+ background: rgb(215, 215, 215);
89
+ background: -webkit-gradient(radial, 50% 50%, 0, 50% 50%, 500, from(rgb(240, 240, 240)), to(rgb(190, 190, 190)));
90
+ background: -webkit-radial-gradient(rgb(240, 240, 240), rgb(190, 190, 190));
91
+ background: -moz-radial-gradient(rgb(240, 240, 240), rgb(190, 190, 190));
92
+ background: -ms-radial-gradient(rgb(240, 240, 240), rgb(190, 190, 190));
93
+ background: -o-radial-gradient(rgb(240, 240, 240), rgb(190, 190, 190));
94
+ background: radial-gradient(rgb(240, 240, 240), rgb(190, 190, 190));
95
+ }
96
+
97
+ /*
98
+ Now let's bring some text styles back ...
99
+ */
100
+ b, strong { font-weight: bold }
101
+ i, em { font-style: italic }
102
+
103
+ /*
104
+ ... and give links a nice look.
105
+ */
106
+ a {
107
+ color: inherit;
108
+ text-decoration: none;
109
+ padding: 0 0.1em;
110
+ background: rgba(255,255,255,0.5);
111
+ text-shadow: -1px -1px 2px rgba(100,100,100,0.9);
112
+ border-radius: 0.2em;
113
+
114
+ -webkit-transition: 0.5s;
115
+ -moz-transition: 0.5s;
116
+ -ms-transition: 0.5s;
117
+ -o-transition: 0.5s;
118
+ transition: 0.5s;
119
+ }
120
+
121
+ a:hover,
122
+ a:focus {
123
+ background: rgba(255,255,255,1);
124
+ text-shadow: -1px -1px 2px rgba(100,100,100,0.5);
125
+ }
126
+
127
+ code {
128
+ font-size: 24px;
129
+ }
130
+
131
+ .notes {
132
+ font-size: 18px;
133
+ background-color: honeydew;
134
+ }
135
+
136
+ /*
137
+ Because the main point behind the impress.js demo is to demo impress.js
138
+ we display a fallback message for users with browsers that don't support
139
+ all the features required by it.
140
+
141
+ All of the content will be still fully accessible for them, but I want
142
+ them to know that they are missing something - that's what the demo is
143
+ about, isn't it?
144
+
145
+ And then we hide the message, when support is detected in the browser.
146
+ */
147
+
148
+ .fallback-message {
149
+ font-family: sans-serif;
150
+ line-height: 1.3;
151
+
152
+ width: 780px;
153
+ padding: 10px 10px 0;
154
+ margin: 20px auto;
155
+
156
+ border: 1px solid #E4C652;
157
+ border-radius: 10px;
158
+ background: #EEDC94;
159
+ }
160
+
161
+ .fallback-message p {
162
+ margin-bottom: 10px;
163
+ }
164
+
165
+ .impress-supported .fallback-message {
166
+ display: none;
167
+ }
168
+
169
+ /*
170
+ Now let's style the presentation steps.
171
+
172
+ We start with basics to make sure it displays correctly in everywhere ...
173
+ */
174
+
175
+ .step {
176
+ position: relative;
177
+ width: 900px;
178
+ padding: 40px;
179
+ margin: 20px auto;
180
+
181
+ -webkit-box-sizing: border-box;
182
+ -moz-box-sizing: border-box;
183
+ -ms-box-sizing: border-box;
184
+ -o-box-sizing: border-box;
185
+ box-sizing: border-box;
186
+
187
+ font-family: 'PT Serif', georgia, serif;
188
+ font-size: 48px;
189
+ line-height: 1.5;
190
+ }
191
+
192
+ /*
193
+ ... and we enhance the styles for impress.js.
194
+
195
+ Basically we remove the margin and make inactive steps a little bit transparent.
196
+ */
197
+ .impress-enabled .step {
198
+ margin: 0;
199
+ opacity: 0.3;
200
+
201
+ -webkit-transition: opacity 1s;
202
+ -moz-transition: opacity 1s;
203
+ -ms-transition: opacity 1s;
204
+ -o-transition: opacity 1s;
205
+ transition: opacity 1s;
206
+ }
207
+
208
+ .impress-enabled .step.active { opacity: 1 }
209
+
210
+ /*
211
+ These 'slide' step styles were heavily inspired by HTML5 Slides:
212
+ http://html5slides.googlecode.com/svn/trunk/styles.css
213
+
214
+ ;)
215
+
216
+ They cover everything what you see on first three steps of the demo.
217
+ */
218
+ .slide {
219
+ display: block;
220
+
221
+ width: 900px;
222
+ height: 700px;
223
+ padding: 40px 60px;
224
+
225
+ background-color: white;
226
+ border: 1px solid rgba(0, 0, 0, .3);
227
+ border-radius: 10px;
228
+ box-shadow: 0 2px 6px rgba(0, 0, 0, .1);
229
+
230
+ color: rgb(102, 102, 102);
231
+ text-shadow: 0 2px 2px rgba(0, 0, 0, .1);
232
+
233
+ font-family: 'Open Sans', Arial, sans-serif;
234
+ font-size: 30px;
235
+ line-height: 36px;
236
+ letter-spacing: -1px;
237
+ }
238
+
239
+ .slide q {
240
+ display: block;
241
+ font-size: 50px;
242
+ line-height: 72px;
243
+
244
+ margin-top: 100px;
245
+ }
246
+
247
+ .slide q strong {
248
+ white-space: nowrap;
249
+ }
250
+
251
+ /*
252
+ And now we start to style each step separately.
253
+
254
+ I agree that this may be not the most efficient, object-oriented and
255
+ scalable way of styling, but most of steps have quite a custom look
256
+ and typography tricks here and there, so they had to be styles separately.
257
+
258
+ First is the title step with a big <h1> (no room for padding) and some
259
+ 3D positioning along Z axis.
260
+ */
261
+
262
+ #title {
263
+ padding: 0;
264
+ }
265
+
266
+ #title .try {
267
+ font-size: 64px;
268
+ position: absolute;
269
+ top: -0.5em;
270
+ left: 1.5em;
271
+
272
+ -webkit-transform: translateZ(20px);
273
+ -moz-transform: translateZ(20px);
274
+ -ms-transform: translateZ(20px);
275
+ -o-transform: translateZ(20px);
276
+ transform: translateZ(20px);
277
+ }
278
+
279
+ #title h1 {
280
+ font-size: 190px;
281
+
282
+ -webkit-transform: translateZ(50px);
283
+ -moz-transform: translateZ(50px);
284
+ -ms-transform: translateZ(50px);
285
+ -o-transform: translateZ(50px);
286
+ transform: translateZ(50px);
287
+ }
288
+
289
+ #title .footnote {
290
+ font-size: 32px;
291
+ }
292
+
293
+ /*
294
+ The last step is an overview.
295
+ There is no content in it, so we make sure it's not visible because we want
296
+ to be able to click on other steps.
297
+
298
+ */
299
+ #overview { display: none }
300
+
301
+ /*
302
+ We also make other steps visible and give them a pointer cursor using the
303
+ `impress-on-` class.
304
+ */
305
+ .impress-on-overview .step {
306
+ opacity: 1;
307
+ cursor: pointer;
308
+ }
309
+
310
+
311
+ /*
312
+ Now, when we have all the steps styled let's give users a hint how to navigate
313
+ around the presentation.
314
+
315
+ The best way to do this would be to use JavaScript, show a delayed hint for a
316
+ first time users, then hide it and store a status in cookie or localStorage...
317
+
318
+ But I wanted to have some CSS fun and avoid additional scripting...
319
+
320
+ Let me explain it first, so maybe the transition magic will be more readable
321
+ when you read the code.
322
+
323
+ First of all I wanted the hint to appear only when user is idle for a while.
324
+ You can't detect the 'idle' state in CSS, but I delayed a appearing of the
325
+ hint by 5s using transition-delay.
326
+
327
+ You also can't detect in CSS if the user is a first-time visitor, so I had to
328
+ make an assumption that I'll only show the hint on the first step. And when
329
+ the step is changed hide the hint, because I can assume that user already
330
+ knows how to navigate.
331
+
332
+ To summarize it - hint is shown when the user is on the first step for longer
333
+ than 5 seconds.
334
+
335
+ The other problem I had was caused by the fact that I wanted the hint to fade
336
+ in and out. It can be easily achieved by transitioning the opacity property.
337
+ But that also meant that the hint was always on the screen, even if totally
338
+ transparent. It covered part of the screen and you couldn't correctly clicked
339
+ through it.
340
+ Unfortunately you cannot transition between display `block` and `none` in pure
341
+ CSS, so I needed a way to not only fade out the hint but also move it out of
342
+ the screen.
343
+
344
+ I solved this problem by positioning the hint below the bottom of the screen
345
+ with CSS transform and moving it up to show it. But I also didn't want this move
346
+ to be visible. I wanted the hint only to fade in and out visually, so I delayed
347
+ the fade in transition, so it starts when the hint is already in its correct
348
+ position on the screen.
349
+
350
+ I know, it sounds complicated ... maybe it would be easier with the code?
351
+ */
352
+
353
+ .hint {
354
+ /*
355
+ We hide the hint until presentation is started and from browsers not supporting
356
+ impress.js, as they will have a linear scrollable view ...
357
+ */
358
+ display: none;
359
+
360
+ /*
361
+ ... and give it some fixed position and nice styles.
362
+ */
363
+ position: fixed;
364
+ left: 0;
365
+ right: 0;
366
+ bottom: 200px;
367
+
368
+ background: rgba(0,0,0,0.5);
369
+ color: #EEE;
370
+ text-align: center;
371
+
372
+ font-size: 50px;
373
+ padding: 20px;
374
+
375
+ z-index: 100;
376
+
377
+ /*
378
+ By default we don't want the hint to be visible, so we make it transparent ...
379
+ */
380
+ opacity: 0;
381
+
382
+ /*
383
+ ... and position it below the bottom of the screen (relative to it's fixed position)
384
+ */
385
+ -webkit-transform: translateY(400px);
386
+ -moz-transform: translateY(400px);
387
+ -ms-transform: translateY(400px);
388
+ -o-transform: translateY(400px);
389
+ transform: translateY(400px);
390
+
391
+ /*
392
+ Now let's imagine that the hint is visible and we want to fade it out and move out
393
+ of the screen.
394
+
395
+ So we define the transition on the opacity property with 1s duration and another
396
+ transition on transform property delayed by 1s so it will happen after the fade out
397
+ on opacity finished.
398
+
399
+ This way user will not see the hint moving down.
400
+ */
401
+ -webkit-transition: opacity 1s, -webkit-transform 0.5s 1s;
402
+ -moz-transition: opacity 1s, -moz-transform 0.5s 1s;
403
+ -ms-transition: opacity 1s, -ms-transform 0.5s 1s;
404
+ -o-transition: opacity 1s, -o-transform 0.5s 1s;
405
+ transition: opacity 1s, transform 0.5s 1s;
406
+ }
407
+
408
+ /*
409
+ Now we 'enable' the hint when presentation is initialized ...
410
+ */
411
+ .impress-enabled .hint { display: block }
412
+
413
+ /*
414
+ ... and we will show it when the first step (with id 'bored') is active.
415
+ */
416
+ .impress-on-bored .hint {
417
+ /*
418
+ We remove the transparency and position the hint in its default fixed
419
+ position.
420
+ */
421
+ opacity: 1;
422
+
423
+ -webkit-transform: translateY(0px);
424
+ -moz-transform: translateY(0px);
425
+ -ms-transform: translateY(0px);
426
+ -o-transform: translateY(0px);
427
+ transform: translateY(0px);
428
+
429
+ /*
430
+ Now for fade in transition we have the oposite situation from the one
431
+ above.
432
+
433
+ First after 4.5s delay we animate the transform property to move the hint
434
+ into its correct position and after that we fade it in with opacity
435
+ transition.
436
+ */
437
+ -webkit-transition: opacity 1s 5s, -webkit-transform 0.5s 4.5s;
438
+ -moz-transition: opacity 1s 5s, -moz-transform 0.5s 4.5s;
439
+ -ms-transition: opacity 1s 5s, -ms-transform 0.5s 4.5s;
440
+ -o-transition: opacity 1s 5s, -o-transform 0.5s 4.5s;
441
+ transition: opacity 1s 5s, transform 0.5s 4.5s;
442
+ }
443
+
444
+ /*
445
+ And as the last thing there is a workaround for quite strange bug.
446
+ It happens a lot in Chrome. I don't remember if I've seen it in Firefox.
447
+
448
+ Sometimes the element positioned in 3D (especially when it's moved back
449
+ along Z axis) is not clickable, because it falls 'behind' the <body>
450
+ element.
451
+
452
+ To prevent this, I decided to make <body> non clickable by setting
453
+ pointer-events property to `none` value.
454
+ Value if this property is inherited, so to make everything else clickable
455
+ I bring it back on the #impress element.
456
+
457
+ If you want to know more about `pointer-events` here are some docs:
458
+ https://developer.mozilla.org/en/CSS/pointer-events
459
+
460
+ There is one very important thing to notice about this workaround - it makes
461
+ everything 'unclickable' except what's in #impress element.
462
+
463
+ So use it wisely ... or don't use at all.
464
+ */
465
+ .impress-enabled { pointer-events: none }
466
+ .impress-enabled #impress { pointer-events: auto }
467
+
468
+ /*
469
+ There is one funny thing I just realized.
470
+
471
+ Thanks to this workaround above everything except #impress element is invisible
472
+ for click events. That means that the hint element is also not clickable.
473
+ So basically all of this transforms and delayed transitions trickery was probably
474
+ not needed at all...
475
+
476
+ But it was fun to learn about it, wasn't it?
477
+ */
478
+
479
+ /*
480
+ That's all I have for you in this file.
481
+ Thanks for reading. I hope you enjoyed it at least as much as I enjoyed writing it
482
+ for you.
483
+ */