daniel/emacs-conf
1
2
Fork 0
Code Issues 7 Pull Requests Projects Releases Wiki Activity

ox-reveal update

Browse Source
This commit is contained in:
Daniel Weschke
2022-04-25 18:47:51 +02:00
parent 2ff6f7e396
commit 2db1c0afe0
84 changed files with 15869 additions and 5383 deletions
Download Patch File Download Diff File Expand all files Collapse all files
lisp/my/my-org-article.el
+8
View File
@@ -2311,5 +2311,13 @@ a:link::selection, a:link::-moz-selection {
(org-export-to-file 'article-html file async subtreep (org-export-to-file 'article-html file async subtreep
visible-only body-only ext-plist))) visible-only body-only ext-plist)))
(defun my-org-article-help ()
"Open the `org-ref' manual."
(interactive)
(find-file (expand-file-name
"my-org-article.org"
(file-name-directory
(find-library-name "my-org-article")))))
(provide 'my-org-article) (provide 'my-org-article)
;;; my-org-article.el ends here ;;; my-org-article.el ends here
lisp/ox-reveal.el
+75 -56
View File
@@ -5,8 +5,8 @@
;; Author: Yujie Wen <yjwen.ty at gmail dot com> ;; Author: Yujie Wen <yjwen.ty at gmail dot com>
;; Created: 2013-04-27 ;; Created: 2013-04-27
;; Version: 1.0 ;; Version: 1.0
;; Package-Version: 20211128.1509 ;; Package-Version: 20220410.1533
;; Package-Commit: 59adea80013e962811b204403cc500a4d28b85a0 ;; Package-Commit: 862b41df7734f57019543f6bd82ff7dad7183358
;; Package-Requires: ((org "8.3")) ;; Package-Requires: ((org "8.3"))
;; Keywords: outlines, hypermedia, slideshow, presentation ;; Keywords: outlines, hypermedia, slideshow, presentation
@@ -75,6 +75,7 @@
(:reveal-title-slide-background-repeat "REVEAL_TITLE_SLIDE_BACKGROUND_REPEAT" nil nil t) (:reveal-title-slide-background-repeat "REVEAL_TITLE_SLIDE_BACKGROUND_REPEAT" nil nil t)
(:reveal-title-slide-background-transition "REVEAL_TITLE_SLIDE_BACKGROUND_TRANSITION" nil nil t) (:reveal-title-slide-background-transition "REVEAL_TITLE_SLIDE_BACKGROUND_TRANSITION" nil nil t)
(:reveal-title-slide-background-opacity "REVEAL_TITLE_SLIDE_BACKGROUND_OPACITY" nil nil t) (:reveal-title-slide-background-opacity "REVEAL_TITLE_SLIDE_BACKGROUND_OPACITY" nil nil t)
(:reveal-title-slide-state "REVEAL_TITLE_SLIDE_STATE" nil nil t)
(:reveal-toc-slide-background "REVEAL_TOC_SLIDE_BACKGROUND" nil nil t) (:reveal-toc-slide-background "REVEAL_TOC_SLIDE_BACKGROUND" nil nil t)
(:reveal-toc-slide-background-size "REVEAL_TOC_SLIDE_BACKGROUND_SIZE" nil nil t) (:reveal-toc-slide-background-size "REVEAL_TOC_SLIDE_BACKGROUND_SIZE" nil nil t)
(:reveal-toc-slide-background-position "REVEAL_TOC_SLIDE_BACKGROUND_POSITION" nil nil t) (:reveal-toc-slide-background-position "REVEAL_TOC_SLIDE_BACKGROUND_POSITION" nil nil t)
@@ -103,6 +104,7 @@
(:reveal-single-file nil "reveal_single_file" org-reveal-single-file t) (:reveal-single-file nil "reveal_single_file" org-reveal-single-file t)
(:reveal-extra-script "REVEAL_EXTRA_SCRIPT" nil org-reveal-extra-script space) (:reveal-extra-script "REVEAL_EXTRA_SCRIPT" nil org-reveal-extra-script space)
(:reveal-extra-script-src "REVEAL_EXTRA_SCRIPT_SRC" nil org-reveal-extra-script-src split) (:reveal-extra-script-src "REVEAL_EXTRA_SCRIPT_SRC" nil org-reveal-extra-script-src split)
(:reveal-extra-script-before-src "REVEAL_EXTRA_SCRIPT_BEFORE_SRC" nil org-reveal-extra-script-before-src split)
(:reveal-init-options "REVEAL_INIT_OPTIONS" nil org-reveal-init-options newline) (:reveal-init-options "REVEAL_INIT_OPTIONS" nil org-reveal-init-options newline)
(:reveal-highlight-css "REVEAL_HIGHLIGHT_CSS" nil org-reveal-highlight-css nil) (:reveal-highlight-css "REVEAL_HIGHLIGHT_CSS" nil org-reveal-highlight-css nil)
(:reveal-reveal-js-version "REVEAL_REVEAL_JS_VERSION" nil nil t) (:reveal-reveal-js-version "REVEAL_REVEAL_JS_VERSION" nil nil t)
@@ -323,7 +325,12 @@ Example:
:type 'string) :type 'string)
(defcustom org-reveal-extra-script-src '() (defcustom org-reveal-extra-script-src '()
"Custom script source that will be embedded in a <script src> tag." "Custom script source that will be embedded in a <script src> tag, after the call to Reveal.initialize()."
:group 'org-export-reveal
:type 'list)
(defcustom org-reveal-extra-script-before-src '()
"Custom script source that will be embedded in a <script src> tag, before the call to Reveal.initialize()."
:group 'org-export-reveal :group 'org-export-reveal
:type 'list) :type 'list)
@@ -736,6 +743,44 @@ dependencies: [
(if (string= "" extra-codes) all-plugins (append (list extra-codes) all-plugins)))) (if (string= "" extra-codes) all-plugins (append (list extra-codes) all-plugins))))
(mapconcat 'identity total-codes ",\n")) (mapconcat 'identity total-codes ",\n"))
"]\n")) "]\n"))
(defun org-reveal--script-tag-by-file-name (fname in-single-file)
"Create a <script> tag for including scripts from the given
file name. If in single file mode, the <script> tag encloses the
contents of the file, otherwise it is a tag pointing to the file"
(if in-single-file
(let ((local-fname (org-reveal--file-url-to-path fname)))
(if (file-readable-p local-fname)
;; Embed script into HTML
(concat "<script>\n"
(org-reveal--read-file local-fname)
"\n</script>\n")
;; Cannot read fname, just error out
(error (concat "Cannot generate single file presentation due to "
local-fname
" is not readable"))))
(format "<script src=\"%s\"></script>\n" fname)))
(defun org-reveal--script-tags-by-auto-file-names (fnames in-single-file)
"Create multiple <script> tags for multiple file names, but
also accept single file name and create only one tag."
(if (stringp fnames)
(org-reveal--script-tag-by-file-name fnames in-single-file)
(mapconcat (lambda (fname)
(org-reveal--script-tag-by-file-name fname in-single-file))
fnames
"")))
(defun org-reveal--multi-level-mapconcat (func sequence seperator)
"Multilevel mapconcat. FUNC is applied to each element of seq
unless the element itself is a list, in which case func is
lifted and applied."
(mapconcat (lambda (e)
(if (listp e)
(org-reveal--multi-level-mapconcat func e seperator)
(funcall func e)))
sequence seperator))
(defun org-reveal-scripts (info) (defun org-reveal-scripts (info)
"Return the necessary scripts for initializing reveal.js using "Return the necessary scripts for initializing reveal.js using
custom variable `org-reveal-root'." custom variable `org-reveal-root'."
@@ -746,31 +791,20 @@ custom variable `org-reveal-root'."
(local-root-path (org-reveal--file-url-to-path root-path)) (local-root-path (org-reveal--file-url-to-path root-path))
(local-reveal-js (org-reveal--choose-path local-root-path version "dist/reveal.js" "js/reveal.js")) (local-reveal-js (org-reveal--choose-path local-root-path version "dist/reveal.js" "js/reveal.js"))
(plugins (org-reveal--get-plugins info)) (plugins (org-reveal--get-plugins info))
(in-single-file (plist-get info :reveal-single-file))
(reveal-4-plugin (if (eq 4 version) (reveal-4-plugin (if (eq 4 version)
(org-reveal-plugin-scripts-4 plugins info) (org-reveal-plugin-scripts-4 plugins info in-single-file)
(cons nil nil))) (cons nil nil))))
(in-single-file (plist-get info :reveal-single-file)))
(concat (concat
;; reveal.js/js/reveal.js ;; reveal.js/js/reveal.js
(if (and in-single-file (org-reveal--script-tag-by-file-name local-reveal-js in-single-file)
(file-readable-p local-reveal-js))
;; Embed scripts into HTML
(concat "<script>\n"
(org-reveal--read-file local-reveal-js)
"\n</script>")
;; Fall-back to extern script links
(if in-single-file
;; Tried to embed scripts but failed. Print a message about possible errors.
(error (concat "Cannot read "
(mapconcat 'identity
(delq nil (mapcar (lambda (file) (if (not (file-readable-p file)) file))
(list local-reveal-js)))
", "))))
(concat
"<script src=\"" reveal-js "\"></script>\n"))
;; plugin headings ;; plugin headings
(if-format "%s\n" (car reveal-4-plugin)) (if-format "%s\n" (car reveal-4-plugin))
;; Extra <script src="..."></script> tags before the call to Reveal.initialize()
(org-reveal--script-tags-by-auto-file-names (plist-get info :reveal-extra-script-before-src)
in-single-file)
;; Reveal.initialize ;; Reveal.initialize
(let ((reveal-4-plugin-statement (cdr reveal-4-plugin)) (let ((reveal-4-plugin-statement (cdr reveal-4-plugin))
(init-options (plist-get info :reveal-init-options)) (init-options (plist-get info :reveal-init-options))
@@ -822,15 +856,8 @@ Reveal.initialize({
;; Extra initialization scripts ;; Extra initialization scripts
(or (plist-get info :reveal-extra-script) ""))) (or (plist-get info :reveal-extra-script) "")))
;; Extra <script src="..."></script> tags ;; Extra <script src="..."></script> tags
(let ((src-list (let ((l (plist-get info :reveal-extra-script-src))) (org-reveal--script-tags-by-auto-file-names (plist-get info :reveal-extra-script-src)
;; map to a single string to a list. in-single-file))))
(if (stringp l)
(list l)
l))))
(and src-list
(mapconcat (lambda (src) (format "<script src=\"%s\"></script>" src))
src-list
"\n"))))))
(defun org-reveal--read-sexps-from-string (s) (defun org-reveal--read-sexps-from-string (s)
(let ((s (string-trim s))) (let ((s (string-trim s)))
@@ -875,12 +902,11 @@ Reveal.initialize({
;; nil, no %s or %% found ;; nil, no %s or %% found
fmt))) fmt)))
(defun org-reveal-plugin-scripts-4 (plugins info) (defun org-reveal-plugin-scripts-4 (plugins info in-single-file)
"Return scripts for initializing reveal.js 4.x builtin scripts" "Return scripts for initializing reveal.js 4.x builtin scripts."
;; Return a tuple (represented as a list), the first value is a list of script ;; Return a pair whose first value is the HTML contents for the
;; tags that are going to be inlined to the final HTML output, the second ;; plugin scripts, the second value is a list of import statements
;; value is a list of import statements that are going to be embedded in the ;; to be embedded in the Reveal.initialize call
;; Reveal.initialize call
(if (not (null plugins)) (if (not (null plugins))
;; Generate plugin scripts ;; Generate plugin scripts
(let* ((plugins (mapcar (let* ((plugins (mapcar
@@ -915,23 +941,13 @@ Reveal.initialize({
plugins)))) plugins))))
(if (not (null plugin-js)) (if (not (null plugin-js))
(cons (cons
;; First value of the tuple, a list of scripts HTML tags ;; First value of the pair, a list of script file names
(let ((root-path (org-reveal-root-path info))) (let ((root-path (org-reveal-root-path info)))
(mapconcat (org-reveal--multi-level-mapconcat
(lambda (p) (lambda (p)
;; when it is a list, create a script tag for every entry (org-reveal--script-tag-by-file-name (org-reveal--replace-first-%s p root-path)
(cond in-single-file))
((listp p) plugin-js ""))
(mapconcat (lambda (pi)
(format "<script src=\"%s\"></script>\n"
(org-reveal--replace-first-%s pi root-path)))
p
""))
;; when it is a single string, create a single script tag
(t (format "<script src=\"%s\"></script>\n"
(org-reveal--replace-first-%s p root-path)))))
plugin-js
""))
;; Second value of the tuple, a list of Reveal plugin ;; Second value of the tuple, a list of Reveal plugin
;; initialization statements ;; initialization statements
(format "plugins: [%s]" (format "plugins: [%s]"
@@ -1332,7 +1348,7 @@ contextual information."
"Generate the automatic title slide template." "Generate the automatic title slide template."
(let* ((spec (org-html-format-spec info)) (let* ((spec (org-html-format-spec info))
(title (org-export-data (plist-get info :title) info)) (title (org-export-data (plist-get info :title) info))
(subtitle (plist-get info :subtitle)) (subtitle (cdr (assq ?s spec)))
(author (cdr (assq ?a spec))) (author (cdr (assq ?a spec)))
(email (cdr (assq ?e spec))) (email (cdr (assq ?e spec)))
(date (cdr (assq ?d spec)))) (date (cdr (assq ?d spec))))
@@ -1366,9 +1382,9 @@ info is a plist holding export options."
(if-format " lang=\"%s\"" (plist-get info :language))) (if-format " lang=\"%s\"" (plist-get info :language)))
"<meta charset=\"utf-8\"/>\n" "<meta charset=\"utf-8\"/>\n"
(if-format "<title>%s</title>\n" (org-export-data (plist-get info :title) info)) (if-format "<title>%s</title>\n" (org-export-data (plist-get info :title) info))
(if-format "<meta name=\"author\" content=\"%s\"/>\n" (plist-get info :author)) (if-format "<meta name=\"author\" content=\"%s\"/>\n" (org-export-data (plist-get info :author) info))
(if-format "<meta name=\"description\" content=\"%s\"/>\n" (plist-get info :description)) (if-format "<meta name=\"description\" content=\"%s\"/>\n" (org-export-data (plist-get info :description) info))
(if-format "<meta name=\"keywords\" content=\"%s\"/>\n" (plist-get info :keywords)) (if-format "<meta name=\"keywords\" content=\"%s\"/>\n" (org-export-data (plist-get info :keywords) info))
(org-reveal-stylesheets info) (org-reveal-stylesheets info)
(org-reveal-mathjax-scripts info) (org-reveal-mathjax-scripts info)
(org-reveal--build-pre/postamble 'head-preamble info) (org-reveal--build-pre/postamble 'head-preamble info)
@@ -1388,6 +1404,7 @@ info is a plist holding export options."
(title-slide-background-repeat (plist-get info :reveal-title-slide-background-repeat)) (title-slide-background-repeat (plist-get info :reveal-title-slide-background-repeat))
(title-slide-background-transition (plist-get info :reveal-title-slide-background-transition)) (title-slide-background-transition (plist-get info :reveal-title-slide-background-transition))
(title-slide-background-opacity (plist-get info :reveal-title-slide-background-opacity)) (title-slide-background-opacity (plist-get info :reveal-title-slide-background-opacity))
(title-slide-state (plist-get info :reveal-title-slide-state))
(title-slide-with-header (plist-get info :reveal-slide-global-header)) (title-slide-with-header (plist-get info :reveal-slide-global-header))
(title-slide-with-footer (plist-get info :reveal-slide-global-footer))) (title-slide-with-footer (plist-get info :reveal-slide-global-footer)))
(concat "<section id=\"sec-title-slide\"" (concat "<section id=\"sec-title-slide\""
@@ -1403,6 +1420,8 @@ info is a plist holding export options."
(concat " data-background-transition=\"" title-slide-background-transition "\"")) (concat " data-background-transition=\"" title-slide-background-transition "\""))
(when title-slide-background-opacity (when title-slide-background-opacity
(concat " data-background-opacity=\"" title-slide-background-opacity "\"")) (concat " data-background-opacity=\"" title-slide-background-opacity "\""))
(when title-slide-state
(concat " data-state=\"" title-slide-state "\""))
">" ">"
(when title-slide-with-header (when title-slide-with-header
(let ((header (plist-get info :reveal-slide-header))) (let ((header (plist-get info :reveal-slide-header)))
lisp/versions
+1 -1
View File
@@ -80,7 +80,7 @@
| org-table-sticky-header.el | [[https://melpa.org/#/org-table-sticky-header][melpa]] | 0.1.0 | 20190924.506 | | | (alternative orgtbl-show-header) | | org-table-sticky-header.el | [[https://melpa.org/#/org-table-sticky-header][melpa]] | 0.1.0 | 20190924.506 | | | (alternative orgtbl-show-header) |
| orgit.el | [[https://melpa.org/#/orgit][mepla]] | 1.6.0 | 20210620.1943 | 1.6.0 | 20200714.1943 | | | orgit.el | [[https://melpa.org/#/orgit][mepla]] | 1.6.0 | 20210620.1943 | 1.6.0 | 20200714.1943 | |
| ov.el | [[https://melpa.org/#/ov][melpa]] | 1.0.6 | 20200326.1042 | | | | | ov.el | [[https://melpa.org/#/ov][melpa]] | 1.0.6 | 20200326.1042 | | | |
| ox-reveal.el | [[https://melpa.org/#/ox-reveal][melpa]] | 1.0 | 20211128.1509 | 1.0 | 20201211.1518 | requires https://github.com/hakimel/reveal.js | | ox-reveal.el | [[https://melpa.org/#/ox-reveal][melpa]] | 1.0 | 20220410.1533 | 1.0 | 20211128.1509 | requires https://github.com/hakimel/reveal.js |
| ox-tufte.el | [[https://melpa.org/#/ox-tufte][melpa]] | 1.0.0 | 20160926.1607 | | | | | ox-tufte.el | [[https://melpa.org/#/ox-tufte][melpa]] | 1.0.0 | 20160926.1607 | | | |
| page-break-lines.el | [[https://melpa.org/#/page-break-lines][melpa]] | 0 | 20210104.2224 | 0 | 20200305.244 | required by dashboard | | page-break-lines.el | [[https://melpa.org/#/page-break-lines][melpa]] | 0 | 20210104.2224 | 0 | 20200305.244 | required by dashboard |
| parsebib.el | [[https://melpa.org/#/parsebib][melpa]] | 3.0 | 20211208.2335 | 2.3 | 20200513.2352 | required by org-ref | | parsebib.el | [[https://melpa.org/#/parsebib][melpa]] | 3.0 | 20211208.2335 | 2.3 | 20200513.2352 | required by org-ref |
scripts/reveal.js-4.3.1.tar.gz
BIN
View File
Binary file not shown.
scripts/reveal.js/CONTRIBUTING.md → scripts/reveal.js/.github/CONTRIBUTING.md
Vendored
+4 -6
View File
@@ -1,10 +1,9 @@
## Contributing ## Contributing
Please keep the [issue tracker](https://github.com/hakimel/reveal.js/issues) limited to **bug reports**.
Please keep the [issue tracker](http://github.com/hakimel/reveal.js/issues) limited to **bug reports**, **feature requests** and **pull requests**.
### Personal Support ### General Questions and Support
If you have personal support or setup questions the best place to ask those are [StackOverflow](http://stackoverflow.com/questions/tagged/reveal.js). If you have questions about how to use reveal.js the best place to ask is in the [Discussions](https://github.com/hakimel/reveal.js/discussions). Anything that isn't a bug report should be posted as a dicussion instead.
### Bug Reports ### Bug Reports
@@ -12,11 +11,10 @@ When reporting a bug make sure to include information about which browser and op
### Pull Requests ### Pull Requests
- Should be submitted from a feature/topic branch (not your master)
- Should follow the coding style of the file you work in, most importantly: - Should follow the coding style of the file you work in, most importantly:
- Tabs to indent - Tabs to indent
- Single-quoted strings - Single-quoted strings
- Should be made towards the **dev branch**
- Should be submitted from a feature/topic branch (not your master)
### Plugins ### Plugins
scripts/reveal.js/.github/workflows/js.yml
Vendored
+1 -1
View File
@@ -9,7 +9,7 @@ jobs:
strategy: strategy:
matrix: matrix:
node-version: [10.x, 14.x] node-version: [10.x, 14.x, 16.x]
steps: steps:
- uses: actions/checkout@v2 - uses: actions/checkout@v2
scripts/reveal.js/.gitignore
+1 -2
View File
@@ -8,5 +8,4 @@ out/
log/*.log log/*.log
tmp/** tmp/**
node_modules/ node_modules/
.sass-cache .sass-cache
dist/*.map
scripts/reveal.js/LICENSE
+1 -1
View File
@@ -1,4 +1,4 @@
Copyright (C) 2020 Hakim El Hattab, http://hakim.se, and reveal.js contributors Copyright (C) 2011-2022 Hakim El Hattab, http://hakim.se, and reveal.js contributors
Permission is hereby granted, free of charge, to any person obtaining a copy Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal of this software and associated documentation files (the "Software"), to deal
scripts/reveal.js/README.md
+51 -13
View File
@@ -1,28 +1,66 @@
<p align="center"> <p align="center">
<a href="https://revealjs.com"> <a href="https://revealjs.com">
<img src="https://hakim-static.s3.amazonaws.com/reveal-js/logo/v1/reveal-black-text.svg" alt="reveal.js" width="450"> <img src="https://hakim-static.s3.amazonaws.com/reveal-js/logo/v1/reveal-black-text-sticker.png" alt="reveal.js" width="500">
</a> </a>
<br><br> <br><br>
<a href="https://github.com/hakimel/reveal.js/actions"><img src="https://github.com/hakimel/reveal.js/workflows/tests/badge.svg"></a> <a href="https://github.com/hakimel/reveal.js/actions"><img src="https://github.com/hakimel/reveal.js/workflows/tests/badge.svg"></a>
<a href="https://slides.com/"><img src="https://s3.amazonaws.com/static.slid.es/images/slides-github-banner-320x40.png?1" alt="Slides" width="160" height="20"></a> <a href="https://slides.com/"><img src="https://s3.amazonaws.com/static.slid.es/images/slides-github-banner-320x40.png?1" alt="Slides" width="160" height="20"></a>
</p> </p>
reveal.js is an open source HTML presentation framework. It enables anyone with a web browser to create fully featured and beautiful presentations for free. [Check out the live demo](https://revealjs.com/). reveal.js is an open source HTML presentation framework. It enables anyone with a web browser to create beautiful presentations for free. Check out the live demo at [revealjs.com](https://revealjs.com/).
The framework comes with a broad range of features including [nested slides](https://revealjs.com/vertical-slides/), [Markdown support](https://revealjs.com/markdown/), [Auto-Animate](https://revealjs.com/auto-animate/), [PDF export](https://revealjs.com/pdf-export/), [speaker notes](https://revealjs.com/speaker-view/), [LaTeX support](https://revealjs.com/math/), [syntax highlighted code](https://revealjs.com/code/) and much more. The framework comes with a powerful feature set including [nested slides](https://revealjs.com/vertical-slides/), [Markdown support](https://revealjs.com/markdown/), [Auto-Animate](https://revealjs.com/auto-animate/), [PDF export](https://revealjs.com/pdf-export/), [speaker notes](https://revealjs.com/speaker-view/), [LaTeX typesetting](https://revealjs.com/math/), [syntax highlighted code](https://revealjs.com/code/) and an [extensive API](https://revealjs.com/api/).
<h1> ---
<a href="https://revealjs.com/installation" style="font-size: 3em;">Get Started</a>
</h1>
## Documentation ### Sponsors
The full reveal.js documentation is available at [revealjs.com](https://revealjs.com). Hakim's open source work is supported by <a href="https://github.com/sponsors/hakimel">GitHub sponsors</a>. Special thanks to:
<div align="center">
<table>
<td align="center">
<a href="https://workos.com/?utm_campaign=github_repo&utm_medium=referral&utm_content=revealjs&utm_source=github">
<div>
<img src="https://user-images.githubusercontent.com/629429/151508669-efb4c3b3-8fe3-45eb-8e47-e9510b5f0af1.svg" width="290" alt="WorkOS">
</div>
<b>Your app, enterprise-ready.</b>
<div>
<sub>Start selling to enterprise customers with just a few lines of code. Add Single Sign-On (and more) in minutes instead of months.</sup>
</div>
</a>
</td>
<td align="center">
<a href="https://www.doppler.com/?utm_cam![Uploading workos-logo-white-bg.svg…]()
paign=github_repo&utm_medium=referral&utm_content=revealjs&utm_source=github">
<div>
<img src="https://user-images.githubusercontent.com/629429/151510865-9fd454f1-fd8c-4df4-b227-a54b87313db4.png" width="290" alt="Doppler">
</div>
<b>All your environment variables, in one place</b>
<div>
<sub>Stop struggling with scattered API keys, hacking together home-brewed tools, and avoiding access controls. Keep your team and servers in sync with Doppler.</sup>
</div>
</a>
</td>
</table>
</div>
## Online Editor ---
### Getting started
- 🚀 [Install reveal.js](https://revealjs.com/installation)
- 👀 [View the demo presentation](https://revealjs.com/demo)
- 📖 [Read the documentation](https://revealjs.com/markup/)
- 🖌 [Try the visual editor for reveal.js at Slides.com](https://slides.com/)
- 🎬 [Watch the reveal.js video course (paid)](https://revealjs.com/course)
---
### Online Editor
Want to create your presentation using a visual editor? Try the official reveal.js presentation platform for free at [Slides.com](https://slides.com). It's made by the same people behind reveal.js. Want to create your presentation using a visual editor? Try the official reveal.js presentation platform for free at [Slides.com](https://slides.com). It's made by the same people behind reveal.js.
## License <br>
<br>
MIT licensed ---
<div align="center">
Copyright (C) 2011-2020 Hakim El Hattab, https://hakim.se MIT licensed | Copyright © 2011-2022 Hakim El Hattab, https://hakim.se
</div>
scripts/reveal.js/css/layout.scss
+1 -1
View File
@@ -16,7 +16,7 @@
box-sizing: border-box; box-sizing: border-box;
} }
// Text that auto-fits it's container // Text that auto-fits its container
.reveal .r-fit-text { .reveal .r-fit-text {
display: inline-block; // https://github.com/rikschennink/fitty#performance display: inline-block; // https://github.com/rikschennink/fitty#performance
white-space: nowrap; white-space: nowrap;
scripts/reveal.js/css/reveal.scss
+44 -38
View File
@@ -1,3 +1,5 @@
@use "sass:math";
/** /**
* reveal.js * reveal.js
* http://revealjs.com * http://revealjs.com
@@ -31,6 +33,16 @@ html.reveal-full-page {
color: #000; color: #000;
} }
// Force the presentation to cover the full viewport when we
// enter fullscreen mode. Fixes sizing issues in Safari.
.reveal-viewport:fullscreen {
top: 0 !important;
left: 0 !important;
width: 100% !important;
height: 100% !important;
transform: none !important;
}
/********************************************* /*********************************************
* VIEW FRAGMENTS * VIEW FRAGMENTS
@@ -247,11 +259,11 @@ $controlsArrowAngleActive: 36deg;
@mixin controlsArrowTransform( $angle ) { @mixin controlsArrowTransform( $angle ) {
&:before { &:before {
transform: translateX(($controlArrowSize - $controlArrowLength)/2) translateY(($controlArrowSize - $controlArrowThickness)/2) rotate( $angle ); transform: translateX(($controlArrowSize - $controlArrowLength)*0.5) translateY(($controlArrowSize - $controlArrowThickness)*0.5) rotate( $angle );
} }
&:after { &:after {
transform: translateX(($controlArrowSize - $controlArrowLength)/2) translateY(($controlArrowSize - $controlArrowThickness)/2) rotate( -$angle ); transform: translateX(($controlArrowSize - $controlArrowLength)*0.5) translateY(($controlArrowSize - $controlArrowThickness)*0.5) rotate( -$angle );
} }
} }
@@ -300,11 +312,11 @@ $controlsArrowAngleActive: 36deg;
left: 0; left: 0;
width: $controlArrowLength; width: $controlArrowLength;
height: $controlArrowThickness; height: $controlArrowThickness;
border-radius: $controlArrowThickness/2; border-radius: $controlArrowThickness*0.5;
background-color: currentColor; background-color: currentColor;
transition: all 0.15s ease, background-color 0.8s ease; transition: all 0.15s ease, background-color 0.8s ease;
transform-origin: floor(($controlArrowThickness/2)*10)/10 50%; transform-origin: math.div(floor(($controlArrowThickness*0.5)*10), 10) 50%;
will-change: transform; will-change: transform;
} }
@@ -326,7 +338,7 @@ $controlsArrowAngleActive: 36deg;
.navigate-left { .navigate-left {
right: $controlArrowSize + $controlArrowSpacing*2; right: $controlArrowSize + $controlArrowSpacing*2;
bottom: $controlArrowSpacing + $controlArrowSize/2; bottom: $controlArrowSpacing + $controlArrowSize*0.5;
transform: translateX( -10px ); transform: translateX( -10px );
&.highlight { &.highlight {
@@ -336,7 +348,7 @@ $controlsArrowAngleActive: 36deg;
.navigate-right { .navigate-right {
right: 0; right: 0;
bottom: $controlArrowSpacing + $controlArrowSize/2; bottom: $controlArrowSpacing + $controlArrowSize*0.5;
transform: translateX( 10px ); transform: translateX( 10px );
.controls-arrow { .controls-arrow {
@@ -349,7 +361,7 @@ $controlsArrowAngleActive: 36deg;
} }
.navigate-up { .navigate-up {
right: $controlArrowSpacing + $controlArrowSize/2; right: $controlArrowSpacing + $controlArrowSize*0.5;
bottom: $controlArrowSpacing*2 + $controlArrowSize; bottom: $controlArrowSpacing*2 + $controlArrowSize;
transform: translateY( -10px ); transform: translateY( -10px );
@@ -359,7 +371,7 @@ $controlsArrowAngleActive: 36deg;
} }
.navigate-down { .navigate-down {
right: $controlArrowSpacing + $controlArrowSize/2; right: $controlArrowSpacing + $controlArrowSize*0.5;
bottom: -$controlArrowSpacing; bottom: -$controlArrowSpacing;
padding-bottom: $controlArrowSpacing; padding-bottom: $controlArrowSpacing;
transform: translateY( 10px ); transform: translateY( 10px );
@@ -515,25 +527,25 @@ $controlsArrowAngleActive: 36deg;
.navigate-left { .navigate-left {
top: 50%; top: 50%;
left: $spacing; left: $spacing;
margin-top: -$controlArrowSize/2; margin-top: -$controlArrowSize*0.5;
} }
.navigate-right { .navigate-right {
top: 50%; top: 50%;
right: $spacing; right: $spacing;
margin-top: -$controlArrowSize/2; margin-top: -$controlArrowSize*0.5;
} }
.navigate-up { .navigate-up {
top: $spacing; top: $spacing;
left: 50%; left: 50%;
margin-left: -$controlArrowSize/2; margin-left: -$controlArrowSize*0.5;
} }
.navigate-down { .navigate-down {
bottom: $spacing - $controlArrowSpacing + 0.3em; bottom: $spacing - $controlArrowSpacing + 0.3em;
left: 50%; left: 50%;
margin-left: -$controlArrowSize/2; margin-left: -$controlArrowSize*0.5;
} }
} }
@@ -769,9 +781,6 @@ $controlsArrowAngleActive: 36deg;
*********************************************/ *********************************************/
@each $stylename in slide, linear { @each $stylename in slide, linear {
.reveal.#{$stylename} section {
backface-visibility: hidden;
}
@include transition-horizontal-past(#{$stylename}) { @include transition-horizontal-past(#{$stylename}) {
transform: translate(-150%, 0); transform: translate(-150%, 0);
} }
@@ -1158,54 +1167,53 @@ $controlsArrowAngleActive: 36deg;
} }
/* Immediate transition style */ /* Immediate transition style */
.reveal[data-background-transition=none]>.backgrounds .slide-background, .reveal[data-background-transition=none]>.backgrounds .slide-background:not([data-background-transition]),
.reveal>.backgrounds .slide-background[data-background-transition=none] { .reveal>.backgrounds .slide-background[data-background-transition=none] {
transition: none; transition: none;
} }
/* Slide */ /* Slide */
.reveal[data-background-transition=slide]>.backgrounds .slide-background, .reveal[data-background-transition=slide]>.backgrounds .slide-background:not([data-background-transition]),
.reveal>.backgrounds .slide-background[data-background-transition=slide] { .reveal>.backgrounds .slide-background[data-background-transition=slide] {
opacity: 1; opacity: 1;
backface-visibility: hidden;
} }
.reveal[data-background-transition=slide]>.backgrounds .slide-background.past, .reveal[data-background-transition=slide]>.backgrounds .slide-background.past:not([data-background-transition]),
.reveal>.backgrounds .slide-background.past[data-background-transition=slide] { .reveal>.backgrounds .slide-background.past[data-background-transition=slide] {
transform: translate(-100%, 0); transform: translate(-100%, 0);
} }
.reveal[data-background-transition=slide]>.backgrounds .slide-background.future, .reveal[data-background-transition=slide]>.backgrounds .slide-background.future:not([data-background-transition]),
.reveal>.backgrounds .slide-background.future[data-background-transition=slide] { .reveal>.backgrounds .slide-background.future[data-background-transition=slide] {
transform: translate(100%, 0); transform: translate(100%, 0);
} }
.reveal[data-background-transition=slide]>.backgrounds .slide-background>.slide-background.past, .reveal[data-background-transition=slide]>.backgrounds .slide-background>.slide-background.past:not([data-background-transition]),
.reveal>.backgrounds .slide-background>.slide-background.past[data-background-transition=slide] { .reveal>.backgrounds .slide-background>.slide-background.past[data-background-transition=slide] {
transform: translate(0, -100%); transform: translate(0, -100%);
} }
.reveal[data-background-transition=slide]>.backgrounds .slide-background>.slide-background.future, .reveal[data-background-transition=slide]>.backgrounds .slide-background>.slide-background.future:not([data-background-transition]),
.reveal>.backgrounds .slide-background>.slide-background.future[data-background-transition=slide] { .reveal>.backgrounds .slide-background>.slide-background.future[data-background-transition=slide] {
transform: translate(0, 100%); transform: translate(0, 100%);
} }
/* Convex */ /* Convex */
.reveal[data-background-transition=convex]>.backgrounds .slide-background.past, .reveal[data-background-transition=convex]>.backgrounds .slide-background.past:not([data-background-transition]),
.reveal>.backgrounds .slide-background.past[data-background-transition=convex] { .reveal>.backgrounds .slide-background.past[data-background-transition=convex] {
opacity: 0; opacity: 0;
transform: translate3d(-100%, 0, 0) rotateY(-90deg) translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0) rotateY(-90deg) translate3d(-100%, 0, 0);
} }
.reveal[data-background-transition=convex]>.backgrounds .slide-background.future, .reveal[data-background-transition=convex]>.backgrounds .slide-background.future:not([data-background-transition]),
.reveal>.backgrounds .slide-background.future[data-background-transition=convex] { .reveal>.backgrounds .slide-background.future[data-background-transition=convex] {
opacity: 0; opacity: 0;
transform: translate3d(100%, 0, 0) rotateY(90deg) translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0) rotateY(90deg) translate3d(100%, 0, 0);
} }
.reveal[data-background-transition=convex]>.backgrounds .slide-background>.slide-background.past, .reveal[data-background-transition=convex]>.backgrounds .slide-background>.slide-background.past:not([data-background-transition]),
.reveal>.backgrounds .slide-background>.slide-background.past[data-background-transition=convex] { .reveal>.backgrounds .slide-background>.slide-background.past[data-background-transition=convex] {
opacity: 0; opacity: 0;
transform: translate3d(0, -100%, 0) rotateX(90deg) translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0) rotateX(90deg) translate3d(0, -100%, 0);
} }
.reveal[data-background-transition=convex]>.backgrounds .slide-background>.slide-background.future, .reveal[data-background-transition=convex]>.backgrounds .slide-background>.slide-background.future:not([data-background-transition]),
.reveal>.backgrounds .slide-background>.slide-background.future[data-background-transition=convex] { .reveal>.backgrounds .slide-background>.slide-background.future[data-background-transition=convex] {
opacity: 0; opacity: 0;
transform: translate3d(0, 100%, 0) rotateX(-90deg) translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0) rotateX(-90deg) translate3d(0, 100%, 0);
@@ -1213,54 +1221,54 @@ $controlsArrowAngleActive: 36deg;
/* Concave */ /* Concave */
.reveal[data-background-transition=concave]>.backgrounds .slide-background.past, .reveal[data-background-transition=concave]>.backgrounds .slide-background.past:not([data-background-transition]),
.reveal>.backgrounds .slide-background.past[data-background-transition=concave] { .reveal>.backgrounds .slide-background.past[data-background-transition=concave] {
opacity: 0; opacity: 0;
transform: translate3d(-100%, 0, 0) rotateY(90deg) translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0) rotateY(90deg) translate3d(-100%, 0, 0);
} }
.reveal[data-background-transition=concave]>.backgrounds .slide-background.future, .reveal[data-background-transition=concave]>.backgrounds .slide-background.future:not([data-background-transition]),
.reveal>.backgrounds .slide-background.future[data-background-transition=concave] { .reveal>.backgrounds .slide-background.future[data-background-transition=concave] {
opacity: 0; opacity: 0;
transform: translate3d(100%, 0, 0) rotateY(-90deg) translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0) rotateY(-90deg) translate3d(100%, 0, 0);
} }
.reveal[data-background-transition=concave]>.backgrounds .slide-background>.slide-background.past, .reveal[data-background-transition=concave]>.backgrounds .slide-background>.slide-background.past:not([data-background-transition]),
.reveal>.backgrounds .slide-background>.slide-background.past[data-background-transition=concave] { .reveal>.backgrounds .slide-background>.slide-background.past[data-background-transition=concave] {
opacity: 0; opacity: 0;
transform: translate3d(0, -100%, 0) rotateX(-90deg) translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0) rotateX(-90deg) translate3d(0, -100%, 0);
} }
.reveal[data-background-transition=concave]>.backgrounds .slide-background>.slide-background.future, .reveal[data-background-transition=concave]>.backgrounds .slide-background>.slide-background.future:not([data-background-transition]),
.reveal>.backgrounds .slide-background>.slide-background.future[data-background-transition=concave] { .reveal>.backgrounds .slide-background>.slide-background.future[data-background-transition=concave] {
opacity: 0; opacity: 0;
transform: translate3d(0, 100%, 0) rotateX(90deg) translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0) rotateX(90deg) translate3d(0, 100%, 0);
} }
/* Zoom */ /* Zoom */
.reveal[data-background-transition=zoom]>.backgrounds .slide-background, .reveal[data-background-transition=zoom]>.backgrounds .slide-background:not([data-background-transition]),
.reveal>.backgrounds .slide-background[data-background-transition=zoom] { .reveal>.backgrounds .slide-background[data-background-transition=zoom] {
transition-timing-function: ease; transition-timing-function: ease;
} }
.reveal[data-background-transition=zoom]>.backgrounds .slide-background.past, .reveal[data-background-transition=zoom]>.backgrounds .slide-background.past:not([data-background-transition]),
.reveal>.backgrounds .slide-background.past[data-background-transition=zoom] { .reveal>.backgrounds .slide-background.past[data-background-transition=zoom] {
opacity: 0; opacity: 0;
visibility: hidden; visibility: hidden;
transform: scale(16); transform: scale(16);
} }
.reveal[data-background-transition=zoom]>.backgrounds .slide-background.future, .reveal[data-background-transition=zoom]>.backgrounds .slide-background.future:not([data-background-transition]),
.reveal>.backgrounds .slide-background.future[data-background-transition=zoom] { .reveal>.backgrounds .slide-background.future[data-background-transition=zoom] {
opacity: 0; opacity: 0;
visibility: hidden; visibility: hidden;
transform: scale(0.2); transform: scale(0.2);
} }
.reveal[data-background-transition=zoom]>.backgrounds .slide-background>.slide-background.past, .reveal[data-background-transition=zoom]>.backgrounds .slide-background>.slide-background.past:not([data-background-transition]),
.reveal>.backgrounds .slide-background>.slide-background.past[data-background-transition=zoom] { .reveal>.backgrounds .slide-background>.slide-background.past[data-background-transition=zoom] {
opacity: 0; opacity: 0;
visibility: hidden; visibility: hidden;
transform: scale(16); transform: scale(16);
} }
.reveal[data-background-transition=zoom]>.backgrounds .slide-background>.slide-background.future, .reveal[data-background-transition=zoom]>.backgrounds .slide-background>.slide-background.future:not([data-background-transition]),
.reveal>.backgrounds .slide-background>.slide-background.future[data-background-transition=zoom] { .reveal>.backgrounds .slide-background>.slide-background.future[data-background-transition=zoom] {
opacity: 0; opacity: 0;
visibility: hidden; visibility: hidden;
@@ -1701,7 +1709,7 @@ $notesWidthPercent: 25%;
.reveal .speaker-notes { .reveal .speaker-notes {
display: none; display: none;
position: absolute; position: absolute;
width: $notesWidthPercent / (1-$notesWidthPercent/100) * 1%; width: math.div($notesWidthPercent, (1 - math.div($notesWidthPercent,100))) * 1%;
height: 100%; height: 100%;
top: 0; top: 0;
left: 100%; left: 100%;
@@ -1764,7 +1772,6 @@ $notesWidthPercent: 25%;
top: 100%; top: 100%;
left: 0; left: 0;
width: 100%; width: 100%;
height: (30/0.7)*1%;
height: 30vh; height: 30vh;
border: 0; border: 0;
} }
@@ -1778,7 +1785,6 @@ $notesWidthPercent: 25%;
.reveal.show-notes .speaker-notes { .reveal.show-notes .speaker-notes {
top: 100%; top: 100%;
height: (40/0.6)*1%;
height: 40vh; height: 40vh;
} }
scripts/reveal.js/css/theme/template/exposer.scss
+24 -23
View File
@@ -1,27 +1,28 @@
// Exposes theme's variables for easy re-use in CSS for plugin authors // Exposes theme's variables for easy re-use in CSS for plugin authors
:root { :root {
--background-color: #{$backgroundColor}; --r-background-color: #{$backgroundColor};
--main-font: #{$mainFont}; --r-main-font: #{$mainFont};
--main-font-size: #{$mainFontSize}; --r-main-font-size: #{$mainFontSize};
--main-color: #{$mainColor}; --r-main-color: #{$mainColor};
--block-margin: #{$blockMargin}; --r-block-margin: #{$blockMargin};
--heading-margin: #{$headingMargin}; --r-heading-margin: #{$headingMargin};
--heading-font: #{$headingFont}; --r-heading-font: #{$headingFont};
--heading-color: #{$headingColor}; --r-heading-color: #{$headingColor};
--heading-line-height: #{$headingLineHeight}; --r-heading-line-height: #{$headingLineHeight};
--heading-letter-spacing: #{$headingLetterSpacing}; --r-heading-letter-spacing: #{$headingLetterSpacing};
--heading-text-transform: #{$headingTextTransform}; --r-heading-text-transform: #{$headingTextTransform};
--heading-text-shadow: #{$headingTextShadow}; --r-heading-text-shadow: #{$headingTextShadow};
--heading-font-weight: #{$headingFontWeight}; --r-heading-font-weight: #{$headingFontWeight};
--heading1-text-shadow: #{$heading1TextShadow}; --r-heading1-text-shadow: #{$heading1TextShadow};
--heading1-size: #{$heading1Size}; --r-heading1-size: #{$heading1Size};
--heading2-size: #{$heading2Size}; --r-heading2-size: #{$heading2Size};
--heading3-size: #{$heading3Size}; --r-heading3-size: #{$heading3Size};
--heading4-size: #{$heading4Size}; --r-heading4-size: #{$heading4Size};
--code-font: #{$codeFont}; --r-code-font: #{$codeFont};
--link-color: #{$linkColor}; --r-link-color: #{$linkColor};
--link-color-hover: #{$linkColorHover}; --r-link-color-dark: #{darken($linkColor , 15% )};
--selection-background-color: #{$selectionBackgroundColor}; --r-link-color-hover: #{$linkColorHover};
--selection-color: #{$selectionColor}; --r-selection-background-color: #{$selectionBackgroundColor};
--r-selection-color: #{$selectionColor};
} }
scripts/reveal.js/css/theme/template/theme.scss
+46 -35
View File
@@ -8,25 +8,25 @@
.reveal-viewport { .reveal-viewport {
@include bodyBackground(); @include bodyBackground();
background-color: $backgroundColor; background-color: var(--r-background-color);
} }
.reveal { .reveal {
font-family: $mainFont; font-family: var(--r-main-font);
font-size: $mainFontSize; font-size: var(--r-main-font-size);
font-weight: normal; font-weight: normal;
color: $mainColor; color: var(--r-main-color);
} }
.reveal ::selection { .reveal ::selection {
color: $selectionColor; color: var(--r-selection-color);
background: $selectionBackgroundColor; background: var(--r-selection-background-color);
text-shadow: none; text-shadow: none;
} }
.reveal ::-moz-selection { .reveal ::-moz-selection {
color: $selectionColor; color: var(--r-selection-color);
background: $selectionBackgroundColor; background: var(--r-selection-background-color);
text-shadow: none; text-shadow: none;
} }
@@ -46,27 +46,27 @@
.reveal h4, .reveal h4,
.reveal h5, .reveal h5,
.reveal h6 { .reveal h6 {
margin: $headingMargin; margin: var(--r-heading-margin);
color: $headingColor; color: var(--r-heading-color);
font-family: $headingFont; font-family: var(--r-heading-font);
font-weight: $headingFontWeight; font-weight: var(--r-heading-font-weight);
line-height: $headingLineHeight; line-height: var(--r-heading-line-height);
letter-spacing: $headingLetterSpacing; letter-spacing: var(--r-heading-letter-spacing);
text-transform: $headingTextTransform; text-transform: var(--r-heading-text-transform);
text-shadow: $headingTextShadow; text-shadow: var(--r-heading-text-shadow);
word-wrap: break-word; word-wrap: break-word;
} }
.reveal h1 {font-size: $heading1Size; } .reveal h1 {font-size: var(--r-heading1-size); }
.reveal h2 {font-size: $heading2Size; } .reveal h2 {font-size: var(--r-heading2-size); }
.reveal h3 {font-size: $heading3Size; } .reveal h3 {font-size: var(--r-heading3-size); }
.reveal h4 {font-size: $heading4Size; } .reveal h4 {font-size: var(--r-heading4-size); }
.reveal h1 { .reveal h1 {
text-shadow: $heading1TextShadow; text-shadow: var(--r-heading1-text-shadow);
} }
@@ -75,7 +75,7 @@
*********************************************/ *********************************************/
.reveal p { .reveal p {
margin: $blockMargin 0; margin: var(--r-block-margin) 0;
line-height: 1.3; line-height: 1.3;
} }
@@ -150,7 +150,7 @@
display: block; display: block;
position: relative; position: relative;
width: 70%; width: 70%;
margin: $blockMargin auto; margin: var(--r-block-margin) auto;
padding: 5px; padding: 5px;
font-style: italic; font-style: italic;
@@ -170,11 +170,11 @@
display: block; display: block;
position: relative; position: relative;
width: 90%; width: 90%;
margin: $blockMargin auto; margin: var(--r-block-margin) auto;
text-align: left; text-align: left;
font-size: 0.55em; font-size: 0.55em;
font-family: $codeFont; font-family: var(--r-code-font);
line-height: 1.2em; line-height: 1.2em;
word-wrap: break-word; word-wrap: break-word;
@@ -183,8 +183,9 @@
} }
.reveal code { .reveal code {
font-family: $codeFont; font-family: var(--r-code-font);
text-transform: none; text-transform: none;
tab-size: 2;
} }
.reveal pre code { .reveal pre code {
@@ -195,6 +196,14 @@
word-wrap: normal; word-wrap: normal;
} }
.reveal .code-wrapper {
white-space: normal;
}
.reveal .code-wrapper code {
white-space: pre;
}
.reveal table { .reveal table {
margin: auto; margin: auto;
border-collapse: collapse; border-collapse: collapse;
@@ -248,7 +257,7 @@
} }
.reveal img { .reveal img {
margin: $blockMargin 0; margin: var(--r-block-margin) 0;
} }
@@ -257,19 +266,21 @@
*********************************************/ *********************************************/
.reveal a { .reveal a {
color: $linkColor; color: var(--r-link-color);
text-decoration: none; text-decoration: none;
transition: color .15s ease; transition: color .15s ease;
} }
.reveal a:hover { .reveal a:hover {
color: $linkColorHover; color: var(--r-link-color-hover);
text-shadow: none; text-shadow: none;
border: none; border: none;
} }
.reveal .roll span:after { .reveal .roll span:after {
color: #fff; color: #fff;
background: darken( $linkColor, 15% ); // background: darken( var(--r-link-color), 15% );
background: var(--r-link-color-dark);
} }
@@ -278,7 +289,7 @@
*********************************************/ *********************************************/
.reveal .r-frame { .reveal .r-frame {
border: 4px solid $mainColor; border: 4px solid var(--r-main-color);
box-shadow: 0 0 10px rgba(0, 0, 0, 0.15); box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
} }
@@ -287,7 +298,7 @@
} }
.reveal a:hover .r-frame { .reveal a:hover .r-frame {
border-color: $linkColor; border-color: var(--r-link-color);
box-shadow: 0 0 20px rgba(0, 0, 0, 0.55); box-shadow: 0 0 20px rgba(0, 0, 0, 0.55);
} }
@@ -297,7 +308,7 @@
*********************************************/ *********************************************/
.reveal .controls { .reveal .controls {
color: $linkColor; color: var(--r-link-color);
} }
@@ -307,7 +318,7 @@
.reveal .progress { .reveal .progress {
background: rgba(0,0,0,0.2); background: rgba(0,0,0,0.2);
color: $linkColor; color: var(--r-link-color);
} }
/********************************************* /*********************************************
@@ -315,6 +326,6 @@
*********************************************/ *********************************************/
@media print { @media print {
.backgrounds { .backgrounds {
background-color: $backgroundColor; background-color: var(--r-background-color);
} }
} }
scripts/reveal.js/demo.html
+15 -15
View File
@@ -19,7 +19,7 @@
<link rel="stylesheet" href="dist/theme/black.css" id="theme"> <link rel="stylesheet" href="dist/theme/black.css" id="theme">
<!-- Theme used for syntax highlighting of code --> <!-- Theme used for syntax highlighting of code -->
<link rel="stylesheet" href="plugin/highlight/monokai.css" id="highlight-theme"> <link rel="stylesheet" href="plugin/highlight/monokai.css">
</head> </head>
<body> <body>
@@ -52,7 +52,7 @@
<p>Slides can be nested inside of each other.</p> <p>Slides can be nested inside of each other.</p>
<p>Use the <em>Space</em> key to navigate through all slides.</p> <p>Use the <em>Space</em> key to navigate through all slides.</p>
<br> <br>
<a href="#" class="navigate-down"> <a href="#/2/1" class="navigate-down">
<img class="r-frame" style="background: rgba(255,255,255,0.1);" width="178" height="238" data-src="https://static.slid.es/reveal/arrow.png" alt="Down arrow"> <img class="r-frame" style="background: rgba(255,255,255,0.1);" width="178" height="238" data-src="https://static.slid.es/reveal/arrow.png" alt="Down arrow">
</a> </a>
</section> </section>
@@ -186,7 +186,7 @@
Write content using inline or external Markdown. Write content using inline or external Markdown.
Instructions and more info available in the [docs](https://revealjs.com/markdown/). Instructions and more info available in the [docs](https://revealjs.com/markdown/).
```[] ```html []
<section data-markdown> <section data-markdown>
## Markdown support ## Markdown support
@@ -249,17 +249,17 @@
<p> <p>
reveal.js comes with a few themes built in: <br> reveal.js comes with a few themes built in: <br>
<!-- Hacks to swap themes after the page has loaded. Not flexible and only intended for the reveal.js demo deck. --> <!-- Hacks to swap themes after the page has loaded. Not flexible and only intended for the reveal.js demo deck. -->
<a href="#" onclick="document.getElementById('theme').setAttribute('href','css/theme/black.css'); return false;">Black (default)</a> - <a href="#" onclick="document.getElementById('theme').setAttribute('href','dist/theme/black.css'); return false;">Black (default)</a> -
<a href="#" onclick="document.getElementById('theme').setAttribute('href','css/theme/white.css'); return false;">White</a> - <a href="#" onclick="document.getElementById('theme').setAttribute('href','dist/theme/white.css'); return false;">White</a> -
<a href="#" onclick="document.getElementById('theme').setAttribute('href','css/theme/league.css'); return false;">League</a> - <a href="#" onclick="document.getElementById('theme').setAttribute('href','dist/theme/league.css'); return false;">League</a> -
<a href="#" onclick="document.getElementById('theme').setAttribute('href','css/theme/sky.css'); return false;">Sky</a> - <a href="#" onclick="document.getElementById('theme').setAttribute('href','dist/theme/sky.css'); return false;">Sky</a> -
<a href="#" onclick="document.getElementById('theme').setAttribute('href','css/theme/beige.css'); return false;">Beige</a> - <a href="#" onclick="document.getElementById('theme').setAttribute('href','dist/theme/beige.css'); return false;">Beige</a> -
<a href="#" onclick="document.getElementById('theme').setAttribute('href','css/theme/simple.css'); return false;">Simple</a> <br> <a href="#" onclick="document.getElementById('theme').setAttribute('href','dist/theme/simple.css'); return false;">Simple</a> <br>
<a href="#" onclick="document.getElementById('theme').setAttribute('href','css/theme/serif.css'); return false;">Serif</a> - <a href="#" onclick="document.getElementById('theme').setAttribute('href','dist/theme/serif.css'); return false;">Serif</a> -
<a href="#" onclick="document.getElementById('theme').setAttribute('href','css/theme/blood.css'); return false;">Blood</a> - <a href="#" onclick="document.getElementById('theme').setAttribute('href','dist/theme/blood.css'); return false;">Blood</a> -
<a href="#" onclick="document.getElementById('theme').setAttribute('href','css/theme/night.css'); return false;">Night</a> - <a href="#" onclick="document.getElementById('theme').setAttribute('href','dist/theme/night.css'); return false;">Night</a> -
<a href="#" onclick="document.getElementById('theme').setAttribute('href','css/theme/moon.css'); return false;">Moon</a> - <a href="#" onclick="document.getElementById('theme').setAttribute('href','dist/theme/moon.css'); return false;">Moon</a> -
<a href="#" onclick="document.getElementById('theme').setAttribute('href','css/theme/solarized.css'); return false;">Solarized</a> <a href="#" onclick="document.getElementById('theme').setAttribute('href','dist/theme/solarized.css'); return false;">Solarized</a>
</p> </p>
</section> </section>
@@ -281,7 +281,7 @@
<h2>Tiled Backgrounds</h2> <h2>Tiled Backgrounds</h2>
<pre><code class="hljs html" style="word-wrap: break-word;">&lt;section data-background="image.png" data-background-repeat="repeat" data-background-size="100px"&gt;</code></pre> <pre><code class="hljs html" style="word-wrap: break-word;">&lt;section data-background="image.png" data-background-repeat="repeat" data-background-size="100px"&gt;</code></pre>
</section> </section>
<section data-background-video="https://s3.amazonaws.com/static.slid.es/site/homepage/v1/homepage-video-editor.mp4" data-background-color="#000000"> <section data-background-video="https://static.slid.es/site/homepage/v1/homepage-video-editor.mp4" data-background-color="#000000">
<div style="background-color: rgba(0, 0, 0, 0.9); color: #fff; padding: 20px;"> <div style="background-color: rgba(0, 0, 0, 0.9); color: #fff; padding: 20px;">
<h2>Video Backgrounds</h2> <h2>Video Backgrounds</h2>
<pre><code class="hljs html" style="word-wrap: break-word;">&lt;section data-background-video="video.mp4,video.webm"&gt;</code></pre> <pre><code class="hljs html" style="word-wrap: break-word;">&lt;section data-background-video="video.mp4,video.webm"&gt;</code></pre>
scripts/reveal.js/dist/reveal.css
Vendored
+3 -3
View File
File diff suppressed because one or more lines are too long
scripts/reveal.js/dist/reveal.esm.js
Vendored
+3 -3
View File
File diff suppressed because one or more lines are too long
scripts/reveal.js/dist/reveal.esm.js.map
Vendored
+1
View File
File diff suppressed because one or more lines are too long
scripts/reveal.js/dist/reveal.js
Vendored
+3 -3
View File
File diff suppressed because one or more lines are too long
scripts/reveal.js/dist/reveal.js.map
Vendored
+1
View File
File diff suppressed because one or more lines are too long
scripts/reveal.js/dist/theme/beige.css
Vendored
+164 -101
View File
@@ -6,35 +6,38 @@
@import url(./fonts/league-gothic/league-gothic.css); @import url(./fonts/league-gothic/league-gothic.css);
@import url(https://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic); @import url(https://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic);
section.has-dark-background, section.has-dark-background h1, section.has-dark-background h2, section.has-dark-background h3, section.has-dark-background h4, section.has-dark-background h5, section.has-dark-background h6 { section.has-dark-background, section.has-dark-background h1, section.has-dark-background h2, section.has-dark-background h3, section.has-dark-background h4, section.has-dark-background h5, section.has-dark-background h6 {
color: #fff; } color: #fff;
}
/********************************************* /*********************************************
* GLOBAL STYLES * GLOBAL STYLES
*********************************************/ *********************************************/
:root { :root {
--background-color: #f7f3de; --r-background-color: #f7f3de;
--main-font: Lato, sans-serif; --r-main-font: Lato, sans-serif;
--main-font-size: 40px; --r-main-font-size: 40px;
--main-color: #333; --r-main-color: #333;
--block-margin: 20px; --r-block-margin: 20px;
--heading-margin: 0 0 20px 0; --r-heading-margin: 0 0 20px 0;
--heading-font: League Gothic, Impact, sans-serif; --r-heading-font: League Gothic, Impact, sans-serif;
--heading-color: #333; --r-heading-color: #333;
--heading-line-height: 1.2; --r-heading-line-height: 1.2;
--heading-letter-spacing: normal; --r-heading-letter-spacing: normal;
--heading-text-transform: uppercase; --r-heading-text-transform: uppercase;
--heading-text-shadow: none; --r-heading-text-shadow: none;
--heading-font-weight: normal; --r-heading-font-weight: normal;
--heading1-text-shadow: 0 1px 0 #ccc, 0 2px 0 #c9c9c9, 0 3px 0 #bbb, 0 4px 0 #b9b9b9, 0 5px 0 #aaa, 0 6px 1px rgba(0, 0, 0, 0.1), 0 0 5px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.3), 0 3px 5px rgba(0, 0, 0, 0.2), 0 5px 10px rgba(0, 0, 0, 0.25), 0 20px 20px rgba(0, 0, 0, 0.15); --r-heading1-text-shadow: 0 1px 0 #ccc, 0 2px 0 #c9c9c9, 0 3px 0 #bbb, 0 4px 0 #b9b9b9, 0 5px 0 #aaa, 0 6px 1px rgba(0, 0, 0, 0.1), 0 0 5px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.3), 0 3px 5px rgba(0, 0, 0, 0.2), 0 5px 10px rgba(0, 0, 0, 0.25), 0 20px 20px rgba(0, 0, 0, 0.15);
--heading1-size: 3.77em; --r-heading1-size: 3.77em;
--heading2-size: 2.11em; --r-heading2-size: 2.11em;
--heading3-size: 1.55em; --r-heading3-size: 1.55em;
--heading4-size: 1em; --r-heading4-size: 1em;
--code-font: monospace; --r-code-font: monospace;
--link-color: #8b743d; --r-link-color: #8b743d;
--link-color-hover: #c0a86e; --r-link-color-dark: #564826;
--selection-background-color: rgba(79, 64, 28, 0.99); --r-link-color-hover: #c0a86e;
--selection-color: #fff; } --r-selection-background-color: rgba(79, 64, 28, 0.99);
--r-selection-color: #fff;
}
.reveal-viewport { .reveal-viewport {
background: #f7f2d3; background: #f7f2d3;
@@ -44,28 +47,33 @@ section.has-dark-background, section.has-dark-background h1, section.has-dark-ba
background: -o-radial-gradient(center, circle cover, white 0%, #f7f2d3 100%); background: -o-radial-gradient(center, circle cover, white 0%, #f7f2d3 100%);
background: -ms-radial-gradient(center, circle cover, white 0%, #f7f2d3 100%); background: -ms-radial-gradient(center, circle cover, white 0%, #f7f2d3 100%);
background: radial-gradient(center, circle cover, white 0%, #f7f2d3 100%); background: radial-gradient(center, circle cover, white 0%, #f7f2d3 100%);
background-color: #f7f3de; } background-color: var(--r-background-color);
}
.reveal { .reveal {
font-family: "Lato", sans-serif; font-family: var(--r-main-font);
font-size: 40px; font-size: var(--r-main-font-size);
font-weight: normal; font-weight: normal;
color: #333; } color: var(--r-main-color);
}
.reveal ::selection { .reveal ::selection {
color: #fff; color: var(--r-selection-color);
background: rgba(79, 64, 28, 0.99); background: var(--r-selection-background-color);
text-shadow: none; } text-shadow: none;
}
.reveal ::-moz-selection { .reveal ::-moz-selection {
color: #fff; color: var(--r-selection-color);
background: rgba(79, 64, 28, 0.99); background: var(--r-selection-background-color);
text-shadow: none; } text-shadow: none;
}
.reveal .slides section, .reveal .slides section,
.reveal .slides section > section { .reveal .slides section > section {
line-height: 1.3; line-height: 1.3;
font-weight: inherit; } font-weight: inherit;
}
/********************************************* /*********************************************
* HEADERS * HEADERS
@@ -76,37 +84,44 @@ section.has-dark-background, section.has-dark-background h1, section.has-dark-ba
.reveal h4, .reveal h4,
.reveal h5, .reveal h5,
.reveal h6 { .reveal h6 {
margin: 0 0 20px 0; margin: var(--r-heading-margin);
color: #333; color: var(--r-heading-color);
font-family: "League Gothic", Impact, sans-serif; font-family: var(--r-heading-font);
font-weight: normal; font-weight: var(--r-heading-font-weight);
line-height: 1.2; line-height: var(--r-heading-line-height);
letter-spacing: normal; letter-spacing: var(--r-heading-letter-spacing);
text-transform: uppercase; text-transform: var(--r-heading-text-transform);
text-shadow: none; text-shadow: var(--r-heading-text-shadow);
word-wrap: break-word; } word-wrap: break-word;
}
.reveal h1 { .reveal h1 {
font-size: 3.77em; } font-size: var(--r-heading1-size);
}
.reveal h2 { .reveal h2 {
font-size: 2.11em; } font-size: var(--r-heading2-size);
}
.reveal h3 { .reveal h3 {
font-size: 1.55em; } font-size: var(--r-heading3-size);
}
.reveal h4 { .reveal h4 {
font-size: 1em; } font-size: var(--r-heading4-size);
}
.reveal h1 { .reveal h1 {
text-shadow: 0 1px 0 #ccc, 0 2px 0 #c9c9c9, 0 3px 0 #bbb, 0 4px 0 #b9b9b9, 0 5px 0 #aaa, 0 6px 1px rgba(0, 0, 0, 0.1), 0 0 5px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.3), 0 3px 5px rgba(0, 0, 0, 0.2), 0 5px 10px rgba(0, 0, 0, 0.25), 0 20px 20px rgba(0, 0, 0, 0.15); } text-shadow: var(--r-heading1-text-shadow);
}
/********************************************* /*********************************************
* OTHER * OTHER
*********************************************/ *********************************************/
.reveal p { .reveal p {
margin: 20px 0; margin: var(--r-block-margin) 0;
line-height: 1.3; } line-height: 1.3;
}
/* Remove trailing margins after titles */ /* Remove trailing margins after titles */
.reveal h1:last-child, .reveal h1:last-child,
@@ -115,187 +130,235 @@ section.has-dark-background, section.has-dark-background h1, section.has-dark-ba
.reveal h4:last-child, .reveal h4:last-child,
.reveal h5:last-child, .reveal h5:last-child,
.reveal h6:last-child { .reveal h6:last-child {
margin-bottom: 0; } margin-bottom: 0;
}
/* Ensure certain elements are never larger than the slide itself */ /* Ensure certain elements are never larger than the slide itself */
.reveal img, .reveal img,
.reveal video, .reveal video,
.reveal iframe { .reveal iframe {
max-width: 95%; max-width: 95%;
max-height: 95%; } max-height: 95%;
}
.reveal strong, .reveal strong,
.reveal b { .reveal b {
font-weight: bold; } font-weight: bold;
}
.reveal em { .reveal em {
font-style: italic; } font-style: italic;
}
.reveal ol, .reveal ol,
.reveal dl, .reveal dl,
.reveal ul { .reveal ul {
display: inline-block; display: inline-block;
text-align: left; text-align: left;
margin: 0 0 0 1em; } margin: 0 0 0 1em;
}
.reveal ol { .reveal ol {
list-style-type: decimal; } list-style-type: decimal;
}
.reveal ul { .reveal ul {
list-style-type: disc; } list-style-type: disc;
}
.reveal ul ul { .reveal ul ul {
list-style-type: square; } list-style-type: square;
}
.reveal ul ul ul { .reveal ul ul ul {
list-style-type: circle; } list-style-type: circle;
}
.reveal ul ul, .reveal ul ul,
.reveal ul ol, .reveal ul ol,
.reveal ol ol, .reveal ol ol,
.reveal ol ul { .reveal ol ul {
display: block; display: block;
margin-left: 40px; } margin-left: 40px;
}
.reveal dt { .reveal dt {
font-weight: bold; } font-weight: bold;
}
.reveal dd { .reveal dd {
margin-left: 40px; } margin-left: 40px;
}
.reveal blockquote { .reveal blockquote {
display: block; display: block;
position: relative; position: relative;
width: 70%; width: 70%;
margin: 20px auto; margin: var(--r-block-margin) auto;
padding: 5px; padding: 5px;
font-style: italic; font-style: italic;
background: rgba(255, 255, 255, 0.05); background: rgba(255, 255, 255, 0.05);
box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.2); } box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.2);
}
.reveal blockquote p:first-child, .reveal blockquote p:first-child,
.reveal blockquote p:last-child { .reveal blockquote p:last-child {
display: inline-block; } display: inline-block;
}
.reveal q { .reveal q {
font-style: italic; } font-style: italic;
}
.reveal pre { .reveal pre {
display: block; display: block;
position: relative; position: relative;
width: 90%; width: 90%;
margin: 20px auto; margin: var(--r-block-margin) auto;
text-align: left; text-align: left;
font-size: 0.55em; font-size: 0.55em;
font-family: monospace; font-family: var(--r-code-font);
line-height: 1.2em; line-height: 1.2em;
word-wrap: break-word; word-wrap: break-word;
box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.15); } box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.15);
}
.reveal code { .reveal code {
font-family: monospace; font-family: var(--r-code-font);
text-transform: none; } text-transform: none;
tab-size: 2;
}
.reveal pre code { .reveal pre code {
display: block; display: block;
padding: 5px; padding: 5px;
overflow: auto; overflow: auto;
max-height: 400px; max-height: 400px;
word-wrap: normal; } word-wrap: normal;
}
.reveal .code-wrapper {
white-space: normal;
}
.reveal .code-wrapper code {
white-space: pre;
}
.reveal table { .reveal table {
margin: auto; margin: auto;
border-collapse: collapse; border-collapse: collapse;
border-spacing: 0; } border-spacing: 0;
}
.reveal table th { .reveal table th {
font-weight: bold; } font-weight: bold;
}
.reveal table th, .reveal table th,
.reveal table td { .reveal table td {
text-align: left; text-align: left;
padding: 0.2em 0.5em 0.2em 0.5em; padding: 0.2em 0.5em 0.2em 0.5em;
border-bottom: 1px solid; } border-bottom: 1px solid;
}
.reveal table th[align="center"], .reveal table th[align=center],
.reveal table td[align="center"] { .reveal table td[align=center] {
text-align: center; } text-align: center;
}
.reveal table th[align="right"], .reveal table th[align=right],
.reveal table td[align="right"] { .reveal table td[align=right] {
text-align: right; } text-align: right;
}
.reveal table tbody tr:last-child th, .reveal table tbody tr:last-child th,
.reveal table tbody tr:last-child td { .reveal table tbody tr:last-child td {
border-bottom: none; } border-bottom: none;
}
.reveal sup { .reveal sup {
vertical-align: super; vertical-align: super;
font-size: smaller; } font-size: smaller;
}
.reveal sub { .reveal sub {
vertical-align: sub; vertical-align: sub;
font-size: smaller; } font-size: smaller;
}
.reveal small { .reveal small {
display: inline-block; display: inline-block;
font-size: 0.6em; font-size: 0.6em;
line-height: 1.2em; line-height: 1.2em;
vertical-align: top; } vertical-align: top;
}
.reveal small * { .reveal small * {
vertical-align: top; } vertical-align: top;
}
.reveal img { .reveal img {
margin: 20px 0; } margin: var(--r-block-margin) 0;
}
/********************************************* /*********************************************
* LINKS * LINKS
*********************************************/ *********************************************/
.reveal a { .reveal a {
color: #8b743d; color: var(--r-link-color);
text-decoration: none; text-decoration: none;
transition: color .15s ease; } transition: color 0.15s ease;
}
.reveal a:hover { .reveal a:hover {
color: #c0a86e; color: var(--r-link-color-hover);
text-shadow: none; text-shadow: none;
border: none; } border: none;
}
.reveal .roll span:after { .reveal .roll span:after {
color: #fff; color: #fff;
background: #564826; } background: var(--r-link-color-dark);
}
/********************************************* /*********************************************
* Frame helper * Frame helper
*********************************************/ *********************************************/
.reveal .r-frame { .reveal .r-frame {
border: 4px solid #333; border: 4px solid var(--r-main-color);
box-shadow: 0 0 10px rgba(0, 0, 0, 0.15); } box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
}
.reveal a .r-frame { .reveal a .r-frame {
transition: all .15s linear; } transition: all 0.15s linear;
}
.reveal a:hover .r-frame { .reveal a:hover .r-frame {
border-color: #8b743d; border-color: var(--r-link-color);
box-shadow: 0 0 20px rgba(0, 0, 0, 0.55); } box-shadow: 0 0 20px rgba(0, 0, 0, 0.55);
}
/********************************************* /*********************************************
* NAVIGATION CONTROLS * NAVIGATION CONTROLS
*********************************************/ *********************************************/
.reveal .controls { .reveal .controls {
color: #8b743d; } color: var(--r-link-color);
}
/********************************************* /*********************************************
* PROGRESS BAR * PROGRESS BAR
*********************************************/ *********************************************/
.reveal .progress { .reveal .progress {
background: rgba(0, 0, 0, 0.2); background: rgba(0, 0, 0, 0.2);
color: #8b743d; } color: var(--r-link-color);
}
/********************************************* /*********************************************
* PRINT BACKGROUND * PRINT BACKGROUND
*********************************************/ *********************************************/
@media print { @media print {
.backgrounds { .backgrounds {
background-color: #f7f3de; } } background-color: var(--r-background-color);
}
}
scripts/reveal.js/dist/theme/black.css
Vendored
+164 -101
View File
@@ -5,60 +5,68 @@
*/ */
@import url(./fonts/source-sans-pro/source-sans-pro.css); @import url(./fonts/source-sans-pro/source-sans-pro.css);
section.has-light-background, section.has-light-background h1, section.has-light-background h2, section.has-light-background h3, section.has-light-background h4, section.has-light-background h5, section.has-light-background h6 { section.has-light-background, section.has-light-background h1, section.has-light-background h2, section.has-light-background h3, section.has-light-background h4, section.has-light-background h5, section.has-light-background h6 {
color: #222; } color: #222;
}
/********************************************* /*********************************************
* GLOBAL STYLES * GLOBAL STYLES
*********************************************/ *********************************************/
:root { :root {
--background-color: #191919; --r-background-color: #191919;
--main-font: Source Sans Pro, Helvetica, sans-serif; --r-main-font: Source Sans Pro, Helvetica, sans-serif;
--main-font-size: 42px; --r-main-font-size: 42px;
--main-color: #fff; --r-main-color: #fff;
--block-margin: 20px; --r-block-margin: 20px;
--heading-margin: 0 0 20px 0; --r-heading-margin: 0 0 20px 0;
--heading-font: Source Sans Pro, Helvetica, sans-serif; --r-heading-font: Source Sans Pro, Helvetica, sans-serif;
--heading-color: #fff; --r-heading-color: #fff;
--heading-line-height: 1.2; --r-heading-line-height: 1.2;
--heading-letter-spacing: normal; --r-heading-letter-spacing: normal;
--heading-text-transform: uppercase; --r-heading-text-transform: uppercase;
--heading-text-shadow: none; --r-heading-text-shadow: none;
--heading-font-weight: 600; --r-heading-font-weight: 600;
--heading1-text-shadow: none; --r-heading1-text-shadow: none;
--heading1-size: 2.5em; --r-heading1-size: 2.5em;
--heading2-size: 1.6em; --r-heading2-size: 1.6em;
--heading3-size: 1.3em; --r-heading3-size: 1.3em;
--heading4-size: 1em; --r-heading4-size: 1em;
--code-font: monospace; --r-code-font: monospace;
--link-color: #42affa; --r-link-color: #42affa;
--link-color-hover: #8dcffc; --r-link-color-dark: #068de9;
--selection-background-color: #bee4fd; --r-link-color-hover: #8dcffc;
--selection-color: #fff; } --r-selection-background-color: #bee4fd;
--r-selection-color: #fff;
}
.reveal-viewport { .reveal-viewport {
background: #191919; background: #191919;
background-color: #191919; } background-color: var(--r-background-color);
}
.reveal { .reveal {
font-family: "Source Sans Pro", Helvetica, sans-serif; font-family: var(--r-main-font);
font-size: 42px; font-size: var(--r-main-font-size);
font-weight: normal; font-weight: normal;
color: #fff; } color: var(--r-main-color);
}
.reveal ::selection { .reveal ::selection {
color: #fff; color: var(--r-selection-color);
background: #bee4fd; background: var(--r-selection-background-color);
text-shadow: none; } text-shadow: none;
}
.reveal ::-moz-selection { .reveal ::-moz-selection {
color: #fff; color: var(--r-selection-color);
background: #bee4fd; background: var(--r-selection-background-color);
text-shadow: none; } text-shadow: none;
}
.reveal .slides section, .reveal .slides section,
.reveal .slides section > section { .reveal .slides section > section {
line-height: 1.3; line-height: 1.3;
font-weight: inherit; } font-weight: inherit;
}
/********************************************* /*********************************************
* HEADERS * HEADERS
@@ -69,37 +77,44 @@ section.has-light-background, section.has-light-background h1, section.has-light
.reveal h4, .reveal h4,
.reveal h5, .reveal h5,
.reveal h6 { .reveal h6 {
margin: 0 0 20px 0; margin: var(--r-heading-margin);
color: #fff; color: var(--r-heading-color);
font-family: "Source Sans Pro", Helvetica, sans-serif; font-family: var(--r-heading-font);
font-weight: 600; font-weight: var(--r-heading-font-weight);
line-height: 1.2; line-height: var(--r-heading-line-height);
letter-spacing: normal; letter-spacing: var(--r-heading-letter-spacing);
text-transform: uppercase; text-transform: var(--r-heading-text-transform);
text-shadow: none; text-shadow: var(--r-heading-text-shadow);
word-wrap: break-word; } word-wrap: break-word;
}
.reveal h1 { .reveal h1 {
font-size: 2.5em; } font-size: var(--r-heading1-size);
}
.reveal h2 { .reveal h2 {
font-size: 1.6em; } font-size: var(--r-heading2-size);
}
.reveal h3 { .reveal h3 {
font-size: 1.3em; } font-size: var(--r-heading3-size);
}
.reveal h4 { .reveal h4 {
font-size: 1em; } font-size: var(--r-heading4-size);
}
.reveal h1 { .reveal h1 {
text-shadow: none; } text-shadow: var(--r-heading1-text-shadow);
}
/********************************************* /*********************************************
* OTHER * OTHER
*********************************************/ *********************************************/
.reveal p { .reveal p {
margin: 20px 0; margin: var(--r-block-margin) 0;
line-height: 1.3; } line-height: 1.3;
}
/* Remove trailing margins after titles */ /* Remove trailing margins after titles */
.reveal h1:last-child, .reveal h1:last-child,
@@ -108,187 +123,235 @@ section.has-light-background, section.has-light-background h1, section.has-light
.reveal h4:last-child, .reveal h4:last-child,
.reveal h5:last-child, .reveal h5:last-child,
.reveal h6:last-child { .reveal h6:last-child {
margin-bottom: 0; } margin-bottom: 0;
}
/* Ensure certain elements are never larger than the slide itself */ /* Ensure certain elements are never larger than the slide itself */
.reveal img, .reveal img,
.reveal video, .reveal video,
.reveal iframe { .reveal iframe {
max-width: 95%; max-width: 95%;
max-height: 95%; } max-height: 95%;
}
.reveal strong, .reveal strong,
.reveal b { .reveal b {
font-weight: bold; } font-weight: bold;
}
.reveal em { .reveal em {
font-style: italic; } font-style: italic;
}
.reveal ol, .reveal ol,
.reveal dl, .reveal dl,
.reveal ul { .reveal ul {
display: inline-block; display: inline-block;
text-align: left; text-align: left;
margin: 0 0 0 1em; } margin: 0 0 0 1em;
}
.reveal ol { .reveal ol {
list-style-type: decimal; } list-style-type: decimal;
}
.reveal ul { .reveal ul {
list-style-type: disc; } list-style-type: disc;
}
.reveal ul ul { .reveal ul ul {
list-style-type: square; } list-style-type: square;
}
.reveal ul ul ul { .reveal ul ul ul {
list-style-type: circle; } list-style-type: circle;
}
.reveal ul ul, .reveal ul ul,
.reveal ul ol, .reveal ul ol,
.reveal ol ol, .reveal ol ol,
.reveal ol ul { .reveal ol ul {
display: block; display: block;
margin-left: 40px; } margin-left: 40px;
}
.reveal dt { .reveal dt {
font-weight: bold; } font-weight: bold;
}
.reveal dd { .reveal dd {
margin-left: 40px; } margin-left: 40px;
}
.reveal blockquote { .reveal blockquote {
display: block; display: block;
position: relative; position: relative;
width: 70%; width: 70%;
margin: 20px auto; margin: var(--r-block-margin) auto;
padding: 5px; padding: 5px;
font-style: italic; font-style: italic;
background: rgba(255, 255, 255, 0.05); background: rgba(255, 255, 255, 0.05);
box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.2); } box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.2);
}
.reveal blockquote p:first-child, .reveal blockquote p:first-child,
.reveal blockquote p:last-child { .reveal blockquote p:last-child {
display: inline-block; } display: inline-block;
}
.reveal q { .reveal q {
font-style: italic; } font-style: italic;
}
.reveal pre { .reveal pre {
display: block; display: block;
position: relative; position: relative;
width: 90%; width: 90%;
margin: 20px auto; margin: var(--r-block-margin) auto;
text-align: left; text-align: left;
font-size: 0.55em; font-size: 0.55em;
font-family: monospace; font-family: var(--r-code-font);
line-height: 1.2em; line-height: 1.2em;
word-wrap: break-word; word-wrap: break-word;
box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.15); } box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.15);
}
.reveal code { .reveal code {
font-family: monospace; font-family: var(--r-code-font);
text-transform: none; } text-transform: none;
tab-size: 2;
}
.reveal pre code { .reveal pre code {
display: block; display: block;
padding: 5px; padding: 5px;
overflow: auto; overflow: auto;
max-height: 400px; max-height: 400px;
word-wrap: normal; } word-wrap: normal;
}
.reveal .code-wrapper {
white-space: normal;
}
.reveal .code-wrapper code {
white-space: pre;
}
.reveal table { .reveal table {
margin: auto; margin: auto;
border-collapse: collapse; border-collapse: collapse;
border-spacing: 0; } border-spacing: 0;
}
.reveal table th { .reveal table th {
font-weight: bold; } font-weight: bold;
}
.reveal table th, .reveal table th,
.reveal table td { .reveal table td {
text-align: left; text-align: left;
padding: 0.2em 0.5em 0.2em 0.5em; padding: 0.2em 0.5em 0.2em 0.5em;
border-bottom: 1px solid; } border-bottom: 1px solid;
}
.reveal table th[align="center"], .reveal table th[align=center],
.reveal table td[align="center"] { .reveal table td[align=center] {
text-align: center; } text-align: center;
}
.reveal table th[align="right"], .reveal table th[align=right],
.reveal table td[align="right"] { .reveal table td[align=right] {
text-align: right; } text-align: right;
}
.reveal table tbody tr:last-child th, .reveal table tbody tr:last-child th,
.reveal table tbody tr:last-child td { .reveal table tbody tr:last-child td {
border-bottom: none; } border-bottom: none;
}
.reveal sup { .reveal sup {
vertical-align: super; vertical-align: super;
font-size: smaller; } font-size: smaller;
}
.reveal sub { .reveal sub {
vertical-align: sub; vertical-align: sub;
font-size: smaller; } font-size: smaller;
}
.reveal small { .reveal small {
display: inline-block; display: inline-block;
font-size: 0.6em; font-size: 0.6em;
line-height: 1.2em; line-height: 1.2em;
vertical-align: top; } vertical-align: top;
}
.reveal small * { .reveal small * {
vertical-align: top; } vertical-align: top;
}
.reveal img { .reveal img {
margin: 20px 0; } margin: var(--r-block-margin) 0;
}
/********************************************* /*********************************************
* LINKS * LINKS
*********************************************/ *********************************************/
.reveal a { .reveal a {
color: #42affa; color: var(--r-link-color);
text-decoration: none; text-decoration: none;
transition: color .15s ease; } transition: color 0.15s ease;
}
.reveal a:hover { .reveal a:hover {
color: #8dcffc; color: var(--r-link-color-hover);
text-shadow: none; text-shadow: none;
border: none; } border: none;
}
.reveal .roll span:after { .reveal .roll span:after {
color: #fff; color: #fff;
background: #068de9; } background: var(--r-link-color-dark);
}
/********************************************* /*********************************************
* Frame helper * Frame helper
*********************************************/ *********************************************/
.reveal .r-frame { .reveal .r-frame {
border: 4px solid #fff; border: 4px solid var(--r-main-color);
box-shadow: 0 0 10px rgba(0, 0, 0, 0.15); } box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
}
.reveal a .r-frame { .reveal a .r-frame {
transition: all .15s linear; } transition: all 0.15s linear;
}
.reveal a:hover .r-frame { .reveal a:hover .r-frame {
border-color: #42affa; border-color: var(--r-link-color);
box-shadow: 0 0 20px rgba(0, 0, 0, 0.55); } box-shadow: 0 0 20px rgba(0, 0, 0, 0.55);
}
/********************************************* /*********************************************
* NAVIGATION CONTROLS * NAVIGATION CONTROLS
*********************************************/ *********************************************/
.reveal .controls { .reveal .controls {
color: #42affa; } color: var(--r-link-color);
}
/********************************************* /*********************************************
* PROGRESS BAR * PROGRESS BAR
*********************************************/ *********************************************/
.reveal .progress { .reveal .progress {
background: rgba(0, 0, 0, 0.2); background: rgba(0, 0, 0, 0.2);
color: #42affa; } color: var(--r-link-color);
}
/********************************************* /*********************************************
* PRINT BACKGROUND * PRINT BACKGROUND
*********************************************/ *********************************************/
@media print { @media print {
.backgrounds { .backgrounds {
background-color: #191919; } } background-color: var(--r-background-color);
}
}
scripts/reveal.js/dist/theme/blood.css
Vendored
+174 -107
View File
@@ -11,60 +11,68 @@
*/ */
@import url(https://fonts.googleapis.com/css?family=Ubuntu:300,700,300italic,700italic); @import url(https://fonts.googleapis.com/css?family=Ubuntu:300,700,300italic,700italic);
section.has-light-background, section.has-light-background h1, section.has-light-background h2, section.has-light-background h3, section.has-light-background h4, section.has-light-background h5, section.has-light-background h6 { section.has-light-background, section.has-light-background h1, section.has-light-background h2, section.has-light-background h3, section.has-light-background h4, section.has-light-background h5, section.has-light-background h6 {
color: #222; } color: #222;
}
/********************************************* /*********************************************
* GLOBAL STYLES * GLOBAL STYLES
*********************************************/ *********************************************/
:root { :root {
--background-color: #222; --r-background-color: #222;
--main-font: Ubuntu, sans-serif; --r-main-font: Ubuntu, sans-serif;
--main-font-size: 40px; --r-main-font-size: 40px;
--main-color: #eee; --r-main-color: #eee;
--block-margin: 20px; --r-block-margin: 20px;
--heading-margin: 0 0 20px 0; --r-heading-margin: 0 0 20px 0;
--heading-font: Ubuntu, sans-serif; --r-heading-font: Ubuntu, sans-serif;
--heading-color: #eee; --r-heading-color: #eee;
--heading-line-height: 1.2; --r-heading-line-height: 1.2;
--heading-letter-spacing: normal; --r-heading-letter-spacing: normal;
--heading-text-transform: uppercase; --r-heading-text-transform: uppercase;
--heading-text-shadow: 2px 2px 2px #222; --r-heading-text-shadow: 2px 2px 2px #222;
--heading-font-weight: normal; --r-heading-font-weight: normal;
--heading1-text-shadow: 0 1px 0 #ccc, 0 2px 0 #c9c9c9, 0 3px 0 #bbb, 0 4px 0 #b9b9b9, 0 5px 0 #aaa, 0 6px 1px rgba(0, 0, 0, 0.1), 0 0 5px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.3), 0 3px 5px rgba(0, 0, 0, 0.2), 0 5px 10px rgba(0, 0, 0, 0.25), 0 20px 20px rgba(0, 0, 0, 0.15); --r-heading1-text-shadow: 0 1px 0 #ccc, 0 2px 0 #c9c9c9, 0 3px 0 #bbb, 0 4px 0 #b9b9b9, 0 5px 0 #aaa, 0 6px 1px rgba(0, 0, 0, 0.1), 0 0 5px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.3), 0 3px 5px rgba(0, 0, 0, 0.2), 0 5px 10px rgba(0, 0, 0, 0.25), 0 20px 20px rgba(0, 0, 0, 0.15);
--heading1-size: 3.77em; --r-heading1-size: 3.77em;
--heading2-size: 2.11em; --r-heading2-size: 2.11em;
--heading3-size: 1.55em; --r-heading3-size: 1.55em;
--heading4-size: 1em; --r-heading4-size: 1em;
--code-font: monospace; --r-code-font: monospace;
--link-color: #a23; --r-link-color: #a23;
--link-color-hover: #dd5566; --r-link-color-dark: #6a1520;
--selection-background-color: #a23; --r-link-color-hover: #dd5566;
--selection-color: #fff; } --r-selection-background-color: #a23;
--r-selection-color: #fff;
}
.reveal-viewport { .reveal-viewport {
background: #222; background: #222;
background-color: #222; } background-color: var(--r-background-color);
}
.reveal { .reveal {
font-family: Ubuntu, "sans-serif"; font-family: var(--r-main-font);
font-size: 40px; font-size: var(--r-main-font-size);
font-weight: normal; font-weight: normal;
color: #eee; } color: var(--r-main-color);
}
.reveal ::selection { .reveal ::selection {
color: #fff; color: var(--r-selection-color);
background: #a23; background: var(--r-selection-background-color);
text-shadow: none; } text-shadow: none;
}
.reveal ::-moz-selection { .reveal ::-moz-selection {
color: #fff; color: var(--r-selection-color);
background: #a23; background: var(--r-selection-background-color);
text-shadow: none; } text-shadow: none;
}
.reveal .slides section, .reveal .slides section,
.reveal .slides section > section { .reveal .slides section > section {
line-height: 1.3; line-height: 1.3;
font-weight: inherit; } font-weight: inherit;
}
/********************************************* /*********************************************
* HEADERS * HEADERS
@@ -75,37 +83,44 @@ section.has-light-background, section.has-light-background h1, section.has-light
.reveal h4, .reveal h4,
.reveal h5, .reveal h5,
.reveal h6 { .reveal h6 {
margin: 0 0 20px 0; margin: var(--r-heading-margin);
color: #eee; color: var(--r-heading-color);
font-family: Ubuntu, "sans-serif"; font-family: var(--r-heading-font);
font-weight: normal; font-weight: var(--r-heading-font-weight);
line-height: 1.2; line-height: var(--r-heading-line-height);
letter-spacing: normal; letter-spacing: var(--r-heading-letter-spacing);
text-transform: uppercase; text-transform: var(--r-heading-text-transform);
text-shadow: 2px 2px 2px #222; text-shadow: var(--r-heading-text-shadow);
word-wrap: break-word; } word-wrap: break-word;
}
.reveal h1 { .reveal h1 {
font-size: 3.77em; } font-size: var(--r-heading1-size);
}
.reveal h2 { .reveal h2 {
font-size: 2.11em; } font-size: var(--r-heading2-size);
}
.reveal h3 { .reveal h3 {
font-size: 1.55em; } font-size: var(--r-heading3-size);
}
.reveal h4 { .reveal h4 {
font-size: 1em; } font-size: var(--r-heading4-size);
}
.reveal h1 { .reveal h1 {
text-shadow: 0 1px 0 #ccc, 0 2px 0 #c9c9c9, 0 3px 0 #bbb, 0 4px 0 #b9b9b9, 0 5px 0 #aaa, 0 6px 1px rgba(0, 0, 0, 0.1), 0 0 5px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.3), 0 3px 5px rgba(0, 0, 0, 0.2), 0 5px 10px rgba(0, 0, 0, 0.25), 0 20px 20px rgba(0, 0, 0, 0.15); } text-shadow: var(--r-heading1-text-shadow);
}
/********************************************* /*********************************************
* OTHER * OTHER
*********************************************/ *********************************************/
.reveal p { .reveal p {
margin: 20px 0; margin: var(--r-block-margin) 0;
line-height: 1.3; } line-height: 1.3;
}
/* Remove trailing margins after titles */ /* Remove trailing margins after titles */
.reveal h1:last-child, .reveal h1:last-child,
@@ -114,197 +129,246 @@ section.has-light-background, section.has-light-background h1, section.has-light
.reveal h4:last-child, .reveal h4:last-child,
.reveal h5:last-child, .reveal h5:last-child,
.reveal h6:last-child { .reveal h6:last-child {
margin-bottom: 0; } margin-bottom: 0;
}
/* Ensure certain elements are never larger than the slide itself */ /* Ensure certain elements are never larger than the slide itself */
.reveal img, .reveal img,
.reveal video, .reveal video,
.reveal iframe { .reveal iframe {
max-width: 95%; max-width: 95%;
max-height: 95%; } max-height: 95%;
}
.reveal strong, .reveal strong,
.reveal b { .reveal b {
font-weight: bold; } font-weight: bold;
}
.reveal em { .reveal em {
font-style: italic; } font-style: italic;
}
.reveal ol, .reveal ol,
.reveal dl, .reveal dl,
.reveal ul { .reveal ul {
display: inline-block; display: inline-block;
text-align: left; text-align: left;
margin: 0 0 0 1em; } margin: 0 0 0 1em;
}
.reveal ol { .reveal ol {
list-style-type: decimal; } list-style-type: decimal;
}
.reveal ul { .reveal ul {
list-style-type: disc; } list-style-type: disc;
}
.reveal ul ul { .reveal ul ul {
list-style-type: square; } list-style-type: square;
}
.reveal ul ul ul { .reveal ul ul ul {
list-style-type: circle; } list-style-type: circle;
}
.reveal ul ul, .reveal ul ul,
.reveal ul ol, .reveal ul ol,
.reveal ol ol, .reveal ol ol,
.reveal ol ul { .reveal ol ul {
display: block; display: block;
margin-left: 40px; } margin-left: 40px;
}
.reveal dt { .reveal dt {
font-weight: bold; } font-weight: bold;
}
.reveal dd { .reveal dd {
margin-left: 40px; } margin-left: 40px;
}
.reveal blockquote { .reveal blockquote {
display: block; display: block;
position: relative; position: relative;
width: 70%; width: 70%;
margin: 20px auto; margin: var(--r-block-margin) auto;
padding: 5px; padding: 5px;
font-style: italic; font-style: italic;
background: rgba(255, 255, 255, 0.05); background: rgba(255, 255, 255, 0.05);
box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.2); } box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.2);
}
.reveal blockquote p:first-child, .reveal blockquote p:first-child,
.reveal blockquote p:last-child { .reveal blockquote p:last-child {
display: inline-block; } display: inline-block;
}
.reveal q { .reveal q {
font-style: italic; } font-style: italic;
}
.reveal pre { .reveal pre {
display: block; display: block;
position: relative; position: relative;
width: 90%; width: 90%;
margin: 20px auto; margin: var(--r-block-margin) auto;
text-align: left; text-align: left;
font-size: 0.55em; font-size: 0.55em;
font-family: monospace; font-family: var(--r-code-font);
line-height: 1.2em; line-height: 1.2em;
word-wrap: break-word; word-wrap: break-word;
box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.15); } box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.15);
}
.reveal code { .reveal code {
font-family: monospace; font-family: var(--r-code-font);
text-transform: none; } text-transform: none;
tab-size: 2;
}
.reveal pre code { .reveal pre code {
display: block; display: block;
padding: 5px; padding: 5px;
overflow: auto; overflow: auto;
max-height: 400px; max-height: 400px;
word-wrap: normal; } word-wrap: normal;
}
.reveal .code-wrapper {
white-space: normal;
}
.reveal .code-wrapper code {
white-space: pre;
}
.reveal table { .reveal table {
margin: auto; margin: auto;
border-collapse: collapse; border-collapse: collapse;
border-spacing: 0; } border-spacing: 0;
}
.reveal table th { .reveal table th {
font-weight: bold; } font-weight: bold;
}
.reveal table th, .reveal table th,
.reveal table td { .reveal table td {
text-align: left; text-align: left;
padding: 0.2em 0.5em 0.2em 0.5em; padding: 0.2em 0.5em 0.2em 0.5em;
border-bottom: 1px solid; } border-bottom: 1px solid;
}
.reveal table th[align="center"], .reveal table th[align=center],
.reveal table td[align="center"] { .reveal table td[align=center] {
text-align: center; } text-align: center;
}
.reveal table th[align="right"], .reveal table th[align=right],
.reveal table td[align="right"] { .reveal table td[align=right] {
text-align: right; } text-align: right;
}
.reveal table tbody tr:last-child th, .reveal table tbody tr:last-child th,
.reveal table tbody tr:last-child td { .reveal table tbody tr:last-child td {
border-bottom: none; } border-bottom: none;
}
.reveal sup { .reveal sup {
vertical-align: super; vertical-align: super;
font-size: smaller; } font-size: smaller;
}
.reveal sub { .reveal sub {
vertical-align: sub; vertical-align: sub;
font-size: smaller; } font-size: smaller;
}
.reveal small { .reveal small {
display: inline-block; display: inline-block;
font-size: 0.6em; font-size: 0.6em;
line-height: 1.2em; line-height: 1.2em;
vertical-align: top; } vertical-align: top;
}
.reveal small * { .reveal small * {
vertical-align: top; } vertical-align: top;
}
.reveal img { .reveal img {
margin: 20px 0; } margin: var(--r-block-margin) 0;
}
/********************************************* /*********************************************
* LINKS * LINKS
*********************************************/ *********************************************/
.reveal a { .reveal a {
color: #a23; color: var(--r-link-color);
text-decoration: none; text-decoration: none;
transition: color .15s ease; } transition: color 0.15s ease;
}
.reveal a:hover { .reveal a:hover {
color: #dd5566; color: var(--r-link-color-hover);
text-shadow: none; text-shadow: none;
border: none; } border: none;
}
.reveal .roll span:after { .reveal .roll span:after {
color: #fff; color: #fff;
background: #6a1520; } background: var(--r-link-color-dark);
}
/********************************************* /*********************************************
* Frame helper * Frame helper
*********************************************/ *********************************************/
.reveal .r-frame { .reveal .r-frame {
border: 4px solid #eee; border: 4px solid var(--r-main-color);
box-shadow: 0 0 10px rgba(0, 0, 0, 0.15); } box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
}
.reveal a .r-frame { .reveal a .r-frame {
transition: all .15s linear; } transition: all 0.15s linear;
}
.reveal a:hover .r-frame { .reveal a:hover .r-frame {
border-color: #a23; border-color: var(--r-link-color);
box-shadow: 0 0 20px rgba(0, 0, 0, 0.55); } box-shadow: 0 0 20px rgba(0, 0, 0, 0.55);
}
/********************************************* /*********************************************
* NAVIGATION CONTROLS * NAVIGATION CONTROLS
*********************************************/ *********************************************/
.reveal .controls { .reveal .controls {
color: #a23; } color: var(--r-link-color);
}
/********************************************* /*********************************************
* PROGRESS BAR * PROGRESS BAR
*********************************************/ *********************************************/
.reveal .progress { .reveal .progress {
background: rgba(0, 0, 0, 0.2); background: rgba(0, 0, 0, 0.2);
color: #a23; } color: var(--r-link-color);
}
/********************************************* /*********************************************
* PRINT BACKGROUND * PRINT BACKGROUND
*********************************************/ *********************************************/
@media print { @media print {
.backgrounds { .backgrounds {
background-color: #222; } } background-color: var(--r-background-color);
}
}
.reveal p { .reveal p {
font-weight: 300; font-weight: 300;
text-shadow: 1px 1px #222; } text-shadow: 1px 1px #222;
}
section.has-light-background p, section.has-light-background h1, section.has-light-background h2, section.has-light-background h3, section.has-light-background h4 { section.has-light-background p, section.has-light-background h1, section.has-light-background h2, section.has-light-background h3, section.has-light-background h4 {
text-shadow: none; } text-shadow: none;
}
.reveal h1, .reveal h1,
.reveal h2, .reveal h2,
@@ -312,12 +376,15 @@ section.has-light-background p, section.has-light-background h1, section.has-lig
.reveal h4, .reveal h4,
.reveal h5, .reveal h5,
.reveal h6 { .reveal h6 {
font-weight: 700; } font-weight: 700;
}
.reveal p code { .reveal p code {
background-color: #23241f; background-color: #23241f;
display: inline-block; display: inline-block;
border-radius: 7px; } border-radius: 7px;
}
.reveal small code { .reveal small code {
vertical-align: baseline; } vertical-align: baseline;
}
scripts/reveal.js/dist/theme/league.css
Vendored
+164 -101
View File
@@ -8,35 +8,38 @@
@import url(./fonts/league-gothic/league-gothic.css); @import url(./fonts/league-gothic/league-gothic.css);
@import url(https://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic); @import url(https://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic);
section.has-light-background, section.has-light-background h1, section.has-light-background h2, section.has-light-background h3, section.has-light-background h4, section.has-light-background h5, section.has-light-background h6 { section.has-light-background, section.has-light-background h1, section.has-light-background h2, section.has-light-background h3, section.has-light-background h4, section.has-light-background h5, section.has-light-background h6 {
color: #222; } color: #222;
}
/********************************************* /*********************************************
* GLOBAL STYLES * GLOBAL STYLES
*********************************************/ *********************************************/
:root { :root {
--background-color: #2b2b2b; --r-background-color: #2b2b2b;
--main-font: Lato, sans-serif; --r-main-font: Lato, sans-serif;
--main-font-size: 40px; --r-main-font-size: 40px;
--main-color: #eee; --r-main-color: #eee;
--block-margin: 20px; --r-block-margin: 20px;
--heading-margin: 0 0 20px 0; --r-heading-margin: 0 0 20px 0;
--heading-font: League Gothic, Impact, sans-serif; --r-heading-font: League Gothic, Impact, sans-serif;
--heading-color: #eee; --r-heading-color: #eee;
--heading-line-height: 1.2; --r-heading-line-height: 1.2;
--heading-letter-spacing: normal; --r-heading-letter-spacing: normal;
--heading-text-transform: uppercase; --r-heading-text-transform: uppercase;
--heading-text-shadow: 0px 0px 6px rgba(0, 0, 0, 0.2); --r-heading-text-shadow: 0px 0px 6px rgba(0, 0, 0, 0.2);
--heading-font-weight: normal; --r-heading-font-weight: normal;
--heading1-text-shadow: 0 1px 0 #ccc, 0 2px 0 #c9c9c9, 0 3px 0 #bbb, 0 4px 0 #b9b9b9, 0 5px 0 #aaa, 0 6px 1px rgba(0, 0, 0, 0.1), 0 0 5px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.3), 0 3px 5px rgba(0, 0, 0, 0.2), 0 5px 10px rgba(0, 0, 0, 0.25), 0 20px 20px rgba(0, 0, 0, 0.15); --r-heading1-text-shadow: 0 1px 0 #ccc, 0 2px 0 #c9c9c9, 0 3px 0 #bbb, 0 4px 0 #b9b9b9, 0 5px 0 #aaa, 0 6px 1px rgba(0, 0, 0, 0.1), 0 0 5px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.3), 0 3px 5px rgba(0, 0, 0, 0.2), 0 5px 10px rgba(0, 0, 0, 0.25), 0 20px 20px rgba(0, 0, 0, 0.15);
--heading1-size: 3.77em; --r-heading1-size: 3.77em;
--heading2-size: 2.11em; --r-heading2-size: 2.11em;
--heading3-size: 1.55em; --r-heading3-size: 1.55em;
--heading4-size: 1em; --r-heading4-size: 1em;
--code-font: monospace; --r-code-font: monospace;
--link-color: #13DAEC; --r-link-color: #13DAEC;
--link-color-hover: #71e9f4; --r-link-color-dark: #0d99a5;
--selection-background-color: #FF5E99; --r-link-color-hover: #71e9f4;
--selection-color: #fff; } --r-selection-background-color: #FF5E99;
--r-selection-color: #fff;
}
.reveal-viewport { .reveal-viewport {
background: #1c1e20; background: #1c1e20;
@@ -46,28 +49,33 @@ section.has-light-background, section.has-light-background h1, section.has-light
background: -o-radial-gradient(center, circle cover, #555a5f 0%, #1c1e20 100%); background: -o-radial-gradient(center, circle cover, #555a5f 0%, #1c1e20 100%);
background: -ms-radial-gradient(center, circle cover, #555a5f 0%, #1c1e20 100%); background: -ms-radial-gradient(center, circle cover, #555a5f 0%, #1c1e20 100%);
background: radial-gradient(center, circle cover, #555a5f 0%, #1c1e20 100%); background: radial-gradient(center, circle cover, #555a5f 0%, #1c1e20 100%);
background-color: #2b2b2b; } background-color: var(--r-background-color);
}
.reveal { .reveal {
font-family: "Lato", sans-serif; font-family: var(--r-main-font);
font-size: 40px; font-size: var(--r-main-font-size);
font-weight: normal; font-weight: normal;
color: #eee; } color: var(--r-main-color);
}
.reveal ::selection { .reveal ::selection {
color: #fff; color: var(--r-selection-color);
background: #FF5E99; background: var(--r-selection-background-color);
text-shadow: none; } text-shadow: none;
}
.reveal ::-moz-selection { .reveal ::-moz-selection {
color: #fff; color: var(--r-selection-color);
background: #FF5E99; background: var(--r-selection-background-color);
text-shadow: none; } text-shadow: none;
}
.reveal .slides section, .reveal .slides section,
.reveal .slides section > section { .reveal .slides section > section {
line-height: 1.3; line-height: 1.3;
font-weight: inherit; } font-weight: inherit;
}
/********************************************* /*********************************************
* HEADERS * HEADERS
@@ -78,37 +86,44 @@ section.has-light-background, section.has-light-background h1, section.has-light
.reveal h4, .reveal h4,
.reveal h5, .reveal h5,
.reveal h6 { .reveal h6 {
margin: 0 0 20px 0; margin: var(--r-heading-margin);
color: #eee; color: var(--r-heading-color);
font-family: "League Gothic", Impact, sans-serif; font-family: var(--r-heading-font);
font-weight: normal; font-weight: var(--r-heading-font-weight);
line-height: 1.2; line-height: var(--r-heading-line-height);
letter-spacing: normal; letter-spacing: var(--r-heading-letter-spacing);
text-transform: uppercase; text-transform: var(--r-heading-text-transform);
text-shadow: 0px 0px 6px rgba(0, 0, 0, 0.2); text-shadow: var(--r-heading-text-shadow);
word-wrap: break-word; } word-wrap: break-word;
}
.reveal h1 { .reveal h1 {
font-size: 3.77em; } font-size: var(--r-heading1-size);
}
.reveal h2 { .reveal h2 {
font-size: 2.11em; } font-size: var(--r-heading2-size);
}
.reveal h3 { .reveal h3 {
font-size: 1.55em; } font-size: var(--r-heading3-size);
}
.reveal h4 { .reveal h4 {
font-size: 1em; } font-size: var(--r-heading4-size);
}
.reveal h1 { .reveal h1 {
text-shadow: 0 1px 0 #ccc, 0 2px 0 #c9c9c9, 0 3px 0 #bbb, 0 4px 0 #b9b9b9, 0 5px 0 #aaa, 0 6px 1px rgba(0, 0, 0, 0.1), 0 0 5px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.3), 0 3px 5px rgba(0, 0, 0, 0.2), 0 5px 10px rgba(0, 0, 0, 0.25), 0 20px 20px rgba(0, 0, 0, 0.15); } text-shadow: var(--r-heading1-text-shadow);
}
/********************************************* /*********************************************
* OTHER * OTHER
*********************************************/ *********************************************/
.reveal p { .reveal p {
margin: 20px 0; margin: var(--r-block-margin) 0;
line-height: 1.3; } line-height: 1.3;
}
/* Remove trailing margins after titles */ /* Remove trailing margins after titles */
.reveal h1:last-child, .reveal h1:last-child,
@@ -117,187 +132,235 @@ section.has-light-background, section.has-light-background h1, section.has-light
.reveal h4:last-child, .reveal h4:last-child,
.reveal h5:last-child, .reveal h5:last-child,
.reveal h6:last-child { .reveal h6:last-child {
margin-bottom: 0; } margin-bottom: 0;
}
/* Ensure certain elements are never larger than the slide itself */ /* Ensure certain elements are never larger than the slide itself */
.reveal img, .reveal img,
.reveal video, .reveal video,
.reveal iframe { .reveal iframe {
max-width: 95%; max-width: 95%;
max-height: 95%; } max-height: 95%;
}
.reveal strong, .reveal strong,
.reveal b { .reveal b {
font-weight: bold; } font-weight: bold;
}
.reveal em { .reveal em {
font-style: italic; } font-style: italic;
}
.reveal ol, .reveal ol,
.reveal dl, .reveal dl,
.reveal ul { .reveal ul {
display: inline-block; display: inline-block;
text-align: left; text-align: left;
margin: 0 0 0 1em; } margin: 0 0 0 1em;
}
.reveal ol { .reveal ol {
list-style-type: decimal; } list-style-type: decimal;
}
.reveal ul { .reveal ul {
list-style-type: disc; } list-style-type: disc;
}
.reveal ul ul { .reveal ul ul {
list-style-type: square; } list-style-type: square;
}
.reveal ul ul ul { .reveal ul ul ul {
list-style-type: circle; } list-style-type: circle;
}
.reveal ul ul, .reveal ul ul,
.reveal ul ol, .reveal ul ol,
.reveal ol ol, .reveal ol ol,
.reveal ol ul { .reveal ol ul {
display: block; display: block;
margin-left: 40px; } margin-left: 40px;
}
.reveal dt { .reveal dt {
font-weight: bold; } font-weight: bold;
}
.reveal dd { .reveal dd {
margin-left: 40px; } margin-left: 40px;
}
.reveal blockquote { .reveal blockquote {
display: block; display: block;
position: relative; position: relative;
width: 70%; width: 70%;
margin: 20px auto; margin: var(--r-block-margin) auto;
padding: 5px; padding: 5px;
font-style: italic; font-style: italic;
background: rgba(255, 255, 255, 0.05); background: rgba(255, 255, 255, 0.05);
box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.2); } box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.2);
}
.reveal blockquote p:first-child, .reveal blockquote p:first-child,
.reveal blockquote p:last-child { .reveal blockquote p:last-child {
display: inline-block; } display: inline-block;
}
.reveal q { .reveal q {
font-style: italic; } font-style: italic;
}
.reveal pre { .reveal pre {
display: block; display: block;
position: relative; position: relative;
width: 90%; width: 90%;
margin: 20px auto; margin: var(--r-block-margin) auto;
text-align: left; text-align: left;
font-size: 0.55em; font-size: 0.55em;
font-family: monospace; font-family: var(--r-code-font);
line-height: 1.2em; line-height: 1.2em;
word-wrap: break-word; word-wrap: break-word;
box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.15); } box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.15);
}
.reveal code { .reveal code {
font-family: monospace; font-family: var(--r-code-font);
text-transform: none; } text-transform: none;
tab-size: 2;
}
.reveal pre code { .reveal pre code {
display: block; display: block;
padding: 5px; padding: 5px;
overflow: auto; overflow: auto;
max-height: 400px; max-height: 400px;
word-wrap: normal; } word-wrap: normal;
}
.reveal .code-wrapper {
white-space: normal;
}
.reveal .code-wrapper code {
white-space: pre;
}
.reveal table { .reveal table {
margin: auto; margin: auto;
border-collapse: collapse; border-collapse: collapse;
border-spacing: 0; } border-spacing: 0;
}
.reveal table th { .reveal table th {
font-weight: bold; } font-weight: bold;
}
.reveal table th, .reveal table th,
.reveal table td { .reveal table td {
text-align: left; text-align: left;
padding: 0.2em 0.5em 0.2em 0.5em; padding: 0.2em 0.5em 0.2em 0.5em;
border-bottom: 1px solid; } border-bottom: 1px solid;
}
.reveal table th[align="center"], .reveal table th[align=center],
.reveal table td[align="center"] { .reveal table td[align=center] {
text-align: center; } text-align: center;
}
.reveal table th[align="right"], .reveal table th[align=right],
.reveal table td[align="right"] { .reveal table td[align=right] {
text-align: right; } text-align: right;
}
.reveal table tbody tr:last-child th, .reveal table tbody tr:last-child th,
.reveal table tbody tr:last-child td { .reveal table tbody tr:last-child td {
border-bottom: none; } border-bottom: none;
}
.reveal sup { .reveal sup {
vertical-align: super; vertical-align: super;
font-size: smaller; } font-size: smaller;
}
.reveal sub { .reveal sub {
vertical-align: sub; vertical-align: sub;
font-size: smaller; } font-size: smaller;
}
.reveal small { .reveal small {
display: inline-block; display: inline-block;
font-size: 0.6em; font-size: 0.6em;
line-height: 1.2em; line-height: 1.2em;
vertical-align: top; } vertical-align: top;
}
.reveal small * { .reveal small * {
vertical-align: top; } vertical-align: top;
}
.reveal img { .reveal img {
margin: 20px 0; } margin: var(--r-block-margin) 0;
}
/********************************************* /*********************************************
* LINKS * LINKS
*********************************************/ *********************************************/
.reveal a { .reveal a {
color: #13DAEC; color: var(--r-link-color);
text-decoration: none; text-decoration: none;
transition: color .15s ease; } transition: color 0.15s ease;
}
.reveal a:hover { .reveal a:hover {
color: #71e9f4; color: var(--r-link-color-hover);
text-shadow: none; text-shadow: none;
border: none; } border: none;
}
.reveal .roll span:after { .reveal .roll span:after {
color: #fff; color: #fff;
background: #0d99a5; } background: var(--r-link-color-dark);
}
/********************************************* /*********************************************
* Frame helper * Frame helper
*********************************************/ *********************************************/
.reveal .r-frame { .reveal .r-frame {
border: 4px solid #eee; border: 4px solid var(--r-main-color);
box-shadow: 0 0 10px rgba(0, 0, 0, 0.15); } box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
}
.reveal a .r-frame { .reveal a .r-frame {
transition: all .15s linear; } transition: all 0.15s linear;
}
.reveal a:hover .r-frame { .reveal a:hover .r-frame {
border-color: #13DAEC; border-color: var(--r-link-color);
box-shadow: 0 0 20px rgba(0, 0, 0, 0.55); } box-shadow: 0 0 20px rgba(0, 0, 0, 0.55);
}
/********************************************* /*********************************************
* NAVIGATION CONTROLS * NAVIGATION CONTROLS
*********************************************/ *********************************************/
.reveal .controls { .reveal .controls {
color: #13DAEC; } color: var(--r-link-color);
}
/********************************************* /*********************************************
* PROGRESS BAR * PROGRESS BAR
*********************************************/ *********************************************/
.reveal .progress { .reveal .progress {
background: rgba(0, 0, 0, 0.2); background: rgba(0, 0, 0, 0.2);
color: #13DAEC; } color: var(--r-link-color);
}
/********************************************* /*********************************************
* PRINT BACKGROUND * PRINT BACKGROUND
*********************************************/ *********************************************/
@media print { @media print {
.backgrounds { .backgrounds {
background-color: #2b2b2b; } } background-color: var(--r-background-color);
}
}
scripts/reveal.js/dist/theme/moon.css
Vendored
+166 -102
View File
@@ -9,63 +9,72 @@
*/ */
html * { html * {
color-profile: sRGB; color-profile: sRGB;
rendering-intent: auto; } rendering-intent: auto;
}
section.has-light-background, section.has-light-background h1, section.has-light-background h2, section.has-light-background h3, section.has-light-background h4, section.has-light-background h5, section.has-light-background h6 { section.has-light-background, section.has-light-background h1, section.has-light-background h2, section.has-light-background h3, section.has-light-background h4, section.has-light-background h5, section.has-light-background h6 {
color: #222; } color: #222;
}
/********************************************* /*********************************************
* GLOBAL STYLES * GLOBAL STYLES
*********************************************/ *********************************************/
:root { :root {
--background-color: #002b36; --r-background-color: #002b36;
--main-font: Lato, sans-serif; --r-main-font: Lato, sans-serif;
--main-font-size: 40px; --r-main-font-size: 40px;
--main-color: #93a1a1; --r-main-color: #93a1a1;
--block-margin: 20px; --r-block-margin: 20px;
--heading-margin: 0 0 20px 0; --r-heading-margin: 0 0 20px 0;
--heading-font: League Gothic, Impact, sans-serif; --r-heading-font: League Gothic, Impact, sans-serif;
--heading-color: #eee8d5; --r-heading-color: #eee8d5;
--heading-line-height: 1.2; --r-heading-line-height: 1.2;
--heading-letter-spacing: normal; --r-heading-letter-spacing: normal;
--heading-text-transform: uppercase; --r-heading-text-transform: uppercase;
--heading-text-shadow: none; --r-heading-text-shadow: none;
--heading-font-weight: normal; --r-heading-font-weight: normal;
--heading1-text-shadow: none; --r-heading1-text-shadow: none;
--heading1-size: 3.77em; --r-heading1-size: 3.77em;
--heading2-size: 2.11em; --r-heading2-size: 2.11em;
--heading3-size: 1.55em; --r-heading3-size: 1.55em;
--heading4-size: 1em; --r-heading4-size: 1em;
--code-font: monospace; --r-code-font: monospace;
--link-color: #268bd2; --r-link-color: #268bd2;
--link-color-hover: #78b9e6; --r-link-color-dark: #1a6091;
--selection-background-color: #d33682; --r-link-color-hover: #78b9e6;
--selection-color: #fff; } --r-selection-background-color: #d33682;
--r-selection-color: #fff;
}
.reveal-viewport { .reveal-viewport {
background: #002b36; background: #002b36;
background-color: #002b36; } background-color: var(--r-background-color);
}
.reveal { .reveal {
font-family: "Lato", sans-serif; font-family: var(--r-main-font);
font-size: 40px; font-size: var(--r-main-font-size);
font-weight: normal; font-weight: normal;
color: #93a1a1; } color: var(--r-main-color);
}
.reveal ::selection { .reveal ::selection {
color: #fff; color: var(--r-selection-color);
background: #d33682; background: var(--r-selection-background-color);
text-shadow: none; } text-shadow: none;
}
.reveal ::-moz-selection { .reveal ::-moz-selection {
color: #fff; color: var(--r-selection-color);
background: #d33682; background: var(--r-selection-background-color);
text-shadow: none; } text-shadow: none;
}
.reveal .slides section, .reveal .slides section,
.reveal .slides section > section { .reveal .slides section > section {
line-height: 1.3; line-height: 1.3;
font-weight: inherit; } font-weight: inherit;
}
/********************************************* /*********************************************
* HEADERS * HEADERS
@@ -76,37 +85,44 @@ section.has-light-background, section.has-light-background h1, section.has-light
.reveal h4, .reveal h4,
.reveal h5, .reveal h5,
.reveal h6 { .reveal h6 {
margin: 0 0 20px 0; margin: var(--r-heading-margin);
color: #eee8d5; color: var(--r-heading-color);
font-family: "League Gothic", Impact, sans-serif; font-family: var(--r-heading-font);
font-weight: normal; font-weight: var(--r-heading-font-weight);
line-height: 1.2; line-height: var(--r-heading-line-height);
letter-spacing: normal; letter-spacing: var(--r-heading-letter-spacing);
text-transform: uppercase; text-transform: var(--r-heading-text-transform);
text-shadow: none; text-shadow: var(--r-heading-text-shadow);
word-wrap: break-word; } word-wrap: break-word;
}
.reveal h1 { .reveal h1 {
font-size: 3.77em; } font-size: var(--r-heading1-size);
}
.reveal h2 { .reveal h2 {
font-size: 2.11em; } font-size: var(--r-heading2-size);
}
.reveal h3 { .reveal h3 {
font-size: 1.55em; } font-size: var(--r-heading3-size);
}
.reveal h4 { .reveal h4 {
font-size: 1em; } font-size: var(--r-heading4-size);
}
.reveal h1 { .reveal h1 {
text-shadow: none; } text-shadow: var(--r-heading1-text-shadow);
}
/********************************************* /*********************************************
* OTHER * OTHER
*********************************************/ *********************************************/
.reveal p { .reveal p {
margin: 20px 0; margin: var(--r-block-margin) 0;
line-height: 1.3; } line-height: 1.3;
}
/* Remove trailing margins after titles */ /* Remove trailing margins after titles */
.reveal h1:last-child, .reveal h1:last-child,
@@ -115,187 +131,235 @@ section.has-light-background, section.has-light-background h1, section.has-light
.reveal h4:last-child, .reveal h4:last-child,
.reveal h5:last-child, .reveal h5:last-child,
.reveal h6:last-child { .reveal h6:last-child {
margin-bottom: 0; } margin-bottom: 0;
}
/* Ensure certain elements are never larger than the slide itself */ /* Ensure certain elements are never larger than the slide itself */
.reveal img, .reveal img,
.reveal video, .reveal video,
.reveal iframe { .reveal iframe {
max-width: 95%; max-width: 95%;
max-height: 95%; } max-height: 95%;
}
.reveal strong, .reveal strong,
.reveal b { .reveal b {
font-weight: bold; } font-weight: bold;
}
.reveal em { .reveal em {
font-style: italic; } font-style: italic;
}
.reveal ol, .reveal ol,
.reveal dl, .reveal dl,
.reveal ul { .reveal ul {
display: inline-block; display: inline-block;
text-align: left; text-align: left;
margin: 0 0 0 1em; } margin: 0 0 0 1em;
}
.reveal ol { .reveal ol {
list-style-type: decimal; } list-style-type: decimal;
}
.reveal ul { .reveal ul {
list-style-type: disc; } list-style-type: disc;
}
.reveal ul ul { .reveal ul ul {
list-style-type: square; } list-style-type: square;
}
.reveal ul ul ul { .reveal ul ul ul {
list-style-type: circle; } list-style-type: circle;
}
.reveal ul ul, .reveal ul ul,
.reveal ul ol, .reveal ul ol,
.reveal ol ol, .reveal ol ol,
.reveal ol ul { .reveal ol ul {
display: block; display: block;
margin-left: 40px; } margin-left: 40px;
}
.reveal dt { .reveal dt {
font-weight: bold; } font-weight: bold;
}
.reveal dd { .reveal dd {
margin-left: 40px; } margin-left: 40px;
}
.reveal blockquote { .reveal blockquote {
display: block; display: block;
position: relative; position: relative;
width: 70%; width: 70%;
margin: 20px auto; margin: var(--r-block-margin) auto;
padding: 5px; padding: 5px;
font-style: italic; font-style: italic;
background: rgba(255, 255, 255, 0.05); background: rgba(255, 255, 255, 0.05);
box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.2); } box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.2);
}
.reveal blockquote p:first-child, .reveal blockquote p:first-child,
.reveal blockquote p:last-child { .reveal blockquote p:last-child {
display: inline-block; } display: inline-block;
}
.reveal q { .reveal q {
font-style: italic; } font-style: italic;
}
.reveal pre { .reveal pre {
display: block; display: block;
position: relative; position: relative;
width: 90%; width: 90%;
margin: 20px auto; margin: var(--r-block-margin) auto;
text-align: left; text-align: left;
font-size: 0.55em; font-size: 0.55em;
font-family: monospace; font-family: var(--r-code-font);
line-height: 1.2em; line-height: 1.2em;
word-wrap: break-word; word-wrap: break-word;
box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.15); } box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.15);
}
.reveal code { .reveal code {
font-family: monospace; font-family: var(--r-code-font);
text-transform: none; } text-transform: none;
tab-size: 2;
}
.reveal pre code { .reveal pre code {
display: block; display: block;
padding: 5px; padding: 5px;
overflow: auto; overflow: auto;
max-height: 400px; max-height: 400px;
word-wrap: normal; } word-wrap: normal;
}
.reveal .code-wrapper {
white-space: normal;
}
.reveal .code-wrapper code {
white-space: pre;
}
.reveal table { .reveal table {
margin: auto; margin: auto;
border-collapse: collapse; border-collapse: collapse;
border-spacing: 0; } border-spacing: 0;
}
.reveal table th { .reveal table th {
font-weight: bold; } font-weight: bold;
}
.reveal table th, .reveal table th,
.reveal table td { .reveal table td {
text-align: left; text-align: left;
padding: 0.2em 0.5em 0.2em 0.5em; padding: 0.2em 0.5em 0.2em 0.5em;
border-bottom: 1px solid; } border-bottom: 1px solid;
}
.reveal table th[align="center"], .reveal table th[align=center],
.reveal table td[align="center"] { .reveal table td[align=center] {
text-align: center; } text-align: center;
}
.reveal table th[align="right"], .reveal table th[align=right],
.reveal table td[align="right"] { .reveal table td[align=right] {
text-align: right; } text-align: right;
}
.reveal table tbody tr:last-child th, .reveal table tbody tr:last-child th,
.reveal table tbody tr:last-child td { .reveal table tbody tr:last-child td {
border-bottom: none; } border-bottom: none;
}
.reveal sup { .reveal sup {
vertical-align: super; vertical-align: super;
font-size: smaller; } font-size: smaller;
}
.reveal sub { .reveal sub {
vertical-align: sub; vertical-align: sub;
font-size: smaller; } font-size: smaller;
}
.reveal small { .reveal small {
display: inline-block; display: inline-block;
font-size: 0.6em; font-size: 0.6em;
line-height: 1.2em; line-height: 1.2em;
vertical-align: top; } vertical-align: top;
}
.reveal small * { .reveal small * {
vertical-align: top; } vertical-align: top;
}
.reveal img { .reveal img {
margin: 20px 0; } margin: var(--r-block-margin) 0;
}
/********************************************* /*********************************************
* LINKS * LINKS
*********************************************/ *********************************************/
.reveal a { .reveal a {
color: #268bd2; color: var(--r-link-color);
text-decoration: none; text-decoration: none;
transition: color .15s ease; } transition: color 0.15s ease;
}
.reveal a:hover { .reveal a:hover {
color: #78b9e6; color: var(--r-link-color-hover);
text-shadow: none; text-shadow: none;
border: none; } border: none;
}
.reveal .roll span:after { .reveal .roll span:after {
color: #fff; color: #fff;
background: #1a6091; } background: var(--r-link-color-dark);
}
/********************************************* /*********************************************
* Frame helper * Frame helper
*********************************************/ *********************************************/
.reveal .r-frame { .reveal .r-frame {
border: 4px solid #93a1a1; border: 4px solid var(--r-main-color);
box-shadow: 0 0 10px rgba(0, 0, 0, 0.15); } box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
}
.reveal a .r-frame { .reveal a .r-frame {
transition: all .15s linear; } transition: all 0.15s linear;
}
.reveal a:hover .r-frame { .reveal a:hover .r-frame {
border-color: #268bd2; border-color: var(--r-link-color);
box-shadow: 0 0 20px rgba(0, 0, 0, 0.55); } box-shadow: 0 0 20px rgba(0, 0, 0, 0.55);
}
/********************************************* /*********************************************
* NAVIGATION CONTROLS * NAVIGATION CONTROLS
*********************************************/ *********************************************/
.reveal .controls { .reveal .controls {
color: #268bd2; } color: var(--r-link-color);
}
/********************************************* /*********************************************
* PROGRESS BAR * PROGRESS BAR
*********************************************/ *********************************************/
.reveal .progress { .reveal .progress {
background: rgba(0, 0, 0, 0.2); background: rgba(0, 0, 0, 0.2);
color: #268bd2; } color: var(--r-link-color);
}
/********************************************* /*********************************************
* PRINT BACKGROUND * PRINT BACKGROUND
*********************************************/ *********************************************/
@media print { @media print {
.backgrounds { .backgrounds {
background-color: #002b36; } } background-color: var(--r-background-color);
}
}
scripts/reveal.js/dist/theme/night.css
Vendored
+164 -101
View File
@@ -6,60 +6,68 @@
@import url(https://fonts.googleapis.com/css?family=Montserrat:700); @import url(https://fonts.googleapis.com/css?family=Montserrat:700);
@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,700,400italic,700italic); @import url(https://fonts.googleapis.com/css?family=Open+Sans:400,700,400italic,700italic);
section.has-light-background, section.has-light-background h1, section.has-light-background h2, section.has-light-background h3, section.has-light-background h4, section.has-light-background h5, section.has-light-background h6 { section.has-light-background, section.has-light-background h1, section.has-light-background h2, section.has-light-background h3, section.has-light-background h4, section.has-light-background h5, section.has-light-background h6 {
color: #222; } color: #222;
}
/********************************************* /*********************************************
* GLOBAL STYLES * GLOBAL STYLES
*********************************************/ *********************************************/
:root { :root {
--background-color: #111; --r-background-color: #111;
--main-font: Open Sans, sans-serif; --r-main-font: Open Sans, sans-serif;
--main-font-size: 40px; --r-main-font-size: 40px;
--main-color: #eee; --r-main-color: #eee;
--block-margin: 20px; --r-block-margin: 20px;
--heading-margin: 0 0 20px 0; --r-heading-margin: 0 0 20px 0;
--heading-font: Montserrat, Impact, sans-serif; --r-heading-font: Montserrat, Impact, sans-serif;
--heading-color: #eee; --r-heading-color: #eee;
--heading-line-height: 1.2; --r-heading-line-height: 1.2;
--heading-letter-spacing: -0.03em; --r-heading-letter-spacing: -0.03em;
--heading-text-transform: none; --r-heading-text-transform: none;
--heading-text-shadow: none; --r-heading-text-shadow: none;
--heading-font-weight: normal; --r-heading-font-weight: normal;
--heading1-text-shadow: none; --r-heading1-text-shadow: none;
--heading1-size: 3.77em; --r-heading1-size: 3.77em;
--heading2-size: 2.11em; --r-heading2-size: 2.11em;
--heading3-size: 1.55em; --r-heading3-size: 1.55em;
--heading4-size: 1em; --r-heading4-size: 1em;
--code-font: monospace; --r-code-font: monospace;
--link-color: #e7ad52; --r-link-color: #e7ad52;
--link-color-hover: #f3d7ac; --r-link-color-dark: #d08a1d;
--selection-background-color: #e7ad52; --r-link-color-hover: #f3d7ac;
--selection-color: #fff; } --r-selection-background-color: #e7ad52;
--r-selection-color: #fff;
}
.reveal-viewport { .reveal-viewport {
background: #111; background: #111;
background-color: #111; } background-color: var(--r-background-color);
}
.reveal { .reveal {
font-family: "Open Sans", sans-serif; font-family: var(--r-main-font);
font-size: 40px; font-size: var(--r-main-font-size);
font-weight: normal; font-weight: normal;
color: #eee; } color: var(--r-main-color);
}
.reveal ::selection { .reveal ::selection {
color: #fff; color: var(--r-selection-color);
background: #e7ad52; background: var(--r-selection-background-color);
text-shadow: none; } text-shadow: none;
}
.reveal ::-moz-selection { .reveal ::-moz-selection {
color: #fff; color: var(--r-selection-color);
background: #e7ad52; background: var(--r-selection-background-color);
text-shadow: none; } text-shadow: none;
}
.reveal .slides section, .reveal .slides section,
.reveal .slides section > section { .reveal .slides section > section {
line-height: 1.3; line-height: 1.3;
font-weight: inherit; } font-weight: inherit;
}
/********************************************* /*********************************************
* HEADERS * HEADERS
@@ -70,37 +78,44 @@ section.has-light-background, section.has-light-background h1, section.has-light
.reveal h4, .reveal h4,
.reveal h5, .reveal h5,
.reveal h6 { .reveal h6 {
margin: 0 0 20px 0; margin: var(--r-heading-margin);
color: #eee; color: var(--r-heading-color);
font-family: "Montserrat", Impact, sans-serif; font-family: var(--r-heading-font);
font-weight: normal; font-weight: var(--r-heading-font-weight);
line-height: 1.2; line-height: var(--r-heading-line-height);
letter-spacing: -0.03em; letter-spacing: var(--r-heading-letter-spacing);
text-transform: none; text-transform: var(--r-heading-text-transform);
text-shadow: none; text-shadow: var(--r-heading-text-shadow);
word-wrap: break-word; } word-wrap: break-word;
}
.reveal h1 { .reveal h1 {
font-size: 3.77em; } font-size: var(--r-heading1-size);
}
.reveal h2 { .reveal h2 {
font-size: 2.11em; } font-size: var(--r-heading2-size);
}
.reveal h3 { .reveal h3 {
font-size: 1.55em; } font-size: var(--r-heading3-size);
}
.reveal h4 { .reveal h4 {
font-size: 1em; } font-size: var(--r-heading4-size);
}
.reveal h1 { .reveal h1 {
text-shadow: none; } text-shadow: var(--r-heading1-text-shadow);
}
/********************************************* /*********************************************
* OTHER * OTHER
*********************************************/ *********************************************/
.reveal p { .reveal p {
margin: 20px 0; margin: var(--r-block-margin) 0;
line-height: 1.3; } line-height: 1.3;
}
/* Remove trailing margins after titles */ /* Remove trailing margins after titles */
.reveal h1:last-child, .reveal h1:last-child,
@@ -109,187 +124,235 @@ section.has-light-background, section.has-light-background h1, section.has-light
.reveal h4:last-child, .reveal h4:last-child,
.reveal h5:last-child, .reveal h5:last-child,
.reveal h6:last-child { .reveal h6:last-child {
margin-bottom: 0; } margin-bottom: 0;
}
/* Ensure certain elements are never larger than the slide itself */ /* Ensure certain elements are never larger than the slide itself */
.reveal img, .reveal img,
.reveal video, .reveal video,
.reveal iframe { .reveal iframe {
max-width: 95%; max-width: 95%;
max-height: 95%; } max-height: 95%;
}
.reveal strong, .reveal strong,
.reveal b { .reveal b {
font-weight: bold; } font-weight: bold;
}
.reveal em { .reveal em {
font-style: italic; } font-style: italic;
}
.reveal ol, .reveal ol,
.reveal dl, .reveal dl,
.reveal ul { .reveal ul {
display: inline-block; display: inline-block;
text-align: left; text-align: left;
margin: 0 0 0 1em; } margin: 0 0 0 1em;
}
.reveal ol { .reveal ol {
list-style-type: decimal; } list-style-type: decimal;
}
.reveal ul { .reveal ul {
list-style-type: disc; } list-style-type: disc;
}
.reveal ul ul { .reveal ul ul {
list-style-type: square; } list-style-type: square;
}
.reveal ul ul ul { .reveal ul ul ul {
list-style-type: circle; } list-style-type: circle;
}
.reveal ul ul, .reveal ul ul,
.reveal ul ol, .reveal ul ol,
.reveal ol ol, .reveal ol ol,
.reveal ol ul { .reveal ol ul {
display: block; display: block;
margin-left: 40px; } margin-left: 40px;
}
.reveal dt { .reveal dt {
font-weight: bold; } font-weight: bold;
}
.reveal dd { .reveal dd {
margin-left: 40px; } margin-left: 40px;
}
.reveal blockquote { .reveal blockquote {
display: block; display: block;
position: relative; position: relative;
width: 70%; width: 70%;
margin: 20px auto; margin: var(--r-block-margin) auto;
padding: 5px; padding: 5px;
font-style: italic; font-style: italic;
background: rgba(255, 255, 255, 0.05); background: rgba(255, 255, 255, 0.05);
box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.2); } box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.2);
}
.reveal blockquote p:first-child, .reveal blockquote p:first-child,
.reveal blockquote p:last-child { .reveal blockquote p:last-child {
display: inline-block; } display: inline-block;
}
.reveal q { .reveal q {
font-style: italic; } font-style: italic;
}
.reveal pre { .reveal pre {
display: block; display: block;
position: relative; position: relative;
width: 90%; width: 90%;
margin: 20px auto; margin: var(--r-block-margin) auto;
text-align: left; text-align: left;
font-size: 0.55em; font-size: 0.55em;
font-family: monospace; font-family: var(--r-code-font);
line-height: 1.2em; line-height: 1.2em;
word-wrap: break-word; word-wrap: break-word;
box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.15); } box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.15);
}
.reveal code { .reveal code {
font-family: monospace; font-family: var(--r-code-font);
text-transform: none; } text-transform: none;
tab-size: 2;
}
.reveal pre code { .reveal pre code {
display: block; display: block;
padding: 5px; padding: 5px;
overflow: auto; overflow: auto;
max-height: 400px; max-height: 400px;
word-wrap: normal; } word-wrap: normal;
}
.reveal .code-wrapper {
white-space: normal;
}
.reveal .code-wrapper code {
white-space: pre;
}
.reveal table { .reveal table {
margin: auto; margin: auto;
border-collapse: collapse; border-collapse: collapse;
border-spacing: 0; } border-spacing: 0;
}
.reveal table th { .reveal table th {
font-weight: bold; } font-weight: bold;
}
.reveal table th, .reveal table th,
.reveal table td { .reveal table td {
text-align: left; text-align: left;
padding: 0.2em 0.5em 0.2em 0.5em; padding: 0.2em 0.5em 0.2em 0.5em;
border-bottom: 1px solid; } border-bottom: 1px solid;
}
.reveal table th[align="center"], .reveal table th[align=center],
.reveal table td[align="center"] { .reveal table td[align=center] {
text-align: center; } text-align: center;
}
.reveal table th[align="right"], .reveal table th[align=right],
.reveal table td[align="right"] { .reveal table td[align=right] {
text-align: right; } text-align: right;
}
.reveal table tbody tr:last-child th, .reveal table tbody tr:last-child th,
.reveal table tbody tr:last-child td { .reveal table tbody tr:last-child td {
border-bottom: none; } border-bottom: none;
}
.reveal sup { .reveal sup {
vertical-align: super; vertical-align: super;
font-size: smaller; } font-size: smaller;
}
.reveal sub { .reveal sub {
vertical-align: sub; vertical-align: sub;
font-size: smaller; } font-size: smaller;
}
.reveal small { .reveal small {
display: inline-block; display: inline-block;
font-size: 0.6em; font-size: 0.6em;
line-height: 1.2em; line-height: 1.2em;
vertical-align: top; } vertical-align: top;
}
.reveal small * { .reveal small * {
vertical-align: top; } vertical-align: top;
}
.reveal img { .reveal img {
margin: 20px 0; } margin: var(--r-block-margin) 0;
}
/********************************************* /*********************************************
* LINKS * LINKS
*********************************************/ *********************************************/
.reveal a { .reveal a {
color: #e7ad52; color: var(--r-link-color);
text-decoration: none; text-decoration: none;
transition: color .15s ease; } transition: color 0.15s ease;
}
.reveal a:hover { .reveal a:hover {
color: #f3d7ac; color: var(--r-link-color-hover);
text-shadow: none; text-shadow: none;
border: none; } border: none;
}
.reveal .roll span:after { .reveal .roll span:after {
color: #fff; color: #fff;
background: #d08a1d; } background: var(--r-link-color-dark);
}
/********************************************* /*********************************************
* Frame helper * Frame helper
*********************************************/ *********************************************/
.reveal .r-frame { .reveal .r-frame {
border: 4px solid #eee; border: 4px solid var(--r-main-color);
box-shadow: 0 0 10px rgba(0, 0, 0, 0.15); } box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
}
.reveal a .r-frame { .reveal a .r-frame {
transition: all .15s linear; } transition: all 0.15s linear;
}
.reveal a:hover .r-frame { .reveal a:hover .r-frame {
border-color: #e7ad52; border-color: var(--r-link-color);
box-shadow: 0 0 20px rgba(0, 0, 0, 0.55); } box-shadow: 0 0 20px rgba(0, 0, 0, 0.55);
}
/********************************************* /*********************************************
* NAVIGATION CONTROLS * NAVIGATION CONTROLS
*********************************************/ *********************************************/
.reveal .controls { .reveal .controls {
color: #e7ad52; } color: var(--r-link-color);
}
/********************************************* /*********************************************
* PROGRESS BAR * PROGRESS BAR
*********************************************/ *********************************************/
.reveal .progress { .reveal .progress {
background: rgba(0, 0, 0, 0.2); background: rgba(0, 0, 0, 0.2);
color: #e7ad52; } color: var(--r-link-color);
}
/********************************************* /*********************************************
* PRINT BACKGROUND * PRINT BACKGROUND
*********************************************/ *********************************************/
@media print { @media print {
.backgrounds { .backgrounds {
background-color: #111; } } background-color: var(--r-background-color);
}
}
scripts/reveal.js/dist/theme/serif.css
Vendored
+166 -102
View File
@@ -5,63 +5,72 @@
* This theme is Copyright (C) 2012-2013 Owen Versteeg, http://owenversteeg.com - it is MIT licensed. * This theme is Copyright (C) 2012-2013 Owen Versteeg, http://owenversteeg.com - it is MIT licensed.
*/ */
.reveal a { .reveal a {
line-height: 1.3em; } line-height: 1.3em;
}
section.has-dark-background, section.has-dark-background h1, section.has-dark-background h2, section.has-dark-background h3, section.has-dark-background h4, section.has-dark-background h5, section.has-dark-background h6 { section.has-dark-background, section.has-dark-background h1, section.has-dark-background h2, section.has-dark-background h3, section.has-dark-background h4, section.has-dark-background h5, section.has-dark-background h6 {
color: #fff; } color: #fff;
}
/********************************************* /*********************************************
* GLOBAL STYLES * GLOBAL STYLES
*********************************************/ *********************************************/
:root { :root {
--background-color: #F0F1EB; --r-background-color: #F0F1EB;
--main-font: Palatino Linotype, Book Antiqua, Palatino, FreeSerif, serif; --r-main-font: Palatino Linotype, Book Antiqua, Palatino, FreeSerif, serif;
--main-font-size: 40px; --r-main-font-size: 40px;
--main-color: #000; --r-main-color: #000;
--block-margin: 20px; --r-block-margin: 20px;
--heading-margin: 0 0 20px 0; --r-heading-margin: 0 0 20px 0;
--heading-font: Palatino Linotype, Book Antiqua, Palatino, FreeSerif, serif; --r-heading-font: Palatino Linotype, Book Antiqua, Palatino, FreeSerif, serif;
--heading-color: #383D3D; --r-heading-color: #383D3D;
--heading-line-height: 1.2; --r-heading-line-height: 1.2;
--heading-letter-spacing: normal; --r-heading-letter-spacing: normal;
--heading-text-transform: none; --r-heading-text-transform: none;
--heading-text-shadow: none; --r-heading-text-shadow: none;
--heading-font-weight: normal; --r-heading-font-weight: normal;
--heading1-text-shadow: none; --r-heading1-text-shadow: none;
--heading1-size: 3.77em; --r-heading1-size: 3.77em;
--heading2-size: 2.11em; --r-heading2-size: 2.11em;
--heading3-size: 1.55em; --r-heading3-size: 1.55em;
--heading4-size: 1em; --r-heading4-size: 1em;
--code-font: monospace; --r-code-font: monospace;
--link-color: #51483D; --r-link-color: #51483D;
--link-color-hover: #8b7c69; --r-link-color-dark: #25211c;
--selection-background-color: #26351C; --r-link-color-hover: #8b7c69;
--selection-color: #fff; } --r-selection-background-color: #26351C;
--r-selection-color: #fff;
}
.reveal-viewport { .reveal-viewport {
background: #F0F1EB; background: #F0F1EB;
background-color: #F0F1EB; } background-color: var(--r-background-color);
}
.reveal { .reveal {
font-family: "Palatino Linotype", "Book Antiqua", Palatino, FreeSerif, serif; font-family: var(--r-main-font);
font-size: 40px; font-size: var(--r-main-font-size);
font-weight: normal; font-weight: normal;
color: #000; } color: var(--r-main-color);
}
.reveal ::selection { .reveal ::selection {
color: #fff; color: var(--r-selection-color);
background: #26351C; background: var(--r-selection-background-color);
text-shadow: none; } text-shadow: none;
}
.reveal ::-moz-selection { .reveal ::-moz-selection {
color: #fff; color: var(--r-selection-color);
background: #26351C; background: var(--r-selection-background-color);
text-shadow: none; } text-shadow: none;
}
.reveal .slides section, .reveal .slides section,
.reveal .slides section > section { .reveal .slides section > section {
line-height: 1.3; line-height: 1.3;
font-weight: inherit; } font-weight: inherit;
}
/********************************************* /*********************************************
* HEADERS * HEADERS
@@ -72,37 +81,44 @@ section.has-dark-background, section.has-dark-background h1, section.has-dark-ba
.reveal h4, .reveal h4,
.reveal h5, .reveal h5,
.reveal h6 { .reveal h6 {
margin: 0 0 20px 0; margin: var(--r-heading-margin);
color: #383D3D; color: var(--r-heading-color);
font-family: "Palatino Linotype", "Book Antiqua", Palatino, FreeSerif, serif; font-family: var(--r-heading-font);
font-weight: normal; font-weight: var(--r-heading-font-weight);
line-height: 1.2; line-height: var(--r-heading-line-height);
letter-spacing: normal; letter-spacing: var(--r-heading-letter-spacing);
text-transform: none; text-transform: var(--r-heading-text-transform);
text-shadow: none; text-shadow: var(--r-heading-text-shadow);
word-wrap: break-word; } word-wrap: break-word;
}
.reveal h1 { .reveal h1 {
font-size: 3.77em; } font-size: var(--r-heading1-size);
}
.reveal h2 { .reveal h2 {
font-size: 2.11em; } font-size: var(--r-heading2-size);
}
.reveal h3 { .reveal h3 {
font-size: 1.55em; } font-size: var(--r-heading3-size);
}
.reveal h4 { .reveal h4 {
font-size: 1em; } font-size: var(--r-heading4-size);
}
.reveal h1 { .reveal h1 {
text-shadow: none; } text-shadow: var(--r-heading1-text-shadow);
}
/********************************************* /*********************************************
* OTHER * OTHER
*********************************************/ *********************************************/
.reveal p { .reveal p {
margin: 20px 0; margin: var(--r-block-margin) 0;
line-height: 1.3; } line-height: 1.3;
}
/* Remove trailing margins after titles */ /* Remove trailing margins after titles */
.reveal h1:last-child, .reveal h1:last-child,
@@ -111,187 +127,235 @@ section.has-dark-background, section.has-dark-background h1, section.has-dark-ba
.reveal h4:last-child, .reveal h4:last-child,
.reveal h5:last-child, .reveal h5:last-child,
.reveal h6:last-child { .reveal h6:last-child {
margin-bottom: 0; } margin-bottom: 0;
}
/* Ensure certain elements are never larger than the slide itself */ /* Ensure certain elements are never larger than the slide itself */
.reveal img, .reveal img,
.reveal video, .reveal video,
.reveal iframe { .reveal iframe {
max-width: 95%; max-width: 95%;
max-height: 95%; } max-height: 95%;
}
.reveal strong, .reveal strong,
.reveal b { .reveal b {
font-weight: bold; } font-weight: bold;
}
.reveal em { .reveal em {
font-style: italic; } font-style: italic;
}
.reveal ol, .reveal ol,
.reveal dl, .reveal dl,
.reveal ul { .reveal ul {
display: inline-block; display: inline-block;
text-align: left; text-align: left;
margin: 0 0 0 1em; } margin: 0 0 0 1em;
}
.reveal ol { .reveal ol {
list-style-type: decimal; } list-style-type: decimal;
}
.reveal ul { .reveal ul {
list-style-type: disc; } list-style-type: disc;
}
.reveal ul ul { .reveal ul ul {
list-style-type: square; } list-style-type: square;
}
.reveal ul ul ul { .reveal ul ul ul {
list-style-type: circle; } list-style-type: circle;
}
.reveal ul ul, .reveal ul ul,
.reveal ul ol, .reveal ul ol,
.reveal ol ol, .reveal ol ol,
.reveal ol ul { .reveal ol ul {
display: block; display: block;
margin-left: 40px; } margin-left: 40px;
}
.reveal dt { .reveal dt {
font-weight: bold; } font-weight: bold;
}
.reveal dd { .reveal dd {
margin-left: 40px; } margin-left: 40px;
}
.reveal blockquote { .reveal blockquote {
display: block; display: block;
position: relative; position: relative;
width: 70%; width: 70%;
margin: 20px auto; margin: var(--r-block-margin) auto;
padding: 5px; padding: 5px;
font-style: italic; font-style: italic;
background: rgba(255, 255, 255, 0.05); background: rgba(255, 255, 255, 0.05);
box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.2); } box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.2);
}
.reveal blockquote p:first-child, .reveal blockquote p:first-child,
.reveal blockquote p:last-child { .reveal blockquote p:last-child {
display: inline-block; } display: inline-block;
}
.reveal q { .reveal q {
font-style: italic; } font-style: italic;
}
.reveal pre { .reveal pre {
display: block; display: block;
position: relative; position: relative;
width: 90%; width: 90%;
margin: 20px auto; margin: var(--r-block-margin) auto;
text-align: left; text-align: left;
font-size: 0.55em; font-size: 0.55em;
font-family: monospace; font-family: var(--r-code-font);
line-height: 1.2em; line-height: 1.2em;
word-wrap: break-word; word-wrap: break-word;
box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.15); } box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.15);
}
.reveal code { .reveal code {
font-family: monospace; font-family: var(--r-code-font);
text-transform: none; } text-transform: none;
tab-size: 2;
}
.reveal pre code { .reveal pre code {
display: block; display: block;
padding: 5px; padding: 5px;
overflow: auto; overflow: auto;
max-height: 400px; max-height: 400px;
word-wrap: normal; } word-wrap: normal;
}
.reveal .code-wrapper {
white-space: normal;
}
.reveal .code-wrapper code {
white-space: pre;
}
.reveal table { .reveal table {
margin: auto; margin: auto;
border-collapse: collapse; border-collapse: collapse;
border-spacing: 0; } border-spacing: 0;
}
.reveal table th { .reveal table th {
font-weight: bold; } font-weight: bold;
}
.reveal table th, .reveal table th,
.reveal table td { .reveal table td {
text-align: left; text-align: left;
padding: 0.2em 0.5em 0.2em 0.5em; padding: 0.2em 0.5em 0.2em 0.5em;
border-bottom: 1px solid; } border-bottom: 1px solid;
}
.reveal table th[align="center"], .reveal table th[align=center],
.reveal table td[align="center"] { .reveal table td[align=center] {
text-align: center; } text-align: center;
}
.reveal table th[align="right"], .reveal table th[align=right],
.reveal table td[align="right"] { .reveal table td[align=right] {
text-align: right; } text-align: right;
}
.reveal table tbody tr:last-child th, .reveal table tbody tr:last-child th,
.reveal table tbody tr:last-child td { .reveal table tbody tr:last-child td {
border-bottom: none; } border-bottom: none;
}
.reveal sup { .reveal sup {
vertical-align: super; vertical-align: super;
font-size: smaller; } font-size: smaller;
}
.reveal sub { .reveal sub {
vertical-align: sub; vertical-align: sub;
font-size: smaller; } font-size: smaller;
}
.reveal small { .reveal small {
display: inline-block; display: inline-block;
font-size: 0.6em; font-size: 0.6em;
line-height: 1.2em; line-height: 1.2em;
vertical-align: top; } vertical-align: top;
}
.reveal small * { .reveal small * {
vertical-align: top; } vertical-align: top;
}
.reveal img { .reveal img {
margin: 20px 0; } margin: var(--r-block-margin) 0;
}
/********************************************* /*********************************************
* LINKS * LINKS
*********************************************/ *********************************************/
.reveal a { .reveal a {
color: #51483D; color: var(--r-link-color);
text-decoration: none; text-decoration: none;
transition: color .15s ease; } transition: color 0.15s ease;
}
.reveal a:hover { .reveal a:hover {
color: #8b7c69; color: var(--r-link-color-hover);
text-shadow: none; text-shadow: none;
border: none; } border: none;
}
.reveal .roll span:after { .reveal .roll span:after {
color: #fff; color: #fff;
background: #25211c; } background: var(--r-link-color-dark);
}
/********************************************* /*********************************************
* Frame helper * Frame helper
*********************************************/ *********************************************/
.reveal .r-frame { .reveal .r-frame {
border: 4px solid #000; border: 4px solid var(--r-main-color);
box-shadow: 0 0 10px rgba(0, 0, 0, 0.15); } box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
}
.reveal a .r-frame { .reveal a .r-frame {
transition: all .15s linear; } transition: all 0.15s linear;
}
.reveal a:hover .r-frame { .reveal a:hover .r-frame {
border-color: #51483D; border-color: var(--r-link-color);
box-shadow: 0 0 20px rgba(0, 0, 0, 0.55); } box-shadow: 0 0 20px rgba(0, 0, 0, 0.55);
}
/********************************************* /*********************************************
* NAVIGATION CONTROLS * NAVIGATION CONTROLS
*********************************************/ *********************************************/
.reveal .controls { .reveal .controls {
color: #51483D; } color: var(--r-link-color);
}
/********************************************* /*********************************************
* PROGRESS BAR * PROGRESS BAR
*********************************************/ *********************************************/
.reveal .progress { .reveal .progress {
background: rgba(0, 0, 0, 0.2); background: rgba(0, 0, 0, 0.2);
color: #51483D; } color: var(--r-link-color);
}
/********************************************* /*********************************************
* PRINT BACKGROUND * PRINT BACKGROUND
*********************************************/ *********************************************/
@media print { @media print {
.backgrounds { .backgrounds {
background-color: #F0F1EB; } } background-color: var(--r-background-color);
}
}
scripts/reveal.js/dist/theme/simple.css
Vendored
+164 -101
View File
@@ -8,60 +8,68 @@
@import url(https://fonts.googleapis.com/css?family=News+Cycle:400,700); @import url(https://fonts.googleapis.com/css?family=News+Cycle:400,700);
@import url(https://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic); @import url(https://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic);
section.has-dark-background, section.has-dark-background h1, section.has-dark-background h2, section.has-dark-background h3, section.has-dark-background h4, section.has-dark-background h5, section.has-dark-background h6 { section.has-dark-background, section.has-dark-background h1, section.has-dark-background h2, section.has-dark-background h3, section.has-dark-background h4, section.has-dark-background h5, section.has-dark-background h6 {
color: #fff; } color: #fff;
}
/********************************************* /*********************************************
* GLOBAL STYLES * GLOBAL STYLES
*********************************************/ *********************************************/
:root { :root {
--background-color: #fff; --r-background-color: #fff;
--main-font: Lato, sans-serif; --r-main-font: Lato, sans-serif;
--main-font-size: 40px; --r-main-font-size: 40px;
--main-color: #000; --r-main-color: #000;
--block-margin: 20px; --r-block-margin: 20px;
--heading-margin: 0 0 20px 0; --r-heading-margin: 0 0 20px 0;
--heading-font: News Cycle, Impact, sans-serif; --r-heading-font: News Cycle, Impact, sans-serif;
--heading-color: #000; --r-heading-color: #000;
--heading-line-height: 1.2; --r-heading-line-height: 1.2;
--heading-letter-spacing: normal; --r-heading-letter-spacing: normal;
--heading-text-transform: none; --r-heading-text-transform: none;
--heading-text-shadow: none; --r-heading-text-shadow: none;
--heading-font-weight: normal; --r-heading-font-weight: normal;
--heading1-text-shadow: none; --r-heading1-text-shadow: none;
--heading1-size: 3.77em; --r-heading1-size: 3.77em;
--heading2-size: 2.11em; --r-heading2-size: 2.11em;
--heading3-size: 1.55em; --r-heading3-size: 1.55em;
--heading4-size: 1em; --r-heading4-size: 1em;
--code-font: monospace; --r-code-font: monospace;
--link-color: #00008B; --r-link-color: #00008B;
--link-color-hover: #0000f1; --r-link-color-dark: #00003f;
--selection-background-color: rgba(0, 0, 0, 0.99); --r-link-color-hover: #0000f1;
--selection-color: #fff; } --r-selection-background-color: rgba(0, 0, 0, 0.99);
--r-selection-color: #fff;
}
.reveal-viewport { .reveal-viewport {
background: #fff; background: #fff;
background-color: #fff; } background-color: var(--r-background-color);
}
.reveal { .reveal {
font-family: "Lato", sans-serif; font-family: var(--r-main-font);
font-size: 40px; font-size: var(--r-main-font-size);
font-weight: normal; font-weight: normal;
color: #000; } color: var(--r-main-color);
}
.reveal ::selection { .reveal ::selection {
color: #fff; color: var(--r-selection-color);
background: rgba(0, 0, 0, 0.99); background: var(--r-selection-background-color);
text-shadow: none; } text-shadow: none;
}
.reveal ::-moz-selection { .reveal ::-moz-selection {
color: #fff; color: var(--r-selection-color);
background: rgba(0, 0, 0, 0.99); background: var(--r-selection-background-color);
text-shadow: none; } text-shadow: none;
}
.reveal .slides section, .reveal .slides section,
.reveal .slides section > section { .reveal .slides section > section {
line-height: 1.3; line-height: 1.3;
font-weight: inherit; } font-weight: inherit;
}
/********************************************* /*********************************************
* HEADERS * HEADERS
@@ -72,37 +80,44 @@ section.has-dark-background, section.has-dark-background h1, section.has-dark-ba
.reveal h4, .reveal h4,
.reveal h5, .reveal h5,
.reveal h6 { .reveal h6 {
margin: 0 0 20px 0; margin: var(--r-heading-margin);
color: #000; color: var(--r-heading-color);
font-family: "News Cycle", Impact, sans-serif; font-family: var(--r-heading-font);
font-weight: normal; font-weight: var(--r-heading-font-weight);
line-height: 1.2; line-height: var(--r-heading-line-height);
letter-spacing: normal; letter-spacing: var(--r-heading-letter-spacing);
text-transform: none; text-transform: var(--r-heading-text-transform);
text-shadow: none; text-shadow: var(--r-heading-text-shadow);
word-wrap: break-word; } word-wrap: break-word;
}
.reveal h1 { .reveal h1 {
font-size: 3.77em; } font-size: var(--r-heading1-size);
}
.reveal h2 { .reveal h2 {
font-size: 2.11em; } font-size: var(--r-heading2-size);
}
.reveal h3 { .reveal h3 {
font-size: 1.55em; } font-size: var(--r-heading3-size);
}
.reveal h4 { .reveal h4 {
font-size: 1em; } font-size: var(--r-heading4-size);
}
.reveal h1 { .reveal h1 {
text-shadow: none; } text-shadow: var(--r-heading1-text-shadow);
}
/********************************************* /*********************************************
* OTHER * OTHER
*********************************************/ *********************************************/
.reveal p { .reveal p {
margin: 20px 0; margin: var(--r-block-margin) 0;
line-height: 1.3; } line-height: 1.3;
}
/* Remove trailing margins after titles */ /* Remove trailing margins after titles */
.reveal h1:last-child, .reveal h1:last-child,
@@ -111,187 +126,235 @@ section.has-dark-background, section.has-dark-background h1, section.has-dark-ba
.reveal h4:last-child, .reveal h4:last-child,
.reveal h5:last-child, .reveal h5:last-child,
.reveal h6:last-child { .reveal h6:last-child {
margin-bottom: 0; } margin-bottom: 0;
}
/* Ensure certain elements are never larger than the slide itself */ /* Ensure certain elements are never larger than the slide itself */
.reveal img, .reveal img,
.reveal video, .reveal video,
.reveal iframe { .reveal iframe {
max-width: 95%; max-width: 95%;
max-height: 95%; } max-height: 95%;
}
.reveal strong, .reveal strong,
.reveal b { .reveal b {
font-weight: bold; } font-weight: bold;
}
.reveal em { .reveal em {
font-style: italic; } font-style: italic;
}
.reveal ol, .reveal ol,
.reveal dl, .reveal dl,
.reveal ul { .reveal ul {
display: inline-block; display: inline-block;
text-align: left; text-align: left;
margin: 0 0 0 1em; } margin: 0 0 0 1em;
}
.reveal ol { .reveal ol {
list-style-type: decimal; } list-style-type: decimal;
}
.reveal ul { .reveal ul {
list-style-type: disc; } list-style-type: disc;
}
.reveal ul ul { .reveal ul ul {
list-style-type: square; } list-style-type: square;
}
.reveal ul ul ul { .reveal ul ul ul {
list-style-type: circle; } list-style-type: circle;
}
.reveal ul ul, .reveal ul ul,
.reveal ul ol, .reveal ul ol,
.reveal ol ol, .reveal ol ol,
.reveal ol ul { .reveal ol ul {
display: block; display: block;
margin-left: 40px; } margin-left: 40px;
}
.reveal dt { .reveal dt {
font-weight: bold; } font-weight: bold;
}
.reveal dd { .reveal dd {
margin-left: 40px; } margin-left: 40px;
}
.reveal blockquote { .reveal blockquote {
display: block; display: block;
position: relative; position: relative;
width: 70%; width: 70%;
margin: 20px auto; margin: var(--r-block-margin) auto;
padding: 5px; padding: 5px;
font-style: italic; font-style: italic;
background: rgba(255, 255, 255, 0.05); background: rgba(255, 255, 255, 0.05);
box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.2); } box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.2);
}
.reveal blockquote p:first-child, .reveal blockquote p:first-child,
.reveal blockquote p:last-child { .reveal blockquote p:last-child {
display: inline-block; } display: inline-block;
}
.reveal q { .reveal q {
font-style: italic; } font-style: italic;
}
.reveal pre { .reveal pre {
display: block; display: block;
position: relative; position: relative;
width: 90%; width: 90%;
margin: 20px auto; margin: var(--r-block-margin) auto;
text-align: left; text-align: left;
font-size: 0.55em; font-size: 0.55em;
font-family: monospace; font-family: var(--r-code-font);
line-height: 1.2em; line-height: 1.2em;
word-wrap: break-word; word-wrap: break-word;
box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.15); } box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.15);
}
.reveal code { .reveal code {
font-family: monospace; font-family: var(--r-code-font);
text-transform: none; } text-transform: none;
tab-size: 2;
}
.reveal pre code { .reveal pre code {
display: block; display: block;
padding: 5px; padding: 5px;
overflow: auto; overflow: auto;
max-height: 400px; max-height: 400px;
word-wrap: normal; } word-wrap: normal;
}
.reveal .code-wrapper {
white-space: normal;
}
.reveal .code-wrapper code {
white-space: pre;
}
.reveal table { .reveal table {
margin: auto; margin: auto;
border-collapse: collapse; border-collapse: collapse;
border-spacing: 0; } border-spacing: 0;
}
.reveal table th { .reveal table th {
font-weight: bold; } font-weight: bold;
}
.reveal table th, .reveal table th,
.reveal table td { .reveal table td {
text-align: left; text-align: left;
padding: 0.2em 0.5em 0.2em 0.5em; padding: 0.2em 0.5em 0.2em 0.5em;
border-bottom: 1px solid; } border-bottom: 1px solid;
}
.reveal table th[align="center"], .reveal table th[align=center],
.reveal table td[align="center"] { .reveal table td[align=center] {
text-align: center; } text-align: center;
}
.reveal table th[align="right"], .reveal table th[align=right],
.reveal table td[align="right"] { .reveal table td[align=right] {
text-align: right; } text-align: right;
}
.reveal table tbody tr:last-child th, .reveal table tbody tr:last-child th,
.reveal table tbody tr:last-child td { .reveal table tbody tr:last-child td {
border-bottom: none; } border-bottom: none;
}
.reveal sup { .reveal sup {
vertical-align: super; vertical-align: super;
font-size: smaller; } font-size: smaller;
}
.reveal sub { .reveal sub {
vertical-align: sub; vertical-align: sub;
font-size: smaller; } font-size: smaller;
}
.reveal small { .reveal small {
display: inline-block; display: inline-block;
font-size: 0.6em; font-size: 0.6em;
line-height: 1.2em; line-height: 1.2em;
vertical-align: top; } vertical-align: top;
}
.reveal small * { .reveal small * {
vertical-align: top; } vertical-align: top;
}
.reveal img { .reveal img {
margin: 20px 0; } margin: var(--r-block-margin) 0;
}
/********************************************* /*********************************************
* LINKS * LINKS
*********************************************/ *********************************************/
.reveal a { .reveal a {
color: #00008B; color: var(--r-link-color);
text-decoration: none; text-decoration: none;
transition: color .15s ease; } transition: color 0.15s ease;
}
.reveal a:hover { .reveal a:hover {
color: #0000f1; color: var(--r-link-color-hover);
text-shadow: none; text-shadow: none;
border: none; } border: none;
}
.reveal .roll span:after { .reveal .roll span:after {
color: #fff; color: #fff;
background: #00003f; } background: var(--r-link-color-dark);
}
/********************************************* /*********************************************
* Frame helper * Frame helper
*********************************************/ *********************************************/
.reveal .r-frame { .reveal .r-frame {
border: 4px solid #000; border: 4px solid var(--r-main-color);
box-shadow: 0 0 10px rgba(0, 0, 0, 0.15); } box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
}
.reveal a .r-frame { .reveal a .r-frame {
transition: all .15s linear; } transition: all 0.15s linear;
}
.reveal a:hover .r-frame { .reveal a:hover .r-frame {
border-color: #00008B; border-color: var(--r-link-color);
box-shadow: 0 0 20px rgba(0, 0, 0, 0.55); } box-shadow: 0 0 20px rgba(0, 0, 0, 0.55);
}
/********************************************* /*********************************************
* NAVIGATION CONTROLS * NAVIGATION CONTROLS
*********************************************/ *********************************************/
.reveal .controls { .reveal .controls {
color: #00008B; } color: var(--r-link-color);
}
/********************************************* /*********************************************
* PROGRESS BAR * PROGRESS BAR
*********************************************/ *********************************************/
.reveal .progress { .reveal .progress {
background: rgba(0, 0, 0, 0.2); background: rgba(0, 0, 0, 0.2);
color: #00008B; } color: var(--r-link-color);
}
/********************************************* /*********************************************
* PRINT BACKGROUND * PRINT BACKGROUND
*********************************************/ *********************************************/
@media print { @media print {
.backgrounds { .backgrounds {
background-color: #fff; } } background-color: var(--r-background-color);
}
}
scripts/reveal.js/dist/theme/sky.css
Vendored
+166 -102
View File
@@ -6,38 +6,42 @@
@import url(https://fonts.googleapis.com/css?family=Quicksand:400,700,400italic,700italic); @import url(https://fonts.googleapis.com/css?family=Quicksand:400,700,400italic,700italic);
@import url(https://fonts.googleapis.com/css?family=Open+Sans:400italic,700italic,400,700); @import url(https://fonts.googleapis.com/css?family=Open+Sans:400italic,700italic,400,700);
.reveal a { .reveal a {
line-height: 1.3em; } line-height: 1.3em;
}
section.has-dark-background, section.has-dark-background h1, section.has-dark-background h2, section.has-dark-background h3, section.has-dark-background h4, section.has-dark-background h5, section.has-dark-background h6 { section.has-dark-background, section.has-dark-background h1, section.has-dark-background h2, section.has-dark-background h3, section.has-dark-background h4, section.has-dark-background h5, section.has-dark-background h6 {
color: #fff; } color: #fff;
}
/********************************************* /*********************************************
* GLOBAL STYLES * GLOBAL STYLES
*********************************************/ *********************************************/
:root { :root {
--background-color: #f7fbfc; --r-background-color: #f7fbfc;
--main-font: Open Sans, sans-serif; --r-main-font: Open Sans, sans-serif;
--main-font-size: 40px; --r-main-font-size: 40px;
--main-color: #333; --r-main-color: #333;
--block-margin: 20px; --r-block-margin: 20px;
--heading-margin: 0 0 20px 0; --r-heading-margin: 0 0 20px 0;
--heading-font: Quicksand, sans-serif; --r-heading-font: Quicksand, sans-serif;
--heading-color: #333; --r-heading-color: #333;
--heading-line-height: 1.2; --r-heading-line-height: 1.2;
--heading-letter-spacing: -0.08em; --r-heading-letter-spacing: -0.08em;
--heading-text-transform: uppercase; --r-heading-text-transform: uppercase;
--heading-text-shadow: none; --r-heading-text-shadow: none;
--heading-font-weight: normal; --r-heading-font-weight: normal;
--heading1-text-shadow: none; --r-heading1-text-shadow: none;
--heading1-size: 3.77em; --r-heading1-size: 3.77em;
--heading2-size: 2.11em; --r-heading2-size: 2.11em;
--heading3-size: 1.55em; --r-heading3-size: 1.55em;
--heading4-size: 1em; --r-heading4-size: 1em;
--code-font: monospace; --r-code-font: monospace;
--link-color: #3b759e; --r-link-color: #3b759e;
--link-color-hover: #74a7cb; --r-link-color-dark: #264c66;
--selection-background-color: #134674; --r-link-color-hover: #74a7cb;
--selection-color: #fff; } --r-selection-background-color: #134674;
--r-selection-color: #fff;
}
.reveal-viewport { .reveal-viewport {
background: #add9e4; background: #add9e4;
@@ -47,28 +51,33 @@ section.has-dark-background, section.has-dark-background h1, section.has-dark-ba
background: -o-radial-gradient(center, circle cover, #f7fbfc 0%, #add9e4 100%); background: -o-radial-gradient(center, circle cover, #f7fbfc 0%, #add9e4 100%);
background: -ms-radial-gradient(center, circle cover, #f7fbfc 0%, #add9e4 100%); background: -ms-radial-gradient(center, circle cover, #f7fbfc 0%, #add9e4 100%);
background: radial-gradient(center, circle cover, #f7fbfc 0%, #add9e4 100%); background: radial-gradient(center, circle cover, #f7fbfc 0%, #add9e4 100%);
background-color: #f7fbfc; } background-color: var(--r-background-color);
}
.reveal { .reveal {
font-family: "Open Sans", sans-serif; font-family: var(--r-main-font);
font-size: 40px; font-size: var(--r-main-font-size);
font-weight: normal; font-weight: normal;
color: #333; } color: var(--r-main-color);
}
.reveal ::selection { .reveal ::selection {
color: #fff; color: var(--r-selection-color);
background: #134674; background: var(--r-selection-background-color);
text-shadow: none; } text-shadow: none;
}
.reveal ::-moz-selection { .reveal ::-moz-selection {
color: #fff; color: var(--r-selection-color);
background: #134674; background: var(--r-selection-background-color);
text-shadow: none; } text-shadow: none;
}
.reveal .slides section, .reveal .slides section,
.reveal .slides section > section { .reveal .slides section > section {
line-height: 1.3; line-height: 1.3;
font-weight: inherit; } font-weight: inherit;
}
/********************************************* /*********************************************
* HEADERS * HEADERS
@@ -79,37 +88,44 @@ section.has-dark-background, section.has-dark-background h1, section.has-dark-ba
.reveal h4, .reveal h4,
.reveal h5, .reveal h5,
.reveal h6 { .reveal h6 {
margin: 0 0 20px 0; margin: var(--r-heading-margin);
color: #333; color: var(--r-heading-color);
font-family: "Quicksand", sans-serif; font-family: var(--r-heading-font);
font-weight: normal; font-weight: var(--r-heading-font-weight);
line-height: 1.2; line-height: var(--r-heading-line-height);
letter-spacing: -0.08em; letter-spacing: var(--r-heading-letter-spacing);
text-transform: uppercase; text-transform: var(--r-heading-text-transform);
text-shadow: none; text-shadow: var(--r-heading-text-shadow);
word-wrap: break-word; } word-wrap: break-word;
}
.reveal h1 { .reveal h1 {
font-size: 3.77em; } font-size: var(--r-heading1-size);
}
.reveal h2 { .reveal h2 {
font-size: 2.11em; } font-size: var(--r-heading2-size);
}
.reveal h3 { .reveal h3 {
font-size: 1.55em; } font-size: var(--r-heading3-size);
}
.reveal h4 { .reveal h4 {
font-size: 1em; } font-size: var(--r-heading4-size);
}
.reveal h1 { .reveal h1 {
text-shadow: none; } text-shadow: var(--r-heading1-text-shadow);
}
/********************************************* /*********************************************
* OTHER * OTHER
*********************************************/ *********************************************/
.reveal p { .reveal p {
margin: 20px 0; margin: var(--r-block-margin) 0;
line-height: 1.3; } line-height: 1.3;
}
/* Remove trailing margins after titles */ /* Remove trailing margins after titles */
.reveal h1:last-child, .reveal h1:last-child,
@@ -118,187 +134,235 @@ section.has-dark-background, section.has-dark-background h1, section.has-dark-ba
.reveal h4:last-child, .reveal h4:last-child,
.reveal h5:last-child, .reveal h5:last-child,
.reveal h6:last-child { .reveal h6:last-child {
margin-bottom: 0; } margin-bottom: 0;
}
/* Ensure certain elements are never larger than the slide itself */ /* Ensure certain elements are never larger than the slide itself */
.reveal img, .reveal img,
.reveal video, .reveal video,
.reveal iframe { .reveal iframe {
max-width: 95%; max-width: 95%;
max-height: 95%; } max-height: 95%;
}
.reveal strong, .reveal strong,
.reveal b { .reveal b {
font-weight: bold; } font-weight: bold;
}
.reveal em { .reveal em {
font-style: italic; } font-style: italic;
}
.reveal ol, .reveal ol,
.reveal dl, .reveal dl,
.reveal ul { .reveal ul {
display: inline-block; display: inline-block;
text-align: left; text-align: left;
margin: 0 0 0 1em; } margin: 0 0 0 1em;
}
.reveal ol { .reveal ol {
list-style-type: decimal; } list-style-type: decimal;
}
.reveal ul { .reveal ul {
list-style-type: disc; } list-style-type: disc;
}
.reveal ul ul { .reveal ul ul {
list-style-type: square; } list-style-type: square;
}
.reveal ul ul ul { .reveal ul ul ul {
list-style-type: circle; } list-style-type: circle;
}
.reveal ul ul, .reveal ul ul,
.reveal ul ol, .reveal ul ol,
.reveal ol ol, .reveal ol ol,
.reveal ol ul { .reveal ol ul {
display: block; display: block;
margin-left: 40px; } margin-left: 40px;
}
.reveal dt { .reveal dt {
font-weight: bold; } font-weight: bold;
}
.reveal dd { .reveal dd {
margin-left: 40px; } margin-left: 40px;
}
.reveal blockquote { .reveal blockquote {
display: block; display: block;
position: relative; position: relative;
width: 70%; width: 70%;
margin: 20px auto; margin: var(--r-block-margin) auto;
padding: 5px; padding: 5px;
font-style: italic; font-style: italic;
background: rgba(255, 255, 255, 0.05); background: rgba(255, 255, 255, 0.05);
box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.2); } box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.2);
}
.reveal blockquote p:first-child, .reveal blockquote p:first-child,
.reveal blockquote p:last-child { .reveal blockquote p:last-child {
display: inline-block; } display: inline-block;
}
.reveal q { .reveal q {
font-style: italic; } font-style: italic;
}
.reveal pre { .reveal pre {
display: block; display: block;
position: relative; position: relative;
width: 90%; width: 90%;
margin: 20px auto; margin: var(--r-block-margin) auto;
text-align: left; text-align: left;
font-size: 0.55em; font-size: 0.55em;
font-family: monospace; font-family: var(--r-code-font);
line-height: 1.2em; line-height: 1.2em;
word-wrap: break-word; word-wrap: break-word;
box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.15); } box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.15);
}
.reveal code { .reveal code {
font-family: monospace; font-family: var(--r-code-font);
text-transform: none; } text-transform: none;
tab-size: 2;
}
.reveal pre code { .reveal pre code {
display: block; display: block;
padding: 5px; padding: 5px;
overflow: auto; overflow: auto;
max-height: 400px; max-height: 400px;
word-wrap: normal; } word-wrap: normal;
}
.reveal .code-wrapper {
white-space: normal;
}
.reveal .code-wrapper code {
white-space: pre;
}
.reveal table { .reveal table {
margin: auto; margin: auto;
border-collapse: collapse; border-collapse: collapse;
border-spacing: 0; } border-spacing: 0;
}
.reveal table th { .reveal table th {
font-weight: bold; } font-weight: bold;
}
.reveal table th, .reveal table th,
.reveal table td { .reveal table td {
text-align: left; text-align: left;
padding: 0.2em 0.5em 0.2em 0.5em; padding: 0.2em 0.5em 0.2em 0.5em;
border-bottom: 1px solid; } border-bottom: 1px solid;
}
.reveal table th[align="center"], .reveal table th[align=center],
.reveal table td[align="center"] { .reveal table td[align=center] {
text-align: center; } text-align: center;
}
.reveal table th[align="right"], .reveal table th[align=right],
.reveal table td[align="right"] { .reveal table td[align=right] {
text-align: right; } text-align: right;
}
.reveal table tbody tr:last-child th, .reveal table tbody tr:last-child th,
.reveal table tbody tr:last-child td { .reveal table tbody tr:last-child td {
border-bottom: none; } border-bottom: none;
}
.reveal sup { .reveal sup {
vertical-align: super; vertical-align: super;
font-size: smaller; } font-size: smaller;
}
.reveal sub { .reveal sub {
vertical-align: sub; vertical-align: sub;
font-size: smaller; } font-size: smaller;
}
.reveal small { .reveal small {
display: inline-block; display: inline-block;
font-size: 0.6em; font-size: 0.6em;
line-height: 1.2em; line-height: 1.2em;
vertical-align: top; } vertical-align: top;
}
.reveal small * { .reveal small * {
vertical-align: top; } vertical-align: top;
}
.reveal img { .reveal img {
margin: 20px 0; } margin: var(--r-block-margin) 0;
}
/********************************************* /*********************************************
* LINKS * LINKS
*********************************************/ *********************************************/
.reveal a { .reveal a {
color: #3b759e; color: var(--r-link-color);
text-decoration: none; text-decoration: none;
transition: color .15s ease; } transition: color 0.15s ease;
}
.reveal a:hover { .reveal a:hover {
color: #74a7cb; color: var(--r-link-color-hover);
text-shadow: none; text-shadow: none;
border: none; } border: none;
}
.reveal .roll span:after { .reveal .roll span:after {
color: #fff; color: #fff;
background: #264c66; } background: var(--r-link-color-dark);
}
/********************************************* /*********************************************
* Frame helper * Frame helper
*********************************************/ *********************************************/
.reveal .r-frame { .reveal .r-frame {
border: 4px solid #333; border: 4px solid var(--r-main-color);
box-shadow: 0 0 10px rgba(0, 0, 0, 0.15); } box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
}
.reveal a .r-frame { .reveal a .r-frame {
transition: all .15s linear; } transition: all 0.15s linear;
}
.reveal a:hover .r-frame { .reveal a:hover .r-frame {
border-color: #3b759e; border-color: var(--r-link-color);
box-shadow: 0 0 20px rgba(0, 0, 0, 0.55); } box-shadow: 0 0 20px rgba(0, 0, 0, 0.55);
}
/********************************************* /*********************************************
* NAVIGATION CONTROLS * NAVIGATION CONTROLS
*********************************************/ *********************************************/
.reveal .controls { .reveal .controls {
color: #3b759e; } color: var(--r-link-color);
}
/********************************************* /*********************************************
* PROGRESS BAR * PROGRESS BAR
*********************************************/ *********************************************/
.reveal .progress { .reveal .progress {
background: rgba(0, 0, 0, 0.2); background: rgba(0, 0, 0, 0.2);
color: #3b759e; } color: var(--r-link-color);
}
/********************************************* /*********************************************
* PRINT BACKGROUND * PRINT BACKGROUND
*********************************************/ *********************************************/
@media print { @media print {
.backgrounds { .backgrounds {
background-color: #f7fbfc; } } background-color: var(--r-background-color);
}
}
scripts/reveal.js/dist/theme/solarized.css
Vendored
+164 -101
View File
@@ -9,60 +9,68 @@
*/ */
html * { html * {
color-profile: sRGB; color-profile: sRGB;
rendering-intent: auto; } rendering-intent: auto;
}
/********************************************* /*********************************************
* GLOBAL STYLES * GLOBAL STYLES
*********************************************/ *********************************************/
:root { :root {
--background-color: #fdf6e3; --r-background-color: #fdf6e3;
--main-font: Lato, sans-serif; --r-main-font: Lato, sans-serif;
--main-font-size: 40px; --r-main-font-size: 40px;
--main-color: #657b83; --r-main-color: #657b83;
--block-margin: 20px; --r-block-margin: 20px;
--heading-margin: 0 0 20px 0; --r-heading-margin: 0 0 20px 0;
--heading-font: League Gothic, Impact, sans-serif; --r-heading-font: League Gothic, Impact, sans-serif;
--heading-color: #586e75; --r-heading-color: #586e75;
--heading-line-height: 1.2; --r-heading-line-height: 1.2;
--heading-letter-spacing: normal; --r-heading-letter-spacing: normal;
--heading-text-transform: uppercase; --r-heading-text-transform: uppercase;
--heading-text-shadow: none; --r-heading-text-shadow: none;
--heading-font-weight: normal; --r-heading-font-weight: normal;
--heading1-text-shadow: none; --r-heading1-text-shadow: none;
--heading1-size: 3.77em; --r-heading1-size: 3.77em;
--heading2-size: 2.11em; --r-heading2-size: 2.11em;
--heading3-size: 1.55em; --r-heading3-size: 1.55em;
--heading4-size: 1em; --r-heading4-size: 1em;
--code-font: monospace; --r-code-font: monospace;
--link-color: #268bd2; --r-link-color: #268bd2;
--link-color-hover: #78b9e6; --r-link-color-dark: #1a6091;
--selection-background-color: #d33682; --r-link-color-hover: #78b9e6;
--selection-color: #fff; } --r-selection-background-color: #d33682;
--r-selection-color: #fff;
}
.reveal-viewport { .reveal-viewport {
background: #fdf6e3; background: #fdf6e3;
background-color: #fdf6e3; } background-color: var(--r-background-color);
}
.reveal { .reveal {
font-family: "Lato", sans-serif; font-family: var(--r-main-font);
font-size: 40px; font-size: var(--r-main-font-size);
font-weight: normal; font-weight: normal;
color: #657b83; } color: var(--r-main-color);
}
.reveal ::selection { .reveal ::selection {
color: #fff; color: var(--r-selection-color);
background: #d33682; background: var(--r-selection-background-color);
text-shadow: none; } text-shadow: none;
}
.reveal ::-moz-selection { .reveal ::-moz-selection {
color: #fff; color: var(--r-selection-color);
background: #d33682; background: var(--r-selection-background-color);
text-shadow: none; } text-shadow: none;
}
.reveal .slides section, .reveal .slides section,
.reveal .slides section > section { .reveal .slides section > section {
line-height: 1.3; line-height: 1.3;
font-weight: inherit; } font-weight: inherit;
}
/********************************************* /*********************************************
* HEADERS * HEADERS
@@ -73,37 +81,44 @@ html * {
.reveal h4, .reveal h4,
.reveal h5, .reveal h5,
.reveal h6 { .reveal h6 {
margin: 0 0 20px 0; margin: var(--r-heading-margin);
color: #586e75; color: var(--r-heading-color);
font-family: "League Gothic", Impact, sans-serif; font-family: var(--r-heading-font);
font-weight: normal; font-weight: var(--r-heading-font-weight);
line-height: 1.2; line-height: var(--r-heading-line-height);
letter-spacing: normal; letter-spacing: var(--r-heading-letter-spacing);
text-transform: uppercase; text-transform: var(--r-heading-text-transform);
text-shadow: none; text-shadow: var(--r-heading-text-shadow);
word-wrap: break-word; } word-wrap: break-word;
}
.reveal h1 { .reveal h1 {
font-size: 3.77em; } font-size: var(--r-heading1-size);
}
.reveal h2 { .reveal h2 {
font-size: 2.11em; } font-size: var(--r-heading2-size);
}
.reveal h3 { .reveal h3 {
font-size: 1.55em; } font-size: var(--r-heading3-size);
}
.reveal h4 { .reveal h4 {
font-size: 1em; } font-size: var(--r-heading4-size);
}
.reveal h1 { .reveal h1 {
text-shadow: none; } text-shadow: var(--r-heading1-text-shadow);
}
/********************************************* /*********************************************
* OTHER * OTHER
*********************************************/ *********************************************/
.reveal p { .reveal p {
margin: 20px 0; margin: var(--r-block-margin) 0;
line-height: 1.3; } line-height: 1.3;
}
/* Remove trailing margins after titles */ /* Remove trailing margins after titles */
.reveal h1:last-child, .reveal h1:last-child,
@@ -112,187 +127,235 @@ html * {
.reveal h4:last-child, .reveal h4:last-child,
.reveal h5:last-child, .reveal h5:last-child,
.reveal h6:last-child { .reveal h6:last-child {
margin-bottom: 0; } margin-bottom: 0;
}
/* Ensure certain elements are never larger than the slide itself */ /* Ensure certain elements are never larger than the slide itself */
.reveal img, .reveal img,
.reveal video, .reveal video,
.reveal iframe { .reveal iframe {
max-width: 95%; max-width: 95%;
max-height: 95%; } max-height: 95%;
}
.reveal strong, .reveal strong,
.reveal b { .reveal b {
font-weight: bold; } font-weight: bold;
}
.reveal em { .reveal em {
font-style: italic; } font-style: italic;
}
.reveal ol, .reveal ol,
.reveal dl, .reveal dl,
.reveal ul { .reveal ul {
display: inline-block; display: inline-block;
text-align: left; text-align: left;
margin: 0 0 0 1em; } margin: 0 0 0 1em;
}
.reveal ol { .reveal ol {
list-style-type: decimal; } list-style-type: decimal;
}
.reveal ul { .reveal ul {
list-style-type: disc; } list-style-type: disc;
}
.reveal ul ul { .reveal ul ul {
list-style-type: square; } list-style-type: square;
}
.reveal ul ul ul { .reveal ul ul ul {
list-style-type: circle; } list-style-type: circle;
}
.reveal ul ul, .reveal ul ul,
.reveal ul ol, .reveal ul ol,
.reveal ol ol, .reveal ol ol,
.reveal ol ul { .reveal ol ul {
display: block; display: block;
margin-left: 40px; } margin-left: 40px;
}
.reveal dt { .reveal dt {
font-weight: bold; } font-weight: bold;
}
.reveal dd { .reveal dd {
margin-left: 40px; } margin-left: 40px;
}
.reveal blockquote { .reveal blockquote {
display: block; display: block;
position: relative; position: relative;
width: 70%; width: 70%;
margin: 20px auto; margin: var(--r-block-margin) auto;
padding: 5px; padding: 5px;
font-style: italic; font-style: italic;
background: rgba(255, 255, 255, 0.05); background: rgba(255, 255, 255, 0.05);
box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.2); } box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.2);
}
.reveal blockquote p:first-child, .reveal blockquote p:first-child,
.reveal blockquote p:last-child { .reveal blockquote p:last-child {
display: inline-block; } display: inline-block;
}
.reveal q { .reveal q {
font-style: italic; } font-style: italic;
}
.reveal pre { .reveal pre {
display: block; display: block;
position: relative; position: relative;
width: 90%; width: 90%;
margin: 20px auto; margin: var(--r-block-margin) auto;
text-align: left; text-align: left;
font-size: 0.55em; font-size: 0.55em;
font-family: monospace; font-family: var(--r-code-font);
line-height: 1.2em; line-height: 1.2em;
word-wrap: break-word; word-wrap: break-word;
box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.15); } box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.15);
}
.reveal code { .reveal code {
font-family: monospace; font-family: var(--r-code-font);
text-transform: none; } text-transform: none;
tab-size: 2;
}
.reveal pre code { .reveal pre code {
display: block; display: block;
padding: 5px; padding: 5px;
overflow: auto; overflow: auto;
max-height: 400px; max-height: 400px;
word-wrap: normal; } word-wrap: normal;
}
.reveal .code-wrapper {
white-space: normal;
}
.reveal .code-wrapper code {
white-space: pre;
}
.reveal table { .reveal table {
margin: auto; margin: auto;
border-collapse: collapse; border-collapse: collapse;
border-spacing: 0; } border-spacing: 0;
}
.reveal table th { .reveal table th {
font-weight: bold; } font-weight: bold;
}
.reveal table th, .reveal table th,
.reveal table td { .reveal table td {
text-align: left; text-align: left;
padding: 0.2em 0.5em 0.2em 0.5em; padding: 0.2em 0.5em 0.2em 0.5em;
border-bottom: 1px solid; } border-bottom: 1px solid;
}
.reveal table th[align="center"], .reveal table th[align=center],
.reveal table td[align="center"] { .reveal table td[align=center] {
text-align: center; } text-align: center;
}
.reveal table th[align="right"], .reveal table th[align=right],
.reveal table td[align="right"] { .reveal table td[align=right] {
text-align: right; } text-align: right;
}
.reveal table tbody tr:last-child th, .reveal table tbody tr:last-child th,
.reveal table tbody tr:last-child td { .reveal table tbody tr:last-child td {
border-bottom: none; } border-bottom: none;
}
.reveal sup { .reveal sup {
vertical-align: super; vertical-align: super;
font-size: smaller; } font-size: smaller;
}
.reveal sub { .reveal sub {
vertical-align: sub; vertical-align: sub;
font-size: smaller; } font-size: smaller;
}
.reveal small { .reveal small {
display: inline-block; display: inline-block;
font-size: 0.6em; font-size: 0.6em;
line-height: 1.2em; line-height: 1.2em;
vertical-align: top; } vertical-align: top;
}
.reveal small * { .reveal small * {
vertical-align: top; } vertical-align: top;
}
.reveal img { .reveal img {
margin: 20px 0; } margin: var(--r-block-margin) 0;
}
/********************************************* /*********************************************
* LINKS * LINKS
*********************************************/ *********************************************/
.reveal a { .reveal a {
color: #268bd2; color: var(--r-link-color);
text-decoration: none; text-decoration: none;
transition: color .15s ease; } transition: color 0.15s ease;
}
.reveal a:hover { .reveal a:hover {
color: #78b9e6; color: var(--r-link-color-hover);
text-shadow: none; text-shadow: none;
border: none; } border: none;
}
.reveal .roll span:after { .reveal .roll span:after {
color: #fff; color: #fff;
background: #1a6091; } background: var(--r-link-color-dark);
}
/********************************************* /*********************************************
* Frame helper * Frame helper
*********************************************/ *********************************************/
.reveal .r-frame { .reveal .r-frame {
border: 4px solid #657b83; border: 4px solid var(--r-main-color);
box-shadow: 0 0 10px rgba(0, 0, 0, 0.15); } box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
}
.reveal a .r-frame { .reveal a .r-frame {
transition: all .15s linear; } transition: all 0.15s linear;
}
.reveal a:hover .r-frame { .reveal a:hover .r-frame {
border-color: #268bd2; border-color: var(--r-link-color);
box-shadow: 0 0 20px rgba(0, 0, 0, 0.55); } box-shadow: 0 0 20px rgba(0, 0, 0, 0.55);
}
/********************************************* /*********************************************
* NAVIGATION CONTROLS * NAVIGATION CONTROLS
*********************************************/ *********************************************/
.reveal .controls { .reveal .controls {
color: #268bd2; } color: var(--r-link-color);
}
/********************************************* /*********************************************
* PROGRESS BAR * PROGRESS BAR
*********************************************/ *********************************************/
.reveal .progress { .reveal .progress {
background: rgba(0, 0, 0, 0.2); background: rgba(0, 0, 0, 0.2);
color: #268bd2; } color: var(--r-link-color);
}
/********************************************* /*********************************************
* PRINT BACKGROUND * PRINT BACKGROUND
*********************************************/ *********************************************/
@media print { @media print {
.backgrounds { .backgrounds {
background-color: #fdf6e3; } } background-color: var(--r-background-color);
}
}
scripts/reveal.js/dist/theme/white.css
Vendored
+164 -101
View File
@@ -5,60 +5,68 @@
*/ */
@import url(./fonts/source-sans-pro/source-sans-pro.css); @import url(./fonts/source-sans-pro/source-sans-pro.css);
section.has-dark-background, section.has-dark-background h1, section.has-dark-background h2, section.has-dark-background h3, section.has-dark-background h4, section.has-dark-background h5, section.has-dark-background h6 { section.has-dark-background, section.has-dark-background h1, section.has-dark-background h2, section.has-dark-background h3, section.has-dark-background h4, section.has-dark-background h5, section.has-dark-background h6 {
color: #fff; } color: #fff;
}
/********************************************* /*********************************************
* GLOBAL STYLES * GLOBAL STYLES
*********************************************/ *********************************************/
:root { :root {
--background-color: #fff; --r-background-color: #fff;
--main-font: Source Sans Pro, Helvetica, sans-serif; --r-main-font: Source Sans Pro, Helvetica, sans-serif;
--main-font-size: 42px; --r-main-font-size: 42px;
--main-color: #222; --r-main-color: #222;
--block-margin: 20px; --r-block-margin: 20px;
--heading-margin: 0 0 20px 0; --r-heading-margin: 0 0 20px 0;
--heading-font: Source Sans Pro, Helvetica, sans-serif; --r-heading-font: Source Sans Pro, Helvetica, sans-serif;
--heading-color: #222; --r-heading-color: #222;
--heading-line-height: 1.2; --r-heading-line-height: 1.2;
--heading-letter-spacing: normal; --r-heading-letter-spacing: normal;
--heading-text-transform: uppercase; --r-heading-text-transform: uppercase;
--heading-text-shadow: none; --r-heading-text-shadow: none;
--heading-font-weight: 600; --r-heading-font-weight: 600;
--heading1-text-shadow: none; --r-heading1-text-shadow: none;
--heading1-size: 2.5em; --r-heading1-size: 2.5em;
--heading2-size: 1.6em; --r-heading2-size: 1.6em;
--heading3-size: 1.3em; --r-heading3-size: 1.3em;
--heading4-size: 1em; --r-heading4-size: 1em;
--code-font: monospace; --r-code-font: monospace;
--link-color: #2a76dd; --r-link-color: #2a76dd;
--link-color-hover: #6ca0e8; --r-link-color-dark: #1a53a1;
--selection-background-color: #98bdef; --r-link-color-hover: #6ca0e8;
--selection-color: #fff; } --r-selection-background-color: #98bdef;
--r-selection-color: #fff;
}
.reveal-viewport { .reveal-viewport {
background: #fff; background: #fff;
background-color: #fff; } background-color: var(--r-background-color);
}
.reveal { .reveal {
font-family: "Source Sans Pro", Helvetica, sans-serif; font-family: var(--r-main-font);
font-size: 42px; font-size: var(--r-main-font-size);
font-weight: normal; font-weight: normal;
color: #222; } color: var(--r-main-color);
}
.reveal ::selection { .reveal ::selection {
color: #fff; color: var(--r-selection-color);
background: #98bdef; background: var(--r-selection-background-color);
text-shadow: none; } text-shadow: none;
}
.reveal ::-moz-selection { .reveal ::-moz-selection {
color: #fff; color: var(--r-selection-color);
background: #98bdef; background: var(--r-selection-background-color);
text-shadow: none; } text-shadow: none;
}
.reveal .slides section, .reveal .slides section,
.reveal .slides section > section { .reveal .slides section > section {
line-height: 1.3; line-height: 1.3;
font-weight: inherit; } font-weight: inherit;
}
/********************************************* /*********************************************
* HEADERS * HEADERS
@@ -69,37 +77,44 @@ section.has-dark-background, section.has-dark-background h1, section.has-dark-ba
.reveal h4, .reveal h4,
.reveal h5, .reveal h5,
.reveal h6 { .reveal h6 {
margin: 0 0 20px 0; margin: var(--r-heading-margin);
color: #222; color: var(--r-heading-color);
font-family: "Source Sans Pro", Helvetica, sans-serif; font-family: var(--r-heading-font);
font-weight: 600; font-weight: var(--r-heading-font-weight);
line-height: 1.2; line-height: var(--r-heading-line-height);
letter-spacing: normal; letter-spacing: var(--r-heading-letter-spacing);
text-transform: uppercase; text-transform: var(--r-heading-text-transform);
text-shadow: none; text-shadow: var(--r-heading-text-shadow);
word-wrap: break-word; } word-wrap: break-word;
}
.reveal h1 { .reveal h1 {
font-size: 2.5em; } font-size: var(--r-heading1-size);
}
.reveal h2 { .reveal h2 {
font-size: 1.6em; } font-size: var(--r-heading2-size);
}
.reveal h3 { .reveal h3 {
font-size: 1.3em; } font-size: var(--r-heading3-size);
}
.reveal h4 { .reveal h4 {
font-size: 1em; } font-size: var(--r-heading4-size);
}
.reveal h1 { .reveal h1 {
text-shadow: none; } text-shadow: var(--r-heading1-text-shadow);
}
/********************************************* /*********************************************
* OTHER * OTHER
*********************************************/ *********************************************/
.reveal p { .reveal p {
margin: 20px 0; margin: var(--r-block-margin) 0;
line-height: 1.3; } line-height: 1.3;
}
/* Remove trailing margins after titles */ /* Remove trailing margins after titles */
.reveal h1:last-child, .reveal h1:last-child,
@@ -108,187 +123,235 @@ section.has-dark-background, section.has-dark-background h1, section.has-dark-ba
.reveal h4:last-child, .reveal h4:last-child,
.reveal h5:last-child, .reveal h5:last-child,
.reveal h6:last-child { .reveal h6:last-child {
margin-bottom: 0; } margin-bottom: 0;
}
/* Ensure certain elements are never larger than the slide itself */ /* Ensure certain elements are never larger than the slide itself */
.reveal img, .reveal img,
.reveal video, .reveal video,
.reveal iframe { .reveal iframe {
max-width: 95%; max-width: 95%;
max-height: 95%; } max-height: 95%;
}
.reveal strong, .reveal strong,
.reveal b { .reveal b {
font-weight: bold; } font-weight: bold;
}
.reveal em { .reveal em {
font-style: italic; } font-style: italic;
}
.reveal ol, .reveal ol,
.reveal dl, .reveal dl,
.reveal ul { .reveal ul {
display: inline-block; display: inline-block;
text-align: left; text-align: left;
margin: 0 0 0 1em; } margin: 0 0 0 1em;
}
.reveal ol { .reveal ol {
list-style-type: decimal; } list-style-type: decimal;
}
.reveal ul { .reveal ul {
list-style-type: disc; } list-style-type: disc;
}
.reveal ul ul { .reveal ul ul {
list-style-type: square; } list-style-type: square;
}
.reveal ul ul ul { .reveal ul ul ul {
list-style-type: circle; } list-style-type: circle;
}
.reveal ul ul, .reveal ul ul,
.reveal ul ol, .reveal ul ol,
.reveal ol ol, .reveal ol ol,
.reveal ol ul { .reveal ol ul {
display: block; display: block;
margin-left: 40px; } margin-left: 40px;
}
.reveal dt { .reveal dt {
font-weight: bold; } font-weight: bold;
}
.reveal dd { .reveal dd {
margin-left: 40px; } margin-left: 40px;
}
.reveal blockquote { .reveal blockquote {
display: block; display: block;
position: relative; position: relative;
width: 70%; width: 70%;
margin: 20px auto; margin: var(--r-block-margin) auto;
padding: 5px; padding: 5px;
font-style: italic; font-style: italic;
background: rgba(255, 255, 255, 0.05); background: rgba(255, 255, 255, 0.05);
box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.2); } box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.2);
}
.reveal blockquote p:first-child, .reveal blockquote p:first-child,
.reveal blockquote p:last-child { .reveal blockquote p:last-child {
display: inline-block; } display: inline-block;
}
.reveal q { .reveal q {
font-style: italic; } font-style: italic;
}
.reveal pre { .reveal pre {
display: block; display: block;
position: relative; position: relative;
width: 90%; width: 90%;
margin: 20px auto; margin: var(--r-block-margin) auto;
text-align: left; text-align: left;
font-size: 0.55em; font-size: 0.55em;
font-family: monospace; font-family: var(--r-code-font);
line-height: 1.2em; line-height: 1.2em;
word-wrap: break-word; word-wrap: break-word;
box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.15); } box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.15);
}
.reveal code { .reveal code {
font-family: monospace; font-family: var(--r-code-font);
text-transform: none; } text-transform: none;
tab-size: 2;
}
.reveal pre code { .reveal pre code {
display: block; display: block;
padding: 5px; padding: 5px;
overflow: auto; overflow: auto;
max-height: 400px; max-height: 400px;
word-wrap: normal; } word-wrap: normal;
}
.reveal .code-wrapper {
white-space: normal;
}
.reveal .code-wrapper code {
white-space: pre;
}
.reveal table { .reveal table {
margin: auto; margin: auto;
border-collapse: collapse; border-collapse: collapse;
border-spacing: 0; } border-spacing: 0;
}
.reveal table th { .reveal table th {
font-weight: bold; } font-weight: bold;
}
.reveal table th, .reveal table th,
.reveal table td { .reveal table td {
text-align: left; text-align: left;
padding: 0.2em 0.5em 0.2em 0.5em; padding: 0.2em 0.5em 0.2em 0.5em;
border-bottom: 1px solid; } border-bottom: 1px solid;
}
.reveal table th[align="center"], .reveal table th[align=center],
.reveal table td[align="center"] { .reveal table td[align=center] {
text-align: center; } text-align: center;
}
.reveal table th[align="right"], .reveal table th[align=right],
.reveal table td[align="right"] { .reveal table td[align=right] {
text-align: right; } text-align: right;
}
.reveal table tbody tr:last-child th, .reveal table tbody tr:last-child th,
.reveal table tbody tr:last-child td { .reveal table tbody tr:last-child td {
border-bottom: none; } border-bottom: none;
}
.reveal sup { .reveal sup {
vertical-align: super; vertical-align: super;
font-size: smaller; } font-size: smaller;
}
.reveal sub { .reveal sub {
vertical-align: sub; vertical-align: sub;
font-size: smaller; } font-size: smaller;
}
.reveal small { .reveal small {
display: inline-block; display: inline-block;
font-size: 0.6em; font-size: 0.6em;
line-height: 1.2em; line-height: 1.2em;
vertical-align: top; } vertical-align: top;
}
.reveal small * { .reveal small * {
vertical-align: top; } vertical-align: top;
}
.reveal img { .reveal img {
margin: 20px 0; } margin: var(--r-block-margin) 0;
}
/********************************************* /*********************************************
* LINKS * LINKS
*********************************************/ *********************************************/
.reveal a { .reveal a {
color: #2a76dd; color: var(--r-link-color);
text-decoration: none; text-decoration: none;
transition: color .15s ease; } transition: color 0.15s ease;
}
.reveal a:hover { .reveal a:hover {
color: #6ca0e8; color: var(--r-link-color-hover);
text-shadow: none; text-shadow: none;
border: none; } border: none;
}
.reveal .roll span:after { .reveal .roll span:after {
color: #fff; color: #fff;
background: #1a53a1; } background: var(--r-link-color-dark);
}
/********************************************* /*********************************************
* Frame helper * Frame helper
*********************************************/ *********************************************/
.reveal .r-frame { .reveal .r-frame {
border: 4px solid #222; border: 4px solid var(--r-main-color);
box-shadow: 0 0 10px rgba(0, 0, 0, 0.15); } box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
}
.reveal a .r-frame { .reveal a .r-frame {
transition: all .15s linear; } transition: all 0.15s linear;
}
.reveal a:hover .r-frame { .reveal a:hover .r-frame {
border-color: #2a76dd; border-color: var(--r-link-color);
box-shadow: 0 0 20px rgba(0, 0, 0, 0.55); } box-shadow: 0 0 20px rgba(0, 0, 0, 0.55);
}
/********************************************* /*********************************************
* NAVIGATION CONTROLS * NAVIGATION CONTROLS
*********************************************/ *********************************************/
.reveal .controls { .reveal .controls {
color: #2a76dd; } color: var(--r-link-color);
}
/********************************************* /*********************************************
* PROGRESS BAR * PROGRESS BAR
*********************************************/ *********************************************/
.reveal .progress { .reveal .progress {
background: rgba(0, 0, 0, 0.2); background: rgba(0, 0, 0, 0.2);
color: #2a76dd; } color: var(--r-link-color);
}
/********************************************* /*********************************************
* PRINT BACKGROUND * PRINT BACKGROUND
*********************************************/ *********************************************/
@media print { @media print {
.backgrounds { .backgrounds {
background-color: #fff; } } background-color: var(--r-background-color);
}
}
scripts/reveal.js/examples/auto-animate.html
+23 -5
View File
@@ -18,7 +18,6 @@
<div class="reveal"> <div class="reveal">
<div class="slides"> <div class="slides">
<section data-auto-animate data-auto-animate-unmatched="fade"> <section data-auto-animate data-auto-animate-unmatched="fade">
<h3>Auto-Animate Example</h3> <h3>Auto-Animate Example</h3>
<p>This will fade out</p> <p>This will fade out</p>
@@ -126,7 +125,7 @@
</section> </section>
<section data-auto-animate style="height: 600px"> <section data-auto-animate style="height: 600px">
<h3 style="opacity: 0.3; font-size: 18px;">SLIDE 1</h2> <h3 style="opacity: 0.3; font-size: 18px;">SLIDE 1</h3>
<h2 data-id="title" style="margin-top: 260px;">Animate Anything</h2> <h2 data-id="title" style="margin-top: 260px;">Animate Anything</h2>
<div data-id="1" style="background: white; position: absolute; top: 150px; left: 16%; width: 60px; height: 60px;"></div> <div data-id="1" style="background: white; position: absolute; top: 150px; left: 16%; width: 60px; height: 60px;"></div>
<div data-id="2" style="background: white; position: absolute; top: 150px; left: 36%; width: 60px; height: 60px;"></div> <div data-id="2" style="background: white; position: absolute; top: 150px; left: 36%; width: 60px; height: 60px;"></div>
@@ -134,7 +133,7 @@
<div data-id="4" style="background: white; position: absolute; top: 150px; left: 76%; width: 60px; height: 60px;"></div> <div data-id="4" style="background: white; position: absolute; top: 150px; left: 76%; width: 60px; height: 60px;"></div>
</section> </section>
<section data-auto-animate style="height: 600px"> <section data-auto-animate style="height: 600px">
<h3 style="opacity: 0.3; font-size: 18px;">SLIDE 2</h2> <h3 style="opacity: 0.3; font-size: 18px;">SLIDE 2</h3>
<h2 data-id="title" style="margin-top: 500px">With Auto Animate</h2> <h2 data-id="title" style="margin-top: 500px">With Auto Animate</h2>
<div data-id="1" style="background: cyan; position: absolute; bottom: 190px; left: 16%; width: 60px; height: 60px;"></div> <div data-id="1" style="background: cyan; position: absolute; bottom: 190px; left: 16%; width: 60px; height: 60px;"></div>
<div data-id="2" style="background: magenta; position: absolute; bottom: 190px; left: 36%; width: 60px; height: 160px;"></div> <div data-id="2" style="background: magenta; position: absolute; bottom: 190px; left: 36%; width: 60px; height: 160px;"></div>
@@ -142,7 +141,7 @@
<div data-id="4" style="background: red; position: absolute; bottom: 190px; left: 76%; width: 60px; height: 360px;"></div> <div data-id="4" style="background: red; position: absolute; bottom: 190px; left: 76%; width: 60px; height: 360px;"></div>
</section> </section>
<section data-auto-animate style="height: 600px"> <section data-auto-animate style="height: 600px">
<h3 style="opacity: 0.3; font-size: 18px;">SLIDE 3</h2> <h3 style="opacity: 0.3; font-size: 18px;">SLIDE 3</h3>
<h2 data-id="title" style="margin-top: 500px; opacity: 0;">With Auto Animate</h2> <h2 data-id="title" style="margin-top: 500px; opacity: 0;">With Auto Animate</h2>
<div data-id="1" style="background: cyan; position: absolute; top: 50%; left: 50%; width: 400px; height: 400px; margin: -200px 0 0 -200px; border-radius: 400px;"></div> <div data-id="1" style="background: cyan; position: absolute; top: 50%; left: 50%; width: 400px; height: 400px; margin: -200px 0 0 -200px; border-radius: 400px;"></div>
<div data-id="2" style="background: magenta; position: absolute; top: 50%; left: 50%; width: 300px; height: 300px; margin: -150px 0 0 -150px; border-radius: 400px;"></div> <div data-id="2" style="background: magenta; position: absolute; top: 50%; left: 50%; width: 300px; height: 300px; margin: -150px 0 0 -150px; border-radius: 400px;"></div>
@@ -150,7 +149,7 @@
<div data-id="4" style="background: red; position: absolute; top: 50%; left: 50%; width: 100px; height: 100px; margin: -50px 0 0 -50px; border-radius: 400px;"></div> <div data-id="4" style="background: red; position: absolute; top: 50%; left: 50%; width: 100px; height: 100px; margin: -50px 0 0 -50px; border-radius: 400px;"></div>
</section> </section>
<section data-auto-animate style="height: 600px"> <section data-auto-animate style="height: 600px">
<h3 style="opacity: 0.3; font-size: 18px;">SLIDE 3</h2> <h3 style="opacity: 0.3; font-size: 18px;">SLIDE 3</h3>
<h2 data-id="title" style="margin-top: 500px; opacity: 0;">With Auto Animate</h2> <h2 data-id="title" style="margin-top: 500px; opacity: 0;">With Auto Animate</h2>
<div data-id="1" style="background: red; position: absolute; top: 250px; left: 16%; width: 60px; height: 60px;"></div> <div data-id="1" style="background: red; position: absolute; top: 250px; left: 16%; width: 60px; height: 60px;"></div>
<div data-id="2" style="background: yellow; position: absolute; top: 250px; left: 36%; width: 60px; height: 60px;"></div> <div data-id="2" style="background: yellow; position: absolute; top: 250px; left: 36%; width: 60px; height: 60px;"></div>
@@ -158,6 +157,25 @@
<div data-id="4" style="background: cyan; position: absolute; top: 250px; left: 76%; width: 60px; height: 60px;"></div> <div data-id="4" style="background: cyan; position: absolute; top: 250px; left: 76%; width: 60px; height: 60px;"></div>
</section> </section>
<section data-auto-animate data-auto-animate-id="a">
<h2>data-auto-animate-id="a"</h2>
<h3>A1</h3>
</section>
<section data-auto-animate data-auto-animate-id="a">
<h2>data-auto-animate-id="a"</h2>
<h3>A1</h3>
<h3>A2</h3>
</section>
<section data-auto-animate data-auto-animate-id="b">
<h2>data-auto-animate-id="b"</h2>
<h3>B1</h3>
</section>
<section data-auto-animate data-auto-animate-id="b">
<h2>data-auto-animate-id="b"</h2>
<h3>B1</h3>
<h3>B2</h3>
</section>
</div> </div>
</div> </div>
scripts/reveal.js/examples/layout-helpers.html
+1 -1
View File
@@ -123,7 +123,7 @@
<section id="vstack"> <section id="vstack">
<h2>VStack</h2> <h2>VStack</h2>
<p>Stacks multiple elements horizontally.</p> <p>Stacks multiple elements vertically.</p>
<pre><code class="html" data-trim data-line-numbers> <pre><code class="html" data-trim data-line-numbers>
<div class="r-vstack"> <div class="r-vstack">
&lt;img width="450" height="300" src="..."&gt; &lt;img width="450" height="300" src="..."&gt;
scripts/reveal.js/examples/markdown.html
+17 -6
View File
@@ -21,8 +21,8 @@
<!-- Use external markdown resource, separate slides by three newlines; vertical slides by two newlines --> <!-- Use external markdown resource, separate slides by three newlines; vertical slides by two newlines -->
<section data-markdown="markdown.md" data-separator="^\n\n\n" data-separator-vertical="^\n\n"></section> <section data-markdown="markdown.md" data-separator="^\n\n\n" data-separator-vertical="^\n\n"></section>
<!-- Slides are separated by three dashes (quick 'n dirty regular expression) --> <!-- Slides are separated by three dashes (the default) -->
<section data-markdown data-separator="---"> <section data-markdown>
<script type="text/template"> <script type="text/template">
## Demo 1 ## Demo 1
Slide 1 Slide 1
@@ -35,7 +35,7 @@
</script> </script>
</section> </section>
<!-- Slides are separated by newline + three dashes + newline, vertical slides identical but two dashes --> <!-- Slides are separated by regexp matching newline + three dashes + newline, vertical slides identical but two dashes -->
<section data-markdown data-separator="^\n---\n$" data-separator-vertical="^\n--\n$"> <section data-markdown data-separator="^\n---\n$" data-separator-vertical="^\n--\n$">
<script type="text/template"> <script type="text/template">
## Demo 2 ## Demo 2
@@ -53,8 +53,8 @@
</script> </script>
</section> </section>
<!-- No "extra" slides, since there are no separators defined (so they'll become horizontal rulers) --> <!-- No "extra" slides, since the separator can't be matched ("---" will become horizontal rulers) -->
<section data-markdown> <section data-markdown data-separator="$x">
<script type="text/template"> <script type="text/template">
A A
@@ -106,6 +106,16 @@
</script> </script>
</section> </section>
<!-- Math -->
<section data-markdown>
## The Lorenz Equations
`\[\begin{aligned}
\dot{x} &amp; = \sigma(y-x) \\
\dot{y} &amp; = \rho x - y - xz \\
\dot{z} &amp; = -\beta z + xy
\end{aligned} \]`
</section>
</div> </div>
</div> </div>
@@ -113,6 +123,7 @@
<script src="../plugin/markdown/markdown.js"></script> <script src="../plugin/markdown/markdown.js"></script>
<script src="../plugin/highlight/highlight.js"></script> <script src="../plugin/highlight/highlight.js"></script>
<script src="../plugin/notes/notes.js"></script> <script src="../plugin/notes/notes.js"></script>
<script src="../plugin/math/math.js"></script>
<script> <script>
@@ -122,7 +133,7 @@
history: true, history: true,
center: true, center: true,
plugins: [ RevealMarkdown, RevealHighlight, RevealNotes ] plugins: [ RevealMarkdown, RevealHighlight, RevealNotes, RevealMath.KaTeX ]
}); });
</script> </script>
scripts/reveal.js/examples/markdown.md
+6 -1
View File
@@ -31,6 +31,11 @@ Content 3.1
Content 3.2 Content 3.2
## External 3.3 ## External 3.3 (Image)
![External Image](https://s3.amazonaws.com/static.slid.es/logo/v2/slides-symbol-512x512.png) ![External Image](https://s3.amazonaws.com/static.slid.es/logo/v2/slides-symbol-512x512.png)
## External 3.4 (Math)
`\[ J(\theta_0,\theta_1) = \sum_{i=0} \]`
scripts/reveal.js/examples/math.html
+9 -4
View File
@@ -20,7 +20,7 @@
<section> <section>
<h2>reveal.js Math Plugin</h2> <h2>reveal.js Math Plugin</h2>
<p>A thin wrapper for MathJax</p> <p>Render math with KaTeX, MathJax 2 or MathJax 3</p>
</section> </section>
<section> <section>
@@ -182,8 +182,7 @@
history: true, history: true,
transition: 'linear', transition: 'linear',
math: { mathjax2: {
// mathjax: 'https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.0/MathJax.js',
config: 'TeX-AMS_HTML-full', config: 'TeX-AMS_HTML-full',
TeX: { TeX: {
Macros: { Macros: {
@@ -193,7 +192,13 @@
} }
}, },
plugins: [ RevealMath ] // There are three typesetters available
// RevealMath.MathJax2 (default)
// RevealMath.MathJax3
// RevealMath.KaTeX
//
// More info at https://revealjs.com/math/
plugins: [ RevealMath.MathJax2 ]
}); });
</script> </script>
scripts/reveal.js/gulpfile.js
+50 -22
View File
@@ -3,6 +3,7 @@ const path = require('path')
const glob = require('glob') const glob = require('glob')
const yargs = require('yargs') const yargs = require('yargs')
const colors = require('colors') const colors = require('colors')
const through = require('through2');
const qunit = require('node-qunit-puppeteer') const qunit = require('node-qunit-puppeteer')
const {rollup} = require('rollup') const {rollup} = require('rollup')
@@ -10,11 +11,11 @@ const {terser} = require('rollup-plugin-terser')
const babel = require('@rollup/plugin-babel').default const babel = require('@rollup/plugin-babel').default
const commonjs = require('@rollup/plugin-commonjs') const commonjs = require('@rollup/plugin-commonjs')
const resolve = require('@rollup/plugin-node-resolve').default const resolve = require('@rollup/plugin-node-resolve').default
const sass = require('sass')
const gulp = require('gulp') const gulp = require('gulp')
const tap = require('gulp-tap') const tap = require('gulp-tap')
const zip = require('gulp-zip') const zip = require('gulp-zip')
const sass = require('gulp-sass')
const header = require('gulp-header') const header = require('gulp-header')
const eslint = require('gulp-eslint') const eslint = require('gulp-eslint')
const minify = require('gulp-clean-css') const minify = require('gulp-clean-css')
@@ -23,13 +24,14 @@ const autoprefixer = require('gulp-autoprefixer')
const root = yargs.argv.root || '.' const root = yargs.argv.root || '.'
const port = yargs.argv.port || 8000 const port = yargs.argv.port || 8000
const host = yargs.argv.host || 'localhost'
const banner = `/*! const banner = `/*!
* reveal.js ${pkg.version} * reveal.js ${pkg.version}
* ${pkg.homepage} * ${pkg.homepage}
* MIT licensed * MIT licensed
* *
* Copyright (C) 2020 Hakim El Hattab, https://hakim.se * Copyright (C) 2011-2022 Hakim El Hattab, https://hakim.se
*/\n` */\n`
// Prevents warnings from opening too many test pages // Prevents warnings from opening too many test pages
@@ -59,11 +61,11 @@ const babelConfig = {
// polyfilling older browsers and a larger bundle. // polyfilling older browsers and a larger bundle.
const babelConfigESM = JSON.parse( JSON.stringify( babelConfig ) ); const babelConfigESM = JSON.parse( JSON.stringify( babelConfig ) );
babelConfigESM.presets[0][1].targets = { browsers: [ babelConfigESM.presets[0][1].targets = { browsers: [
'last 2 Chrome versions', 'not Chrome < 60', 'last 2 Chrome versions',
'last 2 Safari versions', 'not Safari < 10.1', 'last 2 Safari versions',
'last 2 iOS versions', 'not iOS < 10.3', 'last 2 iOS versions',
'last 2 Firefox versions', 'not Firefox < 60', 'last 2 Firefox versions',
'last 2 Edge versions', 'not Edge < 16', 'last 2 Edge versions',
] }; ] };
let cache = {}; let cache = {};
@@ -155,12 +157,34 @@ gulp.task('plugins', () => {
} )); } ));
}) })
// a custom pipeable step to transform Sass to CSS
function compileSass() {
return through.obj( ( vinylFile, encoding, callback ) => {
const transformedFile = vinylFile.clone();
sass.render({
data: transformedFile.contents.toString(),
includePaths: ['css/', 'css/theme/template']
}, ( err, result ) => {
if( err ) {
console.log( vinylFile.path );
console.log( err.formatted );
}
else {
transformedFile.extname = '.css';
transformedFile.contents = result.css;
callback( null, transformedFile );
}
});
});
}
gulp.task('css-themes', () => gulp.src(['./css/theme/source/*.{sass,scss}']) gulp.task('css-themes', () => gulp.src(['./css/theme/source/*.{sass,scss}'])
.pipe(sass()) .pipe(compileSass())
.pipe(gulp.dest('./dist/theme'))) .pipe(gulp.dest('./dist/theme')))
gulp.task('css-core', () => gulp.src(['css/reveal.scss']) gulp.task('css-core', () => gulp.src(['css/reveal.scss'])
.pipe(sass()) .pipe(compileSass())
.pipe(autoprefixer()) .pipe(autoprefixer())
.pipe(minify({compatibility: 'ie9'})) .pipe(minify({compatibility: 'ie9'}))
.pipe(header(banner)) .pipe(header(banner))
@@ -173,7 +197,7 @@ gulp.task('qunit', () => {
let serverConfig = { let serverConfig = {
root, root,
port: 8009, port: 8009,
host: '0.0.0.0', host: 'localhost',
name: 'test-server' name: 'test-server'
} }
@@ -245,16 +269,20 @@ gulp.task('default', gulp.series(gulp.parallel('js', 'css', 'plugins'), 'test'))
gulp.task('build', gulp.parallel('js', 'css', 'plugins')) gulp.task('build', gulp.parallel('js', 'css', 'plugins'))
gulp.task('package', gulp.series('default', () => gulp.task('package', gulp.series(() =>
gulp.src([ gulp.src(
'./index.html', [
'./dist/**', './index.html',
'./lib/**', './dist/**',
'./images/**', './lib/**',
'./plugin/**', './images/**',
'./**.md' './plugin/**',
]).pipe(zip('reveal-js-presentation.zip')).pipe(gulp.dest('./')) './**.md'
],
{ base: './' }
)
.pipe(zip('reveal-js-presentation.zip')).pipe(gulp.dest('./'))
)) ))
@@ -266,15 +294,15 @@ gulp.task('serve', () => {
connect.server({ connect.server({
root: root, root: root,
port: port, port: port,
host: '0.0.0.0', host: host,
livereload: true livereload: true
}) })
gulp.watch(['*.html', '*.md'], gulp.series('reload')) gulp.watch(['*.html', '*.md'], gulp.series('reload'))
gulp.watch(['js/**'], gulp.series('js', 'reload', 'test')) gulp.watch(['js/**'], gulp.series('js', 'reload', 'eslint'))
gulp.watch(['plugin/**/plugin.js'], gulp.series('plugins', 'reload')) gulp.watch(['plugin/**/plugin.js', 'plugin/**/*.html'], gulp.series('plugins', 'reload'))
gulp.watch([ gulp.watch([
'css/theme/source/*.{sass,scss}', 'css/theme/source/*.{sass,scss}',
scripts/reveal.js/index.html
+2 -2
View File
@@ -8,10 +8,10 @@
<link rel="stylesheet" href="dist/reset.css"> <link rel="stylesheet" href="dist/reset.css">
<link rel="stylesheet" href="dist/reveal.css"> <link rel="stylesheet" href="dist/reveal.css">
<link rel="stylesheet" href="dist/theme/black.css" id="theme"> <link rel="stylesheet" href="dist/theme/black.css">
<!-- Theme used for syntax highlighted code --> <!-- Theme used for syntax highlighted code -->
<link rel="stylesheet" href="plugin/highlight/monokai.css" id="highlight-theme"> <link rel="stylesheet" href="plugin/highlight/monokai.css">
</head> </head>
<body> <body>
<div class="reveal"> <div class="reveal">
scripts/reveal.js/js/config.js
+3 -3
View File
@@ -73,8 +73,8 @@ export default {
// Optional function that blocks keyboard events when retuning false // Optional function that blocks keyboard events when retuning false
// //
// If you set this to 'foucsed', we will only capture keyboard events // If you set this to 'focused', we will only capture keyboard events
// for embdedded decks when they are in focus // for embedded decks when they are in focus
keyboardCondition: null, keyboardCondition: null,
// Disables the default reveal.js slide layout (scaling and centering) // Disables the default reveal.js slide layout (scaling and centering)
@@ -149,7 +149,7 @@ export default {
// Flags if slides with data-visibility="hidden" should be kep visible // Flags if slides with data-visibility="hidden" should be kep visible
showHiddenSlides: false, showHiddenSlides: false,
// Global override for autolaying embedded media (video/audio/iframe) // Global override for autoplaying embedded media (video/audio/iframe)
// - null: Media will only autoplay if data-autoplay is present // - null: Media will only autoplay if data-autoplay is present
// - true: All media will autoplay, regardless of individual setting // - true: All media will autoplay, regardless of individual setting
// - false: No media will autoplay, regardless of individual setting // - false: No media will autoplay, regardless of individual setting
scripts/reveal.js/js/controllers/autoanimate.js
+11 -4
View File
@@ -27,8 +27,16 @@ export default class AutoAnimate {
// Clean up after prior animations // Clean up after prior animations
this.reset(); this.reset();
// Ensure that both slides are auto-animate targets let allSlides = this.Reveal.getSlides();
if( fromSlide.hasAttribute( 'data-auto-animate' ) && toSlide.hasAttribute( 'data-auto-animate' ) ) { let toSlideIndex = allSlides.indexOf( toSlide );
let fromSlideIndex = allSlides.indexOf( fromSlide );
// Ensure that both slides are auto-animate targets with the same data-auto-animate-id value
// (including null if absent on both) and that data-auto-animate-restart isn't set on the
// physically latter slide (independent of slide direction)
if( fromSlide.hasAttribute( 'data-auto-animate' ) && toSlide.hasAttribute( 'data-auto-animate' )
&& fromSlide.getAttribute( 'data-auto-animate-id' ) === toSlide.getAttribute( 'data-auto-animate-id' )
&& !( toSlideIndex > fromSlideIndex ? toSlide : fromSlide ).hasAttribute( 'data-auto-animate-restart' ) ) {
// Create a new auto-animate sheet // Create a new auto-animate sheet
this.autoAnimateStyleSheet = this.autoAnimateStyleSheet || createStyleSheet(); this.autoAnimateStyleSheet = this.autoAnimateStyleSheet || createStyleSheet();
@@ -40,8 +48,7 @@ export default class AutoAnimate {
toSlide.dataset.autoAnimate = 'pending'; toSlide.dataset.autoAnimate = 'pending';
// Flag the navigation direction, needed for fragment buildup // Flag the navigation direction, needed for fragment buildup
let allSlides = this.Reveal.getSlides(); animationOptions.slideDirection = toSlideIndex > fromSlideIndex ? 'forward' : 'backward';
animationOptions.slideDirection = allSlides.indexOf( toSlide ) > allSlides.indexOf( fromSlide ) ? 'forward' : 'backward';
// Inject our auto-animate styles for this transition // Inject our auto-animate styles for this transition
let css = this.getAutoAnimatableElements( fromSlide, toSlide ).map( elements => { let css = this.getAutoAnimatableElements( fromSlide, toSlide ).map( elements => {
scripts/reveal.js/js/controllers/backgrounds.js
+27 -21
View File
@@ -27,8 +27,6 @@ export default class Backgrounds {
*/ */
create() { create() {
let printMode = this.Reveal.isPrintingPDF();
// Clear prior backgrounds // Clear prior backgrounds
this.element.innerHTML = ''; this.element.innerHTML = '';
this.element.classList.add( 'no-transition' ); this.element.classList.add( 'no-transition' );
@@ -114,9 +112,24 @@ export default class Backgrounds {
*/ */
sync( slide ) { sync( slide ) {
let element = slide.slideBackgroundElement, const element = slide.slideBackgroundElement,
contentElement = slide.slideBackgroundContentElement; contentElement = slide.slideBackgroundContentElement;
const data = {
background: slide.getAttribute( 'data-background' ),
backgroundSize: slide.getAttribute( 'data-background-size' ),
backgroundImage: slide.getAttribute( 'data-background-image' ),
backgroundVideo: slide.getAttribute( 'data-background-video' ),
backgroundIframe: slide.getAttribute( 'data-background-iframe' ),
backgroundColor: slide.getAttribute( 'data-background-color' ),
backgroundRepeat: slide.getAttribute( 'data-background-repeat' ),
backgroundPosition: slide.getAttribute( 'data-background-position' ),
backgroundTransition: slide.getAttribute( 'data-background-transition' ),
backgroundOpacity: slide.getAttribute( 'data-background-opacity' ),
};
const dataPreload = slide.hasAttribute( 'data-preload' );
// Reset the prior background state in case this is not the // Reset the prior background state in case this is not the
// initial sync // initial sync
slide.classList.remove( 'has-dark-background' ); slide.classList.remove( 'has-dark-background' );
@@ -135,19 +148,6 @@ export default class Backgrounds {
contentElement.style.opacity = ''; contentElement.style.opacity = '';
contentElement.innerHTML = ''; contentElement.innerHTML = '';
let data = {
background: slide.getAttribute( 'data-background' ),
backgroundSize: slide.getAttribute( 'data-background-size' ),
backgroundImage: slide.getAttribute( 'data-background-image' ),
backgroundVideo: slide.getAttribute( 'data-background-video' ),
backgroundIframe: slide.getAttribute( 'data-background-iframe' ),
backgroundColor: slide.getAttribute( 'data-background-color' ),
backgroundRepeat: slide.getAttribute( 'data-background-repeat' ),
backgroundPosition: slide.getAttribute( 'data-background-position' ),
backgroundTransition: slide.getAttribute( 'data-background-transition' ),
backgroundOpacity: slide.getAttribute( 'data-background-opacity' )
};
if( data.background ) { if( data.background ) {
// Auto-wrap image urls in url(...) // Auto-wrap image urls in url(...)
if( /^(http|file|\/\/)/gi.test( data.background ) || /\.(svg|png|jpg|jpeg|gif|bmp)([?#\s]|$)/gi.test( data.background ) ) { if( /^(http|file|\/\/)/gi.test( data.background ) || /\.(svg|png|jpg|jpeg|gif|bmp)([?#\s]|$)/gi.test( data.background ) ) {
@@ -179,7 +179,7 @@ export default class Backgrounds {
if( data.backgroundColor ) element.style.backgroundColor = data.backgroundColor; if( data.backgroundColor ) element.style.backgroundColor = data.backgroundColor;
if( data.backgroundTransition ) element.setAttribute( 'data-background-transition', data.backgroundTransition ); if( data.backgroundTransition ) element.setAttribute( 'data-background-transition', data.backgroundTransition );
if( slide.hasAttribute( 'data-preload' ) ) element.setAttribute( 'data-preload', '' ); if( dataPreload ) element.setAttribute( 'data-preload', '' );
// Background image options are set on the content wrapper // Background image options are set on the content wrapper
if( data.backgroundSize ) contentElement.style.backgroundSize = data.backgroundSize; if( data.backgroundSize ) contentElement.style.backgroundSize = data.backgroundSize;
@@ -192,8 +192,8 @@ export default class Backgrounds {
// color, no class will be added // color, no class will be added
let contrastColor = data.backgroundColor; let contrastColor = data.backgroundColor;
// If no bg color was found, check the computed background // If no bg color was found, or it cannot be converted by colorToRgb, check the computed background
if( !contrastColor ) { if( !contrastColor || !colorToRgb( contrastColor ) ) {
let computedBackgroundStyle = window.getComputedStyle( element ); let computedBackgroundStyle = window.getComputedStyle( element );
if( computedBackgroundStyle && computedBackgroundStyle.backgroundColor ) { if( computedBackgroundStyle && computedBackgroundStyle.backgroundColor ) {
contrastColor = computedBackgroundStyle.backgroundColor; contrastColor = computedBackgroundStyle.backgroundColor;
@@ -201,7 +201,7 @@ export default class Backgrounds {
} }
if( contrastColor ) { if( contrastColor ) {
let rgb = colorToRgb( contrastColor ); const rgb = colorToRgb( contrastColor );
// Ignore fully transparent backgrounds. Some browsers return // Ignore fully transparent backgrounds. Some browsers return
// rgba(0,0,0,0) when reading the computed background color of // rgba(0,0,0,0) when reading the computed background color of
@@ -394,4 +394,10 @@ export default class Backgrounds {
} }
} destroy() {
this.element.remove();
}
}
scripts/reveal.js/js/controllers/controls.js
Vendored
+7
View File
@@ -188,6 +188,13 @@ export default class Controls {
} }
} }
destroy() {
this.unbind();
this.element.remove();
}
/** /**
* Event handlers for navigation control buttons. * Event handlers for navigation control buttons.
*/ */
scripts/reveal.js/js/controllers/focus.js
+6
View File
@@ -79,6 +79,12 @@ export default class Focus {
} }
destroy() {
this.Reveal.getRevealElement().classList.remove( 'focused' );
}
onRevealPointerDown( event ) { onRevealPointerDown( event ) {
this.focus(); this.focus();
scripts/reveal.js/js/controllers/fragments.js
+1
View File
@@ -235,6 +235,7 @@ export default class Fragments {
el.classList.remove( 'current-fragment' ); el.classList.remove( 'current-fragment' );
if( wasVisible ) { if( wasVisible ) {
this.Reveal.slideContent.stopEmbeddedContent( el );
changedFragments.hidden.push( el ); changedFragments.hidden.push( el );
this.Reveal.dispatchEvent({ this.Reveal.dispatchEvent({
target: el, target: el,
scripts/reveal.js/js/controllers/keyboard.js
+30 -26
View File
@@ -32,15 +32,15 @@ export default class Keyboard {
} }
else { else {
this.shortcuts['N , SPACE'] = 'Next slide'; this.shortcuts['N , SPACE'] = 'Next slide';
this.shortcuts['P'] = 'Previous slide'; this.shortcuts['P , Shift SPACE'] = 'Previous slide';
this.shortcuts['&#8592; , H'] = 'Navigate left'; this.shortcuts['&#8592; , H'] = 'Navigate left';
this.shortcuts['&#8594; , L'] = 'Navigate right'; this.shortcuts['&#8594; , L'] = 'Navigate right';
this.shortcuts['&#8593; , K'] = 'Navigate up'; this.shortcuts['&#8593; , K'] = 'Navigate up';
this.shortcuts['&#8595; , J'] = 'Navigate down'; this.shortcuts['&#8595; , J'] = 'Navigate down';
} }
this.shortcuts['Home , Shift &#8592;'] = 'First slide'; this.shortcuts['Alt + &#8592;/&#8593/&#8594;/&#8595;'] = 'Navigate without fragments';
this.shortcuts['End , Shift &#8594;'] = 'Last slide'; this.shortcuts['Shift + &#8592;/&#8593/&#8594;/&#8595;'] = 'Jump to first/last slide';
this.shortcuts['B , .'] = 'Pause'; this.shortcuts['B , .'] = 'Pause';
this.shortcuts['F'] = 'Fullscreen'; this.shortcuts['F'] = 'Fullscreen';
this.shortcuts['ESC, O'] = 'Slide overview'; this.shortcuts['ESC, O'] = 'Slide overview';
@@ -182,13 +182,11 @@ export default class Keyboard {
let activeElementIsInput = document.activeElement && document.activeElement.tagName && /input|textarea/i.test( document.activeElement.tagName ); let activeElementIsInput = document.activeElement && document.activeElement.tagName && /input|textarea/i.test( document.activeElement.tagName );
let activeElementIsNotes = document.activeElement && document.activeElement.className && /speaker-notes/i.test( document.activeElement.className); let activeElementIsNotes = document.activeElement && document.activeElement.className && /speaker-notes/i.test( document.activeElement.className);
// Whitelist specific modified + keycode combinations // Whitelist certain modifiers for slide navigation shortcuts
let prevSlideShortcut = event.shiftKey && event.keyCode === 32; let isNavigationKey = [32, 37, 38, 39, 40, 78, 80].indexOf( event.keyCode ) !== -1;
let firstSlideShortcut = event.shiftKey && keyCode === 37;
let lastSlideShortcut = event.shiftKey && keyCode === 39;
// Prevent all other events when a modifier is pressed // Prevent all other events when a modifier is pressed
let unusedModifier = !prevSlideShortcut && !firstSlideShortcut && !lastSlideShortcut && let unusedModifier = !( isNavigationKey && event.shiftKey || event.altKey ) &&
( event.shiftKey || event.altKey || event.ctrlKey || event.metaKey ); ( event.shiftKey || event.altKey || event.ctrlKey || event.metaKey );
// Disregard the event if there's a focused element or a // Disregard the event if there's a focused element or a
@@ -277,52 +275,58 @@ export default class Keyboard {
// P, PAGE UP // P, PAGE UP
if( keyCode === 80 || keyCode === 33 ) { if( keyCode === 80 || keyCode === 33 ) {
this.Reveal.prev(); this.Reveal.prev({skipFragments: event.altKey});
} }
// N, PAGE DOWN // N, PAGE DOWN
else if( keyCode === 78 || keyCode === 34 ) { else if( keyCode === 78 || keyCode === 34 ) {
this.Reveal.next(); this.Reveal.next({skipFragments: event.altKey});
} }
// H, LEFT // H, LEFT
else if( keyCode === 72 || keyCode === 37 ) { else if( keyCode === 72 || keyCode === 37 ) {
if( firstSlideShortcut ) { if( event.shiftKey ) {
this.Reveal.slide( 0 ); this.Reveal.slide( 0 );
} }
else if( !this.Reveal.overview.isActive() && useLinearMode ) { else if( !this.Reveal.overview.isActive() && useLinearMode ) {
this.Reveal.prev(); this.Reveal.prev({skipFragments: event.altKey});
} }
else { else {
this.Reveal.left(); this.Reveal.left({skipFragments: event.altKey});
} }
} }
// L, RIGHT // L, RIGHT
else if( keyCode === 76 || keyCode === 39 ) { else if( keyCode === 76 || keyCode === 39 ) {
if( lastSlideShortcut ) { if( event.shiftKey ) {
this.Reveal.slide( Number.MAX_VALUE ); this.Reveal.slide( this.Reveal.getHorizontalSlides().length - 1 );
} }
else if( !this.Reveal.overview.isActive() && useLinearMode ) { else if( !this.Reveal.overview.isActive() && useLinearMode ) {
this.Reveal.next(); this.Reveal.next({skipFragments: event.altKey});
} }
else { else {
this.Reveal.right(); this.Reveal.right({skipFragments: event.altKey});
} }
} }
// K, UP // K, UP
else if( keyCode === 75 || keyCode === 38 ) { else if( keyCode === 75 || keyCode === 38 ) {
if( !this.Reveal.overview.isActive() && useLinearMode ) { if( event.shiftKey ) {
this.Reveal.prev(); this.Reveal.slide( undefined, 0 );
}
else if( !this.Reveal.overview.isActive() && useLinearMode ) {
this.Reveal.prev({skipFragments: event.altKey});
} }
else { else {
this.Reveal.up(); this.Reveal.up({skipFragments: event.altKey});
} }
} }
// J, DOWN // J, DOWN
else if( keyCode === 74 || keyCode === 40 ) { else if( keyCode === 74 || keyCode === 40 ) {
if( !this.Reveal.overview.isActive() && useLinearMode ) { if( event.shiftKey ) {
this.Reveal.next(); this.Reveal.slide( undefined, Number.MAX_VALUE );
}
else if( !this.Reveal.overview.isActive() && useLinearMode ) {
this.Reveal.next({skipFragments: event.altKey});
} }
else { else {
this.Reveal.down(); this.Reveal.down({skipFragments: event.altKey});
} }
} }
// HOME // HOME
@@ -331,7 +335,7 @@ export default class Keyboard {
} }
// END // END
else if( keyCode === 35 ) { else if( keyCode === 35 ) {
this.Reveal.slide( Number.MAX_VALUE ); this.Reveal.slide( this.Reveal.getHorizontalSlides().length - 1 );
} }
// SPACE // SPACE
else if( keyCode === 32 ) { else if( keyCode === 32 ) {
@@ -339,10 +343,10 @@ export default class Keyboard {
this.Reveal.overview.deactivate(); this.Reveal.overview.deactivate();
} }
if( event.shiftKey ) { if( event.shiftKey ) {
this.Reveal.prev(); this.Reveal.prev({skipFragments: event.altKey});
} }
else { else {
this.Reveal.next(); this.Reveal.next({skipFragments: event.altKey});
} }
} }
// TWO-SPOT, SEMICOLON, B, V, PERIOD, LOGITECH PRESENTER TOOLS "BLACK SCREEN" BUTTON // TWO-SPOT, SEMICOLON, B, V, PERIOD, LOGITECH PRESENTER TOOLS "BLACK SCREEN" BUTTON
scripts/reveal.js/js/controllers/location.js
+63 -27
View File
@@ -3,6 +3,10 @@
*/ */
export default class Location { export default class Location {
// The minimum number of milliseconds that must pass between
// calls to history.replaceState
MAX_REPLACE_STATE_FREQUENCY = 1000
constructor( Reveal ) { constructor( Reveal ) {
this.Reveal = Reveal; this.Reveal = Reveal;
@@ -10,6 +14,8 @@ export default class Location {
// Delays updates to the URL due to a Chrome thumbnailer bug // Delays updates to the URL due to a Chrome thumbnailer bug
this.writeURLTimeout = 0; this.writeURLTimeout = 0;
this.replaceStateTimestamp = 0;
this.onWindowHashChange = this.onWindowHashChange.bind( this ); this.onWindowHashChange = this.onWindowHashChange.bind( this );
} }
@@ -27,19 +33,18 @@ export default class Location {
} }
/** /**
* Reads the current URL (hash) and navigates accordingly. * Returns the slide indices for the given hash link.
*
* @param {string} [hash] the hash string that we want to
* find the indices for
*
* @returns slide indices or null
*/ */
readURL() { getIndicesFromHash( hash=window.location.hash ) {
let config = this.Reveal.getConfig();
let indices = this.Reveal.getIndices();
let currentSlide = this.Reveal.getCurrentSlide();
let hash = window.location.hash;
// Attempt to parse the hash as either an index or name // Attempt to parse the hash as either an index or name
let bits = hash.slice( 2 ).split( '/' ), let name = hash.replace( /^#\/?/, '' );
name = hash.replace( /#\/?/gi, '' ); let bits = name.split( '/' );
// If the first bit is not fully numeric and there is a name we // If the first bit is not fully numeric and there is a name we
// can assume that this is a named link // can assume that this is a named link
@@ -61,23 +66,12 @@ export default class Location {
} }
catch ( error ) { } catch ( error ) { }
// Ensure that we're not already on a slide with the same name
let isSameNameAsCurrentSlide = currentSlide ? currentSlide.getAttribute( 'id' ) === name : false;
if( element ) { if( element ) {
// If the slide exists and is not the current slide... return { ...this.Reveal.getIndices( element ), f };
if ( !isSameNameAsCurrentSlide || typeof f !== 'undefined' ) {
// ...find the position of the named slide and navigate to it
let slideIndices = this.Reveal.getIndices( element );
this.Reveal.slide( slideIndices.h, slideIndices.v, f );
}
}
// If the slide doesn't exist, navigate to the current slide
else {
this.Reveal.slide( indices.h || 0, indices.v || 0 );
} }
} }
else { else {
const config = this.Reveal.getConfig();
let hashIndexBase = config.hashOneBasedIndex ? 1 : 0; let hashIndexBase = config.hashOneBasedIndex ? 1 : 0;
// Read the index components of the hash // Read the index components of the hash
@@ -92,10 +86,32 @@ export default class Location {
} }
} }
if( h !== indices.h || v !== indices.v || f !== undefined ) { return { h, v, f };
this.Reveal.slide( h, v, f ); }
// The hash couldn't be parsed or no matching named link was found
return null
}
/**
* Reads the current URL (hash) and navigates accordingly.
*/
readURL() {
const currentIndices = this.Reveal.getIndices();
const newIndices = this.getIndicesFromHash();
if( newIndices ) {
if( ( newIndices.h !== currentIndices.h || newIndices.v !== currentIndices.v || newIndices.f !== undefined ) ) {
this.Reveal.slide( newIndices.h, newIndices.v, newIndices.f );
} }
} }
// If no new indices are available, we're trying to navigate to
// a slide hash that does not exist
else {
this.Reveal.slide( currentIndices.h || 0, currentIndices.v || 0 );
}
} }
@@ -132,10 +148,10 @@ export default class Location {
else if( config.hash ) { else if( config.hash ) {
// If the hash is empty, don't add it to the URL // If the hash is empty, don't add it to the URL
if( hash === '/' ) { if( hash === '/' ) {
window.history.replaceState( null, null, window.location.pathname + window.location.search ); this.debouncedReplaceState( window.location.pathname + window.location.search );
} }
else { else {
window.history.replaceState( null, null, '#' + hash ); this.debouncedReplaceState( '#' + hash );
} }
} }
// UPDATE: The below nuking of all hash changes breaks // UPDATE: The below nuking of all hash changes breaks
@@ -153,6 +169,26 @@ export default class Location {
} }
replaceState( url ) {
window.history.replaceState( null, null, url );
this.replaceStateTimestamp = Date.now();
}
debouncedReplaceState( url ) {
clearTimeout( this.replaceStateTimeout );
if( Date.now() - this.replaceStateTimestamp > this.MAX_REPLACE_STATE_FREQUENCY ) {
this.replaceState( url );
}
else {
this.replaceStateTimeout = setTimeout( () => this.replaceState( url ), this.MAX_REPLACE_STATE_FREQUENCY );
}
}
/** /**
* Return a hash URL that will resolve to the given slide location. * Return a hash URL that will resolve to the given slide location.
* *
scripts/reveal.js/js/controllers/notes.js
+6
View File
@@ -111,4 +111,10 @@ export default class Notes {
} }
destroy() {
this.element.remove();
}
} }
scripts/reveal.js/js/controllers/plugins.js
+13
View File
@@ -238,4 +238,17 @@ export default class Plugins {
} }
destroy() {
Object.values( this.registeredPlugins ).forEach( plugin => {
if( typeof plugin.destroy === 'function' ) {
plugin.destroy();
}
} );
this.registeredPlugins = {};
this.asyncDependencies = [];
}
} }
scripts/reveal.js/js/controllers/pointer.js
+11
View File
@@ -75,6 +75,17 @@ export default class Pointer {
} }
destroy() {
this.showCursor();
document.removeEventListener( 'DOMMouseScroll', this.onDocumentMouseScroll, false );
document.removeEventListener( 'mousewheel', this.onDocumentMouseScroll, false );
document.removeEventListener( 'mousemove', this.onDocumentCursorActive, false );
document.removeEventListener( 'mousedown', this.onDocumentCursorActive, false );
}
/** /**
* Called whenever there is mouse input at the document level * Called whenever there is mouse input at the document level
* to determine if the cursor is active or not. * to determine if the cursor is active or not.
scripts/reveal.js/js/controllers/print.js
+62 -29
View File
@@ -16,20 +16,26 @@ export default class Print {
* Configures the presentation for printing to a static * Configures the presentation for printing to a static
* PDF. * PDF.
*/ */
setupPDF() { async setupPDF() {
let config = this.Reveal.getConfig(); const config = this.Reveal.getConfig();
const slides = queryAll( this.Reveal.getRevealElement(), SLIDES_SELECTOR )
let slideSize = this.Reveal.getComputedSlideSize( window.innerWidth, window.innerHeight ); // Compute slide numbers now, before we start duplicating slides
const doingSlideNumbers = config.slideNumber && /all|print/i.test( config.showSlideNumber );
const slideSize = this.Reveal.getComputedSlideSize( window.innerWidth, window.innerHeight );
// Dimensions of the PDF pages // Dimensions of the PDF pages
let pageWidth = Math.floor( slideSize.width * ( 1 + config.margin ) ), const pageWidth = Math.floor( slideSize.width * ( 1 + config.margin ) ),
pageHeight = Math.floor( slideSize.height * ( 1 + config.margin ) ); pageHeight = Math.floor( slideSize.height * ( 1 + config.margin ) );
// Dimensions of slides within the pages // Dimensions of slides within the pages
let slideWidth = slideSize.width, const slideWidth = slideSize.width,
slideHeight = slideSize.height; slideHeight = slideSize.height;
await new Promise( requestAnimationFrame );
// Let the browser know what page size we want to print // Let the browser know what page size we want to print
createStyleSheet( '@page{size:'+ pageWidth +'px '+ pageHeight +'px; margin: 0px;}' ); createStyleSheet( '@page{size:'+ pageWidth +'px '+ pageHeight +'px; margin: 0px;}' );
@@ -40,26 +46,38 @@ export default class Print {
document.body.style.width = pageWidth + 'px'; document.body.style.width = pageWidth + 'px';
document.body.style.height = pageHeight + 'px'; document.body.style.height = pageHeight + 'px';
const viewportElement = document.querySelector( '.reveal-viewport' );
let presentationBackground;
if( viewportElement ) {
const viewportStyles = window.getComputedStyle( viewportElement );
if( viewportStyles && viewportStyles.background ) {
presentationBackground = viewportStyles.background;
}
}
// Make sure stretch elements fit on slide // Make sure stretch elements fit on slide
await new Promise( requestAnimationFrame );
this.Reveal.layoutSlideContents( slideWidth, slideHeight ); this.Reveal.layoutSlideContents( slideWidth, slideHeight );
// Compute slide numbers now, before we start duplicating slides // Batch scrollHeight access to prevent layout thrashing
let doingSlideNumbers = config.slideNumber && /all|print/i.test( config.showSlideNumber ); await new Promise( requestAnimationFrame );
queryAll( this.Reveal.getRevealElement(), SLIDES_SELECTOR ).forEach( function( slide ) {
slide.setAttribute( 'data-slide-number', this.Reveal.slideNumber.getSlideNumber( slide ) ); const slideScrollHeights = slides.map( slide => slide.scrollHeight );
}, this );
const pages = [];
const pageContainer = slides[0].parentNode;
// Slide and slide background layout // Slide and slide background layout
queryAll( this.Reveal.getRevealElement(), SLIDES_SELECTOR ).forEach( function( slide ) { slides.forEach( function( slide, index ) {
// Vertical stacks are not centred since their section // Vertical stacks are not centred since their section
// children will be // children will be
if( slide.classList.contains( 'stack' ) === false ) { if( slide.classList.contains( 'stack' ) === false ) {
// Center the slide inside of the page, giving the slide some margin // Center the slide inside of the page, giving the slide some margin
let left = ( pageWidth - slideWidth ) / 2, let left = ( pageWidth - slideWidth ) / 2;
top = ( pageHeight - slideHeight ) / 2; let top = ( pageHeight - slideHeight ) / 2;
let contentHeight = slide.scrollHeight; const contentHeight = slideScrollHeights[ index ];
let numberOfPages = Math.max( Math.ceil( contentHeight / pageHeight ), 1 ); let numberOfPages = Math.max( Math.ceil( contentHeight / pageHeight ), 1 );
// Adhere to configured pages per slide limit // Adhere to configured pages per slide limit
@@ -72,10 +90,18 @@ export default class Print {
// Wrap the slide in a page element and hide its overflow // Wrap the slide in a page element and hide its overflow
// so that no page ever flows onto another // so that no page ever flows onto another
let page = document.createElement( 'div' ); const page = document.createElement( 'div' );
pages.push( page );
page.className = 'pdf-page'; page.className = 'pdf-page';
page.style.height = ( ( pageHeight + config.pdfPageHeightOffset ) * numberOfPages ) + 'px'; page.style.height = ( ( pageHeight + config.pdfPageHeightOffset ) * numberOfPages ) + 'px';
slide.parentNode.insertBefore( page, slide );
// Copy the presentation-wide background to each individual
// page when printing
if( presentationBackground ) {
page.style.background = presentationBackground;
}
page.appendChild( slide ); page.appendChild( slide );
// Position the slide inside of the page // Position the slide inside of the page
@@ -83,6 +109,10 @@ export default class Print {
slide.style.top = top + 'px'; slide.style.top = top + 'px';
slide.style.width = slideWidth + 'px'; slide.style.width = slideWidth + 'px';
// Re-run the slide layout so that r-fit-text is applied based on
// the printed slide size
this.Reveal.slideContent.layout( slide )
if( slide.slideBackgroundElement ) { if( slide.slideBackgroundElement ) {
page.insertBefore( slide.slideBackgroundElement, slide ); page.insertBefore( slide.slideBackgroundElement, slide );
} }
@@ -91,19 +121,19 @@ export default class Print {
if( config.showNotes ) { if( config.showNotes ) {
// Are there notes for this slide? // Are there notes for this slide?
let notes = this.Reveal.getSlideNotes( slide ); const notes = this.Reveal.getSlideNotes( slide );
if( notes ) { if( notes ) {
let notesSpacing = 8; const notesSpacing = 8;
let notesLayout = typeof config.showNotes === 'string' ? config.showNotes : 'inline'; const notesLayout = typeof config.showNotes === 'string' ? config.showNotes : 'inline';
let notesElement = document.createElement( 'div' ); const notesElement = document.createElement( 'div' );
notesElement.classList.add( 'speaker-notes' ); notesElement.classList.add( 'speaker-notes' );
notesElement.classList.add( 'speaker-notes-pdf' ); notesElement.classList.add( 'speaker-notes-pdf' );
notesElement.setAttribute( 'data-layout', notesLayout ); notesElement.setAttribute( 'data-layout', notesLayout );
notesElement.innerHTML = notes; notesElement.innerHTML = notes;
if( notesLayout === 'separate-page' ) { if( notesLayout === 'separate-page' ) {
page.parentNode.insertBefore( notesElement, page.nextSibling ); pages.push( notesElement );
} }
else { else {
notesElement.style.left = notesSpacing + 'px'; notesElement.style.left = notesSpacing + 'px';
@@ -118,10 +148,11 @@ export default class Print {
// Inject slide numbers if `slideNumbers` are enabled // Inject slide numbers if `slideNumbers` are enabled
if( doingSlideNumbers ) { if( doingSlideNumbers ) {
let numberElement = document.createElement( 'div' ); const slideNumber = index + 1;
const numberElement = document.createElement( 'div' );
numberElement.classList.add( 'slide-number' ); numberElement.classList.add( 'slide-number' );
numberElement.classList.add( 'slide-number-pdf' ); numberElement.classList.add( 'slide-number-pdf' );
numberElement.innerHTML = slide.getAttribute( 'data-slide-number' ); numberElement.innerHTML = slideNumber;
page.appendChild( numberElement ); page.appendChild( numberElement );
} }
@@ -131,10 +162,9 @@ export default class Print {
// Each fragment 'group' is an array containing one or more // Each fragment 'group' is an array containing one or more
// fragments. Multiple fragments that appear at the same time // fragments. Multiple fragments that appear at the same time
// are part of the same group. // are part of the same group.
let fragmentGroups = this.Reveal.fragments.sort( page.querySelectorAll( '.fragment' ), true ); const fragmentGroups = this.Reveal.fragments.sort( page.querySelectorAll( '.fragment' ), true );
let previousFragmentStep; let previousFragmentStep;
let previousPage;
fragmentGroups.forEach( function( fragments ) { fragmentGroups.forEach( function( fragments ) {
@@ -151,11 +181,10 @@ export default class Print {
}, this ); }, this );
// Create a separate page for the current fragment state // Create a separate page for the current fragment state
let clonedPage = page.cloneNode( true ); const clonedPage = page.cloneNode( true );
page.parentNode.insertBefore( clonedPage, ( previousPage || page ).nextSibling ); pages.push( clonedPage );
previousFragmentStep = fragments; previousFragmentStep = fragments;
previousPage = clonedPage;
}, this ); }, this );
@@ -178,6 +207,10 @@ export default class Print {
}, this ); }, this );
await new Promise( requestAnimationFrame );
pages.forEach( page => pageContainer.appendChild( page ) );
// Notify subscribers that the PDF layout is good to go // Notify subscribers that the PDF layout is good to go
this.Reveal.dispatchEvent({ type: 'pdf-ready' }); this.Reveal.dispatchEvent({ type: 'pdf-ready' });
@@ -192,4 +225,4 @@ export default class Print {
} }
} }
scripts/reveal.js/js/controllers/progress.js
+9 -2
View File
@@ -88,16 +88,23 @@ export default class Progress {
event.preventDefault(); event.preventDefault();
let slidesTotal = this.Reveal.getHorizontalSlides().length; let slides = this.Reveal.getSlides();
let slidesTotal = slides.length;
let slideIndex = Math.floor( ( event.clientX / this.getMaxWidth() ) * slidesTotal ); let slideIndex = Math.floor( ( event.clientX / this.getMaxWidth() ) * slidesTotal );
if( this.Reveal.getConfig().rtl ) { if( this.Reveal.getConfig().rtl ) {
slideIndex = slidesTotal - slideIndex; slideIndex = slidesTotal - slideIndex;
} }
this.Reveal.slide( slideIndex ); let targetIndices = this.Reveal.getIndices(slides[slideIndex]);
this.Reveal.slide( targetIndices.h, targetIndices.v );
} }
destroy() {
this.element.remove();
}
} }
scripts/reveal.js/js/controllers/slidecontent.js
+30 -7
View File
@@ -1,5 +1,4 @@
import { HORIZONTAL_SLIDES_SELECTOR, VERTICAL_SLIDES_SELECTOR } from '../utils/constants.js' import { extend, queryAll, closest, getMimeTypeFromFile } from '../utils/util.js'
import { extend, queryAll, closest } from '../utils/util.js'
import { isMobile } from '../utils/device.js' import { isMobile } from '../utils/device.js'
import fitty from 'fitty'; import fitty from 'fitty';
@@ -102,7 +101,16 @@ export default class SlideContent {
// Images // Images
if( backgroundImage ) { if( backgroundImage ) {
backgroundContent.style.backgroundImage = 'url('+ encodeURI( backgroundImage ) +')'; // base64
if( /^data:/.test( backgroundImage.trim() ) ) {
backgroundContent.style.backgroundImage = `url(${backgroundImage.trim()})`;
}
// URL(s)
else {
backgroundContent.style.backgroundImage = backgroundImage.split( ',' ).map( background => {
return `url(${encodeURI(background.trim())})`;
}).join( ',' );
}
} }
// Videos // Videos
else if ( backgroundVideo && !this.Reveal.isSpeakerNotes() ) { else if ( backgroundVideo && !this.Reveal.isSpeakerNotes() ) {
@@ -128,7 +136,13 @@ export default class SlideContent {
// Support comma separated lists of video sources // Support comma separated lists of video sources
backgroundVideo.split( ',' ).forEach( source => { backgroundVideo.split( ',' ).forEach( source => {
video.innerHTML += '<source src="'+ source +'">'; let type = getMimeTypeFromFile( source );
if( type ) {
video.innerHTML += `<source src="${source}" type="${type}">`;
}
else {
video.innerHTML += `<source src="${source}">`;
}
} ); } );
backgroundContent.appendChild( video ); backgroundContent.appendChild( video );
@@ -167,11 +181,20 @@ export default class SlideContent {
} }
this.layout( slide );
}
/**
* Applies JS-dependent layout helpers for the given slide,
* if there are any.
*/
layout( slide ) {
// Autosize text with the r-fit-text class based on the // Autosize text with the r-fit-text class based on the
// size of its container. This needs to happen after the // size of its container. This needs to happen after the
// slide is visible in order to measure the text. // slide is visible in order to measure the text.
Array.from( slide.querySelectorAll( '.r-fit-text:not([data-fitted])' ) ).forEach( element => { Array.from( slide.querySelectorAll( '.r-fit-text' ) ).forEach( element => {
element.dataset.fitted = '';
fitty( element, { fitty( element, {
minSize: 24, minSize: 24,
maxSize: this.Reveal.getConfig().height * 0.8, maxSize: this.Reveal.getConfig().height * 0.8,
@@ -453,4 +476,4 @@ export default class SlideContent {
} }
} }
scripts/reveal.js/js/controllers/slidenumber.js
+6
View File
@@ -123,4 +123,10 @@ export default class SlideNumber {
} }
destroy() {
this.element.remove();
}
} }
scripts/reveal.js/js/controllers/touch.js
+4
View File
@@ -1,4 +1,5 @@
import { isAndroid } from '../utils/device.js' import { isAndroid } from '../utils/device.js'
import { matches } from '../utils/util.js'
const SWIPE_THRESHOLD = 40; const SWIPE_THRESHOLD = 40;
@@ -82,6 +83,9 @@ export default class Touch {
*/ */
isSwipePrevented( target ) { isSwipePrevented( target ) {
// Prevent accidental swipes when scrubbing timelines
if( matches( target, 'video, audio' ) ) return true;
while( target && typeof target.hasAttribute === 'function' ) { while( target && typeof target.hasAttribute === 'function' ) {
if( target.hasAttribute( 'data-prevent-swipe' ) ) return true; if( target.hasAttribute( 'data-prevent-swipe' ) ) return true;
target = target.parentNode; target = target.parentNode;
scripts/reveal.js/js/reveal.js
+223 -53
View File
@@ -26,14 +26,14 @@ import {
} from './utils/constants.js' } from './utils/constants.js'
// The reveal.js version // The reveal.js version
export const VERSION = '4.1.0'; export const VERSION = '4.3.1';
/** /**
* reveal.js * reveal.js
* https://revealjs.com * https://revealjs.com
* MIT licensed * MIT licensed
* *
* Copyright (C) 2020 Hakim El Hattab, https://hakim.se * Copyright (C) 2011-2022 Hakim El Hattab, https://hakim.se
*/ */
export default function( revealElement, options ) { export default function( revealElement, options ) {
@@ -121,10 +121,14 @@ export default function( revealElement, options ) {
*/ */
function initialize( initOptions ) { function initialize( initOptions ) {
if( !revealElement ) throw 'Unable to find presentation root (<div class="reveal">).';
// Cache references to key DOM elements // Cache references to key DOM elements
dom.wrapper = revealElement; dom.wrapper = revealElement;
dom.slides = revealElement.querySelector( '.slides' ); dom.slides = revealElement.querySelector( '.slides' );
if( !dom.slides ) throw 'Unable to find slides container (<div class="slides">).';
// Compose our config object in order of increasing precedence: // Compose our config object in order of increasing precedence:
// 1. Default reveal.js options // 1. Default reveal.js options
// 2. Options provided via Reveal.configure() prior to // 2. Options provided via Reveal.configure() prior to
@@ -186,6 +190,9 @@ export default function( revealElement, options ) {
// Prevent the slides from being scrolled out of view // Prevent the slides from being scrolled out of view
setupScrollPrevention(); setupScrollPrevention();
// Adds bindings for fullscreen mode
setupFullscreen();
// Resets all vertical slides so that only the first is visible // Resets all vertical slides so that only the first is visible
resetVerticalSlides(); resetVerticalSlides();
@@ -372,6 +379,19 @@ export default function( revealElement, options ) {
} }
/**
* After entering fullscreen we need to force a layout to
* get our presentations to scale correctly. This behavior
* is inconsistent across browsers but a force layout seems
* to normalize it.
*/
function setupFullscreen() {
document.addEventListener( 'fullscreenchange', onFullscreenChange );
document.addEventListener( 'webkitfullscreenchange', onFullscreenChange );
}
/** /**
* Registers a listener to postMessage events, this makes it * Registers a listener to postMessage events, this makes it
* possible to call all reveal.js API methods from another * possible to call all reveal.js API methods from another
@@ -385,32 +405,7 @@ export default function( revealElement, options ) {
function setupPostMessage() { function setupPostMessage() {
if( config.postMessage ) { if( config.postMessage ) {
window.addEventListener( 'message', event => { window.addEventListener( 'message', onPostMessage, false );
let data = event.data;
// Make sure we're dealing with JSON
if( typeof data === 'string' && data.charAt( 0 ) === '{' && data.charAt( data.length - 1 ) === '}' ) {
data = JSON.parse( data );
// Check if the requested method can be found
if( data.method && typeof Reveal[data.method] === 'function' ) {
if( POST_MESSAGE_METHOD_BLACKLIST.test( data.method ) === false ) {
const result = Reveal[data.method].apply( Reveal, data.args );
// Dispatch a postMessage event with the returned value from
// our method invocation for getter functions
dispatchPostMessage( 'callback', { method: data.method, result: result } );
}
else {
console.warn( 'reveal.js: "'+ data.method +'" is is blacklisted from the postMessage API' );
}
}
}
}, false );
} }
} }
@@ -525,6 +520,7 @@ export default function( revealElement, options ) {
controls.bind(); controls.bind();
focus.bind(); focus.bind();
dom.slides.addEventListener( 'click', onSlidesClicked, false );
dom.slides.addEventListener( 'transitionend', onTransitionEnd, false ); dom.slides.addEventListener( 'transitionend', onTransitionEnd, false );
dom.pauseOverlay.addEventListener( 'click', resume, false ); dom.pauseOverlay.addEventListener( 'click', resume, false );
@@ -550,11 +546,71 @@ export default function( revealElement, options ) {
window.removeEventListener( 'resize', onWindowResize, false ); window.removeEventListener( 'resize', onWindowResize, false );
dom.slides.removeEventListener( 'click', onSlidesClicked, false );
dom.slides.removeEventListener( 'transitionend', onTransitionEnd, false ); dom.slides.removeEventListener( 'transitionend', onTransitionEnd, false );
dom.pauseOverlay.removeEventListener( 'click', resume, false ); dom.pauseOverlay.removeEventListener( 'click', resume, false );
} }
/**
* Uninitializes reveal.js by undoing changes made to the
* DOM and removing all event listeners.
*/
function destroy() {
removeEventListeners();
cancelAutoSlide();
disablePreviewLinks();
// Destroy controllers
notes.destroy();
focus.destroy();
plugins.destroy();
pointer.destroy();
controls.destroy();
progress.destroy();
backgrounds.destroy();
slideNumber.destroy();
// Remove event listeners
document.removeEventListener( 'fullscreenchange', onFullscreenChange );
document.removeEventListener( 'webkitfullscreenchange', onFullscreenChange );
document.removeEventListener( 'visibilitychange', onPageVisibilityChange, false );
window.removeEventListener( 'message', onPostMessage, false );
window.removeEventListener( 'load', layout, false );
// Undo DOM changes
if( dom.pauseOverlay ) dom.pauseOverlay.remove();
if( dom.statusElement ) dom.statusElement.remove();
document.documentElement.classList.remove( 'reveal-full-page' );
dom.wrapper.classList.remove( 'ready', 'center', 'has-horizontal-slides', 'has-vertical-slides' );
dom.wrapper.removeAttribute( 'data-transition-speed' );
dom.wrapper.removeAttribute( 'data-background-transition' );
dom.viewport.classList.remove( 'reveal-viewport' );
dom.viewport.style.removeProperty( '--slide-width' );
dom.viewport.style.removeProperty( '--slide-height' );
dom.slides.style.removeProperty( 'width' );
dom.slides.style.removeProperty( 'height' );
dom.slides.style.removeProperty( 'zoom' );
dom.slides.style.removeProperty( 'left' );
dom.slides.style.removeProperty( 'top' );
dom.slides.style.removeProperty( 'bottom' );
dom.slides.style.removeProperty( 'right' );
dom.slides.style.removeProperty( 'transform' );
Array.from( dom.wrapper.querySelectorAll( SLIDES_SELECTOR ) ).forEach( slide => {
slide.style.removeProperty( 'display' );
slide.style.removeProperty( 'top' );
slide.removeAttribute( 'hidden' );
slide.removeAttribute( 'aria-hidden' );
} );
}
/** /**
* Adds a listener to one of our custom reveal.js events, * Adds a listener to one of our custom reveal.js events,
* like slidechanged. * like slidechanged.
@@ -614,6 +670,8 @@ export default function( revealElement, options ) {
dispatchPostMessage( type ); dispatchPostMessage( type );
} }
return event;
} }
/** /**
@@ -1188,9 +1246,22 @@ export default function( revealElement, options ) {
* @param {number} [v=indexv] Vertical index of the target slide * @param {number} [v=indexv] Vertical index of the target slide
* @param {number} [f] Index of a fragment within the * @param {number} [f] Index of a fragment within the
* target slide to activate * target slide to activate
* @param {number} [o] Origin for use in multimaster environments * @param {number} [origin] Origin for use in multimaster environments
*/ */
function slide( h, v, f, o ) { function slide( h, v, f, origin ) {
// Dispatch an event before hte slide
const slidechange = dispatchEvent({
type: 'beforeslidechange',
data: {
indexh: h === undefined ? indexh : h,
indexv: v === undefined ? indexv : v,
origin
}
});
// Abort if this slide change was prevented by an event listener
if( slidechange.defaultPrevented ) return;
// Remember where we were at before // Remember where we were at before
previousSlide = currentSlide; previousSlide = currentSlide;
@@ -1251,7 +1322,10 @@ export default function( revealElement, options ) {
// Note 20-03-2020: // Note 20-03-2020:
// This needs to happen before we update slide visibility, // This needs to happen before we update slide visibility,
// otherwise transitions will still run in Safari. // otherwise transitions will still run in Safari.
if( previousSlide.hasAttribute( 'data-auto-animate' ) && currentSlide.hasAttribute( 'data-auto-animate' ) ) { if( previousSlide.hasAttribute( 'data-auto-animate' ) && currentSlide.hasAttribute( 'data-auto-animate' )
&& previousSlide.getAttribute( 'data-auto-animate-id' ) === currentSlide.getAttribute( 'data-auto-animate-id' )
&& !( ( indexh > indexhBefore || indexv > indexvBefore ) ? currentSlide : previousSlide ).hasAttribute( 'data-auto-animate-restart' ) ) {
autoAnimateTransition = true; autoAnimateTransition = true;
dom.slides.classList.add( 'disable-slide-transitions' ); dom.slides.classList.add( 'disable-slide-transitions' );
} }
@@ -1323,7 +1397,7 @@ export default function( revealElement, options ) {
indexv, indexv,
previousSlide, previousSlide,
currentSlide, currentSlide,
origin: o origin
} }
}); });
} }
@@ -1335,7 +1409,11 @@ export default function( revealElement, options ) {
} }
// Announce the current slide contents to screen readers // Announce the current slide contents to screen readers
announceStatus( getStatusText( currentSlide ) ); // Use animation frame to prevent getComputedStyle in getStatusText
// from triggering layout mid-frame
requestAnimationFrame( () => {
announceStatus( getStatusText( currentSlide ) );
});
progress.update(); progress.update();
controls.update(); controls.update();
@@ -2186,55 +2264,55 @@ export default function( revealElement, options ) {
} }
function navigateLeft() { function navigateLeft({skipFragments=false}={}) {
navigationHistory.hasNavigatedHorizontally = true; navigationHistory.hasNavigatedHorizontally = true;
// Reverse for RTL // Reverse for RTL
if( config.rtl ) { if( config.rtl ) {
if( ( overview.isActive() || fragments.next() === false ) && availableRoutes().left ) { if( ( overview.isActive() || skipFragments || fragments.next() === false ) && availableRoutes().left ) {
slide( indexh + 1, config.navigationMode === 'grid' ? indexv : undefined ); slide( indexh + 1, config.navigationMode === 'grid' ? indexv : undefined );
} }
} }
// Normal navigation // Normal navigation
else if( ( overview.isActive() || fragments.prev() === false ) && availableRoutes().left ) { else if( ( overview.isActive() || skipFragments || fragments.prev() === false ) && availableRoutes().left ) {
slide( indexh - 1, config.navigationMode === 'grid' ? indexv : undefined ); slide( indexh - 1, config.navigationMode === 'grid' ? indexv : undefined );
} }
} }
function navigateRight() { function navigateRight({skipFragments=false}={}) {
navigationHistory.hasNavigatedHorizontally = true; navigationHistory.hasNavigatedHorizontally = true;
// Reverse for RTL // Reverse for RTL
if( config.rtl ) { if( config.rtl ) {
if( ( overview.isActive() || fragments.prev() === false ) && availableRoutes().right ) { if( ( overview.isActive() || skipFragments || fragments.prev() === false ) && availableRoutes().right ) {
slide( indexh - 1, config.navigationMode === 'grid' ? indexv : undefined ); slide( indexh - 1, config.navigationMode === 'grid' ? indexv : undefined );
} }
} }
// Normal navigation // Normal navigation
else if( ( overview.isActive() || fragments.next() === false ) && availableRoutes().right ) { else if( ( overview.isActive() || skipFragments || fragments.next() === false ) && availableRoutes().right ) {
slide( indexh + 1, config.navigationMode === 'grid' ? indexv : undefined ); slide( indexh + 1, config.navigationMode === 'grid' ? indexv : undefined );
} }
} }
function navigateUp() { function navigateUp({skipFragments=false}={}) {
// Prioritize hiding fragments // Prioritize hiding fragments
if( ( overview.isActive() || fragments.prev() === false ) && availableRoutes().up ) { if( ( overview.isActive() || skipFragments || fragments.prev() === false ) && availableRoutes().up ) {
slide( indexh, indexv - 1 ); slide( indexh, indexv - 1 );
} }
} }
function navigateDown() { function navigateDown({skipFragments=false}={}) {
navigationHistory.hasNavigatedVertically = true; navigationHistory.hasNavigatedVertically = true;
// Prioritize revealing fragments // Prioritize revealing fragments
if( ( overview.isActive() || fragments.next() === false ) && availableRoutes().down ) { if( ( overview.isActive() || skipFragments || fragments.next() === false ) && availableRoutes().down ) {
slide( indexh, indexv + 1 ); slide( indexh, indexv + 1 );
} }
@@ -2246,12 +2324,12 @@ export default function( revealElement, options ) {
* 2) Previous vertical slide * 2) Previous vertical slide
* 3) Previous horizontal slide * 3) Previous horizontal slide
*/ */
function navigatePrev() { function navigatePrev({skipFragments=false}={}) {
// Prioritize revealing fragments // Prioritize revealing fragments
if( fragments.prev() === false ) { if( skipFragments || fragments.prev() === false ) {
if( availableRoutes().up ) { if( availableRoutes().up ) {
navigateUp(); navigateUp({skipFragments});
} }
else { else {
// Fetch the previous horizontal slide, if there is one // Fetch the previous horizontal slide, if there is one
@@ -2264,11 +2342,16 @@ export default function( revealElement, options ) {
previousSlide = Util.queryAll( dom.wrapper, HORIZONTAL_SLIDES_SELECTOR + '.past' ).pop(); previousSlide = Util.queryAll( dom.wrapper, HORIZONTAL_SLIDES_SELECTOR + '.past' ).pop();
} }
if( previousSlide ) { // When going backwards and arriving on a stack we start
// at the bottom of the stack
if( previousSlide && previousSlide.classList.contains( 'stack' ) ) {
let v = ( previousSlide.querySelectorAll( 'section' ).length - 1 ) || undefined; let v = ( previousSlide.querySelectorAll( 'section' ).length - 1 ) || undefined;
let h = indexh - 1; let h = indexh - 1;
slide( h, v ); slide( h, v );
} }
else {
navigateLeft({skipFragments});
}
} }
} }
@@ -2277,31 +2360,31 @@ export default function( revealElement, options ) {
/** /**
* The reverse of #navigatePrev(). * The reverse of #navigatePrev().
*/ */
function navigateNext() { function navigateNext({skipFragments=false}={}) {
navigationHistory.hasNavigatedHorizontally = true; navigationHistory.hasNavigatedHorizontally = true;
navigationHistory.hasNavigatedVertically = true; navigationHistory.hasNavigatedVertically = true;
// Prioritize revealing fragments // Prioritize revealing fragments
if( fragments.next() === false ) { if( skipFragments || fragments.next() === false ) {
let routes = availableRoutes(); let routes = availableRoutes();
// When looping is enabled `routes.down` is always available // When looping is enabled `routes.down` is always available
// so we need a separate check for when we've reached the // so we need a separate check for when we've reached the
// end of a stack and should move horizontally // end of a stack and should move horizontally
if( routes.down && routes.right && config.loop && isLastVerticalSlide( currentSlide ) ) { if( routes.down && routes.right && config.loop && isLastVerticalSlide() ) {
routes.down = false; routes.down = false;
} }
if( routes.down ) { if( routes.down ) {
navigateDown(); navigateDown({skipFragments});
} }
else if( config.rtl ) { else if( config.rtl ) {
navigateLeft(); navigateLeft({skipFragments});
} }
else { else {
navigateRight(); navigateRight({skipFragments});
} }
} }
@@ -2326,6 +2409,38 @@ export default function( revealElement, options ) {
} }
/**
* Listener for post message events posted to this window.
*/
function onPostMessage( event ) {
let data = event.data;
// Make sure we're dealing with JSON
if( typeof data === 'string' && data.charAt( 0 ) === '{' && data.charAt( data.length - 1 ) === '}' ) {
data = JSON.parse( data );
// Check if the requested method can be found
if( data.method && typeof Reveal[data.method] === 'function' ) {
if( POST_MESSAGE_METHOD_BLACKLIST.test( data.method ) === false ) {
const result = Reveal[data.method].apply( Reveal, data.args );
// Dispatch a postMessage event with the returned value from
// our method invocation for getter functions
dispatchPostMessage( 'callback', { method: data.method, result: result } );
}
else {
console.warn( 'reveal.js: "'+ data.method +'" is is blacklisted from the postMessage API' );
}
}
}
}
/** /**
* Event listener for transition end on the current slide. * Event listener for transition end on the current slide.
* *
@@ -2343,6 +2458,33 @@ export default function( revealElement, options ) {
} }
/**
* A global listener for all click events inside of the
* .slides container.
*
* @param {object} [event]
*/
function onSlidesClicked( event ) {
const anchor = Util.closest( event.target, 'a[href^="#"]' );
// If a hash link is clicked, we find the target slide
// and navigate to it. We previously relied on 'hashchange'
// for links like these but that prevented media with
// audio tracks from playing in mobile browsers since it
// wasn't considered a direct interaction with the document.
if( anchor ) {
const hash = anchor.getAttribute( 'href' );
const indices = location.getIndicesFromHash( hash );
if( indices ) {
Reveal.slide( indices.h, indices.v, indices.f );
event.preventDefault();
}
}
}
/** /**
* Handler for the window level 'resize' event. * Handler for the window level 'resize' event.
* *
@@ -2373,6 +2515,26 @@ export default function( revealElement, options ) {
} }
/**
* Handler for the document level 'fullscreenchange' event.
*
* @param {object} [event]
*/
function onFullscreenChange( event ) {
let element = document.fullscreenElement || document.webkitFullscreenElement;
if( element === dom.wrapper ) {
event.stopImmediatePropagation();
// Timeout to avoid layout shift in Safari
setTimeout( () => {
Reveal.layout();
Reveal.focus.focus(); // focus.focus :'(
}, 1 );
}
}
/** /**
* Handles clicks on links that are set to preview in the * Handles clicks on links that are set to preview in the
* iframe overlay. * iframe overlay.
@@ -2425,6 +2587,7 @@ export default function( revealElement, options ) {
initialize, initialize,
configure, configure,
destroy,
sync, sync,
syncSlide, syncSlide,
@@ -2500,6 +2663,10 @@ export default function( revealElement, options ) {
loadSlide: slideContent.load.bind( slideContent ), loadSlide: slideContent.load.bind( slideContent ),
unloadSlide: slideContent.unload.bind( slideContent ), unloadSlide: slideContent.unload.bind( slideContent ),
// Preview management
showPreview,
hidePreview: closeOverlay,
// Adds or removes all internal event listeners // Adds or removes all internal event listeners
addEventListeners, addEventListeners,
removeEventListeners, removeEventListeners,
@@ -2577,6 +2744,9 @@ export default function( revealElement, options ) {
// Helper method, retrieves query string as a key:value map // Helper method, retrieves query string as a key:value map
getQueryHash: Util.getQueryHash, getQueryHash: Util.getQueryHash,
// Returns the path to the current slide as represented in the URL
getSlidePath: location.getHash.bind( location ),
// Returns reveal.js DOM elements // Returns reveal.js DOM elements
getRevealElement: () => revealElement, getRevealElement: () => revealElement,
getSlidesElement: () => dom.slides, getSlidesElement: () => dom.slides,
scripts/reveal.js/js/utils/color.js
+3 -3
View File
@@ -29,9 +29,9 @@ export const colorToRgb = ( color ) => {
if( hex6 && hex6[1] ) { if( hex6 && hex6[1] ) {
hex6 = hex6[1]; hex6 = hex6[1];
return { return {
r: parseInt( hex6.substr( 0, 2 ), 16 ), r: parseInt( hex6.slice( 0, 2 ), 16 ),
g: parseInt( hex6.substr( 2, 2 ), 16 ), g: parseInt( hex6.slice( 2, 4 ), 16 ),
b: parseInt( hex6.substr( 4, 2 ), 16 ) b: parseInt( hex6.slice( 4, 6 ), 16 )
}; };
} }
scripts/reveal.js/js/utils/util.js
+15
View File
@@ -279,4 +279,19 @@ export const getRemainingHeight = ( element, height = 0 ) => {
return height; return height;
}
const fileExtensionToMimeMap = {
'mp4': 'video/mp4',
'm4a': 'video/mp4',
'ogv': 'video/ogg',
'mpeg': 'video/mpeg',
'webm': 'video/webm'
}
/**
* Guess the MIME type for common file formats.
*/
export const getMimeTypeFromFile = ( filename='' ) => {
return fileExtensionToMimeMap[filename.split('.').pop()]
} }
scripts/reveal.js/package-lock.json
Generated
+12430 -3472
View File
File diff suppressed because it is too large Load Diff
scripts/reveal.js/package.json
+21 -20
View File
@@ -1,6 +1,6 @@
{ {
"name": "reveal.js", "name": "reveal.js",
"version": "4.1.0", "version": "4.3.1",
"description": "The HTML Presentation Framework", "description": "The HTML Presentation Framework",
"homepage": "https://revealjs.com", "homepage": "https://revealjs.com",
"subdomain": "revealjs", "subdomain": "revealjs",
@@ -10,7 +10,7 @@
"scripts": { "scripts": {
"test": "gulp test", "test": "gulp test",
"start": "gulp serve", "start": "gulp serve",
"build": "gulp" "build": "gulp build"
}, },
"author": { "author": {
"name": "Hakim El Hattab", "name": "Hakim El Hattab",
@@ -30,32 +30,32 @@
"presentation" "presentation"
], ],
"devDependencies": { "devDependencies": {
"@babel/core": "^7.9.6", "@babel/core": "^7.14.3",
"@babel/preset-env": "^7.9.6", "@babel/eslint-parser": "^7.14.3",
"@rollup/plugin-babel": "^5.2.0", "@babel/preset-env": "^7.14.2",
"@rollup/plugin-commonjs": "^15.0.0", "@rollup/plugin-babel": "^5.3.0",
"@rollup/plugin-node-resolve": "^9.0.0", "@rollup/plugin-commonjs": "^19.0.0",
"babel-eslint": "^10.1.0", "@rollup/plugin-node-resolve": "^13.0.0",
"babel-plugin-transform-html-import-to-string": "0.0.1", "babel-plugin-transform-html-import-to-string": "0.0.1",
"colors": "^1.4.0", "colors": "^1.4.0",
"core-js": "^3.6.5", "core-js": "^3.12.1",
"fitty": "^2.3.0", "fitty": "^2.3.0",
"glob": "^7.1.6", "glob": "^7.1.7",
"gulp": "^4.0.2", "gulp": "^4.0.2",
"gulp-autoprefixer": "^7.0.1", "gulp-autoprefixer": "^8.0.0",
"gulp-clean-css": "^4.2.0", "gulp-clean-css": "^4.2.0",
"gulp-connect": "^5.7.0", "gulp-connect": "^5.7.0",
"gulp-eslint": "^6.0.0", "gulp-eslint": "^6.0.0",
"gulp-header": "^2.0.9", "gulp-header": "^2.0.9",
"gulp-sass": "^4.0.2",
"gulp-tap": "^2.0.0", "gulp-tap": "^2.0.0",
"gulp-zip": "^5.0.1", "gulp-zip": "^4.2.0",
"highlight.js": "^10.0.3", "highlight.js": "^10.0.3",
"marked": "^1.1.0", "marked": "^4.0.12",
"node-qunit-puppeteer": "^2.0.1", "node-qunit-puppeteer": "^2.1.0",
"qunit": "^2.10.0", "qunit": "^2.17.2",
"rollup": "^2.26.4", "rollup": "^2.48.0",
"rollup-plugin-terser": "^7.0.0", "rollup-plugin-terser": "^7.0.2",
"sass": "^1.39.2",
"yargs": "^15.1.0" "yargs": "^15.1.0"
}, },
"browserslist": "> 0.5%, IE 11, not dead", "browserslist": "> 0.5%, IE 11, not dead",
@@ -64,10 +64,11 @@
"browser": true, "browser": true,
"es6": true "es6": true
}, },
"parser": "babel-eslint", "parser": "@babel/eslint-parser",
"parserOptions": { "parserOptions": {
"sourceType": "module", "sourceType": "module",
"allowImportExportEverywhere": true "allowImportExportEverywhere": true,
"requireConfigFile": false
}, },
"globals": { "globals": {
"module": false, "module": false,
scripts/reveal.js/plugin/highlight/highlight.esm.js
+2 -2
View File
File diff suppressed because one or more lines are too long
scripts/reveal.js/plugin/highlight/highlight.js
+4 -4
View File
File diff suppressed because one or more lines are too long
scripts/reveal.js/plugin/highlight/plugin.js
+26 -15
View File
@@ -1,8 +1,8 @@
import hljs from 'highlight.js' import hljs from 'highlight.js';
/* highlightjs-line-numbers.js 2.8.0 | (C) 2018 Yauheni Pakala | MIT License | github.com/wcoder/highlightjs-line-numbers.js */
!function(r,o){"use strict";var e,i="hljs-ln",l="hljs-ln-line",h="hljs-ln-code",s="hljs-ln-numbers",c="hljs-ln-n",m="data-line-number",a=/\r\n|\r|\n/g;function u(e){for(var n=e.toString(),t=e.anchorNode;"TD"!==t.nodeName;)t=t.parentNode;for(var r=e.focusNode;"TD"!==r.nodeName;)r=r.parentNode;var o=parseInt(t.dataset.lineNumber),a=parseInt(r.dataset.lineNumber);if(o==a)return n;var i,l=t.textContent,s=r.textContent;for(a<o&&(i=o,o=a,a=i,i=l,l=s,s=i);0!==n.indexOf(l);)l=l.slice(1);for(;-1===n.lastIndexOf(s);)s=s.slice(0,-1);for(var c=l,u=function(e){for(var n=e;"TABLE"!==n.nodeName;)n=n.parentNode;return n}(t),d=o+1;d<a;++d){var f=p('.{0}[{1}="{2}"]',[h,m,d]);c+="\n"+u.querySelector(f).textContent}return c+="\n"+s}function n(e){try{var n=o.querySelectorAll("code.hljs,code.nohighlight");for(var t in n)n.hasOwnProperty(t)&&(n[t].classList.contains("nohljsln")||d(n[t],e))}catch(e){r.console.error("LineNumbers error: ",e)}}function d(e,n){if("object"==typeof e)e.innerHTML=f(e,n)}function f(e,n){var t,r,o=(t=e,{singleLine:function(e){return!!e.singleLine&&e.singleLine}(r=(r=n)||{}),startFrom:function(e,n){var t=1;isFinite(n.startFrom)&&(t=n.startFrom);var r=function(e,n){return e.hasAttribute(n)?e.getAttribute(n):null}(e,"data-ln-start-from");return null!==r&&(t=function(e,n){if(!e)return n;var t=Number(e);return isFinite(t)?t:n}(r,1)),t}(t,r)});return function e(n){var t=n.childNodes;for(var r in t){var o;t.hasOwnProperty(r)&&(o=t[r],0<(o.textContent.trim().match(a)||[]).length&&(0<o.childNodes.length?e(o):v(o.parentNode)))}}(e),function(e,n){var t=g(e);""===t[t.length-1].trim()&&t.pop();if(1<t.length||n.singleLine){for(var r="",o=0,a=t.length;o<a;o++)r+=p('<tr><td class="{0} {1}" {3}="{5}"><div class="{2}" {3}="{5}"></div></td><td class="{0} {4}" {3}="{5}">{6}</td></tr>',[l,s,c,m,h,o+n.startFrom,0<t[o].length?t[o]:" "]);return p('<table class="{0}">{1}</table>',[i,r])}return e}(e.innerHTML,o)}function v(e){var n=e.className;if(/hljs-/.test(n)){for(var t=g(e.innerHTML),r=0,o="";r<t.length;r++){o+=p('<span class="{0}">{1}</span>\n',[n,0<t[r].length?t[r]:" "])}e.innerHTML=o.trim()}}function g(e){return 0===e.length?[]:e.split(a)}function p(e,t){return e.replace(/\{(\d+)\}/g,function(e,n){return void 0!==t[n]?t[n]:e})}hljs?(hljs.initLineNumbersOnLoad=function(e){"interactive"===o.readyState||"complete"===o.readyState?n(e):r.addEventListener("DOMContentLoaded",function(){n(e)})},hljs.lineNumbersBlock=d,hljs.lineNumbersValue=function(e,n){if("string"!=typeof e)return;var t=document.createElement("code");return t.innerHTML=e,f(t,n)},(e=o.createElement("style")).type="text/css",e.innerHTML=p(".{0}{border-collapse:collapse}.{0} td{padding:0}.{1}:before{content:attr({2})}",[i,c,m]),o.getElementsByTagName("head")[0].appendChild(e)):r.console.error("highlight.js not detected!"),document.addEventListener("copy",function(e){var n,t=window.getSelection();!function(e){for(var n=e;n;){if(n.className&&-1!==n.className.indexOf("hljs-ln-code"))return 1;n=n.parentNode}}(t.anchorNode)||(n=-1!==window.navigator.userAgent.indexOf("Edge")?u(t):t.toString(),e.clipboardData.setData("text/plain",n),e.preventDefault())})}(window,document);
/* highlightjs-line-numbers.js 2.6.0 | (C) 2018 Yauheni Pakala | MIT License | github.com/wcoder/highlightjs-line-numbers.js */
/* Edited by Hakim for reveal.js; removed async timeout */
!function(n,e){"use strict";function t(){var n=e.createElement("style");n.type="text/css",n.innerHTML=g(".{0}{border-collapse:collapse}.{0} td{padding:0}.{1}:before{content:attr({2})}",[v,L,b]),e.getElementsByTagName("head")[0].appendChild(n)}function r(t){"interactive"===e.readyState||"complete"===e.readyState?i(t):n.addEventListener("DOMContentLoaded",function(){i(t)})}function i(t){try{var r=e.querySelectorAll("code.hljs,code.nohighlight");for(var i in r)r.hasOwnProperty(i)&&l(r[i],t)}catch(o){n.console.error("LineNumbers error: ",o)}}function l(n,e){"object"==typeof n&&f(function(){n.innerHTML=s(n,e)})}function o(n,e){if("string"==typeof n){var t=document.createElement("code");return t.innerHTML=n,s(t,e)}}function s(n,e){e=e||{singleLine:!1};var t=e.singleLine?0:1;return c(n),a(n.innerHTML,t)}function a(n,e){var t=u(n);if(""===t[t.length-1].trim()&&t.pop(),t.length>e){for(var r="",i=0,l=t.length;i<l;i++)r+=g('<tr><td class="{0}"><div class="{1} {2}" {3}="{5}"></div></td><td class="{4}"><div class="{1}">{6}</div></td></tr>',[j,m,L,b,p,i+1,t[i].length>0?t[i]:" "]);return g('<table class="{0}">{1}</table>',[v,r])}return n}function c(n){var e=n.childNodes;for(var t in e)if(e.hasOwnProperty(t)){var r=e[t];h(r.textContent)>0&&(r.childNodes.length>0?c(r):d(r.parentNode))}}function d(n){var e=n.className;if(/hljs-/.test(e)){for(var t=u(n.innerHTML),r=0,i="";r<t.length;r++){var l=t[r].length>0?t[r]:" ";i+=g('<span class="{0}">{1}</span>\n',[e,l])}n.innerHTML=i.trim()}}function u(n){return 0===n.length?[]:n.split(y)}function h(n){return(n.trim().match(y)||[]).length}function f(e){e()}function g(n,e){return n.replace(/\{(\d+)\}/g,function(n,t){return e[t]?e[t]:n})}var v="hljs-ln",m="hljs-ln-line",p="hljs-ln-code",j="hljs-ln-numbers",L="hljs-ln-n",b="data-line-number",y=/\r\n|\r|\n/g;hljs?(hljs.initLineNumbersOnLoad=r,hljs.lineNumbersBlock=l,hljs.lineNumbersValue=o,t()):n.console.error("highlight.js not detected!")}(window,document);
/*! /*!
* reveal.js plugin that adds syntax highlight support. * reveal.js plugin that adds syntax highlight support.
@@ -16,7 +16,7 @@ const Plugin = {
HIGHLIGHT_LINE_DELIMITER: ',', HIGHLIGHT_LINE_DELIMITER: ',',
HIGHLIGHT_LINE_RANGE_DELIMITER: '-', HIGHLIGHT_LINE_RANGE_DELIMITER: '-',
hljs: hljs, hljs,
/** /**
* Highlights code blocks withing the given deck. * Highlights code blocks withing the given deck.
@@ -29,11 +29,14 @@ const Plugin = {
init: function( reveal ) { init: function( reveal ) {
// Read the plugin config options and provide fallbacks // Read the plugin config options and provide fallbacks
var config = reveal.getConfig().highlight || {}; let config = reveal.getConfig().highlight || {};
config.highlightOnLoad = typeof config.highlightOnLoad === 'boolean' ? config.highlightOnLoad : true; config.highlightOnLoad = typeof config.highlightOnLoad === 'boolean' ? config.highlightOnLoad : true;
config.escapeHTML = typeof config.escapeHTML === 'boolean' ? config.escapeHTML : true; config.escapeHTML = typeof config.escapeHTML === 'boolean' ? config.escapeHTML : true;
[].slice.call( reveal.getRevealElement().querySelectorAll( 'pre code' ) ).forEach( function( block ) { Array.from( reveal.getRevealElement().querySelectorAll( 'pre code' ) ).forEach( block => {
block.parentNode.classList.add('code-wrapper');
// Code can optionally be wrapped in script template to avoid // Code can optionally be wrapped in script template to avoid
// HTML being parsed by the browser (i.e. when you need to // HTML being parsed by the browser (i.e. when you need to
@@ -56,15 +59,23 @@ const Plugin = {
// Re-highlight when focus is lost (for contenteditable code) // Re-highlight when focus is lost (for contenteditable code)
block.addEventListener( 'focusout', function( event ) { block.addEventListener( 'focusout', function( event ) {
hljs.highlightBlock( event.currentTarget ); hljs.highlightElement( event.currentTarget );
}, false ); }, false );
if( config.highlightOnLoad ) {
Plugin.highlightBlock( block );
}
} ); } );
// Triggers a callback function before we trigger highlighting
if( typeof config.beforeHighlight === 'function' ) {
config.beforeHighlight( hljs );
}
// Run initial highlighting for all code
if( config.highlightOnLoad ) {
Array.from( reveal.getRevealElement().querySelectorAll( 'pre code' ) ).forEach( block => {
Plugin.highlightBlock( block );
} );
}
// If we're printing to PDF, scroll the code highlights of // If we're printing to PDF, scroll the code highlights of
// all blocks in the deck into view at once // all blocks in the deck into view at once
reveal.on( 'pdf-ready', function() { reveal.on( 'pdf-ready', function() {
@@ -85,7 +96,7 @@ const Plugin = {
*/ */
highlightBlock: function( block ) { highlightBlock: function( block ) {
hljs.highlightBlock( block ); hljs.highlightElement( block );
// Don't generate line numbers for empty code blocks // Don't generate line numbers for empty code blocks
if( block.innerHTML.trim().length === 0 ) return; if( block.innerHTML.trim().length === 0 ) return;
@@ -95,7 +106,7 @@ const Plugin = {
var scrollState = { currentBlock: block }; var scrollState = { currentBlock: block };
// If there is at least one highlight step, generate // If there is more than one highlight step, generate
// fragments // fragments
var highlightSteps = Plugin.deserializeHighlightSteps( block.getAttribute( 'data-line-numbers' ) ); var highlightSteps = Plugin.deserializeHighlightSteps( block.getAttribute( 'data-line-numbers' ) );
if( highlightSteps.length > 1 ) { if( highlightSteps.length > 1 ) {
@@ -131,7 +142,7 @@ const Plugin = {
} ); } );
block.removeAttribute( 'data-fragment-index' ) block.removeAttribute( 'data-fragment-index' );
block.setAttribute( 'data-line-numbers', Plugin.serializeHighlightSteps( [ highlightSteps[0] ] ) ); block.setAttribute( 'data-line-numbers', Plugin.serializeHighlightSteps( [ highlightSteps[0] ] ) );
} }
scripts/reveal.js/plugin/markdown/markdown.esm.js
+1 -1
View File
File diff suppressed because one or more lines are too long
scripts/reveal.js/plugin/markdown/markdown.js
+1 -1
View File
File diff suppressed because one or more lines are too long
scripts/reveal.js/plugin/markdown/plugin.js
+32 -27
View File
@@ -4,9 +4,9 @@
* of external markdown documents. * of external markdown documents.
*/ */
import marked from 'marked' import { marked } from 'marked';
const DEFAULT_SLIDE_SEPARATOR = '^\r?\n---\r?\n$', const DEFAULT_SLIDE_SEPARATOR = '\r?\n---\r?\n',
DEFAULT_NOTES_SEPARATOR = 'notes?:', DEFAULT_NOTES_SEPARATOR = 'notes?:',
DEFAULT_ELEMENT_ATTRIBUTES_SEPARATOR = '\\\.element\\\s*?(.+?)$', DEFAULT_ELEMENT_ATTRIBUTES_SEPARATOR = '\\\.element\\\s*?(.+?)$',
DEFAULT_SLIDE_ATTRIBUTES_SEPARATOR = '\\\.slide:\\\s*?(\\\S.+?)$'; DEFAULT_SLIDE_ATTRIBUTES_SEPARATOR = '\\\.slide:\\\s*?(\\\S.+?)$';
@@ -206,7 +206,7 @@ const Plugin = () => {
var externalPromises = []; var externalPromises = [];
[].slice.call( scope.querySelectorAll( '[data-markdown]:not([data-markdown-parsed])') ).forEach( function( section, i ) { [].slice.call( scope.querySelectorAll( 'section[data-markdown]:not([data-markdown-parsed])') ).forEach( function( section, i ) {
if( section.getAttribute( 'data-markdown' ).length ) { if( section.getAttribute( 'data-markdown' ).length ) {
@@ -234,7 +234,7 @@ const Plugin = () => {
) ); ) );
} }
else if( section.getAttribute( 'data-separator' ) || section.getAttribute( 'data-separator-vertical' ) || section.getAttribute( 'data-separator-notes' ) ) { else {
section.outerHTML = slidify( getMarkdownFromSlide( section ), { section.outerHTML = slidify( getMarkdownFromSlide( section ), {
separator: section.getAttribute( 'data-separator' ), separator: section.getAttribute( 'data-separator' ),
@@ -244,9 +244,6 @@ const Plugin = () => {
}); });
} }
else {
section.innerHTML = createMarkdownSlide( getMarkdownFromSlide( section ) );
}
}); });
@@ -424,34 +421,42 @@ const Plugin = () => {
deck = reveal; deck = reveal;
let renderer = new marked.Renderer(); let { renderer, animateLists, ...markedOptions } = deck.getConfig().markdown || {};
renderer.code = ( code, language ) => { if( !renderer ) {
renderer = new marked.Renderer();
// Off by default renderer.code = ( code, language ) => {
let lineNumbers = '';
// Users can opt in to show line numbers and highlight // Off by default
// specific lines. let lineNumbers = '';
// ```javascript [] show line numbers
// ```javascript [1,4-8] highlights lines 1 and 4-8
if( CODE_LINE_NUMBER_REGEX.test( language ) ) {
lineNumbers = language.match( CODE_LINE_NUMBER_REGEX )[1].trim();
lineNumbers = `data-line-numbers="${lineNumbers}"`;
language = language.replace( CODE_LINE_NUMBER_REGEX, '' ).trim();
}
// Escape before this gets injected into the DOM to // Users can opt in to show line numbers and highlight
// avoid having the HTML parser alter our code before // specific lines.
// highlight.js is able to read it // ```javascript [] show line numbers
code = escapeForHTML( code ); // ```javascript [1,4-8] highlights lines 1 and 4-8
if( CODE_LINE_NUMBER_REGEX.test( language ) ) {
lineNumbers = language.match( CODE_LINE_NUMBER_REGEX )[1].trim();
lineNumbers = `data-line-numbers="${lineNumbers}"`;
language = language.replace( CODE_LINE_NUMBER_REGEX, '' ).trim();
}
return `<pre><code ${lineNumbers} class="${language}">${code}</code></pre>`; // Escape before this gets injected into the DOM to
}; // avoid having the HTML parser alter our code before
// highlight.js is able to read it
code = escapeForHTML( code );
return `<pre><code ${lineNumbers} class="${language}">${code}</code></pre>`;
};
}
if( animateLists === true ) {
renderer.listitem = text => `<li class="fragment">${text}</li>`;
}
marked.setOptions( { marked.setOptions( {
renderer, renderer,
...deck.getConfig().markdown ...markedOptions
} ); } );
return processSlides( deck.getRevealElement() ).then( convertSlides ); return processSlides( deck.getRevealElement() ).then( convertSlides );
scripts/reveal.js/plugin/math/katex.js
Executable
+96
View File
@@ -0,0 +1,96 @@
/**
* A plugin which enables rendering of math equations inside
* of reveal.js slides. Essentially a thin wrapper for KaTeX.
*
* @author Hakim El Hattab
* @author Gerhard Burger
*/
export const KaTeX = () => {
let deck;
let defaultOptions = {
version: 'latest',
delimiters: [
{left: '$$', right: '$$', display: true}, // Note: $$ has to come before $
{left: '$', right: '$', display: false},
{left: '\\(', right: '\\)', display: false},
{left: '\\[', right: '\\]', display: true}
],
ignoredTags: ['script', 'noscript', 'style', 'textarea', 'pre']
}
const loadCss = src => {
let link = document.createElement('link');
link.rel = 'stylesheet';
link.href = src;
document.head.appendChild(link);
};
/**
* Loads a JavaScript file and returns a Promise for when it is loaded
* Credits: https://aaronsmith.online/easily-load-an-external-script-using-javascript/
*/
const loadScript = src => {
return new Promise((resolve, reject) => {
const script = document.createElement('script')
script.type = 'text/javascript'
script.onload = resolve
script.onerror = reject
script.src = src
document.head.append(script)
})
};
async function loadScripts(urls) {
for(const url of urls) {
await loadScript(url);
}
}
return {
id: 'katex',
init: function (reveal) {
deck = reveal;
let revealOptions = deck.getConfig().katex || {};
let options = {...defaultOptions, ...revealOptions};
const {local, version, extensions, ...katexOptions} = options;
let baseUrl = options.local || 'https://cdn.jsdelivr.net/npm/katex';
let versionString = options.local ? '' : '@' + options.version;
let cssUrl = baseUrl + versionString + '/dist/katex.min.css';
let katexUrl = baseUrl + versionString + '/dist/katex.min.js';
let mhchemUrl = baseUrl + versionString + '/dist/contrib/mhchem.min.js'
let karUrl = baseUrl + versionString + '/dist/contrib/auto-render.min.js';
let katexScripts = [katexUrl];
if(options.extensions && options.extensions.includes("mhchem")) {
katexScripts.push(mhchemUrl);
}
katexScripts.push(karUrl);
const renderMath = () => {
renderMathInElement(reveal.getSlidesElement(), katexOptions);
deck.layout();
}
loadCss(cssUrl);
// For some reason dynamically loading with defer attribute doesn't result in the expected behavior, the below code does
loadScripts(katexScripts).then(() => {
if( deck.isReady() ) {
renderMath();
}
else {
deck.on( 'ready', renderMath.bind( this ) );
}
});
}
}
};
scripts/reveal.js/plugin/math/math.esm.js
+1 -1
View File
File diff suppressed because one or more lines are too long
scripts/reveal.js/plugin/math/math.js
+1 -1
View File
File diff suppressed because one or more lines are too long
scripts/reveal.js/plugin/math/mathjax2.js
+89
View File
@@ -0,0 +1,89 @@
/**
* A plugin which enables rendering of math equations inside
* of reveal.js slides. Essentially a thin wrapper for MathJax.
*
* @author Hakim El Hattab
*/
export const MathJax2 = () => {
// The reveal.js instance this plugin is attached to
let deck;
let defaultOptions = {
messageStyle: 'none',
tex2jax: {
inlineMath: [ [ '$', '$' ], [ '\\(', '\\)' ] ],
skipTags: [ 'script', 'noscript', 'style', 'textarea', 'pre' ]
},
skipStartupTypeset: true
};
function loadScript( url, callback ) {
let head = document.querySelector( 'head' );
let script = document.createElement( 'script' );
script.type = 'text/javascript';
script.src = url;
// Wrapper for callback to make sure it only fires once
let finish = () => {
if( typeof callback === 'function' ) {
callback.call();
callback = null;
}
}
script.onload = finish;
// IE
script.onreadystatechange = () => {
if ( this.readyState === 'loaded' ) {
finish();
}
}
// Normal browsers
head.appendChild( script );
}
return {
id: 'mathjax2',
init: function( reveal ) {
deck = reveal;
let revealOptions = deck.getConfig().mathjax2 || deck.getConfig().math || {};
let options = { ...defaultOptions, ...revealOptions };
let mathjax = options.mathjax || 'https://cdn.jsdelivr.net/npm/mathjax@2/MathJax.js';
let config = options.config || 'TeX-AMS_HTML-full';
let url = mathjax + '?config=' + config;
options.tex2jax = { ...defaultOptions.tex2jax, ...revealOptions.tex2jax };
options.mathjax = options.config = null;
loadScript( url, function() {
MathJax.Hub.Config( options );
// Typeset followed by an immediate reveal.js layout since
// the typesetting process could affect slide height
MathJax.Hub.Queue( [ 'Typeset', MathJax.Hub, deck.getRevealElement() ] );
MathJax.Hub.Queue( deck.layout );
// Reprocess equations in slides when they turn visible
deck.on( 'slidechanged', function( event ) {
MathJax.Hub.Queue( [ 'Typeset', MathJax.Hub, event.currentSlide ] );
} );
} );
}
}
};
scripts/reveal.js/plugin/math/mathjax3.js
+77
View File
@@ -0,0 +1,77 @@
/**
* A plugin which enables rendering of math equations inside
* of reveal.js slides. Essentially a thin wrapper for MathJax 3
*
* @author Hakim El Hattab
* @author Gerhard Burger
*/
export const MathJax3 = () => {
// The reveal.js instance this plugin is attached to
let deck;
let defaultOptions = {
tex: {
inlineMath: [ [ '$', '$' ], [ '\\(', '\\)' ] ]
},
options: {
skipHtmlTags: [ 'script', 'noscript', 'style', 'textarea', 'pre' ]
},
startup: {
ready: () => {
MathJax.startup.defaultReady();
MathJax.startup.promise.then(() => {
Reveal.layout();
});
}
}
};
function loadScript( url, callback ) {
let script = document.createElement( 'script' );
script.type = "text/javascript"
script.id = "MathJax-script"
script.src = url;
script.async = true
// Wrapper for callback to make sure it only fires once
script.onload = () => {
if (typeof callback === 'function') {
callback.call();
callback = null;
}
};
document.head.appendChild( script );
}
return {
id: 'mathjax3',
init: function(reveal) {
deck = reveal;
let revealOptions = deck.getConfig().mathjax3 || {};
let options = {...defaultOptions, ...revealOptions};
options.tex = {...defaultOptions.tex, ...revealOptions.tex}
options.options = {...defaultOptions.options, ...revealOptions.options}
options.startup = {...defaultOptions.startup, ...revealOptions.startup}
let url = options.mathjax || 'https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js';
options.mathjax = null;
window.MathJax = options;
loadScript( url, function() {
// Reprocess equations in slides when they turn visible
Reveal.addEventListener( 'slidechanged', function( event ) {
MathJax.typeset();
} );
} );
}
}
};
scripts/reveal.js/plugin/math/plugin.js
Executable → Regular
+14 -90
View File
@@ -1,91 +1,15 @@
/** import {KaTeX} from "./katex";
* A plugin which enables rendering of math equations inside import {MathJax2} from "./mathjax2";
* of reveal.js slides. Essentially a thin wrapper for MathJax. import {MathJax3} from "./mathjax3";
*
* @author Hakim El Hattab const defaultTypesetter = MathJax2;
/*!
* This plugin is a wrapper for the MathJax2,
* MathJax3 and KaTeX typesetter plugins.
*/ */
const Plugin = () => { export default Plugin = Object.assign( defaultTypesetter(), {
KaTeX,
// The reveal.js instance this plugin is attached to MathJax2,
let deck; MathJax3
} );
let defaultOptions = {
messageStyle: 'none',
tex2jax: {
inlineMath: [ [ '$', '$' ], [ '\\(', '\\)' ] ],
skipTags: [ 'script', 'noscript', 'style', 'textarea', 'pre' ]
},
skipStartupTypeset: true
};
function loadScript( url, callback ) {
let head = document.querySelector( 'head' );
let script = document.createElement( 'script' );
script.type = 'text/javascript';
script.src = url;
// Wrapper for callback to make sure it only fires once
let finish = () => {
if( typeof callback === 'function' ) {
callback.call();
callback = null;
}
}
script.onload = finish;
// IE
script.onreadystatechange = () => {
if ( this.readyState === 'loaded' ) {
finish();
}
}
// Normal browsers
head.appendChild( script );
}
return {
id: 'math',
init: function( reveal ) {
deck = reveal;
let revealOptions = deck.getConfig().math || {};
let options = { ...defaultOptions, ...revealOptions };
let mathjax = options.mathjax || 'https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.0/MathJax.js';
let config = options.config || 'TeX-AMS_HTML-full';
let url = mathjax + '?config=' + config;
options.tex2jax = { ...defaultOptions.tex2jax, ...revealOptions.tex2jax };
options.mathjax = options.config = null;
loadScript( url, function() {
MathJax.Hub.Config( options );
// Typeset followed by an immediate reveal.js layout since
// the typesetting process could affect slide height
MathJax.Hub.Queue( [ 'Typeset', MathJax.Hub, deck.getRevealElement() ] );
MathJax.Hub.Queue( deck.layout );
// Reprocess equations in slides when they turn visible
deck.on( 'slidechanged', function( event ) {
MathJax.Hub.Queue( [ 'Typeset', MathJax.Hub, event.currentSlide ] );
} );
} );
}
}
};
export default Plugin;
scripts/reveal.js/plugin/notes/notes.esm.js
+1 -1
View File
File diff suppressed because one or more lines are too long
scripts/reveal.js/plugin/notes/notes.js
+1 -1
View File
File diff suppressed because one or more lines are too long
scripts/reveal.js/plugin/notes/plugin.js
+170 -118
View File
@@ -1,6 +1,6 @@
import speakerViewHTML from './speaker-view.html'; import speakerViewHTML from './speaker-view.html';
import marked from 'marked'; import { marked } from 'marked';
/** /**
* Handles opening of and synchronization with the reveal.js * Handles opening of and synchronization with the reveal.js
@@ -15,141 +15,172 @@ import marked from 'marked';
*/ */
const Plugin = () => { const Plugin = () => {
let popup = null; let connectInterval;
let speakerWindow = null;
let deck;
let deck; /**
* Opens a new speaker view window.
*/
function openSpeakerWindow() {
function openNotes() { // If a window is already open, focus it
if( speakerWindow && !speakerWindow.closed ) {
speakerWindow.focus();
}
else {
speakerWindow = window.open( 'about:blank', 'reveal.js - Notes', 'width=1100,height=700' );
speakerWindow.marked = marked;
speakerWindow.document.write( speakerViewHTML );
if (popup && !popup.closed) { if( !speakerWindow ) {
popup.focus(); alert( 'Speaker view popup failed to open. Please make sure popups are allowed and reopen the speaker view.' );
return; return;
} }
popup = window.open( 'about:blank', 'reveal.js - Notes', 'width=1100,height=700' ); connect();
popup.marked = marked;
popup.document.write( speakerViewHTML );
if( !popup ) {
alert( 'Speaker view popup failed to open. Please make sure popups are allowed and reopen the speaker view.' );
return;
} }
/** }
* Connect to the notes window through a postmessage handshake.
* Using postmessage enables us to work in situations where the
* origins differ, such as a presentation being opened from the
* file system.
*/
function connect() {
// Keep trying to connect until we get a 'connected' message back
let connectInterval = setInterval( function() {
popup.postMessage( JSON.stringify( {
namespace: 'reveal-notes',
type: 'connect',
url: window.location.protocol + '//' + window.location.host + window.location.pathname + window.location.search,
state: deck.getState()
} ), '*' );
}, 500 );
window.addEventListener( 'message', function( event ) { /**
let data = JSON.parse( event.data ); * Reconnect with an existing speaker view window.
if( data && data.namespace === 'reveal-notes' && data.type === 'connected' ) { */
clearInterval( connectInterval ); function reconnectSpeakerWindow( reconnectWindow ) {
onConnected();
} if( speakerWindow && !speakerWindow.closed ) {
if( data && data.namespace === 'reveal-notes' && data.type === 'call' ) { speakerWindow.focus();
callRevealApi( data.methodName, data.arguments, data.callId ); }
} else {
} ); speakerWindow = reconnectWindow;
window.addEventListener( 'message', onPostMessage );
onConnected();
} }
/** }
* Calls the specified Reveal.js method with the provided argument
* and then pushes the result to the notes frame.
*/
function callRevealApi( methodName, methodArguments, callId ) {
let result = deck[methodName].apply( deck, methodArguments ); /**
popup.postMessage( JSON.stringify( { * Connect to the notes window through a postmessage handshake.
* Using postmessage enables us to work in situations where the
* origins differ, such as a presentation being opened from the
* file system.
*/
function connect() {
const presentationURL = deck.getConfig().url;
const url = typeof presentationURL === 'string' ? presentationURL :
window.location.protocol + '//' + window.location.host + window.location.pathname + window.location.search;
// Keep trying to connect until we get a 'connected' message back
connectInterval = setInterval( function() {
speakerWindow.postMessage( JSON.stringify( {
namespace: 'reveal-notes', namespace: 'reveal-notes',
type: 'return', type: 'connect',
result: result, state: deck.getState(),
callId: callId url
} ), '*' ); } ), '*' );
}, 500 );
window.addEventListener( 'message', onPostMessage );
}
/**
* Calls the specified Reveal.js method with the provided argument
* and then pushes the result to the notes frame.
*/
function callRevealApi( methodName, methodArguments, callId ) {
let result = deck[methodName].apply( deck, methodArguments );
speakerWindow.postMessage( JSON.stringify( {
namespace: 'reveal-notes',
type: 'return',
result,
callId
} ), '*' );
}
/**
* Posts the current slide data to the notes window.
*/
function post( event ) {
let slideElement = deck.getCurrentSlide(),
notesElement = slideElement.querySelector( 'aside.notes' ),
fragmentElement = slideElement.querySelector( '.current-fragment' );
let messageData = {
namespace: 'reveal-notes',
type: 'state',
notes: '',
markdown: false,
whitespace: 'normal',
state: deck.getState()
};
// Look for notes defined in a slide attribute
if( slideElement.hasAttribute( 'data-notes' ) ) {
messageData.notes = slideElement.getAttribute( 'data-notes' );
messageData.whitespace = 'pre-wrap';
} }
/** // Look for notes defined in a fragment
* Posts the current slide data to the notes window if( fragmentElement ) {
*/ let fragmentNotes = fragmentElement.querySelector( 'aside.notes' );
function post( event ) { if( fragmentNotes ) {
notesElement = fragmentNotes;
let slideElement = deck.getCurrentSlide(), }
notesElement = slideElement.querySelector( 'aside.notes' ), else if( fragmentElement.hasAttribute( 'data-notes' ) ) {
fragmentElement = slideElement.querySelector( '.current-fragment' ); messageData.notes = fragmentElement.getAttribute( 'data-notes' );
let messageData = {
namespace: 'reveal-notes',
type: 'state',
notes: '',
markdown: false,
whitespace: 'normal',
state: deck.getState()
};
// Look for notes defined in a slide attribute
if( slideElement.hasAttribute( 'data-notes' ) ) {
messageData.notes = slideElement.getAttribute( 'data-notes' );
messageData.whitespace = 'pre-wrap'; messageData.whitespace = 'pre-wrap';
// In case there are slide notes
notesElement = null;
} }
// Look for notes defined in a fragment
if( fragmentElement ) {
let fragmentNotes = fragmentElement.querySelector( 'aside.notes' );
if( fragmentNotes ) {
notesElement = fragmentNotes;
}
else if( fragmentElement.hasAttribute( 'data-notes' ) ) {
messageData.notes = fragmentElement.getAttribute( 'data-notes' );
messageData.whitespace = 'pre-wrap';
// In case there are slide notes
notesElement = null;
}
}
// Look for notes defined in an aside element
if( notesElement ) {
messageData.notes = notesElement.innerHTML;
messageData.markdown = typeof notesElement.getAttribute( 'data-markdown' ) === 'string';
}
popup.postMessage( JSON.stringify( messageData ), '*' );
} }
/** // Look for notes defined in an aside element
* Called once we have established a connection to the notes if( notesElement ) {
* window. messageData.notes = notesElement.innerHTML;
*/ messageData.markdown = typeof notesElement.getAttribute( 'data-markdown' ) === 'string';
function onConnected() {
// Monitor events that trigger a change in state
deck.on( 'slidechanged', post );
deck.on( 'fragmentshown', post );
deck.on( 'fragmenthidden', post );
deck.on( 'overviewhidden', post );
deck.on( 'overviewshown', post );
deck.on( 'paused', post );
deck.on( 'resumed', post );
// Post the initial state
post();
} }
connect(); speakerWindow.postMessage( JSON.stringify( messageData ), '*' );
}
function onPostMessage( event ) {
let data = JSON.parse( event.data );
if( data && data.namespace === 'reveal-notes' && data.type === 'connected' ) {
clearInterval( connectInterval );
onConnected();
}
else if( data && data.namespace === 'reveal-notes' && data.type === 'call' ) {
callRevealApi( data.methodName, data.arguments, data.callId );
}
}
/**
* Called once we have established a connection to the notes
* window.
*/
function onConnected() {
// Monitor events that trigger a change in state
deck.on( 'slidechanged', post );
deck.on( 'fragmentshown', post );
deck.on( 'fragmenthidden', post );
deck.on( 'overviewhidden', post );
deck.on( 'overviewshown', post );
deck.on( 'paused', post );
deck.on( 'resumed', post );
// Post the initial state
post();
} }
@@ -164,19 +195,40 @@ const Plugin = () => {
// If the there's a 'notes' query set, open directly // If the there's a 'notes' query set, open directly
if( window.location.search.match( /(\?|\&)notes/gi ) !== null ) { if( window.location.search.match( /(\?|\&)notes/gi ) !== null ) {
openNotes(); openSpeakerWindow();
}
else {
// Keep listening for speaker view hearbeats. If we receive a
// heartbeat from an orphaned window, reconnect it. This ensures
// that we remain connected to the notes even if the presentation
// is reloaded.
window.addEventListener( 'message', event => {
if( !speakerWindow && typeof event.data === 'string' ) {
let data;
try {
data = JSON.parse( event.data );
}
catch( error ) {}
if( data && data.namespace === 'reveal-notes' && data.type === 'heartbeat' ) {
reconnectSpeakerWindow( event.source );
}
}
});
} }
// Open the notes when the 's' key is hit // Open the notes when the 's' key is hit
deck.addKeyBinding({keyCode: 83, key: 'S', description: 'Speaker notes view'}, function() { deck.addKeyBinding({keyCode: 83, key: 'S', description: 'Speaker notes view'}, function() {
openNotes(); openSpeakerWindow();
} ); } );
} }
}, },
open: openNotes open: openSpeakerWindow
}; };
}; };
scripts/reveal.js/plugin/notes/speaker-view.html
+35 -3
View File
@@ -1,3 +1,6 @@
<!--
NOTE: You need to build the notes plugin after making changes to this file.
-->
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
@@ -347,7 +350,8 @@
layoutDropdown, layoutDropdown,
pendingCalls = {}, pendingCalls = {},
lastRevealApiCallId = 0, lastRevealApiCallId = 0,
connected = false; connected = false,
whitelistedWindows = [window.opener];
var SPEAKER_LAYOUTS = { var SPEAKER_LAYOUTS = {
'default': 'Default', 'default': 'Default',
@@ -362,9 +366,14 @@
var connectionTimeout = setTimeout( function() { var connectionTimeout = setTimeout( function() {
connectionStatus.innerHTML = 'Error connecting to main window.<br>Please try closing and reopening the speaker view.'; connectionStatus.innerHTML = 'Error connecting to main window.<br>Please try closing and reopening the speaker view.';
}, 5000 ); }, 5000 );
;
window.addEventListener( 'message', function( event ) { window.addEventListener( 'message', function( event ) {
// Validate the origin of this message to prevent XSS
if( window.location.origin !== event.origin && whitelistedWindows.indexOf( event.source ) === -1 ) {
return;
}
clearTimeout( connectionTimeout ); clearTimeout( connectionTimeout );
connectionStatus.style.display = 'none'; connectionStatus.style.display = 'none';
@@ -395,13 +404,21 @@
} }
else if( /slidechanged|fragmentshown|fragmenthidden|paused|resumed/.test( data.eventName ) && currentState !== JSON.stringify( data.state ) ) { else if( /slidechanged|fragmentshown|fragmenthidden|paused|resumed/.test( data.eventName ) && currentState !== JSON.stringify( data.state ) ) {
window.opener.postMessage( JSON.stringify({ method: 'setState', args: [ data.state ]} ), '*' ); dispatchStateToMainWindow( data.state );
} }
} }
} ); } );
/**
* Updates the presentation in the main window to match the state
* of the presentation in the notes window.
*/
const dispatchStateToMainWindow = debounce(( state ) => {
window.opener.postMessage( JSON.stringify({ method: 'setState', args: [ state ]} ), '*' );
}, 500);
/** /**
* Asynchronously calls the Reveal.js API of the main frame. * Asynchronously calls the Reveal.js API of the main frame.
*/ */
@@ -432,6 +449,7 @@
setupKeyboard(); setupKeyboard();
setupNotes(); setupNotes();
setupTimer(); setupTimer();
setupHeartbeat();
} }
} }
@@ -521,6 +539,8 @@
upcomingSlide.setAttribute( 'src', upcomingURL ); upcomingSlide.setAttribute( 'src', upcomingURL );
document.querySelector( '#upcoming-slide' ).appendChild( upcomingSlide ); document.querySelector( '#upcoming-slide' ).appendChild( upcomingSlide );
whitelistedWindows.push( currentSlide.contentWindow, upcomingSlide.contentWindow );
} }
/** /**
@@ -533,6 +553,18 @@
} }
/**
* We send out a heartbeat at all times to ensure we can
* reconnect with the main presentation window after reloads.
*/
function setupHeartbeat() {
setInterval( () => {
window.opener.postMessage( JSON.stringify({ namespace: 'reveal-notes', type: 'heartbeat'} ), '*' );
}, 1000 );
}
function getTimings( callback ) { function getTimings( callback ) {
callRevealApi( 'getSlidesAttributes', [], function ( slideAttributes ) { callRevealApi( 'getSlidesAttributes', [], function ( slideAttributes ) {
scripts/reveal.js/plugin/search/search.esm.js
+7 -1
View File
File diff suppressed because one or more lines are too long
scripts/reveal.js/plugin/search/search.js
+7 -1
View File
File diff suppressed because one or more lines are too long
scripts/reveal.js/plugin/zoom/plugin.js
+7 -22
View File
@@ -25,6 +25,12 @@ const Plugin = {
} }
} ); } );
},
destroy: () => {
zoom.reset();
} }
}; };
@@ -52,19 +58,11 @@ var zoom = (function(){
panUpdateInterval = -1; panUpdateInterval = -1;
// Check for transform support so that we can fallback otherwise // Check for transform support so that we can fallback otherwise
var supportsTransforms = 'WebkitTransform' in document.body.style || var supportsTransforms = 'transform' in document.body.style;
'MozTransform' in document.body.style ||
'msTransform' in document.body.style ||
'OTransform' in document.body.style ||
'transform' in document.body.style;
if( supportsTransforms ) { if( supportsTransforms ) {
// The easing that will be applied when we zoom in/out // The easing that will be applied when we zoom in/out
document.body.style.transition = 'transform 0.8s ease'; document.body.style.transition = 'transform 0.8s ease';
document.body.style.OTransition = '-o-transform 0.8s ease';
document.body.style.msTransition = '-ms-transform 0.8s ease';
document.body.style.MozTransition = '-moz-transform 0.8s ease';
document.body.style.WebkitTransition = '-webkit-transform 0.8s ease';
} }
// Zoom out if the user hits escape // Zoom out if the user hits escape
@@ -105,10 +103,6 @@ var zoom = (function(){
// Reset // Reset
if( scale === 1 ) { if( scale === 1 ) {
document.body.style.transform = ''; document.body.style.transform = '';
document.body.style.OTransform = '';
document.body.style.msTransform = '';
document.body.style.MozTransform = '';
document.body.style.WebkitTransform = '';
} }
// Scale // Scale
else { else {
@@ -116,16 +110,7 @@ var zoom = (function(){
transform = 'translate('+ -rect.x +'px,'+ -rect.y +'px) scale('+ scale +')'; transform = 'translate('+ -rect.x +'px,'+ -rect.y +'px) scale('+ scale +')';
document.body.style.transformOrigin = origin; document.body.style.transformOrigin = origin;
document.body.style.OTransformOrigin = origin;
document.body.style.msTransformOrigin = origin;
document.body.style.MozTransformOrigin = origin;
document.body.style.WebkitTransformOrigin = origin;
document.body.style.transform = transform; document.body.style.transform = transform;
document.body.style.OTransform = transform;
document.body.style.msTransform = transform;
document.body.style.MozTransform = transform;
document.body.style.WebkitTransform = transform;
} }
} }
else { else {
scripts/reveal.js/plugin/zoom/zoom.esm.js
+1 -1
View File
@@ -1,4 +1,4 @@
/*! /*!
* reveal.js Zoom plugin * reveal.js Zoom plugin
*/ */
var e={id:"zoom",init:function(e){e.getRevealElement().addEventListener("mousedown",(function(o){var n=/Linux/.test(window.navigator.platform)?"ctrl":"alt",i=(e.getConfig().zoomKey?e.getConfig().zoomKey:n)+"Key",d=e.getConfig().zoomLevel?e.getConfig().zoomLevel:2;o[i]&&!e.isOverview()&&(o.preventDefault(),t.to({x:o.clientX,y:o.clientY,scale:d,pan:!1}))}))}},t=function(){var e=1,o=0,n=0,i=-1,d=-1,s="WebkitTransform"in document.body.style||"MozTransform"in document.body.style||"msTransform"in document.body.style||"OTransform"in document.body.style||"transform"in document.body.style;function r(t,o){var n=y();if(t.width=t.width||1,t.height=t.height||1,t.x-=(window.innerWidth-t.width*o)/2,t.y-=(window.innerHeight-t.height*o)/2,s)if(1===o)document.body.style.transform="",document.body.style.OTransform="",document.body.style.msTransform="",document.body.style.MozTransform="",document.body.style.WebkitTransform="";else{var i=n.x+"px "+n.y+"px",d="translate("+-t.x+"px,"+-t.y+"px) scale("+o+")";document.body.style.transformOrigin=i,document.body.style.OTransformOrigin=i,document.body.style.msTransformOrigin=i,document.body.style.MozTransformOrigin=i,document.body.style.WebkitTransformOrigin=i,document.body.style.transform=d,document.body.style.OTransform=d,document.body.style.msTransform=d,document.body.style.MozTransform=d,document.body.style.WebkitTransform=d}else 1===o?(document.body.style.position="",document.body.style.left="",document.body.style.top="",document.body.style.width="",document.body.style.height="",document.body.style.zoom=""):(document.body.style.position="relative",document.body.style.left=-(n.x+t.x)/o+"px",document.body.style.top=-(n.y+t.y)/o+"px",document.body.style.width=100*o+"%",document.body.style.height=100*o+"%",document.body.style.zoom=o);e=o,document.documentElement.classList&&(1!==e?document.documentElement.classList.add("zoomed"):document.documentElement.classList.remove("zoomed"))}function m(){var t=.12*window.innerWidth,i=.12*window.innerHeight,d=y();n<i?window.scroll(d.x,d.y-14/e*(1-n/i)):n>window.innerHeight-i&&window.scroll(d.x,d.y+(1-(window.innerHeight-n)/i)*(14/e)),o<t?window.scroll(d.x-14/e*(1-o/t),d.y):o>window.innerWidth-t&&window.scroll(d.x+(1-(window.innerWidth-o)/t)*(14/e),d.y)}function y(){return{x:void 0!==window.scrollX?window.scrollX:window.pageXOffset,y:void 0!==window.scrollY?window.scrollY:window.pageYOffset}}return s&&(document.body.style.transition="transform 0.8s ease",document.body.style.OTransition="-o-transform 0.8s ease",document.body.style.msTransition="-ms-transform 0.8s ease",document.body.style.MozTransition="-moz-transform 0.8s ease",document.body.style.WebkitTransition="-webkit-transform 0.8s ease"),document.addEventListener("keyup",(function(o){1!==e&&27===o.keyCode&&t.out()})),document.addEventListener("mousemove",(function(t){1!==e&&(o=t.clientX,n=t.clientY)})),{to:function(o){if(1!==e)t.out();else{if(o.x=o.x||0,o.y=o.y||0,o.element){var n=o.element.getBoundingClientRect();o.x=n.left-20,o.y=n.top-20,o.width=n.width+40,o.height=n.height+40}void 0!==o.width&&void 0!==o.height&&(o.scale=Math.max(Math.min(window.innerWidth/o.width,window.innerHeight/o.height),1)),o.scale>1&&(o.x*=o.scale,o.y*=o.scale,r(o,o.scale),!1!==o.pan&&(i=setTimeout((function(){d=setInterval(m,1e3/60)}),800)))}},out:function(){clearTimeout(i),clearInterval(d),r({x:0,y:0},1),e=1},magnify:function(e){this.to(e)},reset:function(){this.out()},zoomLevel:function(){return e}}}();export default function(){return e} var e={id:"zoom",init:function(e){e.getRevealElement().addEventListener("mousedown",(function(n){var o=/Linux/.test(window.navigator.platform)?"ctrl":"alt",i=(e.getConfig().zoomKey?e.getConfig().zoomKey:o)+"Key",d=e.getConfig().zoomLevel?e.getConfig().zoomLevel:2;n[i]&&!e.isOverview()&&(n.preventDefault(),t.to({x:n.clientX,y:n.clientY,scale:d,pan:!1}))}))},destroy:function(){t.reset()}},t=function(){var e=1,n=0,o=0,i=-1,d=-1,l="transform"in document.body.style;function s(t,n){var o=r();if(t.width=t.width||1,t.height=t.height||1,t.x-=(window.innerWidth-t.width*n)/2,t.y-=(window.innerHeight-t.height*n)/2,l)if(1===n)document.body.style.transform="";else{var i=o.x+"px "+o.y+"px",d="translate("+-t.x+"px,"+-t.y+"px) scale("+n+")";document.body.style.transformOrigin=i,document.body.style.transform=d}else 1===n?(document.body.style.position="",document.body.style.left="",document.body.style.top="",document.body.style.width="",document.body.style.height="",document.body.style.zoom=""):(document.body.style.position="relative",document.body.style.left=-(o.x+t.x)/n+"px",document.body.style.top=-(o.y+t.y)/n+"px",document.body.style.width=100*n+"%",document.body.style.height=100*n+"%",document.body.style.zoom=n);e=n,document.documentElement.classList&&(1!==e?document.documentElement.classList.add("zoomed"):document.documentElement.classList.remove("zoomed"))}function c(){var t=.12*window.innerWidth,i=.12*window.innerHeight,d=r();o<i?window.scroll(d.x,d.y-14/e*(1-o/i)):o>window.innerHeight-i&&window.scroll(d.x,d.y+(1-(window.innerHeight-o)/i)*(14/e)),n<t?window.scroll(d.x-14/e*(1-n/t),d.y):n>window.innerWidth-t&&window.scroll(d.x+(1-(window.innerWidth-n)/t)*(14/e),d.y)}function r(){return{x:void 0!==window.scrollX?window.scrollX:window.pageXOffset,y:void 0!==window.scrollY?window.scrollY:window.pageYOffset}}return l&&(document.body.style.transition="transform 0.8s ease"),document.addEventListener("keyup",(function(n){1!==e&&27===n.keyCode&&t.out()})),document.addEventListener("mousemove",(function(t){1!==e&&(n=t.clientX,o=t.clientY)})),{to:function(n){if(1!==e)t.out();else{if(n.x=n.x||0,n.y=n.y||0,n.element){var o=n.element.getBoundingClientRect();n.x=o.left-20,n.y=o.top-20,n.width=o.width+40,n.height=o.height+40}void 0!==n.width&&void 0!==n.height&&(n.scale=Math.max(Math.min(window.innerWidth/n.width,window.innerHeight/n.height),1)),n.scale>1&&(n.x*=n.scale,n.y*=n.scale,s(n,n.scale),!1!==n.pan&&(i=setTimeout((function(){d=setInterval(c,1e3/60)}),800)))}},out:function(){clearTimeout(i),clearInterval(d),s({x:0,y:0},1),e=1},magnify:function(e){this.to(e)},reset:function(){this.out()},zoomLevel:function(){return e}}}();export default function(){return e}
scripts/reveal.js/plugin/zoom/zoom.js
+2 -2
View File
@@ -1,4 +1,4 @@
!function(e,o){"object"==typeof exports&&"undefined"!=typeof module?module.exports=o():"function"==typeof define&&define.amd?define(o):(e="undefined"!=typeof globalThis?globalThis:e||self).RevealZoom=o()}(this,(function(){"use strict"; !function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t():"function"==typeof define&&define.amd?define(t):(e="undefined"!=typeof globalThis?globalThis:e||self).RevealZoom=t()}(this,(function(){"use strict";
/*! /*!
* reveal.js Zoom plugin * reveal.js Zoom plugin
*/var e={id:"zoom",init:function(e){e.getRevealElement().addEventListener("mousedown",(function(t){var n=/Linux/.test(window.navigator.platform)?"ctrl":"alt",i=(e.getConfig().zoomKey?e.getConfig().zoomKey:n)+"Key",d=e.getConfig().zoomLevel?e.getConfig().zoomLevel:2;t[i]&&!e.isOverview()&&(t.preventDefault(),o.to({x:t.clientX,y:t.clientY,scale:d,pan:!1}))}))}},o=function(){var e=1,t=0,n=0,i=-1,d=-1,s="WebkitTransform"in document.body.style||"MozTransform"in document.body.style||"msTransform"in document.body.style||"OTransform"in document.body.style||"transform"in document.body.style;function r(o,t){var n=l();if(o.width=o.width||1,o.height=o.height||1,o.x-=(window.innerWidth-o.width*t)/2,o.y-=(window.innerHeight-o.height*t)/2,s)if(1===t)document.body.style.transform="",document.body.style.OTransform="",document.body.style.msTransform="",document.body.style.MozTransform="",document.body.style.WebkitTransform="";else{var i=n.x+"px "+n.y+"px",d="translate("+-o.x+"px,"+-o.y+"px) scale("+t+")";document.body.style.transformOrigin=i,document.body.style.OTransformOrigin=i,document.body.style.msTransformOrigin=i,document.body.style.MozTransformOrigin=i,document.body.style.WebkitTransformOrigin=i,document.body.style.transform=d,document.body.style.OTransform=d,document.body.style.msTransform=d,document.body.style.MozTransform=d,document.body.style.WebkitTransform=d}else 1===t?(document.body.style.position="",document.body.style.left="",document.body.style.top="",document.body.style.width="",document.body.style.height="",document.body.style.zoom=""):(document.body.style.position="relative",document.body.style.left=-(n.x+o.x)/t+"px",document.body.style.top=-(n.y+o.y)/t+"px",document.body.style.width=100*t+"%",document.body.style.height=100*t+"%",document.body.style.zoom=t);e=t,document.documentElement.classList&&(1!==e?document.documentElement.classList.add("zoomed"):document.documentElement.classList.remove("zoomed"))}function m(){var o=.12*window.innerWidth,i=.12*window.innerHeight,d=l();n<i?window.scroll(d.x,d.y-14/e*(1-n/i)):n>window.innerHeight-i&&window.scroll(d.x,d.y+(1-(window.innerHeight-n)/i)*(14/e)),t<o?window.scroll(d.x-14/e*(1-t/o),d.y):t>window.innerWidth-o&&window.scroll(d.x+(1-(window.innerWidth-t)/o)*(14/e),d.y)}function l(){return{x:void 0!==window.scrollX?window.scrollX:window.pageXOffset,y:void 0!==window.scrollY?window.scrollY:window.pageYOffset}}return s&&(document.body.style.transition="transform 0.8s ease",document.body.style.OTransition="-o-transform 0.8s ease",document.body.style.msTransition="-ms-transform 0.8s ease",document.body.style.MozTransition="-moz-transform 0.8s ease",document.body.style.WebkitTransition="-webkit-transform 0.8s ease"),document.addEventListener("keyup",(function(t){1!==e&&27===t.keyCode&&o.out()})),document.addEventListener("mousemove",(function(o){1!==e&&(t=o.clientX,n=o.clientY)})),{to:function(t){if(1!==e)o.out();else{if(t.x=t.x||0,t.y=t.y||0,t.element){var n=t.element.getBoundingClientRect();t.x=n.left-20,t.y=n.top-20,t.width=n.width+40,t.height=n.height+40}void 0!==t.width&&void 0!==t.height&&(t.scale=Math.max(Math.min(window.innerWidth/t.width,window.innerHeight/t.height),1)),t.scale>1&&(t.x*=t.scale,t.y*=t.scale,r(t,t.scale),!1!==t.pan&&(i=setTimeout((function(){d=setInterval(m,1e3/60)}),800)))}},out:function(){clearTimeout(i),clearInterval(d),r({x:0,y:0},1),e=1},magnify:function(e){this.to(e)},reset:function(){this.out()},zoomLevel:function(){return e}}}();return function(){return e}})); */var e={id:"zoom",init:function(e){e.getRevealElement().addEventListener("mousedown",(function(o){var n=/Linux/.test(window.navigator.platform)?"ctrl":"alt",i=(e.getConfig().zoomKey?e.getConfig().zoomKey:n)+"Key",d=e.getConfig().zoomLevel?e.getConfig().zoomLevel:2;o[i]&&!e.isOverview()&&(o.preventDefault(),t.to({x:o.clientX,y:o.clientY,scale:d,pan:!1}))}))},destroy:function(){t.reset()}},t=function(){var e=1,o=0,n=0,i=-1,d=-1,l="transform"in document.body.style;function s(t,o){var n=r();if(t.width=t.width||1,t.height=t.height||1,t.x-=(window.innerWidth-t.width*o)/2,t.y-=(window.innerHeight-t.height*o)/2,l)if(1===o)document.body.style.transform="";else{var i=n.x+"px "+n.y+"px",d="translate("+-t.x+"px,"+-t.y+"px) scale("+o+")";document.body.style.transformOrigin=i,document.body.style.transform=d}else 1===o?(document.body.style.position="",document.body.style.left="",document.body.style.top="",document.body.style.width="",document.body.style.height="",document.body.style.zoom=""):(document.body.style.position="relative",document.body.style.left=-(n.x+t.x)/o+"px",document.body.style.top=-(n.y+t.y)/o+"px",document.body.style.width=100*o+"%",document.body.style.height=100*o+"%",document.body.style.zoom=o);e=o,document.documentElement.classList&&(1!==e?document.documentElement.classList.add("zoomed"):document.documentElement.classList.remove("zoomed"))}function c(){var t=.12*window.innerWidth,i=.12*window.innerHeight,d=r();n<i?window.scroll(d.x,d.y-14/e*(1-n/i)):n>window.innerHeight-i&&window.scroll(d.x,d.y+(1-(window.innerHeight-n)/i)*(14/e)),o<t?window.scroll(d.x-14/e*(1-o/t),d.y):o>window.innerWidth-t&&window.scroll(d.x+(1-(window.innerWidth-o)/t)*(14/e),d.y)}function r(){return{x:void 0!==window.scrollX?window.scrollX:window.pageXOffset,y:void 0!==window.scrollY?window.scrollY:window.pageYOffset}}return l&&(document.body.style.transition="transform 0.8s ease"),document.addEventListener("keyup",(function(o){1!==e&&27===o.keyCode&&t.out()})),document.addEventListener("mousemove",(function(t){1!==e&&(o=t.clientX,n=t.clientY)})),{to:function(o){if(1!==e)t.out();else{if(o.x=o.x||0,o.y=o.y||0,o.element){var n=o.element.getBoundingClientRect();o.x=n.left-20,o.y=n.top-20,o.width=n.width+40,o.height=n.height+40}void 0!==o.width&&void 0!==o.height&&(o.scale=Math.max(Math.min(window.innerWidth/o.width,window.innerHeight/o.height),1)),o.scale>1&&(o.x*=o.scale,o.y*=o.scale,s(o,o.scale),!1!==o.pan&&(i=setTimeout((function(){d=setInterval(c,1e3/60)}),800)))}},out:function(){clearTimeout(i),clearInterval(d),s({x:0,y:0},1),e=1},magnify:function(e){this.to(e)},reset:function(){this.out()},zoomLevel:function(){return e}}}();return function(){return e}}));
scripts/reveal.js/test/simple.md
+1 -1
View File
@@ -9,4 +9,4 @@ var a = 1;
## Slide 2 ## Slide 2
scripts/reveal.js/test/test-auto-animate.html
+3 -3
View File
@@ -23,19 +23,19 @@
<section data-auto-animate> <section data-auto-animate>
<h1>h1</h1> <h1>h1</h1>
<h2>h2</h2> <h2>h2</h2>
<h3 style="position: absolute; left: 0;">h3</h2> <h3 style="position: absolute; left: 0;">h3</h3>
</section> </section>
<section data-auto-animate> <section data-auto-animate>
<h1 data-auto-animate-duration="0.1">h1</h1> <h1 data-auto-animate-duration="0.1">h1</h1>
<h2 style="opacity: 0;">h2</h2> <h2 style="opacity: 0;">h2</h2>
<h3 style="position: absolute; left: 100px;">h3</h2> <h3 style="position: absolute; left: 100px;">h3</h3>
</section> </section>
<section data-auto-animate data-auto-animate-duration="0.1"> <section data-auto-animate data-auto-animate-duration="0.1">
<h1>h1</h1> <h1>h1</h1>
<h2>h2</h2> <h2>h2</h2>
<h3>h3</h2> <h3>h3</h3>
</section> </section>
<section> <section>
scripts/reveal.js/test/test-markdown.html
+13
View File
@@ -281,6 +281,15 @@
``` ```
</script> </script>
</section> </section>
<section data-markdown class="with-code-in-fragment">
<script type="text/template">
```js
foo.bar();
```
<!-- .element: class="fragment" -->
</script>
</section>
</div> </div>
</div> </div>
@@ -452,6 +461,10 @@
QUnit.test( '```javascript [1,2,3] enables line highlights and sets language', function( assert ) { QUnit.test( '```javascript [1,2,3] enables line highlights and sets language', function( assert ) {
assert.strictEqual( deck6.getRevealElement().querySelectorAll( '.with-line-highlights-and-lanugage .hljs.javascript[data-line-numbers="1,2,3"]' ).length, 1 ); assert.strictEqual( deck6.getRevealElement().querySelectorAll( '.with-line-highlights-and-lanugage .hljs.javascript[data-line-numbers="1,2,3"]' ).length, 1 );
}); });
QUnit.test( '```block should allow custom fragment', function( assert ) {
assert.strictEqual( deck6.getRevealElement().querySelectorAll( '.with-code-in-fragment pre.fragment' ).length, 1 );
});
} ); } );
scripts/reveal.js/test/test.html
+84 -15
View File
@@ -36,7 +36,7 @@
<section data-background="examples/assets/image2.png" data-notes="speaker notes 2"> <section data-background="examples/assets/image2.png" data-notes="speaker notes 2">
<h1>2.1</h1> <h1>2.1</h1>
</section> </section>
<section> <section data-background-image="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEASABIAAD/4gIcSUNDX1BST0ZJTEUAAQEAAAIMbGNtcwIQAABtbnRyUkdCIFhZWiAH3AABABkAAwApADlhY3NwQVBQTAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA9tYAAQAAAADTLWxjbXMAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAApkZXNjAAAA/">
<h1>2.2</h1> <h1>2.2</h1>
</section> </section>
<section> <section>
@@ -97,6 +97,11 @@
// 4 // 4
Reveal.initialize().then( function() { Reveal.initialize().then( function() {
// Helper methods
function triggerKeyboardEvent(config) {
document.dispatchEvent( new KeyboardEvent( 'keydown', config ) );
}
// --------------------------------------------------------------- // ---------------------------------------------------------------
// DOM TESTS // DOM TESTS
@@ -336,38 +341,38 @@
Reveal.configure({ hash: true, fragmentInURL: false }); Reveal.configure({ hash: true, fragmentInURL: false });
Reveal.slide( 2, 0 ); Reveal.slide( 2, 0 );
assert.strictEqual( window.location.hash, '#/2' ); assert.strictEqual( Reveal.getSlidePath(), '/2' );
Reveal.slide( 2, 1 ); Reveal.slide( 2, 1 );
assert.strictEqual( window.location.hash, '#/2/1' ); assert.strictEqual( Reveal.getSlidePath(), '/2/1' );
Reveal.slide( 2, 0, 1 ); Reveal.slide( 2, 0, 1 );
assert.strictEqual( window.location.hash, '#/2' ); assert.strictEqual( Reveal.getSlidePath(), '/2' );
Reveal.slide( 2, 2, 0 ); Reveal.slide( 2, 2, 0 );
assert.strictEqual( window.location.hash, '#/fragments3' ); assert.strictEqual( Reveal.getSlidePath(), '/fragments3' );
Reveal.slide( 2, 2, 1 ); Reveal.slide( 2, 2, 1 );
assert.strictEqual( window.location.hash, '#/fragments3' ); assert.strictEqual( Reveal.getSlidePath(), '/fragments3' );
}); });
QUnit.test( 'Write (fragmentInURL: true)', function( assert ) { QUnit.test( 'Write (fragmentInURL: true)', function( assert ) {
Reveal.configure({ hash: true, fragmentInURL: true }); Reveal.configure({ hash: true, fragmentInURL: true });
Reveal.slide( 2, 0, -1 ); Reveal.slide( 2, 0, -1 );
assert.strictEqual( window.location.hash, '#/2' ); assert.strictEqual( Reveal.getSlidePath(), '/2' );
Reveal.slide( 2, 1, -1 ); Reveal.slide( 2, 1, -1 );
assert.strictEqual( window.location.hash, '#/2/1' ); assert.strictEqual( Reveal.getSlidePath(), '/2/1' );
Reveal.slide( 2, 0, 1 ); Reveal.slide( 2, 0, 1 );
assert.strictEqual( window.location.hash, '#/2/0/1' ); assert.strictEqual( Reveal.getSlidePath(), '/2/0/1' );
Reveal.slide( 2, 2, -1 ); Reveal.slide( 2, 2, -1 );
assert.strictEqual( window.location.hash, '#/fragments3' ); assert.strictEqual( Reveal.getSlidePath(), '/fragments3' );
Reveal.slide( 2, 2, 1 ); Reveal.slide( 2, 2, 1 );
assert.strictEqual( window.location.hash, '#/fragments3/1' ); assert.strictEqual( Reveal.getSlidePath(), '/fragments3/1' );
}); });
QUnit.test( 'Read', async function( assert ) { QUnit.test( 'Read', async function( assert ) {
@@ -407,13 +412,41 @@
assert.ok( /X\-SHORTCUT\-X/.test( document.body.innerHTML ), 'binding is added to help overlay' ); assert.ok( /X\-SHORTCUT\-X/.test( document.body.innerHTML ), 'binding is added to help overlay' );
Reveal.toggleHelp( false ); Reveal.toggleHelp( false );
let event = new KeyboardEvent( 'keydown', { 'keyCode':88 } ); triggerKeyboardEvent({ keyCode: 88 });
document.dispatchEvent( event );
Reveal.removeKeyBinding( 88 ); Reveal.removeKeyBinding( 88 );
// should do nothing // should do nothing
document.dispatchEvent( event ); triggerKeyboardEvent({ keyCode: 88 });
});
QUnit.test( 'Navigation bindings', function( assert ) {
Reveal.slide( 0 );
// right arrow
triggerKeyboardEvent({ keyCode: 39 });
assert.strictEqual( Reveal.getIndices().h, 1 );
// down arrow + shift
triggerKeyboardEvent({ keyCode: 40, shiftKey: true });
assert.strictEqual( Reveal.getIndices().v, 2, 'shift + down arrow goes to last vertical slide' );
// up arrow
triggerKeyboardEvent({ keyCode: 38 });
assert.strictEqual( Reveal.getIndices().v, 1 );
// right arrow + shift
triggerKeyboardEvent({ keyCode: 39, shiftKey: true });
assert.ok( Reveal.isLastSlide(), 'shift + right arrow goes to last horizontal slide' );
// right arrow on slide with fragments
Reveal.slide( 2, 0, -1 );
triggerKeyboardEvent({ keyCode: 39 });
assert.deepEqual( Reveal.getIndices(), { h: 2, v: 0, f: 0 }, 'right arrow shows fragment' );
triggerKeyboardEvent({ keyCode: 39, altKey: true });
assert.strictEqual( Reveal.getIndices().h, 3, 'right arrow skips fragments when alt key is pressed' );
}); });
// --------------------------------------------------------------- // ---------------------------------------------------------------
@@ -694,7 +727,16 @@
Reveal.right(); Reveal.right();
assert.equal( Reveal.getIndices().h, 0, 'looped from end to start' ); assert.equal( Reveal.getIndices().h, 0, 'looped from end to start' );
Reveal.configure({ loop: false }); Reveal.configure({ navigationMode: 'linear' });
Reveal.slide( 0, 0 );
Reveal.prev();
assert.notEqual( Reveal.getIndices().h, 0, 'looped from start to end in linear mode' );
Reveal.next();
assert.equal( Reveal.getIndices().h, 0, 'looped from end to start in linear mode' );
Reveal.configure({ loop: false, navigationMode: 'default' });
}); });
@@ -727,10 +769,12 @@
QUnit.test( 'background images', function( assert ) { QUnit.test( 'background images', function( assert ) {
var imageSource1 = Reveal.getSlide( 0 ).getAttribute( 'data-background-image' ); var imageSource1 = Reveal.getSlide( 0 ).getAttribute( 'data-background-image' );
var imageSource2 = Reveal.getSlide( 1, 0 ).getAttribute( 'data-background' ); var imageSource2 = Reveal.getSlide( 1, 0 ).getAttribute( 'data-background' );
var imageSource3 = Reveal.getSlide( 1, 1 ).getAttribute( 'data-background-image' );
// check that the images are applied to the background elements // check that the images are applied to the background elements
assert.ok( Reveal.getSlideBackground( 0 ).querySelector( '.slide-background-content' ).style.backgroundImage.indexOf( imageSource1 ) !== -1, 'data-background-image worked' ); assert.ok( Reveal.getSlideBackground( 0 ).querySelector( '.slide-background-content' ).style.backgroundImage.indexOf( imageSource1 ) !== -1, 'data-background-image worked' );
assert.ok( Reveal.getSlideBackground( 1, 0 ).querySelector( '.slide-background-content' ).style.backgroundImage.indexOf( imageSource2 ) !== -1, 'data-background worked' ); assert.ok( Reveal.getSlideBackground( 1, 0 ).querySelector( '.slide-background-content' ).style.backgroundImage.indexOf( imageSource2 ) !== -1, 'data-background worked' );
assert.ok( Reveal.getSlideBackground( 1, 1 ).querySelector( '.slide-background-content' ).style.backgroundImage.indexOf( imageSource3 ) !== -1, 'data-background worked' );
}); });
@@ -739,6 +783,31 @@
QUnit.module( 'Events' ); QUnit.module( 'Events' );
QUnit.test( 'beforeslidechange', function( assert ) {
var done = assert.async( 2 );
var normalEvent = function( event ) {
assert.ok( true, 'event fired' );
done();
}
var blockingEvent = function( event ) {
event.preventDefault();
assert.ok( true, 'event fired' );
done();
}
Reveal.on( 'beforeslidechange', normalEvent );
Reveal.slide( 2, 0 );
Reveal.off( 'beforeslidechange', normalEvent );
Reveal.on( 'beforeslidechange', blockingEvent );
Reveal.slide( 3, 0 );
Reveal.off( 'beforeslidechange', blockingEvent );
assert.strictEqual( Reveal.getIndices().h, 2, 'preventing "beforeslidechange" blocks navigation ' );
});
QUnit.test( 'slidechanged', function( assert ) { QUnit.test( 'slidechanged', function( assert ) {
assert.expect( 3 ); assert.expect( 3 );
var done = assert.async( 3 ); var done = assert.async( 3 );
settings/org-settings.el
+1 -43
View File
@@ -1147,49 +1147,7 @@ used as a communication channel."
;; #+REVEAL_POSTAMBLE: ;; #+REVEAL_POSTAMBLE:
(setq org-reveal-postamble (replace-regexp-in-string "\n" "" (concat "<script>" (org-reveal--read-file (concat (expand-file-name config-dir) "scripts/flipcard/flipcard.js")) "\n</script>"))) ;; only one line! (setq org-reveal-postamble (replace-regexp-in-string "\n" "" (concat "<script>" (org-reveal--read-file (concat (expand-file-name config-dir) "scripts/flipcard/flipcard.js")) "\n</script>"))) ;; only one line!
(setq org-reveal-root (concat "file://" (expand-file-name config-dir) "scripts/reveal.js")) (setq org-reveal-root (concat "file://" (expand-file-name config-dir) "scripts/reveal.js"))
(setq org-reveal-single-file t) (setq org-reveal-single-file t))
;; overwrite to implement `org-reveal-single-file' (:reveal-single-file)
;; used in `org-reveal-scripts' as reveal-4-plugin
(defun org-reveal-plugin-scripts-4 (info)
"Return scripts for initializing reveal.js 4.x builtin scripts"
(let ((plugins (org-reveal--get-plugins info)))
(if (not (null plugins))
;; Generate plugin scripts
(let* ((available-plugins
'(highlight ("RevealHighlight" . "highlight/highlight.js")
markdown ("RevealMarkdown" . "markdown/markdown.js")
search ("RevealSearch" . "search/search.js")
notes ("RevealNotes" . "notes/notes.js")
math ("RevealMath" . "math/math.js")
zoom ("RevealZoom" . "zoom/zoom.js")))
(plugin-info (seq-filter 'identity
(seq-map (lambda (p)
(plist-get available-plugins p))
plugins))))
(if (not (null plugin-info))
(cons
;; Plugin initialization script
(let* ((root-path (file-name-as-directory (plist-get info :reveal-root))) ;; changed
(local-root-path (org-reveal--file-url-to-path root-path)) ;; changed
(in-single-file (plist-get info :reveal-single-file))) ;; changed
(mapconcat
(lambda (p)
(if in-single-file
(concat "<script>\n"
(org-reveal--read-file
(concat local-root-path "plugin/" (cdr p)))
"\n</script>")
(format "<script src=\"%splugin/%s\"></script>\n" root-path (cdr p))))
plugin-info
""))
;; Reveal initialization for plugins
(format "plugins: [%s]"
(mapconcat #'car plugin-info ",")))
;; No available plugin info found. Perhaps wrong plugin
;; names are given
(cons nil nil)))
;; No plugins, return empty string
(cons nil nil)))))
(use-package ox-tufte ;; https://melpa.org/#/ox-tufte (use-package ox-tufte ;; https://melpa.org/#/ox-tufte
:defer t ;; will be loaded via `org-export-backends' see above inside `org' :defer t ;; will be loaded via `org-export-backends' see above inside `org'