slideoff 0.2 → 0.3
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.
- checksums.yaml +4 -4
- data/README.md +34 -25
- data/bin/slideoff +19 -4
- data/lib/slideoff.rb +1 -1
- data/lib/slideoff/config_builder.rb +10 -8
- data/lib/slideoff/presentation.rb +6 -6
- data/lib/slideoff/server.rb +2 -2
- data/lib/slideoff/utils.rb +50 -21
- data/themes/modern/css/print.css +6 -0
- data/themes/modern/css/screen.css +100 -103
- data/themes/modern/index.erb +2 -0
- data/themes/modern/js/script.coffee +16 -35
- data/themes/modern/js/script.js +20 -40
- data/themes/modern/styles/_full.scss +3 -8
- data/themes/modern/styles/_increment.scss +3 -0
- data/themes/modern/styles/_list.scss +0 -6
- data/themes/modern/styles/_progress.scss +0 -1
- data/themes/modern/styles/print.scss +13 -0
- data/themes/modern/styles/screen.scss +45 -38
- metadata +5 -3
data/themes/modern/index.erb
CHANGED
|
@@ -7,12 +7,14 @@
|
|
|
7
7
|
<meta name="viewport" content="width=680, user-scalable=no">
|
|
8
8
|
<meta http-equiv="x-ua-compatible" content="ie=edge">
|
|
9
9
|
<link rel="stylesheet" href="css/screen.css">
|
|
10
|
+
<link rel="stylesheet" href="css/print.css">
|
|
10
11
|
<link rel="stylesheet" href="css/pygments/<%= meta.pygments_style %>.css">
|
|
11
12
|
<% meta.css.each do |css| %>
|
|
12
13
|
<link rel="stylesheet" href="<%= css %>">
|
|
13
14
|
<% end %>
|
|
14
15
|
<script src="js/jquery-2.1.0.min.js"></script>
|
|
15
16
|
<script src="js/highcharts.js"></script>
|
|
17
|
+
<%= File.read("head.html") if File.exist?("head.html") %>
|
|
16
18
|
</head>
|
|
17
19
|
<body class="list">
|
|
18
20
|
<header class="caption">
|
|
@@ -96,7 +96,6 @@ $.fn.extend
|
|
|
96
96
|
if words.length > maxWords
|
|
97
97
|
while words.length > 0
|
|
98
98
|
newText = words.splice(0, maxWords).join(" ")
|
|
99
|
-
console.log
|
|
100
99
|
calcSize newText
|
|
101
100
|
self.append "<br>"
|
|
102
101
|
else
|
|
@@ -119,13 +118,15 @@ class Transform
|
|
|
119
118
|
@body.style.transform = transform
|
|
120
119
|
|
|
121
120
|
@scale: ->
|
|
122
|
-
Transform.apply("scale(
|
|
121
|
+
Transform.apply("scale(#{@getScaleFactor()})")
|
|
123
122
|
|
|
124
123
|
@reset: ->
|
|
125
124
|
Transform.apply('none')
|
|
126
125
|
|
|
127
126
|
class Mode
|
|
128
127
|
@body = document.body
|
|
128
|
+
@slideModeIndicator = "full"
|
|
129
|
+
@listModeIndicator = "list"
|
|
129
130
|
|
|
130
131
|
@dispatchSingleSlideMode: (e) ->
|
|
131
132
|
slideId = Mode.findSlideId(e.target)
|
|
@@ -137,18 +138,18 @@ class Mode
|
|
|
137
138
|
slide.replaceHistory()
|
|
138
139
|
|
|
139
140
|
@enterSlideMode: ->
|
|
140
|
-
@body.className =
|
|
141
|
+
@body.className = @slideModeIndicator
|
|
141
142
|
Transform.scale()
|
|
142
143
|
|
|
143
144
|
@enterListMode: ->
|
|
144
|
-
@body.className =
|
|
145
|
+
@body.className = @listModeIndicator
|
|
145
146
|
Transform.reset()
|
|
146
147
|
|
|
147
148
|
@isListMode: ->
|
|
148
|
-
|
|
149
|
+
!Mode.isSlideMode()
|
|
149
150
|
|
|
150
151
|
@isSlideMode: ->
|
|
151
|
-
|
|
152
|
+
@body.classList.contains(@slideModeIndicator)
|
|
152
153
|
|
|
153
154
|
@switchToListMode: ->
|
|
154
155
|
Mode.enterListMode()
|
|
@@ -162,15 +163,6 @@ class Mode
|
|
|
162
163
|
slide.pushHistory()
|
|
163
164
|
slide.updateProgress()
|
|
164
165
|
|
|
165
|
-
@reload: ->
|
|
166
|
-
Slide.current() || Slide.first().goto()
|
|
167
|
-
if window.location.search.substr(1) is 'full'
|
|
168
|
-
Mode.enterSlideMode()
|
|
169
|
-
#Slide.current().updateProgress()
|
|
170
|
-
else
|
|
171
|
-
Mode.enterListMode()
|
|
172
|
-
Slide.current()?.scrollTo()
|
|
173
|
-
|
|
174
166
|
# private
|
|
175
167
|
|
|
176
168
|
# go up to element with class "slide" and return its id
|
|
@@ -234,15 +226,6 @@ class SlideInitializer
|
|
|
234
226
|
if $(slide).hasClass('typewriter')
|
|
235
227
|
$(slide).find('pre[data-lang=sh] code').addClass('inactive')
|
|
236
228
|
|
|
237
|
-
#TODO: Remove useless code
|
|
238
|
-
@initBodyClasses: ->
|
|
239
|
-
$.each @bodyClasses, (klass) ->
|
|
240
|
-
$('body').addClass(klass.split('=')[0])
|
|
241
|
-
|
|
242
|
-
#TODO: Remove useless code
|
|
243
|
-
@bodyClasses: ->
|
|
244
|
-
window.location.search.replace(/^\?/, '').split('&')
|
|
245
|
-
|
|
246
229
|
class Slide
|
|
247
230
|
constructor: (slideNumber) ->
|
|
248
231
|
@$element = $(@slideList()[@slideNumber])
|
|
@@ -258,7 +241,10 @@ class Slide
|
|
|
258
241
|
|
|
259
242
|
@current: ->
|
|
260
243
|
id = window.location.hash.substr(1)
|
|
261
|
-
|
|
244
|
+
if id? && id.length > 0
|
|
245
|
+
Slide.fromSlideId(id)
|
|
246
|
+
else
|
|
247
|
+
Slide.first()
|
|
262
248
|
|
|
263
249
|
nextSection: ->
|
|
264
250
|
next = @nextSectionId()
|
|
@@ -389,11 +375,10 @@ class UserInterface
|
|
|
389
375
|
Transform.scale() if Mode.isSlideMode()
|
|
390
376
|
|
|
391
377
|
@init: ->
|
|
392
|
-
if
|
|
393
|
-
Mode.
|
|
394
|
-
|
|
395
|
-
|
|
396
|
-
slide.updateProgress()
|
|
378
|
+
if window.location.search.substr(1) is 'full'
|
|
379
|
+
Mode.switchToSlideMode()
|
|
380
|
+
else
|
|
381
|
+
Mode.switchToListMode()
|
|
397
382
|
|
|
398
383
|
@switchToListMode: (e) ->
|
|
399
384
|
if Mode.isSlideMode()
|
|
@@ -424,10 +409,6 @@ $ ->
|
|
|
424
409
|
UserInterface.init()
|
|
425
410
|
, false
|
|
426
411
|
|
|
427
|
-
window.addEventListener "popstate", (e) ->
|
|
428
|
-
Mode.reload()
|
|
429
|
-
, false
|
|
430
|
-
|
|
431
412
|
window.addEventListener "resize", (e) ->
|
|
432
413
|
UserInterface.resize()
|
|
433
414
|
, false
|
|
@@ -436,7 +417,7 @@ $ ->
|
|
|
436
417
|
# Shortcut for alt, ctrl and meta keys
|
|
437
418
|
return if e.altKey or e.ctrlKey or e.metaKey
|
|
438
419
|
switch e.which
|
|
439
|
-
when
|
|
420
|
+
when 13 # Enter
|
|
440
421
|
UserInterface.switchToSlideMode(e) if Slide.current()?
|
|
441
422
|
when 27 # Esc
|
|
442
423
|
UserInterface.switchToListMode(e)
|
data/themes/modern/js/script.js
CHANGED
|
@@ -96,7 +96,6 @@ $.fn.extend({
|
|
|
96
96
|
if (words.length > maxWords) {
|
|
97
97
|
while (words.length > 0) {
|
|
98
98
|
newText = words.splice(0, maxWords).join(" ");
|
|
99
|
-
console.log;
|
|
100
99
|
calcSize(newText);
|
|
101
100
|
self.append("<br>");
|
|
102
101
|
}
|
|
@@ -112,10 +111,10 @@ Transform = (function() {
|
|
|
112
111
|
|
|
113
112
|
Transform.body = document.body;
|
|
114
113
|
|
|
115
|
-
Transform.
|
|
114
|
+
Transform.getScaleFactor = function() {
|
|
116
115
|
var denominator;
|
|
117
116
|
denominator = Math.max(this.body.clientWidth / window.innerWidth, this.body.clientHeight / window.innerHeight);
|
|
118
|
-
return
|
|
117
|
+
return 1 / denominator;
|
|
119
118
|
};
|
|
120
119
|
|
|
121
120
|
Transform.apply = function(transform) {
|
|
@@ -127,7 +126,7 @@ Transform = (function() {
|
|
|
127
126
|
};
|
|
128
127
|
|
|
129
128
|
Transform.scale = function() {
|
|
130
|
-
return Transform.apply(
|
|
129
|
+
return Transform.apply("scale(" + (this.getScaleFactor()) + ")");
|
|
131
130
|
};
|
|
132
131
|
|
|
133
132
|
Transform.reset = function() {
|
|
@@ -143,6 +142,10 @@ Mode = (function() {
|
|
|
143
142
|
|
|
144
143
|
Mode.body = document.body;
|
|
145
144
|
|
|
145
|
+
Mode.slideModeIndicator = "full";
|
|
146
|
+
|
|
147
|
+
Mode.listModeIndicator = "list";
|
|
148
|
+
|
|
146
149
|
Mode.dispatchSingleSlideMode = function(e) {
|
|
147
150
|
var presentSlideId, slide, slideId;
|
|
148
151
|
slideId = Mode.findSlideId(e.target);
|
|
@@ -156,21 +159,21 @@ Mode = (function() {
|
|
|
156
159
|
};
|
|
157
160
|
|
|
158
161
|
Mode.enterSlideMode = function() {
|
|
159
|
-
this.body.className =
|
|
162
|
+
this.body.className = this.slideModeIndicator;
|
|
160
163
|
return Transform.scale();
|
|
161
164
|
};
|
|
162
165
|
|
|
163
166
|
Mode.enterListMode = function() {
|
|
164
|
-
this.body.className =
|
|
167
|
+
this.body.className = this.listModeIndicator;
|
|
165
168
|
return Transform.reset();
|
|
166
169
|
};
|
|
167
170
|
|
|
168
171
|
Mode.isListMode = function() {
|
|
169
|
-
return !
|
|
172
|
+
return !Mode.isSlideMode();
|
|
170
173
|
};
|
|
171
174
|
|
|
172
175
|
Mode.isSlideMode = function() {
|
|
173
|
-
return
|
|
176
|
+
return this.body.classList.contains(this.slideModeIndicator);
|
|
174
177
|
};
|
|
175
178
|
|
|
176
179
|
Mode.switchToListMode = function() {
|
|
@@ -189,17 +192,6 @@ Mode = (function() {
|
|
|
189
192
|
return slide.updateProgress();
|
|
190
193
|
};
|
|
191
194
|
|
|
192
|
-
Mode.reload = function() {
|
|
193
|
-
var _ref;
|
|
194
|
-
Slide.current() || Slide.first().goto();
|
|
195
|
-
if (window.location.search.substr(1) === 'full') {
|
|
196
|
-
return Mode.enterSlideMode();
|
|
197
|
-
} else {
|
|
198
|
-
Mode.enterListMode();
|
|
199
|
-
return (_ref = Slide.current()) != null ? _ref.scrollTo() : void 0;
|
|
200
|
-
}
|
|
201
|
-
};
|
|
202
|
-
|
|
203
195
|
Mode.findSlideId = function(node) {
|
|
204
196
|
while ("BODY" !== node.nodeName && "HTML" !== node.nodeName) {
|
|
205
197
|
if (node.classList.contains("slide")) {
|
|
@@ -293,16 +285,6 @@ SlideInitializer = (function() {
|
|
|
293
285
|
}
|
|
294
286
|
};
|
|
295
287
|
|
|
296
|
-
SlideInitializer.initBodyClasses = function() {
|
|
297
|
-
return $.each(this.bodyClasses, function(klass) {
|
|
298
|
-
return $('body').addClass(klass.split('=')[0]);
|
|
299
|
-
});
|
|
300
|
-
};
|
|
301
|
-
|
|
302
|
-
SlideInitializer.bodyClasses = function() {
|
|
303
|
-
return window.location.search.replace(/^\?/, '').split('&');
|
|
304
|
-
};
|
|
305
|
-
|
|
306
288
|
return SlideInitializer;
|
|
307
289
|
|
|
308
290
|
})();
|
|
@@ -331,7 +313,11 @@ Slide = (function() {
|
|
|
331
313
|
Slide.current = function() {
|
|
332
314
|
var id;
|
|
333
315
|
id = window.location.hash.substr(1);
|
|
334
|
-
|
|
316
|
+
if ((id != null) && id.length > 0) {
|
|
317
|
+
return Slide.fromSlideId(id);
|
|
318
|
+
} else {
|
|
319
|
+
return Slide.first();
|
|
320
|
+
}
|
|
335
321
|
};
|
|
336
322
|
|
|
337
323
|
Slide.prototype.nextSection = function() {
|
|
@@ -549,12 +535,10 @@ UserInterface = (function() {
|
|
|
549
535
|
};
|
|
550
536
|
|
|
551
537
|
UserInterface.init = function() {
|
|
552
|
-
|
|
553
|
-
|
|
554
|
-
|
|
555
|
-
|
|
556
|
-
slide.replaceHistory();
|
|
557
|
-
return slide.updateProgress();
|
|
538
|
+
if (window.location.search.substr(1) === 'full') {
|
|
539
|
+
return Mode.switchToSlideMode();
|
|
540
|
+
} else {
|
|
541
|
+
return Mode.switchToListMode();
|
|
558
542
|
}
|
|
559
543
|
};
|
|
560
544
|
|
|
@@ -603,9 +587,6 @@ $(function() {
|
|
|
603
587
|
window.addEventListener("DOMContentLoaded", function() {
|
|
604
588
|
return UserInterface.init();
|
|
605
589
|
}, false);
|
|
606
|
-
window.addEventListener("popstate", function(e) {
|
|
607
|
-
return Mode.reload();
|
|
608
|
-
}, false);
|
|
609
590
|
window.addEventListener("resize", function(e) {
|
|
610
591
|
return UserInterface.resize();
|
|
611
592
|
}, false);
|
|
@@ -614,7 +595,6 @@ $(function() {
|
|
|
614
595
|
return;
|
|
615
596
|
}
|
|
616
597
|
switch (e.which) {
|
|
617
|
-
case 116:
|
|
618
598
|
case 13:
|
|
619
599
|
if (Slide.current() != null) {
|
|
620
600
|
return UserInterface.switchToSlideMode(e);
|
|
@@ -17,7 +17,7 @@
|
|
|
17
17
|
position:absolute;
|
|
18
18
|
top:0;
|
|
19
19
|
left:0;
|
|
20
|
-
|
|
20
|
+
display: none;
|
|
21
21
|
// Next
|
|
22
22
|
.next {
|
|
23
23
|
visibility:hidden;
|
|
@@ -27,35 +27,30 @@
|
|
|
27
27
|
}
|
|
28
28
|
// Current
|
|
29
29
|
&:target {
|
|
30
|
-
|
|
30
|
+
display: block;
|
|
31
31
|
}
|
|
32
32
|
// Shout
|
|
33
33
|
&.shout {
|
|
34
34
|
&.right, &.up, &.left, &.down {
|
|
35
35
|
h1, h2 {
|
|
36
36
|
opacity:0;
|
|
37
|
-
transition:all 0.
|
|
37
|
+
transition:all 0.5s ease-out;
|
|
38
38
|
}
|
|
39
39
|
&:target h2 {
|
|
40
40
|
opacity:1;
|
|
41
|
-
-webkit-transform:translateX(0) translateY(-50%);
|
|
42
41
|
transform:translateX(0) translateY(-50%);
|
|
43
42
|
}
|
|
44
43
|
}
|
|
45
44
|
&.right h2 {
|
|
46
|
-
-webkit-transform:translateX(-100%) translateY(-50%);
|
|
47
45
|
transform:translateX(-100%) translateY(-50%);
|
|
48
46
|
}
|
|
49
47
|
&.left h2 {
|
|
50
|
-
-webkit-transform:translateX(100%) translateY(-50%);
|
|
51
48
|
transform:translateX(100%) translateY(-50%);
|
|
52
49
|
}
|
|
53
50
|
&.up h2 {
|
|
54
|
-
-webkit-transform:translateX(0) translateY(100%);
|
|
55
51
|
transform:translateX(0) translateY(100%);
|
|
56
52
|
}
|
|
57
53
|
&.down h2 {
|
|
58
|
-
-webkit-transform:translateX(0) translateY(-100%);
|
|
59
54
|
transform:translateX(0) translateY(-100%);
|
|
60
55
|
}
|
|
61
56
|
}
|
|
@@ -1,11 +1,13 @@
|
|
|
1
1
|
.inactive, .current {
|
|
2
2
|
-webkit-transition: opacity 0.5s ease-in-out 0.0s;
|
|
3
|
+
-moz-transition: opacity 0.5s ease-in-out 0.0s;
|
|
3
4
|
}
|
|
4
5
|
.inactive {
|
|
5
6
|
opacity: 0;
|
|
6
7
|
}
|
|
7
8
|
.visited {
|
|
8
9
|
-webkit-transition: opacity 0.5s ease-in-out 0.3s;
|
|
10
|
+
-moz-transition: opacity 0.5s ease-in-out 0.3s;
|
|
9
11
|
.hide-visited {
|
|
10
12
|
display: none;
|
|
11
13
|
}
|
|
@@ -28,6 +30,7 @@ li.current {
|
|
|
28
30
|
.border-separated {
|
|
29
31
|
li {
|
|
30
32
|
-webkit-transition: all 0.5s;
|
|
33
|
+
-moz-transition: all 0.5s;
|
|
31
34
|
}
|
|
32
35
|
li.inactive {
|
|
33
36
|
margin-left: -400px;
|
|
@@ -24,12 +24,10 @@
|
|
|
24
24
|
text-align:left;
|
|
25
25
|
-webkit-transform-origin:0 0;
|
|
26
26
|
transform-origin:0 0;
|
|
27
|
-
-webkit-transform:scale(0.5);
|
|
28
27
|
transform:scale(0.5);
|
|
29
28
|
@media (max-width:$break) {
|
|
30
29
|
top:$height/2 + $height/4 - $gap;
|
|
31
30
|
margin:($gap - ($height/2 + $height/4)) ($gap - ($width/2 + $width/4)) 0 0;
|
|
32
|
-
-webkit-transform:scale(0.25);
|
|
33
31
|
transform:scale(0.25);
|
|
34
32
|
}
|
|
35
33
|
// Frame
|
|
@@ -44,12 +42,10 @@
|
|
|
44
42
|
content:'';
|
|
45
43
|
-webkit-transform-origin:0 0;
|
|
46
44
|
transform-origin:0 0;
|
|
47
|
-
-webkit-transform:scale(2);
|
|
48
45
|
transform:scale(2);
|
|
49
46
|
@media (max-width:$break) {
|
|
50
47
|
width:$width/4;
|
|
51
48
|
height:$height/4;
|
|
52
|
-
-webkit-transform:scale(4);
|
|
53
49
|
transform:scale(4);
|
|
54
50
|
}
|
|
55
51
|
}
|
|
@@ -62,7 +58,6 @@
|
|
|
62
58
|
width:$width/2;
|
|
63
59
|
-webkit-transform-origin:0 0;
|
|
64
60
|
transform-origin:0 0;
|
|
65
|
-
-webkit-transform:scale(2);
|
|
66
61
|
transform:scale(2);
|
|
67
62
|
}
|
|
68
63
|
}
|
|
@@ -120,7 +115,6 @@
|
|
|
120
115
|
color: #F5F5F5;
|
|
121
116
|
background: rgba(#FFF, 0.4);
|
|
122
117
|
z-index: 1;
|
|
123
|
-
/* -webkit-transform: rotate(45deg); */
|
|
124
118
|
text-shadow: 5px 5px 20px rgba(0, 0, 0, 0.5);
|
|
125
119
|
text-transform: uppercase;
|
|
126
120
|
}
|
|
@@ -31,6 +31,12 @@
|
|
|
31
31
|
50% {opacity: 0;}
|
|
32
32
|
100% {opacity: 0;}
|
|
33
33
|
}
|
|
34
|
+
@keyframes blink {
|
|
35
|
+
0% {opacity: 1;}
|
|
36
|
+
49% {opacity: 1;}
|
|
37
|
+
50% {opacity: 0;}
|
|
38
|
+
100% {opacity: 0;}
|
|
39
|
+
}
|
|
34
40
|
|
|
35
41
|
body {
|
|
36
42
|
font:30px/2 'Open Sans', sans-serif;
|
|
@@ -83,8 +89,8 @@ a {
|
|
|
83
89
|
color:#FFF;
|
|
84
90
|
text-align:center;
|
|
85
91
|
-webkit-transform-origin:50% 100%;
|
|
92
|
+
-moz-transform-origin:50% 100%;
|
|
86
93
|
transform-origin:50% 100%;
|
|
87
|
-
-webkit-transform:rotate(45deg) translateY(-1em);
|
|
88
94
|
transform:rotate(45deg) translateY(-1em);
|
|
89
95
|
}
|
|
90
96
|
|
|
@@ -199,6 +205,7 @@ a {
|
|
|
199
205
|
}
|
|
200
206
|
blink {
|
|
201
207
|
-webkit-animation: blink 1.0s infinite;
|
|
208
|
+
animation: blink 1.0s infinite;
|
|
202
209
|
}
|
|
203
210
|
mark {
|
|
204
211
|
padding-left: 5px;
|
|
@@ -382,7 +389,7 @@ a {
|
|
|
382
389
|
table {
|
|
383
390
|
left: 50%;
|
|
384
391
|
position: relative;
|
|
385
|
-
|
|
392
|
+
transform: translateX(-50%);
|
|
386
393
|
margin:0 0 28px;
|
|
387
394
|
width:100%;
|
|
388
395
|
border-collapse:collapse;
|
|
@@ -405,14 +412,14 @@ a {
|
|
|
405
412
|
img, iframe {
|
|
406
413
|
position: absolute;
|
|
407
414
|
left: 50%;
|
|
408
|
-
|
|
415
|
+
transform: translateX(-50%);
|
|
409
416
|
// max-height: 440px;
|
|
410
417
|
max-height: 580px;
|
|
411
418
|
max-width: 850px;
|
|
412
419
|
|
|
413
420
|
&.inline {
|
|
414
421
|
position: initial;
|
|
415
|
-
|
|
422
|
+
transform: none;
|
|
416
423
|
}
|
|
417
424
|
}
|
|
418
425
|
iframe {
|
|
@@ -469,7 +476,7 @@ a {
|
|
|
469
476
|
width:$width;
|
|
470
477
|
height:$height;
|
|
471
478
|
}
|
|
472
|
-
.
|
|
479
|
+
.border-info {
|
|
473
480
|
padding: 60px 0px;
|
|
474
481
|
font:38px/1 'Open Sans', sans-serif;
|
|
475
482
|
font-weight: lighter;
|
|
@@ -511,6 +518,24 @@ a {
|
|
|
511
518
|
}
|
|
512
519
|
}
|
|
513
520
|
}
|
|
521
|
+
.left-33 {
|
|
522
|
+
@extend .border-info;
|
|
523
|
+
width: 36%;
|
|
524
|
+
}
|
|
525
|
+
.right-33 {
|
|
526
|
+
@extend .border-info;
|
|
527
|
+
width: 36%;
|
|
528
|
+
left: 64%;
|
|
529
|
+
}
|
|
530
|
+
.left-50 {
|
|
531
|
+
@extend .border-info;
|
|
532
|
+
width: 50%;
|
|
533
|
+
}
|
|
534
|
+
.right-50 {
|
|
535
|
+
@extend .border-info;
|
|
536
|
+
width: 50%;
|
|
537
|
+
left: 50%;
|
|
538
|
+
}
|
|
514
539
|
@mixin cover {
|
|
515
540
|
img, svg, video,
|
|
516
541
|
object, canvas, iframe {
|
|
@@ -534,7 +559,6 @@ a {
|
|
|
534
559
|
@include cover {
|
|
535
560
|
top:50%;
|
|
536
561
|
width:100%;
|
|
537
|
-
-webkit-transform:translateY(-50%);
|
|
538
562
|
transform:translateY(-50%);
|
|
539
563
|
}
|
|
540
564
|
}
|
|
@@ -542,7 +566,6 @@ a {
|
|
|
542
566
|
@include cover {
|
|
543
567
|
left:50%;
|
|
544
568
|
height:100%;
|
|
545
|
-
-webkit-transform:translateX(-50%);
|
|
546
569
|
transform:translateX(-50%);
|
|
547
570
|
}
|
|
548
571
|
}
|
|
@@ -550,7 +573,6 @@ a {
|
|
|
550
573
|
@include cover {
|
|
551
574
|
top:0;
|
|
552
575
|
left:0;
|
|
553
|
-
-webkit-transform:none;
|
|
554
576
|
transform:none;
|
|
555
577
|
}
|
|
556
578
|
}
|
|
@@ -579,7 +601,6 @@ a {
|
|
|
579
601
|
left: 128px;
|
|
580
602
|
color:#FFF;
|
|
581
603
|
font-size:100px;
|
|
582
|
-
-webkit-transform:translateY(-50%);
|
|
583
604
|
transform:translateY(-50%);
|
|
584
605
|
border-bottom: none;
|
|
585
606
|
z-index: 1;
|
|
@@ -594,7 +615,6 @@ a {
|
|
|
594
615
|
right: 0;
|
|
595
616
|
top: 50%;
|
|
596
617
|
color: #FFF;
|
|
597
|
-
-webkit-transform:translateY(-50%);
|
|
598
618
|
transform:translateY(-50%);
|
|
599
619
|
font-size: 100px;
|
|
600
620
|
line-height: 1em;
|
|
@@ -608,8 +628,6 @@ a {
|
|
|
608
628
|
}
|
|
609
629
|
&.chapter {
|
|
610
630
|
@extend .shout;
|
|
611
|
-
@extend .left;
|
|
612
|
-
@extend .cover;
|
|
613
631
|
@extend .w;
|
|
614
632
|
h2 {
|
|
615
633
|
padding: 20px;
|
|
@@ -693,51 +711,45 @@ a {
|
|
|
693
711
|
margin-top: 50px;
|
|
694
712
|
}
|
|
695
713
|
}
|
|
696
|
-
.
|
|
714
|
+
.col {
|
|
697
715
|
position: relative;
|
|
698
|
-
-webkit-columns: 2;
|
|
699
716
|
li {
|
|
700
717
|
margin-left: 2em;
|
|
701
718
|
text-indent: -2em;
|
|
702
719
|
}
|
|
720
|
+
img {
|
|
721
|
+
position: initial;
|
|
722
|
+
transform: none;
|
|
723
|
+
}
|
|
724
|
+
}
|
|
725
|
+
.col2 {
|
|
726
|
+
@extend .col;
|
|
727
|
+
-webkit-columns: 2;
|
|
728
|
+
-moz-columns: 2;
|
|
703
729
|
}
|
|
704
730
|
.col3 {
|
|
705
|
-
|
|
731
|
+
@extend .col;
|
|
706
732
|
-webkit-columns: 3;
|
|
707
|
-
|
|
708
|
-
margin-left: 2em;
|
|
709
|
-
text-indent: -2em;
|
|
710
|
-
}
|
|
733
|
+
-moz-columns: 3;
|
|
711
734
|
}
|
|
712
735
|
.col4 {
|
|
713
|
-
|
|
736
|
+
@extend .col;
|
|
714
737
|
-webkit-columns: 4;
|
|
715
|
-
|
|
716
|
-
margin-left: 2em;
|
|
717
|
-
text-indent: -2em;
|
|
718
|
-
}
|
|
719
|
-
img {
|
|
720
|
-
position: initial;
|
|
721
|
-
-webkit-transform: none;
|
|
722
|
-
}
|
|
738
|
+
-moz-columns: 4;
|
|
723
739
|
}
|
|
724
740
|
// Place
|
|
725
741
|
.place {
|
|
726
742
|
position:absolute;
|
|
727
743
|
top:50%;
|
|
728
744
|
left:50%;
|
|
729
|
-
-webkit-transform:translate(-50%, -50%);
|
|
730
745
|
transform:translate(-50%, -50%);
|
|
731
746
|
&.t.l, &.t.r, &.b.r, &.b.l {
|
|
732
|
-
-webkit-transform:none;
|
|
733
747
|
transform:none;
|
|
734
748
|
}
|
|
735
749
|
&.t, &.b {
|
|
736
|
-
-webkit-transform:translate(-50%, 0);
|
|
737
750
|
transform:translate(-50%, 0);
|
|
738
751
|
}
|
|
739
752
|
&.l, &.r {
|
|
740
|
-
-webkit-transform:translate(0, -50%);
|
|
741
753
|
transform:translate(0, -50%);
|
|
742
754
|
}
|
|
743
755
|
&.t, &.t.l, &.t.r {
|
|
@@ -773,7 +785,7 @@ a {
|
|
|
773
785
|
}
|
|
774
786
|
}
|
|
775
787
|
|
|
776
|
-
|
|
788
|
+
.slide.title {
|
|
777
789
|
color: $grayDark;
|
|
778
790
|
font-size: 70px;
|
|
779
791
|
font-weight: 700;
|
|
@@ -834,8 +846,3 @@ a {
|
|
|
834
846
|
@import 'list';
|
|
835
847
|
@import 'full';
|
|
836
848
|
}
|
|
837
|
-
// Print
|
|
838
|
-
@page {
|
|
839
|
-
margin:0;
|
|
840
|
-
size:$width $height;
|
|
841
|
-
}
|