Merge branch 'dev' into hash-problem
This commit is contained in:
Hakim El Hattab
GitHub
commit
b5fe0f8126
@ -1,5 +1,5 @@
|
||||
language: node_js
|
||||
node_js:
|
||||
- 4
|
||||
- 11
|
||||
after_script:
|
||||
- npm run build -- retire
|
||||
|
||||
@ -1,7 +1,11 @@
|
||||
/* global module:false */
|
||||
module.exports = function(grunt) {
|
||||
var port = grunt.option('port') || 8000;
|
||||
var root = grunt.option('root') || '.';
|
||||
const sass = require('node-sass');
|
||||
|
||||
require('load-grunt-tasks')(grunt);
|
||||
|
||||
let port = grunt.option('port') || 8000;
|
||||
let root = grunt.option('root') || '.';
|
||||
|
||||
if (!Array.isArray(root)) root = [root];
|
||||
|
||||
@ -15,7 +19,7 @@ module.exports = function(grunt) {
|
||||
' * http://revealjs.com\n' +
|
||||
' * MIT licensed\n' +
|
||||
' *\n' +
|
||||
' * Copyright (C) 2018 Hakim El Hattab, http://hakim.se\n' +
|
||||
' * Copyright (C) 2019 Hakim El Hattab, http://hakim.se\n' +
|
||||
' */'
|
||||
},
|
||||
|
||||
@ -35,6 +39,10 @@ module.exports = function(grunt) {
|
||||
},
|
||||
|
||||
sass: {
|
||||
options: {
|
||||
implementation: sass,
|
||||
sourceMap: false
|
||||
},
|
||||
core: {
|
||||
src: 'css/reveal.scss',
|
||||
dest: 'css/reveal.css'
|
||||
@ -145,27 +153,10 @@ module.exports = function(grunt) {
|
||||
options: {
|
||||
livereload: true
|
||||
}
|
||||
},
|
||||
|
||||
retire: {
|
||||
js: [ 'js/reveal.js', 'lib/js/*.js', 'plugin/**/*.js' ],
|
||||
node: [ '.' ]
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
// Dependencies
|
||||
grunt.loadNpmTasks( 'grunt-contrib-connect' );
|
||||
grunt.loadNpmTasks( 'grunt-contrib-cssmin' );
|
||||
grunt.loadNpmTasks( 'grunt-contrib-jshint' );
|
||||
grunt.loadNpmTasks( 'grunt-contrib-qunit' );
|
||||
grunt.loadNpmTasks( 'grunt-contrib-uglify' );
|
||||
grunt.loadNpmTasks( 'grunt-contrib-watch' );
|
||||
grunt.loadNpmTasks( 'grunt-autoprefixer' );
|
||||
grunt.loadNpmTasks( 'grunt-retire' );
|
||||
grunt.loadNpmTasks( 'grunt-sass' );
|
||||
grunt.loadNpmTasks( 'grunt-zip' );
|
||||
|
||||
// Default task
|
||||
grunt.registerTask( 'default', [ 'css', 'js' ] );
|
||||
|
||||
2
LICENSE
2
LICENSE
@ -1,4 +1,4 @@
|
||||
Copyright (C) 2018 Hakim El Hattab, http://hakim.se, and reveal.js contributors
|
||||
Copyright (C) 2019 Hakim El Hattab, http://hakim.se, and reveal.js contributors
|
||||
|
||||
Permission is hereby granted, free of charge, to any person obtaining a copy
|
||||
of this software and associated documentation files (the "Software"), to deal
|
||||
|
||||
84
README.md
84
README.md
@ -23,6 +23,7 @@ reveal.js comes with a broad range of features including [nested slides](https:/
|
||||
- [Ready Event](#ready-event)
|
||||
- [Auto-sliding](#auto-sliding)
|
||||
- [Keyboard Bindings](#keyboard-bindings)
|
||||
- [Vertical Slide Navigation](#vertical-slide-navigation)
|
||||
- [Touch Navigation](#touch-navigation)
|
||||
- [Lazy Loading](#lazy-loading)
|
||||
- [API](#api)
|
||||
@ -41,6 +42,7 @@ reveal.js comes with a broad range of features including [nested slides](https:/
|
||||
- [Fullscreen mode](#fullscreen-mode)
|
||||
- [Embedded media](#embedded-media)
|
||||
- [Stretching elements](#stretching-elements)
|
||||
- [Resize Event](#resize-event)
|
||||
- [postMessage API](#postmessage-api)
|
||||
- [PDF Export](#pdf-export)
|
||||
- [Theming](#theming)
|
||||
@ -225,7 +227,7 @@ We use [marked](https://github.com/chjj/marked) to parse Markdown. To customise
|
||||
```javascript
|
||||
Reveal.initialize({
|
||||
// Options which are passed into marked
|
||||
// See https://github.com/chjj/marked#options-1
|
||||
// See https://marked.js.org/#/USING_ADVANCED.md#options
|
||||
markdown: {
|
||||
smartypants: true
|
||||
}
|
||||
@ -259,7 +261,11 @@ Reveal.initialize({
|
||||
// Display the page number of the current slide
|
||||
slideNumber: false,
|
||||
|
||||
// Push each slide change to the browser history
|
||||
// Add the current slide number to the URL hash so that reloading the
|
||||
// page/copying the URL will return you to the same slide
|
||||
hash: false,
|
||||
|
||||
// Push each slide change to the browser history. Implies `hash: true`
|
||||
history: false,
|
||||
|
||||
// Enable keyboard shortcuts for navigation
|
||||
@ -280,6 +286,9 @@ Reveal.initialize({
|
||||
// Change the presentation direction to be RTL
|
||||
rtl: false,
|
||||
|
||||
// See https://github.com/hakimel/reveal.js/#navigation-mode
|
||||
navigationMode: 'default',
|
||||
|
||||
// Randomizes the order of slides each time the presentation loads
|
||||
shuffle: false,
|
||||
|
||||
@ -326,6 +335,12 @@ Reveal.initialize({
|
||||
// Enable slide navigation via mouse wheel
|
||||
mouseWheel: false,
|
||||
|
||||
// Hide cursor if inactive
|
||||
hideInactiveCursor: true,
|
||||
|
||||
// Time before the cursor is hidden (in ms)
|
||||
hideCursorTime: 5000,
|
||||
|
||||
// Hides the address bar on mobile devices
|
||||
hideAddressBar: true,
|
||||
|
||||
@ -423,9 +438,6 @@ Reveal.js doesn't _rely_ on any third party scripts to work but a few optional l
|
||||
```javascript
|
||||
Reveal.initialize({
|
||||
dependencies: [
|
||||
// Cross-browser shim that fully implements classList - https://github.com/eligrey/classList.js/
|
||||
{ src: 'lib/js/classList.js', condition: function() { return !document.body.classList; } },
|
||||
|
||||
// Interpret Markdown in <section> elements
|
||||
{ src: 'plugin/markdown/marked.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } },
|
||||
{ src: 'plugin/markdown/markdown.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } },
|
||||
@ -451,8 +463,6 @@ You can add your own extensions using the same syntax. The following properties
|
||||
- **callback**: [optional] Function to execute when the script has loaded
|
||||
- **condition**: [optional] Function which must return true for the script to be loaded
|
||||
|
||||
To load these dependencies, reveal.js requires [head.js](http://headjs.com/) *(a script loading library)* to be loaded before reveal.js.
|
||||
|
||||
### Ready Event
|
||||
|
||||
A `ready` event is fired when reveal.js has loaded all non-async dependencies and is ready to start navigating. To check if reveal.js is already 'ready' you can call `Reveal.isReady()`.
|
||||
@ -506,6 +516,21 @@ Reveal.configure({
|
||||
});
|
||||
```
|
||||
|
||||
### Vertical Slide Navigation
|
||||
|
||||
Slides can be nested within other slides to create vertical stacks (see [Markup](#markup)). When presenting, you use the left/right arrows to step through the main (horizontal) slides. When you arrive at a vertical stack you can optionally press the up/down arrows to view the vertical slides or skip past them by pressing the right arrow. Here's an example showing a bird's-eye view of what this looks like in action:
|
||||
|
||||
<img src="https://static.slid.es/support/reveal.js-vertical-slides.gif" width="450">
|
||||
|
||||
#### Navigation Mode
|
||||
You can finetune the reveal.js navigation behavior by using the `navigationMode` config option. Note that these options are only useful for presnetations that use a mix of horizontal and vertical slides. The following navigation modes are available:
|
||||
|
||||
| Value | Description |
|
||||
| :--------------------------- | :---------- |
|
||||
| default | Left/right arrow keys step between horizontal slides. Up/down arrow keys step between vertical slides. Space key steps through all slides (both horizontal and vertical). |
|
||||
| linear | Removes the up/down arrows. Left/right arrows step through all slides (both horizontal and vertical). |
|
||||
| grid | When this is enabled, stepping left/right from a vertical stack to an adjacent vertical stack will land you at the same vertical index.<br><br>Consider a deck with six slides ordered in two vertical stacks:<br>`1.1` `2.1`<br>`1.2` `2.2`<br>`1.3` `2.3`<br><br>If you're on slide 1.3 and navigate right, you will normally move from 1.3 -> 2.1. With navigationMode set to "grid" the same navigation takes you from 1.3 -> 2.3. |
|
||||
|
||||
### Touch Navigation
|
||||
|
||||
You can swipe to navigate through a presentation on any touch-enabled device. Horizontal swipes change between horizontal slides, vertical swipes change between vertical slides. If you wish to disable this you can set the `touch` config option to false when initializing reveal.js.
|
||||
@ -516,7 +541,7 @@ If there's some part of your content that needs to remain accessible to touch ev
|
||||
|
||||
When working on presentation with a lot of media or iframe content it's important to load lazily. Lazy loading means that reveal.js will only load content for the few slides nearest to the current slide. The number of slides that are preloaded is determined by the `viewDistance` configuration option.
|
||||
|
||||
To enable lazy loading all you need to do is change your `src` attributes to `data-src` as shown below. This is supported for image, video, audio and iframe elements. Lazy loaded iframes will also unload when the containing slide is no longer visible.
|
||||
To enable lazy loading all you need to do is change your `src` attributes to `data-src` as shown below. This is supported for image, video, audio and iframe elements.
|
||||
|
||||
```html
|
||||
<section>
|
||||
@ -529,6 +554,12 @@ To enable lazy loading all you need to do is change your `src` attributes to `da
|
||||
</section>
|
||||
```
|
||||
|
||||
#### Lazy Loading Iframes
|
||||
Note that lazy loaded iframes ignore the `viewDistance` configuration and will only load when their containing slide becomes visible. Iframes are also unloaded as soon as the slide is hidden.
|
||||
|
||||
When we lazy load a video or audio element, reveal.js won't start playing that content until the slide becomes visible. However there is no way to control this for an iframe since that could contain any kind of content. That means if we loaded an iframe before the slide is visible on screen it could begin playing media and sound in the background.
|
||||
|
||||
|
||||
### API
|
||||
|
||||
The `Reveal` object exposes a JavaScript API for controlling navigation and reading state:
|
||||
@ -585,6 +616,9 @@ Reveal.isLastSlide();
|
||||
Reveal.isOverview();
|
||||
Reveal.isPaused();
|
||||
Reveal.isAutoSliding();
|
||||
|
||||
// Returns the top-level DOM element
|
||||
getRevealElement(); // <div class="reveal">...</div>
|
||||
```
|
||||
|
||||
### Custom Key Bindings
|
||||
@ -863,7 +897,7 @@ Reveal.addEventListener( 'fragmenthidden', function( event ) {
|
||||
|
||||
### Code syntax highlighting
|
||||
|
||||
By default, Reveal is configured with [highlight.js](https://highlightjs.org/) for code syntax highlighting. To enable syntax highlighting, you'll have to load the highlight plugin ([plugin/highlight/highlight.js](plugin/highlight/highlight.js)) and a highlight.js CSS theme (Reveal comes packaged with the zenburn theme: [lib/css/zenburn.css](lib/css/zenburn.css)).
|
||||
By default, Reveal is configured with [highlight.js](https://highlightjs.org/) for code syntax highlighting. To enable syntax highlighting, you'll have to load the highlight plugin ([plugin/highlight/highlight.js](plugin/highlight/highlight.js)) and a highlight.js CSS theme (Reveal comes packaged with the Monokai themes: [lib/css/monokai.css](lib/css/monokai.css)).
|
||||
|
||||
```javascript
|
||||
Reveal.initialize({
|
||||
@ -903,6 +937,12 @@ Reveal.configure({ slideNumber: true });
|
||||
// "c/t": flattened slide number / total slides
|
||||
Reveal.configure({ slideNumber: 'c/t' });
|
||||
|
||||
// You can provide a function to fully customize the number:
|
||||
Reveal.configure({ slideNumber: function() {
|
||||
// Ignore numbering of vertical slides
|
||||
return [ Reveal.getIndices().h ];
|
||||
}});
|
||||
|
||||
// Control which views the slide number displays on using the "showSlideNumber" value:
|
||||
// "all": show on all views (default)
|
||||
// "speaker": only show slide numbers on speaker notes view
|
||||
@ -958,6 +998,16 @@ Limitations:
|
||||
- Only direct descendants of a slide section can be stretched
|
||||
- Only one descendant per slide section can be stretched
|
||||
|
||||
### Resize Event
|
||||
|
||||
When reveal.js changes the scale of the slides it fires a resize event. You can subscribe to the event to resize your elements accordingly.
|
||||
|
||||
```javascript
|
||||
Reveal.addEventListener( 'resize', function( event ) {
|
||||
// event.scale, event.oldScale, event.size
|
||||
} );
|
||||
```
|
||||
|
||||
### postMessage API
|
||||
|
||||
The framework has a built-in postMessage API that can be used when communicating with a presentation inside of another window. Here's an example showing how you'd make a reveal.js instance in the given window proceed to slide 2:
|
||||
@ -994,7 +1044,7 @@ Reveal.initialize({
|
||||
|
||||
## PDF Export
|
||||
|
||||
Presentations can be exported to PDF via a special print stylesheet. This feature requires that you use [Google Chrome](http://google.com/chrome) or [Chromium](https://www.chromium.org/Home) and to be serving the presentation from a webserver.
|
||||
Presentations can be exported to PDF via a special print stylesheet. This feature requires that you use [Google Chrome](http://google.com/chrome) or [Chromium](https://www.chromium.org/Home) and to be serving the presentation from a web server.
|
||||
Here's an example of an exported presentation that's been uploaded to SlideShare: http://www.slideshare.net/hakimel/revealjs-300.
|
||||
|
||||
### Separate pages for fragments
|
||||
@ -1170,7 +1220,7 @@ Reveal.initialize({
|
||||
|
||||
// Don't forget to add the dependencies
|
||||
dependencies: [
|
||||
{ src: '//cdn.socket.io/socket.io-1.3.5.js', async: true },
|
||||
{ src: '//cdnjs.cloudflare.com/ajax/libs/socket.io/2.2.0/socket.io.js', async: true },
|
||||
{ src: 'plugin/multiplex/master.js', async: true },
|
||||
|
||||
// and if you want speaker notes
|
||||
@ -1200,7 +1250,7 @@ Reveal.initialize({
|
||||
|
||||
// Don't forget to add the dependencies
|
||||
dependencies: [
|
||||
{ src: '//cdn.socket.io/socket.io-1.3.5.js', async: true },
|
||||
{ src: '//cdnjs.cloudflare.com/ajax/libs/socket.io/2.2.0/socket.io.js', async: true },
|
||||
{ src: 'plugin/multiplex/client.js', async: true }
|
||||
|
||||
// other dependencies...
|
||||
@ -1242,7 +1292,7 @@ Reveal.initialize({
|
||||
|
||||
// Don't forget to add the dependencies
|
||||
dependencies: [
|
||||
{ src: '//cdn.socket.io/socket.io-1.3.5.js', async: true },
|
||||
{ src: '//cdnjs.cloudflare.com/ajax/libs/socket.io/2.2.0/socket.io.js', async: true },
|
||||
{ src: 'plugin/multiplex/client.js', async: true }
|
||||
|
||||
// other dependencies...
|
||||
@ -1266,7 +1316,7 @@ Reveal.initialize({
|
||||
|
||||
// Don't forget to add the dependencies
|
||||
dependencies: [
|
||||
{ src: '//cdn.socket.io/socket.io-1.3.5.js', async: true },
|
||||
{ src: '//cdnjs.cloudflare.com/ajax/libs/socket.io/2.2.0/socket.io.js', async: true },
|
||||
{ src: 'plugin/multiplex/master.js', async: true },
|
||||
{ src: 'plugin/multiplex/client.js', async: true }
|
||||
|
||||
@ -1291,6 +1341,8 @@ Reveal.initialize({
|
||||
math: {
|
||||
mathjax: 'https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.0/MathJax.js',
|
||||
config: 'TeX-AMS_HTML-full' // See http://docs.mathjax.org/en/latest/config-files.html
|
||||
// pass other options into `MathJax.Hub.Config()`
|
||||
TeX: { Macros: macros }
|
||||
},
|
||||
|
||||
dependencies: [
|
||||
@ -1302,7 +1354,7 @@ Reveal.initialize({
|
||||
Read MathJax's documentation if you need [HTTPS delivery](http://docs.mathjax.org/en/latest/start.html#secure-access-to-the-cdn) or serving of [specific versions](http://docs.mathjax.org/en/latest/configuration.html#loading-mathjax-from-the-cdn) for stability.
|
||||
|
||||
#### MathJax in Markdown
|
||||
If you want to include math inside of a presentation written in Markdown you need to wrap the forumla in backticks. This prevents syntax conflicts between LaTeX and Markdown. For example:
|
||||
If you want to include math inside of a presentation written in Markdown you need to wrap the formula in backticks. This prevents syntax conflicts between LaTeX and Markdown. For example:
|
||||
|
||||
```
|
||||
`$$ J(\theta_0,\theta_1) = \sum_{i=0} $$`
|
||||
@ -1312,4 +1364,4 @@ If you want to include math inside of a presentation written in Markdown you nee
|
||||
|
||||
MIT licensed
|
||||
|
||||
Copyright (C) 2018 Hakim El Hattab, http://hakim.se
|
||||
Copyright (C) 2019 Hakim El Hattab, http://hakim.se
|
||||
|
||||
30
css/reset.css
Normal file
30
css/reset.css
Normal file
@ -0,0 +1,30 @@
|
||||
/* http://meyerweb.com/eric/tools/css/reset/
|
||||
v4.0 | 20180602
|
||||
License: none (public domain)
|
||||
*/
|
||||
|
||||
html, body, div, span, applet, object, iframe,
|
||||
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
|
||||
a, abbr, acronym, address, big, cite, code,
|
||||
del, dfn, em, img, ins, kbd, q, s, samp,
|
||||
small, strike, strong, sub, sup, tt, var,
|
||||
b, u, i, center,
|
||||
dl, dt, dd, ol, ul, li,
|
||||
fieldset, form, label, legend,
|
||||
table, caption, tbody, tfoot, thead, tr, th, td,
|
||||
article, aside, canvas, details, embed,
|
||||
figure, figcaption, footer, header, hgroup,
|
||||
main, menu, nav, output, ruby, section, summary,
|
||||
time, mark, audio, video {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
font-size: 100%;
|
||||
font: inherit;
|
||||
vertical-align: baseline;
|
||||
}
|
||||
/* HTML5 display-role reset for older browsers */
|
||||
article, aside, details, figcaption, figure,
|
||||
footer, header, hgroup, main, menu, nav, section {
|
||||
display: block;
|
||||
}
|
||||
177
css/reveal.css
177
css/reveal.css
@ -3,47 +3,24 @@
|
||||
* http://revealjs.com
|
||||
* MIT licensed
|
||||
*
|
||||
* Copyright (C) 2018 Hakim El Hattab, http://hakim.se
|
||||
* Copyright (C) 2019 Hakim El Hattab, http://hakim.se
|
||||
*/
|
||||
/*********************************************
|
||||
* RESET STYLES
|
||||
*********************************************/
|
||||
html, body, .reveal div, .reveal span, .reveal applet, .reveal object, .reveal iframe,
|
||||
.reveal h1, .reveal h2, .reveal h3, .reveal h4, .reveal h5, .reveal h6, .reveal p, .reveal blockquote, .reveal pre,
|
||||
.reveal a, .reveal abbr, .reveal acronym, .reveal address, .reveal big, .reveal cite, .reveal code,
|
||||
.reveal del, .reveal dfn, .reveal em, .reveal img, .reveal ins, .reveal kbd, .reveal q, .reveal s, .reveal samp,
|
||||
.reveal small, .reveal strike, .reveal strong, .reveal sub, .reveal sup, .reveal tt, .reveal var,
|
||||
.reveal b, .reveal u, .reveal center,
|
||||
.reveal dl, .reveal dt, .reveal dd, .reveal ol, .reveal ul, .reveal li,
|
||||
.reveal fieldset, .reveal form, .reveal label, .reveal legend,
|
||||
.reveal table, .reveal caption, .reveal tbody, .reveal tfoot, .reveal thead, .reveal tr, .reveal th, .reveal td,
|
||||
.reveal article, .reveal aside, .reveal canvas, .reveal details, .reveal embed,
|
||||
.reveal figure, .reveal figcaption, .reveal footer, .reveal header, .reveal hgroup,
|
||||
.reveal menu, .reveal nav, .reveal output, .reveal ruby, .reveal section, .reveal summary,
|
||||
.reveal time, .reveal mark, .reveal audio, .reveal video {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
font-size: 100%;
|
||||
font: inherit;
|
||||
vertical-align: baseline; }
|
||||
|
||||
.reveal article, .reveal aside, .reveal details, .reveal figcaption, .reveal figure,
|
||||
.reveal footer, .reveal header, .reveal hgroup, .reveal menu, .reveal nav, .reveal section {
|
||||
display: block; }
|
||||
|
||||
/*********************************************
|
||||
* GLOBAL STYLES
|
||||
*********************************************/
|
||||
html,
|
||||
body {
|
||||
html {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
height: 100vh;
|
||||
height: calc( var(--vh, 1vh) * 100);
|
||||
overflow: hidden; }
|
||||
|
||||
body {
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
line-height: 1;
|
||||
margin: 0;
|
||||
background-color: #fff;
|
||||
color: #000; }
|
||||
|
||||
@ -272,7 +249,7 @@ body {
|
||||
visibility: hidden;
|
||||
opacity: 0;
|
||||
-webkit-appearance: none;
|
||||
-webkit-tap-highlight-color: transparent; }
|
||||
-webkit-tap-highlight-color: rgba(0, 0, 0, 0); }
|
||||
.reveal .controls .controls-arrow:before,
|
||||
.reveal .controls .controls-arrow:after {
|
||||
content: '';
|
||||
@ -366,10 +343,16 @@ body {
|
||||
.reveal .controls .enabled.fragmented:hover {
|
||||
opacity: 1; }
|
||||
|
||||
.reveal[data-navigation-mode="linear"].has-horizontal-slides .navigate-up,
|
||||
.reveal[data-navigation-mode="linear"].has-horizontal-slides .navigate-down {
|
||||
display: none; }
|
||||
|
||||
.reveal[data-navigation-mode="linear"].has-horizontal-slides .navigate-left,
|
||||
.reveal:not(.has-vertical-slides) .controls .navigate-left {
|
||||
bottom: 1.4em;
|
||||
right: 5.5em; }
|
||||
|
||||
.reveal[data-navigation-mode="linear"].has-horizontal-slides .navigate-right,
|
||||
.reveal:not(.has-vertical-slides) .controls .navigate-right {
|
||||
bottom: 1.4em;
|
||||
right: 0.5em; }
|
||||
@ -486,12 +469,8 @@ body {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
-ms-touch-action: none;
|
||||
touch-action: none; }
|
||||
|
||||
@media only screen and (orientation: landscape) {
|
||||
.reveal.ua-iphone {
|
||||
position: fixed; } }
|
||||
-ms-touch-action: pinch-zoom;
|
||||
touch-action: pinch-zoom; }
|
||||
|
||||
.reveal .slides {
|
||||
position: absolute;
|
||||
@ -512,7 +491,8 @@ body {
|
||||
perspective-origin: 50% 40%; }
|
||||
|
||||
.reveal .slides > section {
|
||||
-ms-perspective: 600px; }
|
||||
-webkit-perspective: 600px;
|
||||
perspective: 600px; }
|
||||
|
||||
.reveal .slides > section,
|
||||
.reveal .slides > section > section {
|
||||
@ -544,7 +524,8 @@ body {
|
||||
.reveal .slides > section.stack {
|
||||
padding-top: 0;
|
||||
padding-bottom: 0;
|
||||
pointer-events: none; }
|
||||
pointer-events: none;
|
||||
height: 100%; }
|
||||
|
||||
.reveal .slides > section.present,
|
||||
.reveal .slides > section > section.present {
|
||||
@ -761,14 +742,14 @@ body {
|
||||
.reveal .slides > section > section[data-transition=zoom].past,
|
||||
.reveal .slides > section > section[data-transition~=zoom-out].past,
|
||||
.reveal.zoom .slides > section > section:not([data-transition]).past {
|
||||
-webkit-transform: translate(0, -150%);
|
||||
transform: translate(0, -150%); }
|
||||
-webkit-transform: scale(16);
|
||||
transform: scale(16); }
|
||||
|
||||
.reveal .slides > section > section[data-transition=zoom].future,
|
||||
.reveal .slides > section > section[data-transition~=zoom-in].future,
|
||||
.reveal.zoom .slides > section > section:not([data-transition]).future {
|
||||
-webkit-transform: translate(0, 150%);
|
||||
transform: translate(0, 150%); }
|
||||
-webkit-transform: scale(0.2);
|
||||
transform: scale(0.2); }
|
||||
|
||||
/*********************************************
|
||||
* CUBE TRANSITION
|
||||
@ -989,34 +970,35 @@ body {
|
||||
.no-transforms {
|
||||
overflow-y: auto; }
|
||||
|
||||
.no-transforms .reveal {
|
||||
overflow: visible; }
|
||||
|
||||
.no-transforms .reveal .slides {
|
||||
position: relative;
|
||||
width: 80%;
|
||||
height: auto !important;
|
||||
max-width: 1280px;
|
||||
height: auto;
|
||||
top: 0;
|
||||
left: 50%;
|
||||
margin: 0;
|
||||
margin: 0 auto;
|
||||
text-align: center; }
|
||||
|
||||
.no-transforms .reveal .controls,
|
||||
.no-transforms .reveal .progress {
|
||||
display: none !important; }
|
||||
display: none; }
|
||||
|
||||
.no-transforms .reveal .slides section {
|
||||
display: block !important;
|
||||
opacity: 1 !important;
|
||||
position: relative !important;
|
||||
display: block;
|
||||
opacity: 1;
|
||||
position: relative;
|
||||
height: auto;
|
||||
min-height: 0;
|
||||
top: 0;
|
||||
left: -50%;
|
||||
left: 0;
|
||||
margin: 10vh 0;
|
||||
margin: 70px 0;
|
||||
-webkit-transform: none;
|
||||
transform: none; }
|
||||
|
||||
.no-transforms .reveal .slides section section {
|
||||
left: 0; }
|
||||
|
||||
.reveal .no-transition,
|
||||
.reveal .no-transition * {
|
||||
transition: none !important; }
|
||||
@ -1041,7 +1023,7 @@ body {
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
overflow: hidden;
|
||||
background-color: transparent;
|
||||
background-color: rgba(0, 0, 0, 0);
|
||||
transition: all 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); }
|
||||
|
||||
.reveal .slide-background-content {
|
||||
@ -1294,9 +1276,9 @@ body {
|
||||
transition-duration: 1200ms; }
|
||||
|
||||
/*********************************************
|
||||
* LINK PREVIEW OVERLAY
|
||||
* OVERLAY FOR LINK PREVIEWS AND HELP
|
||||
*********************************************/
|
||||
.reveal .overlay {
|
||||
.reveal > .overlay {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
@ -1308,11 +1290,11 @@ body {
|
||||
visibility: hidden;
|
||||
transition: all 0.3s ease; }
|
||||
|
||||
.reveal .overlay.visible {
|
||||
.reveal > .overlay.visible {
|
||||
opacity: 1;
|
||||
visibility: visible; }
|
||||
|
||||
.reveal .overlay .spinner {
|
||||
.reveal > .overlay .spinner {
|
||||
position: absolute;
|
||||
display: block;
|
||||
top: 50%;
|
||||
@ -1326,7 +1308,7 @@ body {
|
||||
opacity: 0.6;
|
||||
transition: all 0.3s ease; }
|
||||
|
||||
.reveal .overlay header {
|
||||
.reveal > .overlay header {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
@ -1335,7 +1317,7 @@ body {
|
||||
z-index: 2;
|
||||
border-bottom: 1px solid #222; }
|
||||
|
||||
.reveal .overlay header a {
|
||||
.reveal > .overlay header a {
|
||||
display: inline-block;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
@ -1345,10 +1327,10 @@ body {
|
||||
opacity: 0.6;
|
||||
box-sizing: border-box; }
|
||||
|
||||
.reveal .overlay header a:hover {
|
||||
.reveal > .overlay header a:hover {
|
||||
opacity: 1; }
|
||||
|
||||
.reveal .overlay header a .icon {
|
||||
.reveal > .overlay header a .icon {
|
||||
display: inline-block;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
@ -1356,13 +1338,13 @@ body {
|
||||
background-size: 100%;
|
||||
background-repeat: no-repeat; }
|
||||
|
||||
.reveal .overlay header a.close .icon {
|
||||
.reveal > .overlay header a.close .icon {
|
||||
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAABkklEQVRYR8WX4VHDMAxG6wnoJrABZQPYBCaBTWAD2g1gE5gg6OOsXuxIlr40d81dfrSJ9V4c2VLK7spHuTJ/5wpM07QXuXc5X0opX2tEJcadjHuV80li/FgxTIEK/5QBCICBD6xEhSMGHgQPgBgLiYVAB1dpSqKDawxTohFw4JSEA3clzgIBPCURwE2JucBR7rhPJJv5OpJwDX+SfDjgx1wACQeJG1aChP9K/IMmdZ8DtESV1WyP3Bt4MwM6sj4NMxMYiqUWHQu4KYA/SYkIjOsm3BXYWMKFDwU2khjCQ4ELJUJ4SmClRArOCmSXGuKma0fYD5CbzHxFpCSGAhfAVSSUGDUk2BWZaff2g6GE15BsBQ9nwmpIGDiyHQddwNTMKkbZaf9fajXQca1EX44puJZUsnY0ObGmITE3GVLCbEhQUjGVt146j6oasWN+49Vph2w1pZ5EansNZqKBm1txbU57iRRcZ86RWMDdWtBJUHBHwoQPi1GV+JCbntmvok7iTX4/Up9mgyTc/FJYDTcndgH/AA5A/CHsyEkVAAAAAElFTkSuQmCC); }
|
||||
|
||||
.reveal .overlay header a.external .icon {
|
||||
.reveal > .overlay header a.external .icon {
|
||||
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAcElEQVRYR+2WSQoAIQwEzf8f7XiOMkUQxUPlGkM3hVmiQfQR9GYnH1SsAQlI4DiBqkCMoNb9y2e90IAEJPAcgdznU9+engMaeJ7Azh5Y1U67gAho4DqBqmB1buAf0MB1AlVBek83ZPkmJMGc1wAR+AAqod/B97TRpQAAAABJRU5ErkJggg==); }
|
||||
|
||||
.reveal .overlay .viewport {
|
||||
.reveal > .overlay .viewport {
|
||||
position: absolute;
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
@ -1372,7 +1354,7 @@ body {
|
||||
bottom: 0;
|
||||
left: 0; }
|
||||
|
||||
.reveal .overlay.overlay-preview .viewport iframe {
|
||||
.reveal > .overlay.overlay-preview .viewport iframe {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
max-width: 100%;
|
||||
@ -1382,11 +1364,11 @@ body {
|
||||
visibility: hidden;
|
||||
transition: all 0.3s ease; }
|
||||
|
||||
.reveal .overlay.overlay-preview.loaded .viewport iframe {
|
||||
.reveal > .overlay.overlay-preview.loaded .viewport iframe {
|
||||
opacity: 1;
|
||||
visibility: visible; }
|
||||
|
||||
.reveal .overlay.overlay-preview.loaded .viewport-inner {
|
||||
.reveal > .overlay.overlay-preview.loaded .viewport-inner {
|
||||
position: absolute;
|
||||
z-index: -1;
|
||||
left: 0;
|
||||
@ -1395,46 +1377,46 @@ body {
|
||||
text-align: center;
|
||||
letter-spacing: normal; }
|
||||
|
||||
.reveal .overlay.overlay-preview .x-frame-error {
|
||||
.reveal > .overlay.overlay-preview .x-frame-error {
|
||||
opacity: 0;
|
||||
transition: opacity 0.3s ease 0.3s; }
|
||||
|
||||
.reveal .overlay.overlay-preview.loaded .x-frame-error {
|
||||
.reveal > .overlay.overlay-preview.loaded .x-frame-error {
|
||||
opacity: 1; }
|
||||
|
||||
.reveal .overlay.overlay-preview.loaded .spinner {
|
||||
.reveal > .overlay.overlay-preview.loaded .spinner {
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
-webkit-transform: scale(0.2);
|
||||
transform: scale(0.2); }
|
||||
|
||||
.reveal .overlay.overlay-help .viewport {
|
||||
.reveal > .overlay.overlay-help .viewport {
|
||||
overflow: auto;
|
||||
color: #fff; }
|
||||
|
||||
.reveal .overlay.overlay-help .viewport .viewport-inner {
|
||||
.reveal > .overlay.overlay-help .viewport .viewport-inner {
|
||||
width: 600px;
|
||||
margin: auto;
|
||||
padding: 20px 20px 80px 20px;
|
||||
text-align: center;
|
||||
letter-spacing: normal; }
|
||||
|
||||
.reveal .overlay.overlay-help .viewport .viewport-inner .title {
|
||||
.reveal > .overlay.overlay-help .viewport .viewport-inner .title {
|
||||
font-size: 20px; }
|
||||
|
||||
.reveal .overlay.overlay-help .viewport .viewport-inner table {
|
||||
.reveal > .overlay.overlay-help .viewport .viewport-inner table {
|
||||
border: 1px solid #fff;
|
||||
border-collapse: collapse;
|
||||
font-size: 16px; }
|
||||
|
||||
.reveal .overlay.overlay-help .viewport .viewport-inner table th,
|
||||
.reveal .overlay.overlay-help .viewport .viewport-inner table td {
|
||||
.reveal > .overlay.overlay-help .viewport .viewport-inner table th,
|
||||
.reveal > .overlay.overlay-help .viewport .viewport-inner table td {
|
||||
width: 200px;
|
||||
padding: 14px;
|
||||
border: 1px solid #fff;
|
||||
vertical-align: middle; }
|
||||
|
||||
.reveal .overlay.overlay-help .viewport .viewport-inner table th {
|
||||
.reveal > .overlay.overlay-help .viewport .viewport-inner table th {
|
||||
padding-top: 20px;
|
||||
padding-bottom: 20px; }
|
||||
|
||||
@ -1448,12 +1430,32 @@ body {
|
||||
z-index: 30;
|
||||
cursor: pointer;
|
||||
transition: all 400ms ease;
|
||||
-webkit-tap-highlight-color: transparent; }
|
||||
-webkit-tap-highlight-color: rgba(0, 0, 0, 0); }
|
||||
|
||||
.reveal.overview .playback {
|
||||
opacity: 0;
|
||||
visibility: hidden; }
|
||||
|
||||
/*********************************************
|
||||
* CODE HIGHLGIHTING
|
||||
*********************************************/
|
||||
.reveal .hljs table {
|
||||
margin: initial; }
|
||||
|
||||
.reveal .hljs-ln-code,
|
||||
.reveal .hljs-ln-numbers {
|
||||
padding: 0;
|
||||
border: 0; }
|
||||
|
||||
.reveal .hljs-ln-numbers {
|
||||
opacity: 0.6;
|
||||
padding-right: 0.75em;
|
||||
text-align: right;
|
||||
vertical-align: top; }
|
||||
|
||||
.reveal .hljs[data-line-numbers]:not([data-line-numbers=""]) tr:not(.highlight-line) {
|
||||
opacity: 0.25; }
|
||||
|
||||
/*********************************************
|
||||
* ROLLING LINKS
|
||||
*********************************************/
|
||||
@ -1512,7 +1514,7 @@ body {
|
||||
.reveal .speaker-notes {
|
||||
display: none;
|
||||
position: absolute;
|
||||
width: 25vw;
|
||||
width: 33.3333333333%;
|
||||
height: 100%;
|
||||
top: 0;
|
||||
left: 100%;
|
||||
@ -1540,7 +1542,7 @@ body {
|
||||
opacity: 0.5; }
|
||||
|
||||
.reveal.show-notes {
|
||||
max-width: 75vw;
|
||||
max-width: 75%;
|
||||
overflow: visible; }
|
||||
|
||||
.reveal.show-notes .speaker-notes {
|
||||
@ -1555,19 +1557,24 @@ body {
|
||||
border-left: 0;
|
||||
max-width: none;
|
||||
max-height: 70%;
|
||||
max-height: 70vh;
|
||||
overflow: visible; }
|
||||
.reveal.show-notes .speaker-notes {
|
||||
top: 100%;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 42.8571428571%; } }
|
||||
height: 42.8571428571%;
|
||||
height: 30vh;
|
||||
border: 0; } }
|
||||
|
||||
@media screen and (max-width: 600px) {
|
||||
.reveal.show-notes {
|
||||
max-height: 60%; }
|
||||
max-height: 60%;
|
||||
max-height: 60vh; }
|
||||
.reveal.show-notes .speaker-notes {
|
||||
top: 100%;
|
||||
height: 66.6666666667%; }
|
||||
height: 66.6666666667%;
|
||||
height: 40vh; }
|
||||
.reveal .speaker-notes {
|
||||
font-size: 14px; } }
|
||||
|
||||
|
||||
178
css/reveal.scss
178
css/reveal.scss
@ -3,55 +3,28 @@
|
||||
* http://revealjs.com
|
||||
* MIT licensed
|
||||
*
|
||||
* Copyright (C) 2018 Hakim El Hattab, http://hakim.se
|
||||
* Copyright (C) 2019 Hakim El Hattab, http://hakim.se
|
||||
*/
|
||||
|
||||
|
||||
/*********************************************
|
||||
* RESET STYLES
|
||||
*********************************************/
|
||||
|
||||
html, body, .reveal div, .reveal span, .reveal applet, .reveal object, .reveal iframe,
|
||||
.reveal h1, .reveal h2, .reveal h3, .reveal h4, .reveal h5, .reveal h6, .reveal p, .reveal blockquote, .reveal pre,
|
||||
.reveal a, .reveal abbr, .reveal acronym, .reveal address, .reveal big, .reveal cite, .reveal code,
|
||||
.reveal del, .reveal dfn, .reveal em, .reveal img, .reveal ins, .reveal kbd, .reveal q, .reveal s, .reveal samp,
|
||||
.reveal small, .reveal strike, .reveal strong, .reveal sub, .reveal sup, .reveal tt, .reveal var,
|
||||
.reveal b, .reveal u, .reveal center,
|
||||
.reveal dl, .reveal dt, .reveal dd, .reveal ol, .reveal ul, .reveal li,
|
||||
.reveal fieldset, .reveal form, .reveal label, .reveal legend,
|
||||
.reveal table, .reveal caption, .reveal tbody, .reveal tfoot, .reveal thead, .reveal tr, .reveal th, .reveal td,
|
||||
.reveal article, .reveal aside, .reveal canvas, .reveal details, .reveal embed,
|
||||
.reveal figure, .reveal figcaption, .reveal footer, .reveal header, .reveal hgroup,
|
||||
.reveal menu, .reveal nav, .reveal output, .reveal ruby, .reveal section, .reveal summary,
|
||||
.reveal time, .reveal mark, .reveal audio, .reveal video {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
font-size: 100%;
|
||||
font: inherit;
|
||||
vertical-align: baseline;
|
||||
}
|
||||
|
||||
.reveal article, .reveal aside, .reveal details, .reveal figcaption, .reveal figure,
|
||||
.reveal footer, .reveal header, .reveal hgroup, .reveal menu, .reveal nav, .reveal section {
|
||||
display: block;
|
||||
}
|
||||
|
||||
|
||||
/*********************************************
|
||||
* GLOBAL STYLES
|
||||
*********************************************/
|
||||
|
||||
html,
|
||||
body {
|
||||
html {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
height: 100vh;
|
||||
height: calc( var(--vh, 1vh) * 100 );
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
body {
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
line-height: 1;
|
||||
margin: 0;
|
||||
|
||||
background-color: #fff;
|
||||
color: #000;
|
||||
@ -434,12 +407,19 @@ $controlsArrowAngleActive: 36deg;
|
||||
}
|
||||
}
|
||||
|
||||
.reveal[data-navigation-mode="linear"].has-horizontal-slides .navigate-up,
|
||||
.reveal[data-navigation-mode="linear"].has-horizontal-slides .navigate-down {
|
||||
display: none;
|
||||
}
|
||||
|
||||
// Adjust the layout when there are no vertical slides
|
||||
.reveal[data-navigation-mode="linear"].has-horizontal-slides .navigate-left,
|
||||
.reveal:not(.has-vertical-slides) .controls .navigate-left {
|
||||
bottom: $controlArrowSpacing;
|
||||
right: 0.5em + $controlArrowSpacing + $controlArrowSize;
|
||||
}
|
||||
|
||||
.reveal[data-navigation-mode="linear"].has-horizontal-slides .navigate-right,
|
||||
.reveal:not(.has-vertical-slides) .controls .navigate-right {
|
||||
bottom: $controlArrowSpacing;
|
||||
right: 0.5em;
|
||||
@ -586,17 +566,7 @@ $controlsArrowAngleActive: 36deg;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
touch-action: none;
|
||||
}
|
||||
|
||||
// Mobile Safari sometimes overlays a header at the top
|
||||
// of the page when in landscape mode. Using fixed
|
||||
// positioning ensures that reveal.js reduces its height
|
||||
// when this header is visible.
|
||||
@media only screen and (orientation : landscape) {
|
||||
.reveal.ua-iphone {
|
||||
position: fixed;
|
||||
}
|
||||
touch-action: pinch-zoom;
|
||||
}
|
||||
|
||||
.reveal .slides {
|
||||
@ -618,7 +588,7 @@ $controlsArrowAngleActive: 36deg;
|
||||
}
|
||||
|
||||
.reveal .slides>section {
|
||||
-ms-perspective: 600px;
|
||||
perspective: 600px;
|
||||
}
|
||||
|
||||
.reveal .slides>section,
|
||||
@ -657,6 +627,7 @@ $controlsArrowAngleActive: 36deg;
|
||||
padding-top: 0;
|
||||
padding-bottom: 0;
|
||||
pointer-events: none;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.reveal .slides>section.present,
|
||||
@ -831,10 +802,10 @@ $controlsArrowAngleActive: 36deg;
|
||||
transform: scale(0.2);
|
||||
}
|
||||
@include transition-vertical-past(zoom) {
|
||||
transform: translate(0, -150%);
|
||||
transform: scale(16);
|
||||
}
|
||||
@include transition-vertical-future(zoom) {
|
||||
transform: translate(0, 150%);
|
||||
transform: scale(0.2);
|
||||
}
|
||||
|
||||
|
||||
@ -1067,37 +1038,38 @@ $controlsArrowAngleActive: 36deg;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.no-transforms .reveal {
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
.no-transforms .reveal .slides {
|
||||
position: relative;
|
||||
width: 80%;
|
||||
height: auto !important;
|
||||
max-width: 1280px;
|
||||
height: auto;
|
||||
top: 0;
|
||||
left: 50%;
|
||||
margin: 0;
|
||||
margin: 0 auto;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.no-transforms .reveal .controls,
|
||||
.no-transforms .reveal .progress {
|
||||
display: none !important;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.no-transforms .reveal .slides section {
|
||||
display: block !important;
|
||||
opacity: 1 !important;
|
||||
position: relative !important;
|
||||
display: block;
|
||||
opacity: 1;
|
||||
position: relative;
|
||||
height: auto;
|
||||
min-height: 0;
|
||||
top: 0;
|
||||
left: -50%;
|
||||
left: 0;
|
||||
margin: 10vh 0;
|
||||
margin: 70px 0;
|
||||
transform: none;
|
||||
}
|
||||
|
||||
.no-transforms .reveal .slides section section {
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.reveal .no-transition,
|
||||
.reveal .no-transition * {
|
||||
transition: none !important;
|
||||
@ -1416,10 +1388,10 @@ $controlsArrowAngleActive: 36deg;
|
||||
|
||||
|
||||
/*********************************************
|
||||
* LINK PREVIEW OVERLAY
|
||||
* OVERLAY FOR LINK PREVIEWS AND HELP
|
||||
*********************************************/
|
||||
|
||||
.reveal .overlay {
|
||||
.reveal > .overlay {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
@ -1431,12 +1403,12 @@ $controlsArrowAngleActive: 36deg;
|
||||
visibility: hidden;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
.reveal .overlay.visible {
|
||||
.reveal > .overlay.visible {
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
.reveal .overlay .spinner {
|
||||
.reveal > .overlay .spinner {
|
||||
position: absolute;
|
||||
display: block;
|
||||
top: 50%;
|
||||
@ -1452,7 +1424,7 @@ $controlsArrowAngleActive: 36deg;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.reveal .overlay header {
|
||||
.reveal > .overlay header {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
@ -1461,7 +1433,7 @@ $controlsArrowAngleActive: 36deg;
|
||||
z-index: 2;
|
||||
border-bottom: 1px solid #222;
|
||||
}
|
||||
.reveal .overlay header a {
|
||||
.reveal > .overlay header a {
|
||||
display: inline-block;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
@ -1472,10 +1444,10 @@ $controlsArrowAngleActive: 36deg;
|
||||
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.reveal .overlay header a:hover {
|
||||
.reveal > .overlay header a:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
.reveal .overlay header a .icon {
|
||||
.reveal > .overlay header a .icon {
|
||||
display: inline-block;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
@ -1484,14 +1456,14 @@ $controlsArrowAngleActive: 36deg;
|
||||
background-size: 100%;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
.reveal .overlay header a.close .icon {
|
||||
.reveal > .overlay header a.close .icon {
|
||||
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAABkklEQVRYR8WX4VHDMAxG6wnoJrABZQPYBCaBTWAD2g1gE5gg6OOsXuxIlr40d81dfrSJ9V4c2VLK7spHuTJ/5wpM07QXuXc5X0opX2tEJcadjHuV80li/FgxTIEK/5QBCICBD6xEhSMGHgQPgBgLiYVAB1dpSqKDawxTohFw4JSEA3clzgIBPCURwE2JucBR7rhPJJv5OpJwDX+SfDjgx1wACQeJG1aChP9K/IMmdZ8DtESV1WyP3Bt4MwM6sj4NMxMYiqUWHQu4KYA/SYkIjOsm3BXYWMKFDwU2khjCQ4ELJUJ4SmClRArOCmSXGuKma0fYD5CbzHxFpCSGAhfAVSSUGDUk2BWZaff2g6GE15BsBQ9nwmpIGDiyHQddwNTMKkbZaf9fajXQca1EX44puJZUsnY0ObGmITE3GVLCbEhQUjGVt146j6oasWN+49Vph2w1pZ5EansNZqKBm1txbU57iRRcZ86RWMDdWtBJUHBHwoQPi1GV+JCbntmvok7iTX4/Up9mgyTc/FJYDTcndgH/AA5A/CHsyEkVAAAAAElFTkSuQmCC);
|
||||
}
|
||||
.reveal .overlay header a.external .icon {
|
||||
.reveal > .overlay header a.external .icon {
|
||||
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAcElEQVRYR+2WSQoAIQwEzf8f7XiOMkUQxUPlGkM3hVmiQfQR9GYnH1SsAQlI4DiBqkCMoNb9y2e90IAEJPAcgdznU9+engMaeJ7Azh5Y1U67gAho4DqBqmB1buAf0MB1AlVBek83ZPkmJMGc1wAR+AAqod/B97TRpQAAAABJRU5ErkJggg==);
|
||||
}
|
||||
|
||||
.reveal .overlay .viewport {
|
||||
.reveal > .overlay .viewport {
|
||||
position: absolute;
|
||||
display: flex;
|
||||
top: 40px;
|
||||
@ -1500,7 +1472,7 @@ $controlsArrowAngleActive: 36deg;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.reveal .overlay.overlay-preview .viewport iframe {
|
||||
.reveal > .overlay.overlay-preview .viewport iframe {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
max-width: 100%;
|
||||
@ -1512,12 +1484,12 @@ $controlsArrowAngleActive: 36deg;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.reveal .overlay.overlay-preview.loaded .viewport iframe {
|
||||
.reveal > .overlay.overlay-preview.loaded .viewport iframe {
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
.reveal .overlay.overlay-preview.loaded .viewport-inner {
|
||||
.reveal > .overlay.overlay-preview.loaded .viewport-inner {
|
||||
position: absolute;
|
||||
z-index: -1;
|
||||
left: 0;
|
||||
@ -1526,26 +1498,26 @@ $controlsArrowAngleActive: 36deg;
|
||||
text-align: center;
|
||||
letter-spacing: normal;
|
||||
}
|
||||
.reveal .overlay.overlay-preview .x-frame-error {
|
||||
.reveal > .overlay.overlay-preview .x-frame-error {
|
||||
opacity: 0;
|
||||
transition: opacity 0.3s ease 0.3s;
|
||||
}
|
||||
.reveal .overlay.overlay-preview.loaded .x-frame-error {
|
||||
.reveal > .overlay.overlay-preview.loaded .x-frame-error {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.reveal .overlay.overlay-preview.loaded .spinner {
|
||||
.reveal > .overlay.overlay-preview.loaded .spinner {
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
transform: scale(0.2);
|
||||
}
|
||||
|
||||
.reveal .overlay.overlay-help .viewport {
|
||||
.reveal > .overlay.overlay-help .viewport {
|
||||
overflow: auto;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.reveal .overlay.overlay-help .viewport .viewport-inner {
|
||||
.reveal > .overlay.overlay-help .viewport .viewport-inner {
|
||||
width: 600px;
|
||||
margin: auto;
|
||||
padding: 20px 20px 80px 20px;
|
||||
@ -1553,31 +1525,30 @@ $controlsArrowAngleActive: 36deg;
|
||||
letter-spacing: normal;
|
||||
}
|
||||
|
||||
.reveal .overlay.overlay-help .viewport .viewport-inner .title {
|
||||
.reveal > .overlay.overlay-help .viewport .viewport-inner .title {
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.reveal .overlay.overlay-help .viewport .viewport-inner table {
|
||||
.reveal > .overlay.overlay-help .viewport .viewport-inner table {
|
||||
border: 1px solid #fff;
|
||||
border-collapse: collapse;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.reveal .overlay.overlay-help .viewport .viewport-inner table th,
|
||||
.reveal .overlay.overlay-help .viewport .viewport-inner table td {
|
||||
.reveal > .overlay.overlay-help .viewport .viewport-inner table th,
|
||||
.reveal > .overlay.overlay-help .viewport .viewport-inner table td {
|
||||
width: 200px;
|
||||
padding: 14px;
|
||||
border: 1px solid #fff;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.reveal .overlay.overlay-help .viewport .viewport-inner table th {
|
||||
.reveal > .overlay.overlay-help .viewport .viewport-inner table th {
|
||||
padding-top: 20px;
|
||||
padding-bottom: 20px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
/*********************************************
|
||||
* PLAYBACK COMPONENT
|
||||
*********************************************/
|
||||
@ -1598,6 +1569,32 @@ $controlsArrowAngleActive: 36deg;
|
||||
}
|
||||
|
||||
|
||||
/*********************************************
|
||||
* CODE HIGHLGIHTING
|
||||
*********************************************/
|
||||
|
||||
.reveal .hljs table {
|
||||
margin: initial;
|
||||
}
|
||||
|
||||
.reveal .hljs-ln-code,
|
||||
.reveal .hljs-ln-numbers {
|
||||
padding: 0;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
.reveal .hljs-ln-numbers {
|
||||
opacity: 0.6;
|
||||
padding-right: 0.75em;
|
||||
text-align: right;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
.reveal .hljs[data-line-numbers]:not([data-line-numbers=""]) tr:not(.highlight-line) {
|
||||
opacity: 0.4;
|
||||
}
|
||||
|
||||
|
||||
/*********************************************
|
||||
* ROLLING LINKS
|
||||
*********************************************/
|
||||
@ -1648,6 +1645,8 @@ $controlsArrowAngleActive: 36deg;
|
||||
* SPEAKER NOTES
|
||||
*********************************************/
|
||||
|
||||
$notesWidthPercent: 25%;
|
||||
|
||||
// Hide on-page notes
|
||||
.reveal aside.notes {
|
||||
display: none;
|
||||
@ -1658,7 +1657,7 @@ $controlsArrowAngleActive: 36deg;
|
||||
.reveal .speaker-notes {
|
||||
display: none;
|
||||
position: absolute;
|
||||
width: 25vw;
|
||||
width: $notesWidthPercent / (1-$notesWidthPercent/100) * 1%;
|
||||
height: 100%;
|
||||
top: 0;
|
||||
left: 100%;
|
||||
@ -1694,7 +1693,7 @@ $controlsArrowAngleActive: 36deg;
|
||||
|
||||
|
||||
.reveal.show-notes {
|
||||
max-width: 75vw;
|
||||
max-width: 100% - $notesWidthPercent;
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
@ -1713,6 +1712,7 @@ $controlsArrowAngleActive: 36deg;
|
||||
border-left: 0;
|
||||
max-width: none;
|
||||
max-height: 70%;
|
||||
max-height: 70vh;
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
@ -1721,17 +1721,21 @@ $controlsArrowAngleActive: 36deg;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: (30/0.7)*1%;
|
||||
height: 30vh;
|
||||
border: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 600px) {
|
||||
.reveal.show-notes {
|
||||
max-height: 60%;
|
||||
max-height: 60vh;
|
||||
}
|
||||
|
||||
.reveal.show-notes .speaker-notes {
|
||||
top: 100%;
|
||||
height: (40/0.6)*1%;
|
||||
height: 40vh;
|
||||
}
|
||||
|
||||
.reveal .speaker-notes {
|
||||
|
||||
@ -153,7 +153,7 @@ body {
|
||||
font-family: monospace;
|
||||
line-height: 1.2em;
|
||||
word-wrap: break-word;
|
||||
box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.3); }
|
||||
box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.15); }
|
||||
|
||||
.reveal code {
|
||||
font-family: monospace;
|
||||
|
||||
@ -11,8 +11,8 @@ section.has-light-background, section.has-light-background h1, section.has-light
|
||||
* GLOBAL STYLES
|
||||
*********************************************/
|
||||
body {
|
||||
background: #222;
|
||||
background-color: #222; }
|
||||
background: #191919;
|
||||
background-color: #191919; }
|
||||
|
||||
.reveal {
|
||||
font-family: "Source Sans Pro", Helvetica, sans-serif;
|
||||
@ -149,7 +149,7 @@ body {
|
||||
font-family: monospace;
|
||||
line-height: 1.2em;
|
||||
word-wrap: break-word;
|
||||
box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.3); }
|
||||
box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.15); }
|
||||
|
||||
.reveal code {
|
||||