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 +2 -1
- data/lib/slide-em-up/version.rb +1 -1
- data/themes/CSSS/README +2 -0
- data/themes/CSSS/css/slideshow.css +340 -0
- data/themes/CSSS/css/theme.css +246 -0
- data/themes/CSSS/images/rainbow-wood.jpg +0 -0
- data/themes/CSSS/index.erb +35 -0
- data/themes/CSSS/js/classList.js +116 -0
- data/themes/CSSS/js/slideshow.js +483 -0
- data/themes/common/css/pygments/native.css +70 -0
- data/themes/shower/index.erb +3 -0
- metadata +22 -14
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
|
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
|
data/lib/slide-em-up/version.rb
CHANGED
data/themes/CSSS/README
ADDED
@@ -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
|
+
|