slides_reveal.tpl 7.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289
  1. {%- extends 'basic.tpl' -%}
  2. {% from 'mathjax.tpl' import mathjax %}
  3. {%- block any_cell scoped -%}
  4. {%- if cell.metadata.get('slide_start', False) -%}
  5. <section>
  6. {%- endif -%}
  7. {%- if cell.metadata.get('subslide_start', False) -%}
  8. <section>
  9. {%- endif -%}
  10. {%- if cell.metadata.get('fragment_start', False) -%}
  11. <div class="fragment">
  12. {%- endif -%}
  13. {%- if cell.metadata.slide_type == 'notes' -%}
  14. <aside class="notes">
  15. {{ super() }}
  16. </aside>
  17. {%- elif cell.metadata.slide_type == 'skip' -%}
  18. {%- else -%}
  19. {{ super() }}
  20. {%- endif -%}
  21. {%- if cell.metadata.get('fragment_end', False) -%}
  22. </div>
  23. {%- endif -%}
  24. {%- if cell.metadata.get('subslide_end', False) -%}
  25. </section>
  26. {%- endif -%}
  27. {%- if cell.metadata.get('slide_end', False) -%}
  28. </section>
  29. {%- endif -%}
  30. {%- endblock any_cell -%}
  31. {% block header %}
  32. <!DOCTYPE html>
  33. <html>
  34. <head>
  35. <meta charset="utf-8" />
  36. <meta http-equiv="X-UA-Compatible" content="chrome=1" />
  37. <meta name="apple-mobile-web-app-capable" content="yes" />
  38. <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
  39. {% set nb_title = nb.metadata.get('title', '') or resources['metadata']['name'] %}
  40. <title>{{nb_title}} slides</title>
  41. <script src="{{resources.reveal.require_js_url}}"></script>
  42. <script src="{{resources.reveal.jquery_url}}"></script>
  43. <!-- General and theme style sheets -->
  44. <link rel="stylesheet" href="{{resources.reveal.url_prefix}}/css/reveal.css">
  45. <link rel="stylesheet" href="{{resources.reveal.url_prefix}}/css/theme/{{resources.reveal.theme}}.css" id="theme">
  46. <!-- If the query includes 'print-pdf', include the PDF print sheet -->
  47. <script>
  48. if( window.location.search.match( /print-pdf/gi ) ) {
  49. var link = document.createElement( 'link' );
  50. link.rel = 'stylesheet';
  51. link.type = 'text/css';
  52. link.href = '{{resources.reveal.url_prefix}}/css/print/pdf.css';
  53. document.getElementsByTagName( 'head' )[0].appendChild( link );
  54. }
  55. </script>
  56. <!--[if lt IE 9]>
  57. <script src="{{resources.reveal.url_prefix}}/lib/js/html5shiv.js"></script>
  58. <![endif]-->
  59. <!-- Loading the mathjax macro -->
  60. {{ mathjax() }}
  61. <!-- Get Font-awesome from cdn -->
  62. <link rel="stylesheet" href="{{resources.reveal.font_awesome_url}}">
  63. {% for css in resources.inlining.css -%}
  64. <style type="text/css">
  65. {{ css }}
  66. </style>
  67. {% endfor %}
  68. <style type="text/css">
  69. /* Overrides of notebook CSS for static HTML export */
  70. .reveal {
  71. font-size: 160%;
  72. }
  73. .reveal pre {
  74. width: inherit;
  75. padding: 0.4em;
  76. margin: 0px;
  77. font-family: monospace, sans-serif;
  78. font-size: 80%;
  79. box-shadow: 0px 0px 0px rgba(0, 0, 0, 0);
  80. }
  81. .reveal pre code {
  82. padding: 0px;
  83. }
  84. .reveal section img {
  85. border: 0px solid black;
  86. box-shadow: 0 0 10px rgba(0, 0, 0, 0);
  87. }
  88. .reveal i {
  89. font-style: normal;
  90. font-family: FontAwesome;
  91. font-size: 2em;
  92. }
  93. .reveal .slides {
  94. text-align: left;
  95. }
  96. .reveal.fade {
  97. opacity: 1;
  98. }
  99. .reveal .progress {
  100. position: static;
  101. }
  102. .reveal .controls .navigate-left,
  103. .reveal .controls .navigate-left.enabled {
  104. border-right-color: #727272;
  105. }
  106. .reveal .controls .navigate-left.enabled:hover,
  107. .reveal .controls .navigate-left.enabled.enabled:hover {
  108. border-right-color: #dfdfdf;
  109. }
  110. .reveal .controls .navigate-right,
  111. .reveal .controls .navigate-right.enabled {
  112. border-left-color: #727272;
  113. }
  114. .reveal .controls .navigate-right.enabled:hover,
  115. .reveal .controls .navigate-right.enabled.enabled:hover {
  116. border-left-color: #dfdfdf;
  117. }
  118. .reveal .controls .navigate-up,
  119. .reveal .controls .navigate-up.enabled {
  120. border-bottom-color: #727272;
  121. }
  122. .reveal .controls .navigate-up.enabled:hover,
  123. .reveal .controls .navigate-up.enabled.enabled:hover {
  124. border-bottom-color: #dfdfdf;
  125. }
  126. .reveal .controls .navigate-down,
  127. .reveal .controls .navigate-down.enabled {
  128. border-top-color: #727272;
  129. }
  130. .reveal .controls .navigate-down.enabled:hover,
  131. .reveal .controls .navigate-down.enabled.enabled:hover {
  132. border-top-color: #dfdfdf;
  133. }
  134. .reveal .progress span {
  135. background: #727272;
  136. }
  137. div.input_area {
  138. padding: 0.06em;
  139. }
  140. div.code_cell {
  141. background-color: transparent;
  142. }
  143. div.prompt {
  144. width: 11ex;
  145. padding: 0.4em;
  146. margin: 0px;
  147. font-family: monospace, sans-serif;
  148. font-size: 80%;
  149. text-align: right;
  150. }
  151. div.output_area pre {
  152. font-family: monospace, sans-serif;
  153. font-size: 80%;
  154. }
  155. div.output_prompt {
  156. /* 5px right shift to account for margin in parent container */
  157. margin: 5px 5px 0 0;
  158. }
  159. div.text_cell.rendered .rendered_html {
  160. /* The H1 height seems miscalculated, we are just hidding the scrollbar */
  161. overflow-y: hidden;
  162. }
  163. a.anchor-link {
  164. /* There is still an anchor, we are only hidding it */
  165. display: none;
  166. }
  167. .rendered_html p {
  168. text-align: inherit;
  169. }
  170. ::-webkit-scrollbar
  171. {
  172. width: 6px;
  173. height: 6px;
  174. }
  175. ::-webkit-scrollbar *
  176. {
  177. background:transparent;
  178. }
  179. ::-webkit-scrollbar-thumb
  180. {
  181. background: #727272 !important;
  182. }
  183. </style>
  184. <!-- Custom stylesheet, it must be in the same directory as the html file -->
  185. <link rel="stylesheet" href="custom.css">
  186. </head>
  187. {% endblock header%}
  188. {% block body %}
  189. {% block pre_slides %}
  190. <body>
  191. {% endblock pre_slides %}
  192. <div class="reveal">
  193. <div class="slides">
  194. {{ super() }}
  195. </div>
  196. </div>
  197. {% block post_slides %}
  198. <script>
  199. require(
  200. {
  201. // it makes sense to wait a little bit when you are loading
  202. // reveal from a cdn in a slow connection environment
  203. waitSeconds: 15
  204. },
  205. [
  206. "{{resources.reveal.url_prefix}}/lib/js/head.min.js",
  207. "{{resources.reveal.url_prefix}}/js/reveal.js"
  208. ],
  209. function(head, Reveal){
  210. // Full list of configuration options available here: https://github.com/hakimel/reveal.js#configuration
  211. Reveal.initialize({
  212. controls: true,
  213. progress: true,
  214. history: true,
  215. transition: "{{resources.reveal.transition}}",
  216. // Optional libraries used to extend on reveal.js
  217. dependencies: [
  218. { src: "{{resources.reveal.url_prefix}}/lib/js/classList.js",
  219. condition: function() { return !document.body.classList; } },
  220. { src: "{{resources.reveal.url_prefix}}/plugin/notes/notes.js",
  221. async: true,
  222. condition: function() { return !!document.body.classList; } }
  223. ]
  224. });
  225. var update = function(event){
  226. if(MathJax.Hub.getAllJax(Reveal.getCurrentSlide())){
  227. MathJax.Hub.Rerender(Reveal.getCurrentSlide());
  228. }
  229. };
  230. Reveal.addEventListener('slidechanged', update);
  231. function setScrollingSlide() {
  232. var scroll = {{ resources.reveal.scroll | json_dumps }}
  233. if (scroll === true) {
  234. var h = $('.reveal').height() * 0.95;
  235. $('section.present').find('section')
  236. .filter(function() {
  237. return $(this).height() > h;
  238. })
  239. .css('height', 'calc(95vh)')
  240. .css('overflow-y', 'scroll')
  241. .css('margin-top', '20px');
  242. }
  243. }
  244. // check and set the scrolling slide every time the slide change
  245. Reveal.addEventListener('slidechanged', setScrollingSlide);
  246. }
  247. );
  248. </script>
  249. </body>
  250. {% endblock post_slides %}
  251. {% endblock body %}
  252. {% block footer %}
  253. </html>
  254. {% endblock footer %}