slide-em-up 0.2.0 → 0.2.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
data/README.md CHANGED
@@ -82,7 +82,7 @@ like this:
82
82
  Themes
83
83
  ------
84
84
 
85
- Several themes are available: shower, 3d_slideshow and html5rocks.
85
+ Several themes are available: shower, 3d_slideshow, html5rocks and CSSS.
86
86
  To choose the theme for your presentation, edit the `presentation.json`
87
87
  file and change the `"theme"` element.
88
88
 
@@ -138,6 +138,7 @@ Themes were picked from the internet. Thanks to:
138
138
  - Hakim El Hattab for 3d_slideshow
139
139
  - Google for html5rocks
140
140
  - Vadim Makeev for shower
141
+ - Lea Verou for CSSS
141
142
 
142
143
  Copyright (c) 2011 Bruno Michel <bruno.michel@af83.com>
143
144
  Released under the MIT license
@@ -1,3 +1,3 @@
1
1
  module SlideEmUp
2
- VERSION = "0.2.0"
2
+ VERSION = "0.2.1"
3
3
  end
@@ -0,0 +1,2 @@
1
+ This theme was created by Lea Verou:
2
+ https://github.com/LeaVerou/CSSS
@@ -0,0 +1,340 @@
1
+ /**
2
+ Basic CSS so that the slideshow script functions as a slideshow
3
+ @author Lea Verou
4
+ @version 1.0
5
+ */
6
+
7
+ /**
8
+ * "Variables"
9
+ */
10
+ .slide,
11
+ .delayed,
12
+ .delayed-children > * {
13
+ -webkit-transition:1s;
14
+ -ms-transition:1s;
15
+ -moz-transition:1s;
16
+ -o-transition:1s;
17
+ transition:1s;
18
+ -moz-transition-property: -webkit-transform, opacity, left, top, right, bottom;
19
+ -ms-transition-property: -webkit-transform, opacity, left, top, right, bottom;
20
+ -o-transition-property: -webkit-transform, opacity, left, top, right, bottom;
21
+ -webkit-transition-property: -webkit-transform, opacity, left, top, right, bottom;
22
+ transition-property: -webkit-transform, opacity, left, top, right, bottom;
23
+ }
24
+
25
+ /**
26
+ * Styles
27
+ */
28
+
29
+ html, body {
30
+ height: 100%;
31
+ }
32
+
33
+ body {
34
+ counter-reset: slide;
35
+ margin: 0;
36
+ }
37
+
38
+ .slide {
39
+ visibility: hidden;
40
+ position:absolute;
41
+ top:0;
42
+ right:0;
43
+ bottom:0;
44
+ left:0;
45
+ z-index:1;
46
+
47
+ font-size:250%;
48
+ line-height:1.6;
49
+
50
+ opacity:0;
51
+ height:0;
52
+ width:0;
53
+ overflow:hidden;
54
+
55
+ counter-increment: slide;
56
+ }
57
+
58
+ .slide.previous,
59
+ .slide:target,
60
+ .slide:target + .slide, /* just in case, not really needed */
61
+ .slide.next {
62
+ visibility: visible;
63
+ }
64
+
65
+ .slide:target {
66
+ z-index:100;
67
+ opacity:1;
68
+ height:auto;
69
+ width: auto;
70
+ overflow: visible;
71
+ }
72
+
73
+ /**
74
+ Slide numbers
75
+ */
76
+ .slide:target::before {
77
+ content: counter(slide);
78
+ position: absolute;
79
+ top: .05in;
80
+ right: .5em;
81
+ z-index: 1010;
82
+
83
+ font-size: .15in;
84
+ color: white;
85
+ background: rgba(0,0,0,.25);
86
+ font-weight: 900;
87
+ text-shadow: .05em .05em .1em black;
88
+ text-align: center;
89
+ padding: .1em .3em 0;
90
+ min-width: 1.6em;
91
+ -moz-box-sizing: border-box;
92
+ -webkit-box-sizing: border-box;
93
+ box-sizing: border-box;
94
+
95
+ -moz-border-radius: 999px;
96
+ -webkit-border-radius: 999px;
97
+ border-radius: 999px;
98
+ }
99
+
100
+ /* If there's nothing selected, show the first */
101
+ .slide:first-child {
102
+ z-index:2;
103
+ }
104
+
105
+ /* Delayed items that are shown incrementally after the slide is */
106
+ .delayed,
107
+ .delayed-children > * {
108
+ opacity: 0;
109
+ }
110
+
111
+ .delayed.displayed,
112
+ .delayed-children > .displayed {
113
+ opacity: .3;
114
+ }
115
+
116
+ .delayed.current,
117
+ .delayed-children > .current,
118
+ .delayed.displayed.non-dismissable,
119
+ .delayed-children > .displayed.non-dismissable {
120
+ opacity: 1;
121
+ }
122
+
123
+ /**
124
+ Show thumbnails
125
+ */
126
+
127
+ .show-thumbnails {
128
+ overflow-x: hidden;
129
+ }
130
+
131
+ .show-thumbnails .slide,
132
+ .presenter .slide.next {
133
+ width: 1024px;
134
+ height: 768px;
135
+
136
+ -moz-box-sizing: border-box;
137
+ -webkit-box-sizing: border-box;
138
+ box-sizing: border-box;
139
+
140
+ float: left;
141
+ overflow: hidden;
142
+ position: static;
143
+ opacity: 1;
144
+ margin:-292px -395px;
145
+ cursor: pointer;
146
+
147
+ -moz-transform: scale(.2, .2);
148
+ -o-transform: scale(.2, .2);
149
+ -webkit-transform: scale(.2, .2);
150
+ transform: scale(.2, .2);
151
+
152
+ -webkit-transition:1s -webkit-transform;
153
+ -moz-transition:1s -moz-transform;
154
+ -o-transition:1s -o-transform;
155
+ transition:1s transform;
156
+ }
157
+
158
+ .show-thumbnails.headers-only .slide {
159
+ display: none;
160
+ }
161
+
162
+ .show-thumbnails.headers-only header.slide {
163
+ display: block;
164
+ }
165
+
166
+ .show-thumbnails .slide .delayed,
167
+ .presenter .slide:target + .slide .delayed {
168
+ opacity: 1;
169
+ }
170
+
171
+ .show-thumbnails .slide:hover,
172
+ .show-thumbnails .slide:target,
173
+ .presenter .slide:target + .slide {
174
+ outline: 20px solid rgba(255, 255, 255, .6);
175
+ -moz-outline-radius:5px;
176
+
177
+ box-shadow: 5px 5px 10px black;
178
+ }
179
+
180
+ .show-thumbnails .slide:target {
181
+ outline-color: rgba(255, 255, 255, .3);
182
+ }
183
+
184
+ .show-thumbnails .slide:target:hover {
185
+ outline-color: rgba(255, 255, 255, .9);
186
+ }
187
+
188
+ /* Display titles */
189
+ .show-thumbnails .slide[data-title]:after {
190
+ content: attr(data-title);
191
+ position: absolute;
192
+ left: 0;
193
+ right: 0;
194
+ bottom: 0;
195
+ padding: .1em 0;
196
+ background: rgba(0,0,0,.5);
197
+ color: white;
198
+ font-size: 250%;
199
+ text-align: center;
200
+ text-shadow: .05em .05em .1em black;
201
+
202
+ -moz-transform: none;
203
+ -ms-transform: none;
204
+ -o-transform: none;
205
+ -webkit-transform: none;
206
+ transform: none;
207
+ }
208
+
209
+ /* Hide all elements in slide by hitting Ctrl + J or Shift + J */
210
+ .hide-elements .slide:target > * {
211
+ opacity: 0;
212
+
213
+ -moz-transition:.5s;
214
+ -webkit-transition:.5s;
215
+ -o-transition:.5s;
216
+ transition:.5s;
217
+ }
218
+
219
+ /* Mark slides as incomplete to spot them easier */
220
+ .incomplete.slide::after {
221
+ content: 'INCOMPLETE';
222
+ font-weight: bold;
223
+ position: absolute;
224
+ top: 40%;
225
+ left: 30%;
226
+ padding: .1em .4em 0;
227
+ border: .1em solid;
228
+ color: rgba(255, 0, 0, .8);
229
+ font-size: 140%;
230
+
231
+ -moz-border-radius: .2em;
232
+ -webkit-border-radius: .2em;
233
+ border-radius: .2em;
234
+
235
+ -moz-transform: rotate(30deg);
236
+ -o-transform: rotate(30deg);
237
+ -webkit-transform: rotate(30deg);
238
+ transform: rotate(30deg);
239
+ }
240
+
241
+ /* Timer */
242
+
243
+ #timer {
244
+ position:absolute;
245
+ top:0;
246
+ left:0;
247
+ z-index:101;
248
+ width:0%;
249
+ height:16px;
250
+ line-height: 16px;
251
+ padding: 0 5px;
252
+ background:rgba(0,0,0,.5);
253
+ overflow: hidden;
254
+ text-align: right;
255
+
256
+ -moz-box-sizing: border-box;
257
+ -webkit-box-sizing: border-box;
258
+ box-sizing: border-box;
259
+ }
260
+
261
+ #timer:before {
262
+ content: 'Progress ';
263
+ text-transform: uppercase;
264
+ color: white;
265
+ font-size: 9px;
266
+ }
267
+
268
+ #timer.end {
269
+ width: 100%;
270
+ }
271
+
272
+ /* Ribbon */
273
+ [data-type].slide:not(.hide-ribbon):after {
274
+ content: attr(data-type);
275
+ position: fixed;
276
+ top: 0;
277
+ right: 0;
278
+ color: white;
279
+ font-size: 50%;
280
+ text-align: center;
281
+ text-transform: uppercase;
282
+ font-weight: bold;
283
+ background: hsl(40,100%,50%);
284
+ background-image: -webkit-linear-gradient(rgba(255, 255, 255, .3), rgba(255, 255, 255, 0));
285
+ background-image: -moz-linear-gradient(rgba(255, 255, 255, .3), rgba(255, 255, 255, 0));
286
+ background-image: -o-linear-gradient(rgba(255, 255, 255, .3), rgba(255, 255, 255, 0));
287
+ line-height: 1.6;
288
+ min-width: 20em;
289
+
290
+ -moz-box-shadow: 0 10px 5px -5px rgba(0,0,0,.3);
291
+ -webkit-box-shadow: 0 10px 5px -5px rgba(0,0,0,.3);
292
+ box-shadow: 0 10px 5px -5px rgba(0,0,0,.3);
293
+
294
+ -moz-transform: rotate(45deg) translate(6em, -2em);
295
+ -ms-transform: rotate(45deg) translate(6em, -2em);
296
+ -webkit-transform: rotate(45deg) translate(6em, -2em);
297
+ -o-transform: rotate(45deg) translate(6em, -2em);
298
+ transform: rotate(45deg) translate(6em, -2em);
299
+ }
300
+
301
+ /* Presenter & projector views */
302
+
303
+ .projector #timer {
304
+ display: none;
305
+ }
306
+
307
+ .presenter-notes {
308
+ display: none;
309
+ position: fixed;
310
+ right: 230px;
311
+ bottom: 0;
312
+ left: 0;
313
+ max-height: 6em;
314
+ overflow: auto;
315
+ padding: .6em 1em;
316
+ font-size: 60%;
317
+ line-height: 1.3;
318
+ font-weight: normal;
319
+ resize:vertical;
320
+ background: rgba(255, 255, 255, .5);
321
+ color: black;
322
+ text-shadow: 0 1px white;
323
+
324
+ -moz-box-shadow: .1em .1em .3em rgba(0,0,0,.5) inset;
325
+ -webkit-box-shadow: .1em .1em .3em rgba(0,0,0,.5) inset;
326
+ box-shadow: .1em .1em .3em rgba(0,0,0,.5) inset;
327
+ }
328
+
329
+ .presenter .slide.next {
330
+ position: fixed;
331
+ top: auto;
332
+ right: 0;
333
+ bottom: 0;
334
+ left: auto;
335
+ z-index: 100;
336
+ }
337
+
338
+ .presenter .slide:target > .presenter-notes {
339
+ display: block;
340
+ }
@@ -0,0 +1,246 @@
1
+ /**
2
+ CSSS basic slideshow theme
3
+
4
+ @author Lea Verou
5
+ @version 1.0
6
+ */
7
+
8
+ /**
9
+ * Variables
10
+ */
11
+ .slide h2,
12
+ section > header.slide > h1 {
13
+ font-family: 'Helvetica Neue', Helvetica, sans-serif;
14
+ font-weight: 100;
15
+ }
16
+
17
+ /**
18
+ * Styles
19
+ */
20
+
21
+ * {
22
+ padding:0;
23
+ margin:0;
24
+ font:inherit;
25
+ color:inherit;
26
+ }
27
+
28
+ html {
29
+ background: black url(/images/rainbow-wood.jpg) bottom center;
30
+ background-size: cover;
31
+ }
32
+
33
+ body {
34
+ font-family: sans-serif;
35
+ }
36
+
37
+ button {
38
+ padding:.2em .5em;
39
+ }
40
+
41
+ a:hover {
42
+ text-shadow: 0 0 .5em white, 0 0 1em white;
43
+ }
44
+
45
+ select {
46
+ color: black;
47
+ }
48
+
49
+ code, pre, style, textarea, input {
50
+ font-family: Consolas, 'Andale Mono', 'Courier New', monospace;
51
+ background:rgba(0,0,0,.4);
52
+ }
53
+
54
+ code {
55
+ padding:.2em .2em .1em;
56
+
57
+ -moz-border-radius:.2em;
58
+ -webkit-border-radius:.2em;
59
+ border-radius:.2em;
60
+
61
+ -moz-box-shadow:.05em .05em .3em black;
62
+ -webkit-box-shadow:.05em .05em .3em black;
63
+ box-shadow:.05em .05em .3em black;
64
+
65
+ border: 1px solid rgba(0,0,0,0.5);
66
+ background: rgba(0,0,0,0.25);
67
+
68
+ -webkit-box-shadow: 0 2px 6px rgba(0,0,0,0.5), inset 0 1px rgba(255,255,255,0.3), inset 0 12px rgba(255,255,255,0.15), inset 0 10px 20px rgba(255,255,255,0.25), inset 0 -15px 30px rgba(0,0,0,0.3);
69
+ -moz-box-shadow: 0 2px 6px rgba(0,0,0,0.5), inset 0 1px rgba(255,255,255,0.3), inset 0 12px rgba(255,255,255,0.15), inset 0 10px 20px rgba(255,255,255,0.25), inset 0 -15px 30px rgba(0,0,0,0.3);
70
+ box-shadow: 0 2px 6px rgba(0,0,0,0.5), inset 0 1px rgba(255,255,255,0.3), inset 0 12px rgba(255,255,255,0.15), inset 0 10px 20px rgba(255,255,255,0.25), inset 0 -15px 30px rgba(0,0,0,0.3);
71
+ }
72
+
73
+ pre, style, textarea {
74
+ padding:.3em .5em;
75
+ margin-left: -.1em;
76
+ border:2px solid rgba(255, 255, 255, .1);
77
+
78
+ -webkit-box-shadow:.1em .1em .5em black inset;
79
+ -moz-box-shadow:.1em .1em .5em black inset;
80
+ box-shadow:.1em .1em .5em black inset;
81
+ }
82
+
83
+ textarea {
84
+ width: 100%;
85
+
86
+ -moz-box-sizing: border-box;
87
+ box-sizing: border-box;
88
+ }
89
+
90
+ strong, b {
91
+ font-weight:bold;
92
+ }
93
+
94
+ pre strong {
95
+ text-shadow: 0 0 .6em white;
96
+ }
97
+
98
+ .slide {
99
+ padding:0 2.5% 2%;
100
+ background: rgba(0,0,0,.5);
101
+ background-clip: padding-box;
102
+ -moz-background-clip: padding-box;
103
+ text-shadow:.05em .05em .1em rgba(0,0,0,.4);
104
+ color: white;
105
+ border:30px solid transparent;
106
+ }
107
+
108
+ .slide:target::before {
109
+ background: rgba(255, 255, 255, .6);
110
+ color: black;
111
+ text-shadow: .03em .03em .1em white;
112
+ }
113
+
114
+ .slide h2 {
115
+ font-family: 'Helvetica Neue', Helvetica, sans-serif;
116
+ font-weight: 100;
117
+ font-size: 1.2in;
118
+ }
119
+
120
+ .slide p,
121
+ .slide li {
122
+ font-weight: bold;
123
+ letter-spacing: -.03em;
124
+ }
125
+
126
+ .slide > ul {
127
+ list-style:none;
128
+ }
129
+
130
+ .slide ol {
131
+ margin-left:2em;
132
+ }
133
+
134
+ .slide > ul ul {
135
+ margin-left:2em;
136
+ list-style: none;
137
+ }
138
+
139
+ .slide li li {
140
+ font-size:80%;
141
+ }
142
+
143
+ .slide li {
144
+ margin:.2em 0;
145
+ }
146
+
147
+ .slide > ul > li:before {
148
+ content:'\2714';
149
+ color: #a0c12c;
150
+ padding-right: .2em;
151
+ }
152
+
153
+ .slide li li:before {
154
+ content: '\279C';
155
+ color: #28bcbc;
156
+ padding-right: .2em;
157
+ }
158
+
159
+ section > header.slide {
160
+ background-color: rgba(0,0,0,.8);
161
+ }
162
+
163
+ section > header.slide > h1 {
164
+ position: absolute;
165
+ top: 50%;
166
+ left: 0;
167
+ right: 0;
168
+ margin-top: -.6em;
169
+ font-size: 400%;
170
+ line-height: 1;
171
+ text-align: center;
172
+ }
173
+
174
+ .slide .emphasis {
175
+ padding: .4em .5em .3em;
176
+ margin: .3em 0;
177
+ background: #f80;
178
+ background: -webkit-gradient(linear, left top, left bottom, from(#fa0), to(#f80));
179
+ background: -moz-linear-gradient(#fa0, #f80);
180
+ color: white;
181
+ font-weight: bold;
182
+ letter-spacing: -.05em;
183
+ line-height: .85;
184
+ text-shadow: .05em .05em .1em rgba(0,0,0,.4);
185
+
186
+ -moz-border-radius: .3em;
187
+ -webkit-border-radius: .3em;
188
+ border-radius: .3em;
189
+
190
+ -moz-box-shadow:.1em .1em .5em black;
191
+ -webkit-box-shadow:.1em .1em .5em black;
192
+ box-shadow:.1em .1em .5em black;
193
+ }
194
+
195
+ .light.slide .emphasis {
196
+ -moz-box-shadow:.1em .1em .5em rgba(0,0,0,.4);
197
+ -webkit-box-shadow:.1em .1em .5em rgba(0,0,0,.4);
198
+ box-shadow:.1em .1em .5em rgba(0,0,0,.4);
199
+ }
200
+
201
+ .slide .emphasis::before {
202
+ content: '\279C';
203
+ color: rgba(255,255,255,.5);
204
+ float: left;
205
+ width: .75em;
206
+ height: 0;
207
+ padding: .45em 0 .3em;
208
+ margin: -.2em .2em 0 -.25em;
209
+ border: .12em solid;
210
+ text-align: center;
211
+ line-height: 0;
212
+ font-size: 120%;
213
+ font-family: inherit;
214
+ text-shadow: none;
215
+
216
+ -moz-border-radius:999px;
217
+ -webkit-border-radius:999px;
218
+ border-radius:999px;
219
+
220
+ -moz-transform: rotate(45deg);
221
+ -o-transform: rotate(45deg);
222
+ -webkit-transform: rotate(45deg);
223
+ transform: rotate(45deg);
224
+ }
225
+
226
+ .attribution {
227
+ background: rgba(0,0,0,.8);
228
+ color: white;
229
+ display: block;
230
+ position: absolute;
231
+ left: 0;
232
+ right: 0;
233
+ bottom: 1em;
234
+ padding: .5em 1em;
235
+ font-size: 30%;
236
+ text-shadow: .05em .05em .1em black;
237
+ }
238
+
239
+ .attribution a {
240
+ text-decoration: none;
241
+ }
242
+
243
+ .attribution a::after {
244
+ content: ' (' attr(href) ')';
245
+ }
246
+