reveal-ck 3.9.2 → 4.0.0

Sign up to get free protection for your applications and to get access to all the features.
Files changed (82) hide show
  1. checksums.yaml +5 -5
  2. data/features/step_definitions/serve_steps.rb +1 -1
  3. data/files/reveal-ck/templates/index.html/body.html.erb +0 -2
  4. data/files/reveal-ck/templates/index.html/head.html.erb +6 -6
  5. data/files/reveal-ck/templates/index.html/index.html.erb +2 -2
  6. data/files/reveal-ck/templates/index.html/script.js.erb +4 -6
  7. data/files/reveal.js/LICENSE +1 -1
  8. data/files/reveal.js/README.md +268 -82
  9. data/files/reveal.js/bower.json +1 -4
  10. data/files/reveal.js/css/reset.css +30 -0
  11. data/files/reveal.js/css/reveal.css +114 -99
  12. data/files/reveal.js/css/reveal.scss +108 -95
  13. data/files/reveal.js/css/theme/README.md +1 -1
  14. data/files/reveal.js/css/theme/beige.css +1 -1
  15. data/files/reveal.js/css/theme/black.css +4 -4
  16. data/files/reveal.js/css/theme/blood.css +1 -1
  17. data/files/reveal.js/css/theme/league.css +1 -1
  18. data/files/reveal.js/css/theme/moon.css +1 -1
  19. data/files/reveal.js/css/theme/night.css +1 -1
  20. data/files/reveal.js/css/theme/serif.css +1 -1
  21. data/files/reveal.js/css/theme/simple.css +1 -1
  22. data/files/reveal.js/css/theme/sky.css +1 -1
  23. data/files/reveal.js/css/theme/solarized.css +1 -1
  24. data/files/reveal.js/css/theme/source/black.scss +1 -1
  25. data/files/reveal.js/css/theme/template/settings.scss +3 -1
  26. data/files/reveal.js/css/theme/template/theme.scss +3 -3
  27. data/files/reveal.js/css/theme/white.css +1 -1
  28. data/files/reveal.js/demo.html +35 -26
  29. data/files/reveal.js/{Gruntfile.js → gruntfile.js} +21 -25
  30. data/files/reveal.js/index.html +5 -4
  31. data/files/reveal.js/js/reveal.js +961 -347
  32. data/files/reveal.js/lib/css/monokai.css +71 -0
  33. data/files/reveal.js/lib/js/promise.js +2 -0
  34. data/files/reveal.js/package-lock.json +5703 -0
  35. data/files/reveal.js/package.json +13 -12
  36. data/files/reveal.js/plugin/highlight/highlight.js +247 -21
  37. data/files/reveal.js/plugin/markdown/example.html +1 -3
  38. data/files/reveal.js/plugin/markdown/markdown.js +107 -73
  39. data/files/reveal.js/plugin/markdown/marked.js +3 -3
  40. data/files/reveal.js/plugin/math/math.js +51 -26
  41. data/files/reveal.js/plugin/notes/notes.html +138 -76
  42. data/files/reveal.js/plugin/notes/notes.js +46 -15
  43. data/files/reveal.js/plugin/search/search.js +1 -1
  44. data/files/reveal.js/plugin/zoom-js/zoom.js +22 -17
  45. data/files/reveal.js/test/assets/external-script-a.js +1 -0
  46. data/files/reveal.js/test/assets/external-script-b.js +1 -0
  47. data/files/reveal.js/test/assets/external-script-c.js +1 -0
  48. data/files/reveal.js/test/assets/external-script-d.js +1 -0
  49. data/files/reveal.js/test/examples/assets/beeping.txt +2 -0
  50. data/files/reveal.js/test/examples/assets/beeping.wav +0 -0
  51. data/files/reveal.js/test/examples/embedded-media.html +5 -1
  52. data/files/reveal.js/test/examples/math.html +23 -3
  53. data/files/reveal.js/test/examples/slide-backgrounds.html +0 -1
  54. data/files/reveal.js/test/examples/slide-transitions.html +0 -1
  55. data/files/reveal.js/test/test-dependencies-async.html +78 -0
  56. data/files/reveal.js/test/test-dependencies.html +54 -0
  57. data/files/reveal.js/test/test-grid-navigation.html +74 -0
  58. data/files/reveal.js/test/test-iframe-backgrounds.html +104 -0
  59. data/files/reveal.js/test/test-iframes.html +108 -0
  60. data/files/reveal.js/test/test-markdown-element-attributes.html +1 -3
  61. data/files/reveal.js/test/test-markdown-external.html +5 -4
  62. data/files/reveal.js/test/test-markdown-options.html +0 -1
  63. data/files/reveal.js/test/test-markdown-slide-attributes.html +0 -1
  64. data/files/reveal.js/test/test-markdown.html +0 -1
  65. data/files/reveal.js/test/test-pdf.html +1 -2
  66. data/files/reveal.js/test/test-plugins.html +105 -0
  67. data/files/reveal.js/test/test-state.html +139 -0
  68. data/files/reveal.js/test/test.html +3 -4
  69. data/files/reveal.js/test/test.js +21 -0
  70. data/lib/reveal-ck/builders/create_index_html.rb +0 -1
  71. data/lib/reveal-ck/builders/index_html.rb +2 -4
  72. data/lib/reveal-ck/commands/listen_to_reload_browser.rb +4 -1
  73. data/lib/reveal-ck/commands/serve.rb +2 -2
  74. data/lib/reveal-ck/commands/start_web_server.rb +1 -1
  75. data/lib/reveal-ck/commands/thread_waker.rb +1 -1
  76. data/lib/reveal-ck/config.rb +1 -1
  77. data/lib/reveal-ck/version.rb +1 -1
  78. data/spec/lib/reveal-ck/builders/index_html_spec.rb +1 -11
  79. data/spec/lib/reveal-ck/commands/thread_waker_spec.rb +2 -0
  80. metadata +94 -80
  81. data/files/reveal.js/lib/js/classList.js +0 -2
  82. data/files/reveal.js/lib/js/head.min.js +0 -6
