slide-em-up 0.2.0 → 0.2.1

Sign up to get free protection for your applications and to get access to all the features.
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
+