@@ -3,55 +3,28 @@
3
3
  * http://revealjs.com
4
4
  * MIT licensed
5
5
  *
6
- * Copyright (C) 2018 Hakim El Hattab, http://hakim.se
6
+ * Copyright (C) 2020 Hakim El Hattab, http://hakim.se
7
7
  */
8
8
 
9
9
 
10
- /*********************************************
11
- * RESET STYLES
12
- *********************************************/
13
-
14
- html, body, .reveal div, .reveal span, .reveal applet, .reveal object, .reveal iframe,
15
- .reveal h1, .reveal h2, .reveal h3, .reveal h4, .reveal h5, .reveal h6, .reveal p, .reveal blockquote, .reveal pre,
16
- .reveal a, .reveal abbr, .reveal acronym, .reveal address, .reveal big, .reveal cite, .reveal code,
17
- .reveal del, .reveal dfn, .reveal em, .reveal img, .reveal ins, .reveal kbd, .reveal q, .reveal s, .reveal samp,
18
- .reveal small, .reveal strike, .reveal strong, .reveal sub, .reveal sup, .reveal tt, .reveal var,
19
- .reveal b, .reveal u, .reveal center,
20
- .reveal dl, .reveal dt, .reveal dd, .reveal ol, .reveal ul, .reveal li,
21
- .reveal fieldset, .reveal form, .reveal label, .reveal legend,
22
- .reveal table, .reveal caption, .reveal tbody, .reveal tfoot, .reveal thead, .reveal tr, .reveal th, .reveal td,
23
- .reveal article, .reveal aside, .reveal canvas, .reveal details, .reveal embed,
24
- .reveal figure, .reveal figcaption, .reveal footer, .reveal header, .reveal hgroup,
25
- .reveal menu, .reveal nav, .reveal output, .reveal ruby, .reveal section, .reveal summary,
26
- .reveal time, .reveal mark, .reveal audio, .reveal video {
27
- margin: 0;
28
- padding: 0;
29
- border: 0;
30
- font-size: 100%;
31
- font: inherit;
32
- vertical-align: baseline;
33
- }
34
-
35
- .reveal article, .reveal aside, .reveal details, .reveal figcaption, .reveal figure,
36
- .reveal footer, .reveal header, .reveal hgroup, .reveal menu, .reveal nav, .reveal section {
37
- display: block;
38
- }
39
-
40
-
41
10
  /*********************************************
42
11
  * GLOBAL STYLES
43
12
  *********************************************/
44
13
 
45
- html,
46
- body {
14
+ html {
47
15
  width: 100%;
48
16
  height: 100%;
17
+ height: 100vh;
18
+ height: calc( var(--vh, 1vh) * 100 );
49
19
  overflow: hidden;
50
20
  }
51
21
 
52
22
  body {
23
+ height: 100%;
24
+ overflow: hidden;
53
25
  position: relative;
54
26
  line-height: 1;
27
+ margin: 0;
55
28
 
56
29
  background-color: #fff;
57
30
  color: #000;
@@ -129,7 +102,7 @@ body {
129
102
  }
130
103
 
131
104
  .reveal .slides section .fragment.fade-up {
132
- transform: translate(0, 20%);
105
+ transform: translate(0, 40px);
133
106
 
134
107
  &.visible {
135
108
  transform: translate(0, 0);
@@ -137,7 +110,7 @@ body {
137
110
  }
138
111
 
139
112
  .reveal .slides section .fragment.fade-down {
140
- transform: translate(0, -20%);
113
+ transform: translate(0, -40px);
141
114
 
142
115
  &.visible {
143
116
  transform: translate(0, 0);
@@ -145,7 +118,7 @@ body {
145
118
  }
146
119
 
147
120
  .reveal .slides section .fragment.fade-right {
148
- transform: translate(-20%, 0);
121
+ transform: translate(-40px, 0);
149
122
 
150
123
  &.visible {
151
124
  transform: translate(0, 0);
@@ -153,7 +126,7 @@ body {
153
126
  }
154
127
 
155
128
  .reveal .slides section .fragment.fade-left {
156
- transform: translate(20%, 0);
129
+ transform: translate(40px, 0);
157
130
 
158
131
  &.visible {
159
132
  transform: translate(0, 0);
@@ -290,7 +263,7 @@ $controlsArrowAngleActive: 36deg;
290
263
  bottom: $spacing;
291
264
  right: $spacing;
292
265
  left: auto;
293
- z-index: 1;
266
+ z-index: 11;
294
267
  color: #000;
295
268
  pointer-events: none;
296
269
  font-size: 10px;
@@ -382,7 +355,8 @@ $controlsArrowAngleActive: 36deg;
382
355
 
383
356
  .navigate-down {
384
357
  right: $controlArrowSpacing + $controlArrowSize/2;
385
- bottom: 0;
358
+ bottom: -$controlArrowSpacing;
359
+ padding-bottom: $controlArrowSpacing;
386
360
  transform: translateY( 10px );
387
361
 
388
362
  .controls-arrow {
@@ -434,12 +408,19 @@ $controlsArrowAngleActive: 36deg;
434
408
  }
435
409
  }
436
410
 
411
+ .reveal[data-navigation-mode="linear"].has-horizontal-slides .navigate-up,
412
+ .reveal[data-navigation-mode="linear"].has-horizontal-slides .navigate-down {
413
+ display: none;
414
+ }
415
+
437
416
  // Adjust the layout when there are no vertical slides
417
+ .reveal[data-navigation-mode="linear"].has-horizontal-slides .navigate-left,
438
418
  .reveal:not(.has-vertical-slides) .controls .navigate-left {
439
419
  bottom: $controlArrowSpacing;
440
420
  right: 0.5em + $controlArrowSpacing + $controlArrowSize;
441
421
  }
442
422
 
423
+ .reveal[data-navigation-mode="linear"].has-horizontal-slides .navigate-right,
443
424
  .reveal:not(.has-vertical-slides) .controls .navigate-right {
444
425
  bottom: $controlArrowSpacing;
445
426
  right: 0.5em;
@@ -472,7 +453,7 @@ $controlsArrowAngleActive: 36deg;
472
453
  // Edge aligned controls layout
473
454
  @media screen and (min-width: 500px) {
474
455
 
475
- $spacing: 8px;
456
+ $spacing: 0.8em;
476
457
 
477
458
  .reveal .controls[data-controls-layout="edges"] {
478
459
  & {
@@ -509,7 +490,7 @@ $controlsArrowAngleActive: 36deg;
509
490
  }
510
491
 
511
492
  .navigate-down {
512
- bottom: $spacing;
493
+ bottom: $spacing - $controlArrowSpacing + 0.3em;
513
494
  left: 50%;
514
495
  margin-left: -$controlArrowSize/2;
515
496
  }
@@ -586,17 +567,7 @@ $controlsArrowAngleActive: 36deg;
586
567
  width: 100%;
587
568
  height: 100%;
588
569
  overflow: hidden;
589
- touch-action: none;
590
- }
591
-
592
- // Mobile Safari sometimes overlays a header at the top
593
- // of the page when in landscape mode. Using fixed
594
- // positioning ensures that reveal.js reduces its height
595
- // when this header is visible.
596
- @media only screen and (orientation : landscape) {
597
- .reveal.ua-iphone {
598
- position: fixed;
599
- }
570
+ touch-action: pinch-zoom;
600
571
  }
601
572
 
602
573
  .reveal .slides {
@@ -618,7 +589,7 @@ $controlsArrowAngleActive: 36deg;
618
589
  }
619
590
 
620
591
  .reveal .slides>section {
621
- -ms-perspective: 600px;
592
+ perspective: 600px;
622
593
  }
623
594
 
624
595
  .reveal .slides>section,
@@ -657,6 +628,7 @@ $controlsArrowAngleActive: 36deg;
657
628
  padding-top: 0;
658
629
  padding-bottom: 0;
659
630
  pointer-events: none;
631
+ height: 100%;
660
632
  }
661
633
 
662
634
  .reveal .slides>section.present,
@@ -831,10 +803,10 @@ $controlsArrowAngleActive: 36deg;
831
803
  transform: scale(0.2);
832
804
  }
833
805
  @include transition-vertical-past(zoom) {
834
- transform: translate(0, -150%);
806
+ transform: scale(16);
835
807
  }
836
808
  @include transition-vertical-future(zoom) {
837
- transform: translate(0, 150%);
809
+ transform: scale(0.2);
838
810
  }
839
811
 
840
812
 
@@ -1067,37 +1039,38 @@ $controlsArrowAngleActive: 36deg;
1067
1039
  overflow-y: auto;
1068
1040
  }
1069
1041
 
1042
+ .no-transforms .reveal {
1043
+ overflow: visible;
1044
+ }
1045
+
1070
1046
  .no-transforms .reveal .slides {
1071
1047
  position: relative;
1072
1048
  width: 80%;
1073
- height: auto !important;
1049
+ max-width: 1280px;
1050
+ height: auto;
1074
1051
  top: 0;
1075
- left: 50%;
1076
- margin: 0;
1052
+ margin: 0 auto;
1077
1053
  text-align: center;
1078
1054
  }
1079
1055
 
1080
1056
  .no-transforms .reveal .controls,
1081
1057
  .no-transforms .reveal .progress {
1082
- display: none !important;
1058
+ display: none;
1083
1059
  }
1084
1060
 
1085
1061
  .no-transforms .reveal .slides section {
1086
- display: block !important;
1087
- opacity: 1 !important;
1088
- position: relative !important;
1062
+ display: block;
1063
+ opacity: 1;
1064
+ position: relative;
1089
1065
  height: auto;
1090
1066
  min-height: 0;
1091
1067
  top: 0;
1092
- left: -50%;
1068
+ left: 0;
1069
+ margin: 10vh 0;
1093
1070
  margin: 70px 0;
1094
1071
  transform: none;
1095
1072
  }
1096
1073
 
1097
- .no-transforms .reveal .slides section section {
1098
- left: 0;
1099
- }
1100
-
1101
1074
  .reveal .no-transition,
1102
1075
  .reveal .no-transition * {
1103
1076
  transition: none !important;
@@ -1416,10 +1389,10 @@ $controlsArrowAngleActive: 36deg;
1416
1389
 
1417
1390
 
1418
1391
  /*********************************************
1419
- * LINK PREVIEW OVERLAY
1392
+ * OVERLAY FOR LINK PREVIEWS AND HELP
1420
1393
  *********************************************/
1421
1394
 
1422
- .reveal .overlay {
1395
+ .reveal > .overlay {
1423
1396
  position: absolute;
1424
1397
  top: 0;
1425
1398
  left: 0;
@@ -1431,12 +1404,12 @@ $controlsArrowAngleActive: 36deg;
1431
1404
  visibility: hidden;
1432
1405
  transition: all 0.3s ease;
1433
1406
  }
1434
- .reveal .overlay.visible {
1407
+ .reveal > .overlay.visible {
1435
1408
  opacity: 1;
1436
1409
  visibility: visible;
1437
1410
  }
1438
1411
 
1439
- .reveal .overlay .spinner {
1412
+ .reveal > .overlay .spinner {
1440
1413
  position: absolute;
1441
1414
  display: block;
1442
1415
  top: 50%;
@@ -1452,7 +1425,7 @@ $controlsArrowAngleActive: 36deg;
1452
1425
  transition: all 0.3s ease;
1453
1426
  }
1454
1427
 
1455
- .reveal .overlay header {
1428
+ .reveal > .overlay header {
1456
1429
  position: absolute;
1457
1430
  left: 0;
1458
1431
  top: 0;
@@ -1461,7 +1434,7 @@ $controlsArrowAngleActive: 36deg;
1461
1434
  z-index: 2;
1462
1435
  border-bottom: 1px solid #222;
1463
1436
  }
1464
- .reveal .overlay header a {
1437
+ .reveal > .overlay header a {
1465
1438
  display: inline-block;
1466
1439
  width: 40px;
1467
1440
  height: 40px;
@@ -1472,10 +1445,10 @@ $controlsArrowAngleActive: 36deg;
1472
1445
 
1473
1446
  box-sizing: border-box;
1474
1447
  }
1475
- .reveal .overlay header a:hover {
1448
+ .reveal > .overlay header a:hover {
1476
1449
  opacity: 1;
1477
1450
  }
1478
- .reveal .overlay header a .icon {
1451
+ .reveal > .overlay header a .icon {
1479
1452
  display: inline-block;
1480
1453
  width: 20px;
1481
1454
  height: 20px;
@@ -1484,14 +1457,14 @@ $controlsArrowAngleActive: 36deg;
1484
1457
  background-size: 100%;
1485
1458
  background-repeat: no-repeat;
1486
1459
  }
1487
- .reveal .overlay header a.close .icon {
1460
+ .reveal > .overlay header a.close .icon {
1488
1461
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAABkklEQVRYR8WX4VHDMAxG6wnoJrABZQPYBCaBTWAD2g1gE5gg6OOsXuxIlr40d81dfrSJ9V4c2VLK7spHuTJ/5wpM07QXuXc5X0opX2tEJcadjHuV80li/FgxTIEK/5QBCICBD6xEhSMGHgQPgBgLiYVAB1dpSqKDawxTohFw4JSEA3clzgIBPCURwE2JucBR7rhPJJv5OpJwDX+SfDjgx1wACQeJG1aChP9K/IMmdZ8DtESV1WyP3Bt4MwM6sj4NMxMYiqUWHQu4KYA/SYkIjOsm3BXYWMKFDwU2khjCQ4ELJUJ4SmClRArOCmSXGuKma0fYD5CbzHxFpCSGAhfAVSSUGDUk2BWZaff2g6GE15BsBQ9nwmpIGDiyHQddwNTMKkbZaf9fajXQca1EX44puJZUsnY0ObGmITE3GVLCbEhQUjGVt146j6oasWN+49Vph2w1pZ5EansNZqKBm1txbU57iRRcZ86RWMDdWtBJUHBHwoQPi1GV+JCbntmvok7iTX4/Up9mgyTc/FJYDTcndgH/AA5A/CHsyEkVAAAAAElFTkSuQmCC);
1489
1462
  }
1490
- .reveal .overlay header a.external .icon {
1463
+ .reveal > .overlay header a.external .icon {
1491
1464
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAcElEQVRYR+2WSQoAIQwEzf8f7XiOMkUQxUPlGkM3hVmiQfQR9GYnH1SsAQlI4DiBqkCMoNb9y2e90IAEJPAcgdznU9+engMaeJ7Azh5Y1U67gAho4DqBqmB1buAf0MB1AlVBek83ZPkmJMGc1wAR+AAqod/B97TRpQAAAABJRU5ErkJggg==);
1492
1465
  }
1493
1466
 
1494
- .reveal .overlay .viewport {
1467
+ .reveal > .overlay .viewport {
1495
1468
  position: absolute;
1496
1469
  display: flex;
1497
1470
  top: 40px;
@@ -1500,7 +1473,7 @@ $controlsArrowAngleActive: 36deg;
1500
1473
  left: 0;
1501
1474
  }
1502
1475
 
1503
- .reveal .overlay.overlay-preview .viewport iframe {
1476
+ .reveal > .overlay.overlay-preview .viewport iframe {
1504
1477
  width: 100%;
1505
1478
  height: 100%;
1506
1479
  max-width: 100%;
@@ -1512,12 +1485,12 @@ $controlsArrowAngleActive: 36deg;
1512
1485
  transition: all 0.3s ease;
1513
1486
  }
1514
1487
 
1515
- .reveal .overlay.overlay-preview.loaded .viewport iframe {
1488
+ .reveal > .overlay.overlay-preview.loaded .viewport iframe {
1516
1489
  opacity: 1;
1517
1490
  visibility: visible;
1518
1491
  }
1519
1492
 
1520
- .reveal .overlay.overlay-preview.loaded .viewport-inner {
1493
+ .reveal > .overlay.overlay-preview.loaded .viewport-inner {
1521
1494
  position: absolute;
1522
1495
  z-index: -1;
1523
1496
  left: 0;
@@ -1526,26 +1499,26 @@ $controlsArrowAngleActive: 36deg;
1526
1499
  text-align: center;
1527
1500
  letter-spacing: normal;
1528
1501
  }
1529
- .reveal .overlay.overlay-preview .x-frame-error {
1502
+ .reveal > .overlay.overlay-preview .x-frame-error {
1530
1503
  opacity: 0;
1531
1504
  transition: opacity 0.3s ease 0.3s;
1532
1505
  }
1533
- .reveal .overlay.overlay-preview.loaded .x-frame-error {
1506
+ .reveal > .overlay.overlay-preview.loaded .x-frame-error {
1534
1507
  opacity: 1;
1535
1508
  }
1536
1509
 
1537
- .reveal .overlay.overlay-preview.loaded .spinner {
1510
+ .reveal > .overlay.overlay-preview.loaded .spinner {
1538
1511
  opacity: 0;
1539
1512
  visibility: hidden;
1540
1513
  transform: scale(0.2);
1541
1514
  }
1542
1515
 
1543
- .reveal .overlay.overlay-help .viewport {
1516
+ .reveal > .overlay.overlay-help .viewport {
1544
1517
  overflow: auto;
1545
1518
  color: #fff;
1546
1519
  }
1547
1520
 
1548
- .reveal .overlay.overlay-help .viewport .viewport-inner {
1521
+ .reveal > .overlay.overlay-help .viewport .viewport-inner {
1549
1522
  width: 600px;
1550
1523
  margin: auto;
1551
1524
  padding: 20px 20px 80px 20px;
@@ -1553,31 +1526,30 @@ $controlsArrowAngleActive: 36deg;
1553
1526
  letter-spacing: normal;
1554
1527
  }
1555
1528
 
1556
- .reveal .overlay.overlay-help .viewport .viewport-inner .title {
1529
+ .reveal > .overlay.overlay-help .viewport .viewport-inner .title {
1557
1530
  font-size: 20px;
1558
1531
  }
1559
1532
 
1560
- .reveal .overlay.overlay-help .viewport .viewport-inner table {
1533
+ .reveal > .overlay.overlay-help .viewport .viewport-inner table {
1561
1534
  border: 1px solid #fff;
1562
1535
  border-collapse: collapse;
1563
1536
  font-size: 16px;
1564
1537
  }
1565
1538
 
1566
- .reveal .overlay.overlay-help .viewport .viewport-inner table th,
1567
- .reveal .overlay.overlay-help .viewport .viewport-inner table td {
1539
+ .reveal > .overlay.overlay-help .viewport .viewport-inner table th,
1540
+ .reveal > .overlay.overlay-help .viewport .viewport-inner table td {
1568
1541
  width: 200px;
1569
1542
  padding: 14px;
1570
1543
  border: 1px solid #fff;
1571
1544
  vertical-align: middle;
1572
1545
  }
1573
1546
 
1574
- .reveal .overlay.overlay-help .viewport .viewport-inner table th {
1547
+ .reveal > .overlay.overlay-help .viewport .viewport-inner table th {
1575
1548
  padding-top: 20px;
1576
1549
  padding-bottom: 20px;
1577
1550
  }
1578
1551
 
1579
1552
 
1580
-
1581
1553
  /*********************************************
1582
1554
  * PLAYBACK COMPONENT
1583
1555
  *********************************************/
@@ -1598,6 +1570,40 @@ $controlsArrowAngleActive: 36deg;
1598
1570
  }
1599
1571
 
1600
1572
 
1573
+ /*********************************************
1574
+ * CODE HIGHLGIHTING
1575
+ *********************************************/
1576
+
1577
+ .reveal .hljs table {
1578
+ margin: initial;
1579
+ }
1580
+
1581
+ .reveal .hljs-ln-code,
1582
+ .reveal .hljs-ln-numbers {
1583
+ padding: 0;
1584
+ border: 0;
1585
+ }
1586
+
1587
+ .reveal .hljs-ln-numbers {
1588
+ opacity: 0.6;
1589
+ padding-right: 0.75em;
1590
+ text-align: right;
1591
+ vertical-align: top;
1592
+ }
1593
+
1594
+ .reveal .hljs.has-highlights tr:not(.highlight-line) {
1595
+ opacity: 0.4;
1596
+ }
1597
+
1598
+ .reveal .hljs:not(:first-child).fragment {
1599
+ position: absolute;
1600
+ top: 0;
1601
+ left: 0;
1602
+ width: 100%;
1603
+ box-sizing: border-box;
1604
+ }
1605
+
1606
+
1601
1607
  /*********************************************
1602
1608
  * ROLLING LINKS
1603
1609
  *********************************************/
@@ -1648,6 +1654,8 @@ $controlsArrowAngleActive: 36deg;
1648
1654
  * SPEAKER NOTES
1649
1655
  *********************************************/
1650
1656
 
1657
+ $notesWidthPercent: 25%;
1658
+
1651
1659
  // Hide on-page notes
1652
1660
  .reveal aside.notes {
1653
1661
  display: none;
@@ -1658,7 +1666,7 @@ $controlsArrowAngleActive: 36deg;
1658
1666
  .reveal .speaker-notes {
1659
1667
  display: none;
1660
1668
  position: absolute;
1661
- width: 25vw;
1669
+ width: $notesWidthPercent / (1-$notesWidthPercent/100) * 1%;
1662
1670
  height: 100%;
1663
1671
  top: 0;
1664
1672
  left: 100%;
@@ -1694,7 +1702,7 @@ $controlsArrowAngleActive: 36deg;
1694
1702
 
1695
1703
 
1696
1704
  .reveal.show-notes {
1697
- max-width: 75vw;
1705
+ max-width: 100% - $notesWidthPercent;
1698
1706
  overflow: visible;
1699
1707
  }
1700
1708
 
@@ -1713,6 +1721,7 @@ $controlsArrowAngleActive: 36deg;
1713
1721
  border-left: 0;
1714
1722
  max-width: none;
1715
1723
  max-height: 70%;
1724
+ max-height: 70vh;
1716
1725
  overflow: visible;
1717
1726
  }
1718
1727
 
@@ -1721,17 +1730,21 @@ $controlsArrowAngleActive: 36deg;
1721
1730
  left: 0;
1722
1731
  width: 100%;
1723
1732
  height: (30/0.7)*1%;
1733
+ height: 30vh;
1734
+ border: 0;
1724
1735
  }
1725
1736
  }
1726
1737
 
1727
1738
  @media screen and (max-width: 600px) {
1728
1739
  .reveal.show-notes {
1729
1740
  max-height: 60%;
1741
+ max-height: 60vh;
1730
1742
  }
1731
1743
 
1732
1744
  .reveal.show-notes .speaker-notes {
1733
1745
  top: 100%;
1734
1746
  height: (40/0.6)*1%;
1747
+ height: 40vh;
1735
1748
  }
1736
1749
 
1737
1750
  .reveal .speaker-notes {