ox-reveal update
This commit is contained in:
+4
-6
@@ -1,10 +1,9 @@
|
||||
## Contributing
|
||||
|
||||
Please keep the [issue tracker](http://github.com/hakimel/reveal.js/issues) limited to **bug reports**, **feature requests** and **pull requests**.
|
||||
Please keep the [issue tracker](https://github.com/hakimel/reveal.js/issues) limited to **bug reports**.
|
||||
|
||||
|
||||
### Personal Support
|
||||
If you have personal support or setup questions the best place to ask those are [StackOverflow](http://stackoverflow.com/questions/tagged/reveal.js).
|
||||
### General Questions and Support
|
||||
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
|
||||
@@ -12,11 +11,10 @@ When reporting a bug make sure to include information about which browser and op
|
||||
|
||||
|
||||
### 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:
|
||||
- Tabs to indent
|
||||
- Single-quoted strings
|
||||
- Should be made towards the **dev branch**
|
||||
- Should be submitted from a feature/topic branch (not your master)
|
||||
|
||||
|
||||
### Plugins
|
||||
+1
-1
@@ -9,7 +9,7 @@ jobs:
|
||||
|
||||
strategy:
|
||||
matrix:
|
||||
node-version: [10.x, 14.x]
|
||||
node-version: [10.x, 14.x, 16.x]
|
||||
|
||||
steps:
|
||||
- uses: actions/checkout@v2
|
||||
|
||||
@@ -8,5 +8,4 @@ out/
|
||||
log/*.log
|
||||
tmp/**
|
||||
node_modules/
|
||||
.sass-cache
|
||||
dist/*.map
|
||||
.sass-cache
|
||||
@@ -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
|
||||
of this software and associated documentation files (the "Software"), to deal
|
||||
|
||||
+51
-13
@@ -1,28 +1,66 @@
|
||||
<p align="center">
|
||||
<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>
|
||||
<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://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>
|
||||
|
||||
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
|
||||
The full reveal.js documentation is available at [revealjs.com](https://revealjs.com).
|
||||
### Sponsors
|
||||
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.
|
||||
|
||||
## License
|
||||
<br>
|
||||
<br>
|
||||
|
||||
MIT licensed
|
||||
|
||||
Copyright (C) 2011-2020 Hakim El Hattab, https://hakim.se
|
||||
---
|
||||
<div align="center">
|
||||
MIT licensed | Copyright © 2011-2022 Hakim El Hattab, https://hakim.se
|
||||
</div>
|
||||
|
||||
@@ -16,7 +16,7 @@
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
// Text that auto-fits it's container
|
||||
// Text that auto-fits its container
|
||||
.reveal .r-fit-text {
|
||||
display: inline-block; // https://github.com/rikschennink/fitty#performance
|
||||
white-space: nowrap;
|
||||
|
||||
@@ -1,3 +1,5 @@
|
||||
@use "sass:math";
|
||||
|
||||
/**
|
||||
* reveal.js
|
||||
* http://revealjs.com
|
||||
@@ -31,6 +33,16 @@ html.reveal-full-page {
|
||||
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
|
||||
@@ -247,11 +259,11 @@ $controlsArrowAngleActive: 36deg;
|
||||
|
||||
@mixin controlsArrowTransform( $angle ) {
|
||||
&: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 {
|
||||
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;
|
||||
width: $controlArrowLength;
|
||||
height: $controlArrowThickness;
|
||||
border-radius: $controlArrowThickness/2;
|
||||
border-radius: $controlArrowThickness*0.5;
|
||||
background-color: currentColor;
|
||||
|
||||
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;
|
||||
}
|
||||
|
||||
@@ -326,7 +338,7 @@ $controlsArrowAngleActive: 36deg;
|
||||
|
||||
.navigate-left {
|
||||
right: $controlArrowSize + $controlArrowSpacing*2;
|
||||
bottom: $controlArrowSpacing + $controlArrowSize/2;
|
||||
bottom: $controlArrowSpacing + $controlArrowSize*0.5;
|
||||
transform: translateX( -10px );
|
||||
|
||||
&.highlight {
|
||||
@@ -336,7 +348,7 @@ $controlsArrowAngleActive: 36deg;
|
||||
|
||||
.navigate-right {
|
||||
right: 0;
|
||||
bottom: $controlArrowSpacing + $controlArrowSize/2;
|
||||
bottom: $controlArrowSpacing + $controlArrowSize*0.5;
|
||||
transform: translateX( 10px );
|
||||
|
||||
.controls-arrow {
|
||||
@@ -349,7 +361,7 @@ $controlsArrowAngleActive: 36deg;
|
||||
}
|
||||
|
||||
.navigate-up {
|
||||
right: $controlArrowSpacing + $controlArrowSize/2;
|
||||
right: $controlArrowSpacing + $controlArrowSize*0.5;
|
||||
bottom: $controlArrowSpacing*2 + $controlArrowSize;
|
||||
transform: translateY( -10px );
|
||||
|
||||
@@ -359,7 +371,7 @@ $controlsArrowAngleActive: 36deg;
|
||||
}
|
||||
|
||||
.navigate-down {
|
||||
right: $controlArrowSpacing + $controlArrowSize/2;
|
||||
right: $controlArrowSpacing + $controlArrowSize*0.5;
|
||||
bottom: -$controlArrowSpacing;
|
||||
padding-bottom: $controlArrowSpacing;
|
||||
transform: translateY( 10px );
|
||||
@@ -515,25 +527,25 @@ $controlsArrowAngleActive: 36deg;
|
||||
.navigate-left {
|
||||
top: 50%;
|
||||
left: $spacing;
|
||||
margin-top: -$controlArrowSize/2;
|
||||
margin-top: -$controlArrowSize*0.5;
|
||||
}
|
||||
|
||||
.navigate-right {
|
||||
top: 50%;
|
||||
right: $spacing;
|
||||
margin-top: -$controlArrowSize/2;
|
||||
margin-top: -$controlArrowSize*0.5;
|
||||
}
|
||||
|
||||
.navigate-up {
|
||||
top: $spacing;
|
||||
left: 50%;
|
||||
margin-left: -$controlArrowSize/2;
|
||||
margin-left: -$controlArrowSize*0.5;
|
||||
}
|
||||
|
||||
.navigate-down {
|
||||
bottom: $spacing - $controlArrowSpacing + 0.3em;
|
||||
left: 50%;
|
||||
margin-left: -$controlArrowSize/2;
|
||||
margin-left: -$controlArrowSize*0.5;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -769,9 +781,6 @@ $controlsArrowAngleActive: 36deg;
|
||||
*********************************************/
|
||||
|
||||
@each $stylename in slide, linear {
|
||||
.reveal.#{$stylename} section {
|
||||
backface-visibility: hidden;
|
||||
}
|
||||
@include transition-horizontal-past(#{$stylename}) {
|
||||
transform: translate(-150%, 0);
|
||||
}
|
||||
@@ -1158,54 +1167,53 @@ $controlsArrowAngleActive: 36deg;
|
||||
}
|
||||
|
||||
/* 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] {
|
||||
transition: none;
|
||||
}
|
||||
|
||||
/* 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] {
|
||||
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] {
|
||||
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] {
|
||||
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] {
|
||||
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] {
|
||||
transform: translate(0, 100%);
|
||||
}
|
||||
|
||||
|
||||
/* 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] {
|
||||
opacity: 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] {
|
||||
opacity: 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] {
|
||||
opacity: 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] {
|
||||
opacity: 0;
|
||||
transform: translate3d(0, 100%, 0) rotateX(-90deg) translate3d(0, 100%, 0);
|
||||
@@ -1213,54 +1221,54 @@ $controlsArrowAngleActive: 36deg;
|
||||
|
||||
|
||||
/* 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] {
|
||||
opacity: 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] {
|
||||
opacity: 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] {
|
||||
opacity: 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] {
|
||||
opacity: 0;
|
||||
transform: translate3d(0, 100%, 0) rotateX(90deg) translate3d(0, 100%, 0);
|
||||
}
|
||||
|
||||
/* 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] {
|
||||
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] {
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
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] {
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
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] {
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
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] {
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
@@ -1701,7 +1709,7 @@ $notesWidthPercent: 25%;
|
||||
.reveal .speaker-notes {
|
||||
display: none;
|
||||
position: absolute;
|
||||
width: $notesWidthPercent / (1-$notesWidthPercent/100) * 1%;
|
||||
width: math.div($notesWidthPercent, (1 - math.div($notesWidthPercent,100))) * 1%;
|
||||
height: 100%;
|
||||
top: 0;
|
||||
left: 100%;
|
||||
@@ -1764,7 +1772,6 @@ $notesWidthPercent: 25%;
|
||||
top: 100%;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: (30/0.7)*1%;
|
||||
height: 30vh;
|
||||
border: 0;
|
||||
}
|
||||
@@ -1778,7 +1785,6 @@ $notesWidthPercent: 25%;
|
||||
|
||||
.reveal.show-notes .speaker-notes {
|
||||
top: 100%;
|
||||
height: (40/0.6)*1%;
|
||||
height: 40vh;
|
||||
}
|
||||
|
||||
|
||||
@@ -1,27 +1,28 @@
|
||||
// Exposes theme's variables for easy re-use in CSS for plugin authors
|
||||
|
||||
:root {
|
||||
--background-color: #{$backgroundColor};
|
||||
--main-font: #{$mainFont};
|
||||
--main-font-size: #{$mainFontSize};
|
||||
--main-color: #{$mainColor};
|
||||
--block-margin: #{$blockMargin};
|
||||
--heading-margin: #{$headingMargin};
|
||||
--heading-font: #{$headingFont};
|
||||
--heading-color: #{$headingColor};
|
||||
--heading-line-height: #{$headingLineHeight};
|
||||
--heading-letter-spacing: #{$headingLetterSpacing};
|
||||
--heading-text-transform: #{$headingTextTransform};
|
||||
--heading-text-shadow: #{$headingTextShadow};
|
||||
--heading-font-weight: #{$headingFontWeight};
|
||||
--heading1-text-shadow: #{$heading1TextShadow};
|
||||
--heading1-size: #{$heading1Size};
|
||||
--heading2-size: #{$heading2Size};
|
||||
--heading3-size: #{$heading3Size};
|
||||
--heading4-size: #{$heading4Size};
|
||||
--code-font: #{$codeFont};
|
||||
--link-color: #{$linkColor};
|
||||
--link-color-hover: #{$linkColorHover};
|
||||
--selection-background-color: #{$selectionBackgroundColor};
|
||||
--selection-color: #{$selectionColor};
|
||||
--r-background-color: #{$backgroundColor};
|
||||
--r-main-font: #{$mainFont};
|
||||
--r-main-font-size: #{$mainFontSize};
|
||||
--r-main-color: #{$mainColor};
|
||||
--r-block-margin: #{$blockMargin};
|
||||
--r-heading-margin: #{$headingMargin};
|
||||
--r-heading-font: #{$headingFont};
|
||||
--r-heading-color: #{$headingColor};
|
||||
--r-heading-line-height: #{$headingLineHeight};
|
||||
--r-heading-letter-spacing: #{$headingLetterSpacing};
|
||||
--r-heading-text-transform: #{$headingTextTransform};
|
||||
--r-heading-text-shadow: #{$headingTextShadow};
|
||||
--r-heading-font-weight: #{$headingFontWeight};
|
||||
--r-heading1-text-shadow: #{$heading1TextShadow};
|
||||
--r-heading1-size: #{$heading1Size};
|
||||
--r-heading2-size: #{$heading2Size};
|
||||
--r-heading3-size: #{$heading3Size};
|
||||
--r-heading4-size: #{$heading4Size};
|
||||
--r-code-font: #{$codeFont};
|
||||
--r-link-color: #{$linkColor};
|
||||
--r-link-color-dark: #{darken($linkColor , 15% )};
|
||||
--r-link-color-hover: #{$linkColorHover};
|
||||
--r-selection-background-color: #{$selectionBackgroundColor};
|
||||
--r-selection-color: #{$selectionColor};
|
||||
}
|
||||
|
||||
@@ -8,25 +8,25 @@
|
||||
|
||||
.reveal-viewport {
|
||||
@include bodyBackground();
|
||||
background-color: $backgroundColor;
|
||||
background-color: var(--r-background-color);
|
||||
}
|
||||
|
||||
.reveal {
|
||||
font-family: $mainFont;
|
||||
font-size: $mainFontSize;
|
||||
font-family: var(--r-main-font);
|
||||
font-size: var(--r-main-font-size);
|
||||
font-weight: normal;
|
||||
color: $mainColor;
|
||||
color: var(--r-main-color);
|
||||
}
|
||||
|
||||
.reveal ::selection {
|
||||
color: $selectionColor;
|
||||
background: $selectionBackgroundColor;
|
||||
color: var(--r-selection-color);
|
||||
background: var(--r-selection-background-color);
|
||||
text-shadow: none;
|
||||
}
|
||||
|
||||
.reveal ::-moz-selection {
|
||||
color: $selectionColor;
|
||||
background: $selectionBackgroundColor;
|
||||
color: var(--r-selection-color);
|
||||
background: var(--r-selection-background-color);
|
||||
text-shadow: none;
|
||||
}
|
||||
|
||||
@@ -46,27 +46,27 @@
|
||||
.reveal h4,
|
||||
.reveal h5,
|
||||
.reveal h6 {
|
||||
margin: $headingMargin;
|
||||
color: $headingColor;
|
||||
margin: var(--r-heading-margin);
|
||||
color: var(--r-heading-color);
|
||||
|
||||
font-family: $headingFont;
|
||||
font-weight: $headingFontWeight;
|
||||
line-height: $headingLineHeight;
|
||||
letter-spacing: $headingLetterSpacing;
|
||||
font-family: var(--r-heading-font);
|
||||
font-weight: var(--r-heading-font-weight);
|
||||
line-height: var(--r-heading-line-height);
|
||||
letter-spacing: var(--r-heading-letter-spacing);
|
||||
|
||||
text-transform: $headingTextTransform;
|
||||
text-shadow: $headingTextShadow;
|
||||
text-transform: var(--r-heading-text-transform);
|
||||
text-shadow: var(--r-heading-text-shadow);
|
||||
|
||||
word-wrap: break-word;
|
||||
}
|
||||
|
||||
.reveal h1 {font-size: $heading1Size; }
|
||||
.reveal h2 {font-size: $heading2Size; }
|
||||
.reveal h3 {font-size: $heading3Size; }
|
||||
.reveal h4 {font-size: $heading4Size; }
|
||||
.reveal h1 {font-size: var(--r-heading1-size); }
|
||||
.reveal h2 {font-size: var(--r-heading2-size); }
|
||||
.reveal h3 {font-size: var(--r-heading3-size); }
|
||||
.reveal h4 {font-size: var(--r-heading4-size); }
|
||||
|
||||
.reveal h1 {
|
||||
text-shadow: $heading1TextShadow;
|
||||
text-shadow: var(--r-heading1-text-shadow);
|
||||
}
|
||||
|
||||
|
||||
@@ -75,7 +75,7 @@
|
||||
*********************************************/
|
||||
|
||||
.reveal p {
|
||||
margin: $blockMargin 0;
|
||||
margin: var(--r-block-margin) 0;
|
||||
line-height: 1.3;
|
||||
}
|
||||
|
||||
@@ -150,7 +150,7 @@
|
||||
display: block;
|
||||
position: relative;
|
||||
width: 70%;
|
||||
margin: $blockMargin auto;
|
||||
margin: var(--r-block-margin) auto;
|
||||
padding: 5px;
|
||||
|
||||
font-style: italic;
|
||||
@@ -170,11 +170,11 @@
|
||||
display: block;
|
||||
position: relative;
|
||||
width: 90%;
|
||||
margin: $blockMargin auto;
|
||||
margin: var(--r-block-margin) auto;
|
||||
|
||||
text-align: left;
|
||||
font-size: 0.55em;
|
||||
font-family: $codeFont;
|
||||
font-family: var(--r-code-font);
|
||||
line-height: 1.2em;
|
||||
|
||||
word-wrap: break-word;
|
||||
@@ -183,8 +183,9 @@
|
||||
}
|
||||
|
||||
.reveal code {
|
||||
font-family: $codeFont;
|
||||
font-family: var(--r-code-font);
|
||||
text-transform: none;
|
||||
tab-size: 2;
|
||||
}
|
||||
|
||||
.reveal pre code {
|
||||
@@ -195,6 +196,14 @@
|
||||
word-wrap: normal;
|
||||
}
|
||||
|
||||
.reveal .code-wrapper {
|
||||
white-space: normal;
|
||||
}
|
||||
|
||||
.reveal .code-wrapper code {
|
||||
white-space: pre;
|
||||
}
|
||||
|
||||
.reveal table {
|
||||
margin: auto;
|
||||
border-collapse: collapse;
|
||||
@@ -248,7 +257,7 @@
|
||||
}
|
||||
|
||||
.reveal img {
|
||||
margin: $blockMargin 0;
|
||||
margin: var(--r-block-margin) 0;
|
||||
}
|
||||
|
||||
|
||||
@@ -257,19 +266,21 @@
|
||||
*********************************************/
|
||||
|
||||
.reveal a {
|
||||
color: $linkColor;
|
||||
color: var(--r-link-color);
|
||||
text-decoration: none;
|
||||
transition: color .15s ease;
|
||||
}
|
||||
.reveal a:hover {
|
||||
color: $linkColorHover;
|
||||
color: var(--r-link-color-hover);
|
||||
text-shadow: none;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.reveal .roll span:after {
|
||||
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 {
|
||||
border: 4px solid $mainColor;
|
||||
border: 4px solid var(--r-main-color);
|
||||
box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
|
||||
@@ -287,7 +298,7 @@
|
||||
}
|
||||
|
||||
.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);
|
||||
}
|
||||
|
||||
@@ -297,7 +308,7 @@
|
||||
*********************************************/
|
||||
|
||||
.reveal .controls {
|
||||
color: $linkColor;
|
||||
color: var(--r-link-color);
|
||||
}
|
||||
|
||||
|
||||
@@ -307,7 +318,7 @@
|
||||
|
||||
.reveal .progress {
|
||||
background: rgba(0,0,0,0.2);
|
||||
color: $linkColor;
|
||||
color: var(--r-link-color);
|
||||
}
|
||||
|
||||
/*********************************************
|
||||
@@ -315,6 +326,6 @@
|
||||
*********************************************/
|
||||
@media print {
|
||||
.backgrounds {
|
||||
background-color: $backgroundColor;
|
||||
background-color: var(--r-background-color);
|
||||
}
|
||||
}
|
||||
|
||||
+15
-15
@@ -19,7 +19,7 @@
|
||||
<link rel="stylesheet" href="dist/theme/black.css" id="theme">
|
||||
|
||||
<!-- 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>
|
||||
|
||||
<body>
|
||||
@@ -52,7 +52,7 @@
|
||||
<p>Slides can be nested inside of each other.</p>
|
||||
<p>Use the <em>Space</em> key to navigate through all slides.</p>
|
||||
<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">
|
||||
</a>
|
||||
</section>
|
||||
@@ -186,7 +186,7 @@
|
||||
Write content using inline or external Markdown.
|
||||
Instructions and more info available in the [docs](https://revealjs.com/markdown/).
|
||||
|
||||
```[]
|
||||
```html []
|
||||
<section data-markdown>
|
||||
## Markdown support
|
||||
|
||||
@@ -249,17 +249,17 @@
|
||||
<p>
|
||||
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. -->
|
||||
<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','css/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','css/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','css/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','css/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','css/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/black.css'); return false;">Black (default)</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','dist/theme/league.css'); return false;">League</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','dist/theme/beige.css'); return false;">Beige</a> -
|
||||
<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','dist/theme/serif.css'); return false;">Serif</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','dist/theme/night.css'); return false;">Night</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','dist/theme/solarized.css'); return false;">Solarized</a>
|
||||
</p>
|
||||
</section>
|
||||
|
||||
@@ -281,7 +281,7 @@
|
||||
<h2>Tiled Backgrounds</h2>
|
||||
<pre><code class="hljs html" style="word-wrap: break-word;"><section data-background="image.png" data-background-repeat="repeat" data-background-size="100px"></code></pre>
|
||||
</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;">
|
||||
<h2>Video Backgrounds</h2>
|
||||
<pre><code class="hljs html" style="word-wrap: break-word;"><section data-background-video="video.mp4,video.webm"></code></pre>
|
||||
|
||||
Vendored
+3
-3
File diff suppressed because one or more lines are too long
Vendored
+3
-3
File diff suppressed because one or more lines are too long
+1
File diff suppressed because one or more lines are too long
Vendored
+3
-3
File diff suppressed because one or more lines are too long
Vendored
+1
File diff suppressed because one or more lines are too long
+164
-101
@@ -6,35 +6,38 @@
|
||||
@import url(./fonts/league-gothic/league-gothic.css);
|
||||
@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 {
|
||||
color: #fff; }
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
/*********************************************
|
||||
* GLOBAL STYLES
|
||||
*********************************************/
|
||||
:root {
|
||||
--background-color: #f7f3de;
|
||||
--main-font: Lato, sans-serif;
|
||||
--main-font-size: 40px;
|
||||
--main-color: #333;
|
||||
--block-margin: 20px;
|
||||
--heading-margin: 0 0 20px 0;
|
||||
--heading-font: League Gothic, Impact, sans-serif;
|
||||
--heading-color: #333;
|
||||
--heading-line-height: 1.2;
|
||||
--heading-letter-spacing: normal;
|
||||
--heading-text-transform: uppercase;
|
||||
--heading-text-shadow: none;
|
||||
--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);
|
||||
--heading1-size: 3.77em;
|
||||
--heading2-size: 2.11em;
|
||||
--heading3-size: 1.55em;
|
||||
--heading4-size: 1em;
|
||||
--code-font: monospace;
|
||||
--link-color: #8b743d;
|
||||
--link-color-hover: #c0a86e;
|
||||
--selection-background-color: rgba(79, 64, 28, 0.99);
|
||||
--selection-color: #fff; }
|
||||
--r-background-color: #f7f3de;
|
||||
--r-main-font: Lato, sans-serif;
|
||||
--r-main-font-size: 40px;
|
||||
--r-main-color: #333;
|
||||
--r-block-margin: 20px;
|
||||
--r-heading-margin: 0 0 20px 0;
|
||||
--r-heading-font: League Gothic, Impact, sans-serif;
|
||||
--r-heading-color: #333;
|
||||
--r-heading-line-height: 1.2;
|
||||
--r-heading-letter-spacing: normal;
|
||||
--r-heading-text-transform: uppercase;
|
||||
--r-heading-text-shadow: none;
|
||||
--r-heading-font-weight: normal;
|
||||
--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);
|
||||
--r-heading1-size: 3.77em;
|
||||
--r-heading2-size: 2.11em;
|
||||
--r-heading3-size: 1.55em;
|
||||
--r-heading4-size: 1em;
|
||||
--r-code-font: monospace;
|
||||
--r-link-color: #8b743d;
|
||||
--r-link-color-dark: #564826;
|
||||
--r-link-color-hover: #c0a86e;
|
||||
--r-selection-background-color: rgba(79, 64, 28, 0.99);
|
||||
--r-selection-color: #fff;
|
||||
}
|
||||
|
||||
.reveal-viewport {
|
||||
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: -ms-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 {
|
||||
font-family: "Lato", sans-serif;
|
||||
font-size: 40px;
|
||||
font-family: var(--r-main-font);
|
||||
font-size: var(--r-main-font-size);
|
||||
font-weight: normal;
|
||||
color: #333; }
|
||||
color: var(--r-main-color);
|
||||
}
|
||||
|
||||
.reveal ::selection {
|
||||
color: #fff;
|
||||
background: rgba(79, 64, 28, 0.99);
|
||||
text-shadow: none; }
|
||||
color: var(--r-selection-color);
|
||||
background: var(--r-selection-background-color);
|
||||
text-shadow: none;
|
||||
}
|
||||
|
||||
.reveal ::-moz-selection {
|
||||
color: #fff;
|
||||
background: rgba(79, 64, 28, 0.99);
|
||||
text-shadow: none; }
|
||||
color: var(--r-selection-color);
|
||||
background: var(--r-selection-background-color);
|
||||
text-shadow: none;
|
||||
}
|
||||
|
||||
.reveal .slides section,
|
||||
.reveal .slides section > section {
|
||||
line-height: 1.3;
|
||||
font-weight: inherit; }
|
||||
font-weight: inherit;
|
||||
}
|
||||
|
||||
/*********************************************
|
||||
* HEADERS
|
||||
@@ -76,37 +84,44 @@ section.has-dark-background, section.has-dark-background h1, section.has-dark-ba
|
||||
.reveal h4,
|
||||
.reveal h5,
|
||||
.reveal h6 {
|
||||
margin: 0 0 20px 0;
|
||||
color: #333;
|
||||
font-family: "League Gothic", Impact, sans-serif;
|
||||
font-weight: normal;
|
||||
line-height: 1.2;
|
||||
letter-spacing: normal;
|
||||
text-transform: uppercase;
|
||||
text-shadow: none;
|
||||
word-wrap: break-word; }
|
||||
margin: var(--r-heading-margin);
|
||||
color: var(--r-heading-color);
|
||||
font-family: var(--r-heading-font);
|
||||
font-weight: var(--r-heading-font-weight);
|
||||
line-height: var(--r-heading-line-height);
|
||||
letter-spacing: var(--r-heading-letter-spacing);
|
||||
text-transform: var(--r-heading-text-transform);
|
||||
text-shadow: var(--r-heading-text-shadow);
|
||||
word-wrap: break-word;
|
||||
}
|
||||
|
||||
.reveal h1 {
|
||||
font-size: 3.77em; }
|
||||
font-size: var(--r-heading1-size);
|
||||
}
|
||||
|
||||
.reveal h2 {
|
||||
font-size: 2.11em; }
|
||||
font-size: var(--r-heading2-size);
|
||||
}
|
||||
|
||||
.reveal h3 {
|
||||
font-size: 1.55em; }
|
||||
font-size: var(--r-heading3-size);
|
||||
}
|
||||
|
||||
.reveal h4 {
|
||||
font-size: 1em; }
|
||||
font-size: var(--r-heading4-size);
|
||||
}
|
||||
|
||||
.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
|
||||
*********************************************/
|
||||
.reveal p {
|
||||
margin: 20px 0;
|
||||
line-height: 1.3; }
|
||||
margin: var(--r-block-margin) 0;
|
||||
line-height: 1.3;
|
||||
}
|
||||
|
||||
/* Remove trailing margins after titles */
|
||||
.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 h5:last-child,
|
||||
.reveal h6:last-child {
|
||||
margin-bottom: 0; }
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
/* Ensure certain elements are never larger than the slide itself */
|
||||
.reveal img,
|
||||
.reveal video,
|
||||
.reveal iframe {
|
||||
max-width: 95%;
|
||||
max-height: 95%; }
|
||||
max-height: 95%;
|
||||
}
|
||||
|
||||
.reveal strong,
|
||||
.reveal b {
|
||||
font-weight: bold; }
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.reveal em {
|
||||
font-style: italic; }
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.reveal ol,
|
||||
.reveal dl,
|
||||
.reveal ul {
|
||||
display: inline-block;
|
||||
text-align: left;
|
||||
margin: 0 0 0 1em; }
|
||||
margin: 0 0 0 1em;
|
||||
}
|
||||
|
||||
.reveal ol {
|
||||
list-style-type: decimal; }
|
||||
list-style-type: decimal;
|
||||
}
|
||||
|
||||
.reveal ul {
|
||||
list-style-type: disc; }
|
||||
list-style-type: disc;
|
||||
}
|
||||
|
||||
.reveal ul ul {
|
||||
list-style-type: square; }
|
||||
list-style-type: square;
|
||||
}
|
||||
|
||||
.reveal ul ul ul {
|
||||
list-style-type: circle; }
|
||||
list-style-type: circle;
|
||||
}
|
||||
|
||||
.reveal ul ul,
|
||||
.reveal ul ol,
|
||||
.reveal ol ol,
|
||||
.reveal ol ul {
|
||||
display: block;
|
||||
margin-left: 40px; }
|
||||
margin-left: 40px;
|
||||
}
|
||||
|
||||
.reveal dt {
|
||||
font-weight: bold; }
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.reveal dd {
|
||||
margin-left: 40px; }
|
||||
margin-left: 40px;
|
||||
}
|
||||
|
||||
.reveal blockquote {
|
||||
display: block;
|
||||
position: relative;
|
||||
width: 70%;
|
||||
margin: 20px auto;
|
||||
margin: var(--r-block-margin) auto;
|
||||
padding: 5px;
|
||||
font-style: italic;
|
||||
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:last-child {
|
||||
display: inline-block; }
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.reveal q {
|
||||
font-style: italic; }
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.reveal pre {
|
||||
display: block;
|
||||
position: relative;
|
||||
width: 90%;
|
||||
margin: 20px auto;
|
||||
margin: var(--r-block-margin) auto;
|
||||
text-align: left;
|
||||
font-size: 0.55em;
|
||||
font-family: monospace;
|
||||
font-family: var(--r-code-font);
|
||||
line-height: 1.2em;
|
||||
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 {
|
||||
font-family: monospace;
|
||||
text-transform: none; }
|
||||
font-family: var(--r-code-font);
|
||||
text-transform: none;
|
||||
tab-size: 2;
|
||||
}
|
||||
|
||||
.reveal pre code {
|
||||
display: block;
|
||||
padding: 5px;
|
||||
overflow: auto;
|
||||
max-height: 400px;
|
||||
word-wrap: normal; }
|
||||
word-wrap: normal;
|
||||
}
|
||||
|
||||
.reveal .code-wrapper {
|
||||
white-space: normal;
|
||||
}
|
||||
|
||||
.reveal .code-wrapper code {
|
||||
white-space: pre;
|
||||
}
|
||||
|
||||
.reveal table {
|
||||
margin: auto;
|
||||
border-collapse: collapse;
|
||||
border-spacing: 0; }
|
||||
border-spacing: 0;
|
||||
}
|
||||
|
||||
.reveal table th {
|
||||
font-weight: bold; }
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.reveal table th,
|
||||
.reveal table td {
|
||||
text-align: left;
|
||||
padding: 0.2em 0.5em 0.2em 0.5em;
|
||||
border-bottom: 1px solid; }
|
||||
border-bottom: 1px solid;
|
||||
}
|
||||
|
||||
.reveal table th[align="center"],
|
||||
.reveal table td[align="center"] {
|
||||
text-align: center; }
|
||||
.reveal table th[align=center],
|
||||
.reveal table td[align=center] {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.reveal table th[align="right"],
|
||||
.reveal table td[align="right"] {
|
||||
text-align: right; }
|
||||
.reveal table th[align=right],
|
||||
.reveal table td[align=right] {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.reveal table tbody tr:last-child th,
|
||||
.reveal table tbody tr:last-child td {
|
||||
border-bottom: none; }
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.reveal sup {
|
||||
vertical-align: super;
|
||||
font-size: smaller; }
|
||||
font-size: smaller;
|
||||
}
|
||||
|
||||
.reveal sub {
|
||||
vertical-align: sub;
|
||||
font-size: smaller; }
|
||||
font-size: smaller;
|
||||
}
|
||||
|
||||
.reveal small {
|
||||
display: inline-block;
|
||||
font-size: 0.6em;
|
||||
line-height: 1.2em;
|
||||
vertical-align: top; }
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
.reveal small * {
|
||||
vertical-align: top; }
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
.reveal img {
|
||||
margin: 20px 0; }
|
||||
margin: var(--r-block-margin) 0;
|
||||
}
|
||||
|
||||
/*********************************************
|
||||
* LINKS
|
||||
*********************************************/
|
||||
.reveal a {
|
||||
color: #8b743d;
|
||||
color: var(--r-link-color);
|
||||
text-decoration: none;
|
||||
transition: color .15s ease; }
|
||||
transition: color 0.15s ease;
|
||||
}
|
||||
|
||||
.reveal a:hover {
|
||||
color: #c0a86e;
|
||||
color: var(--r-link-color-hover);
|
||||
text-shadow: none;
|
||||
border: none; }
|
||||
border: none;
|
||||
}
|
||||
|
||||
.reveal .roll span:after {
|
||||
color: #fff;
|
||||
background: #564826; }
|
||||
background: var(--r-link-color-dark);
|
||||
}
|
||||
|
||||
/*********************************************
|
||||
* Frame helper
|
||||
*********************************************/
|
||||
.reveal .r-frame {
|
||||
border: 4px solid #333;
|
||||
box-shadow: 0 0 10px rgba(0, 0, 0, 0.15); }
|
||||
border: 4px solid var(--r-main-color);
|
||||
box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
|
||||
.reveal a .r-frame {
|
||||
transition: all .15s linear; }
|
||||
transition: all 0.15s linear;
|
||||
}
|
||||
|
||||
.reveal a:hover .r-frame {
|
||||
border-color: #8b743d;
|
||||
box-shadow: 0 0 20px rgba(0, 0, 0, 0.55); }
|
||||
border-color: var(--r-link-color);
|
||||
box-shadow: 0 0 20px rgba(0, 0, 0, 0.55);
|
||||
}
|
||||
|
||||
/*********************************************
|
||||
* NAVIGATION CONTROLS
|
||||
*********************************************/
|
||||
.reveal .controls {
|
||||
color: #8b743d; }
|
||||
color: var(--r-link-color);
|
||||
}
|
||||
|
||||
/*********************************************
|
||||
* PROGRESS BAR
|
||||
*********************************************/
|
||||
.reveal .progress {
|
||||
background: rgba(0, 0, 0, 0.2);
|
||||
color: #8b743d; }
|
||||
color: var(--r-link-color);
|
||||
}
|
||||
|
||||
/*********************************************
|
||||
* PRINT BACKGROUND
|
||||
*********************************************/
|
||||
@media print {
|
||||
.backgrounds {
|
||||
background-color: #f7f3de; } }
|
||||
background-color: var(--r-background-color);
|
||||
}
|
||||
}
|
||||
+164
-101
@@ -5,60 +5,68 @@
|
||||
*/
|
||||
@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 {
|
||||
color: #222; }
|
||||
color: #222;
|
||||
}
|
||||
|
||||
/*********************************************
|
||||
* GLOBAL STYLES
|
||||
*********************************************/
|
||||
:root {
|
||||
--background-color: #191919;
|
||||
--main-font: Source Sans Pro, Helvetica, sans-serif;
|
||||
--main-font-size: 42px;
|
||||
--main-color: #fff;
|
||||
--block-margin: 20px;
|
||||
--heading-margin: 0 0 20px 0;
|
||||
--heading-font: Source Sans Pro, Helvetica, sans-serif;
|
||||
--heading-color: #fff;
|
||||
--heading-line-height: 1.2;
|
||||
--heading-letter-spacing: normal;
|
||||
--heading-text-transform: uppercase;
|
||||
--heading-text-shadow: none;
|
||||
--heading-font-weight: 600;
|
||||
--heading1-text-shadow: none;
|
||||
--heading1-size: 2.5em;
|
||||
--heading2-size: 1.6em;
|
||||
--heading3-size: 1.3em;
|
||||
--heading4-size: 1em;
|
||||
--code-font: monospace;
|
||||
--link-color: #42affa;
|
||||
--link-color-hover: #8dcffc;
|
||||
--selection-background-color: #bee4fd;
|
||||
--selection-color: #fff; }
|
||||
--r-background-color: #191919;
|
||||
--r-main-font: Source Sans Pro, Helvetica, sans-serif;
|
||||
--r-main-font-size: 42px;
|
||||
--r-main-color: #fff;
|
||||
--r-block-margin: 20px;
|
||||
--r-heading-margin: 0 0 20px 0;
|
||||
--r-heading-font: Source Sans Pro, Helvetica, sans-serif;
|
||||
--r-heading-color: #fff;
|
||||
--r-heading-line-height: 1.2;
|
||||
--r-heading-letter-spacing: normal;
|
||||
--r-heading-text-transform: uppercase;
|
||||
--r-heading-text-shadow: none;
|
||||
--r-heading-font-weight: 600;
|
||||
--r-heading1-text-shadow: none;
|
||||
--r-heading1-size: 2.5em;
|
||||
--r-heading2-size: 1.6em;
|
||||
--r-heading3-size: 1.3em;
|
||||
--r-heading4-size: 1em;
|
||||
--r-code-font: monospace;
|
||||
--r-link-color: #42affa;
|
||||
--r-link-color-dark: #068de9;
|
||||
--r-link-color-hover: #8dcffc;
|
||||
--r-selection-background-color: #bee4fd;
|
||||
--r-selection-color: #fff;
|
||||
}
|
||||
|
||||
.reveal-viewport {
|
||||
background: #191919;
|
||||
background-color: #191919; }
|
||||
background-color: var(--r-background-color);
|
||||
}
|
||||
|
||||
.reveal {
|
||||
font-family: "Source Sans Pro", Helvetica, sans-serif;
|
||||
font-size: 42px;
|
||||
font-family: var(--r-main-font);
|
||||
font-size: var(--r-main-font-size);
|
||||
font-weight: normal;
|
||||
color: #fff; }
|
||||
color: var(--r-main-color);
|
||||
}
|
||||
|
||||
.reveal ::selection {
|
||||
color: #fff;
|
||||
background: #bee4fd;
|
||||
text-shadow: none; }
|
||||
color: var(--r-selection-color);
|
||||
background: var(--r-selection-background-color);
|
||||
text-shadow: none;
|
||||
}
|
||||
|
||||
.reveal ::-moz-selection {
|
||||
color: #fff;
|
||||
background: #bee4fd;
|
||||
text-shadow: none; }
|
||||
color: var(--r-selection-color);
|
||||
background: var(--r-selection-background-color);
|
||||
text-shadow: none;
|
||||
}
|
||||
|
||||
.reveal .slides section,
|
||||
.reveal .slides section > section {
|
||||
line-height: 1.3;
|
||||
font-weight: inherit; }
|
||||
font-weight: inherit;
|
||||
}
|
||||
|
||||
/*********************************************
|
||||
* HEADERS
|
||||
@@ -69,37 +77,44 @@ section.has-light-background, section.has-light-background h1, section.has-light
|
||||
.reveal h4,
|
||||
.reveal h5,
|
||||
.reveal h6 {
|
||||
margin: 0 0 20px 0;
|
||||
color: #fff;
|
||||
font-family: "Source Sans Pro", Helvetica, sans-serif;
|
||||
font-weight: 600;
|
||||
line-height: 1.2;
|
||||
letter-spacing: normal;
|
||||
text-transform: uppercase;
|
||||
text-shadow: none;
|
||||
word-wrap: break-word; }
|
||||
margin: var(--r-heading-margin);
|
||||
color: var(--r-heading-color);
|
||||
font-family: var(--r-heading-font);
|
||||
font-weight: var(--r-heading-font-weight);
|
||||
line-height: var(--r-heading-line-height);
|
||||
letter-spacing: var(--r-heading-letter-spacing);
|
||||
text-transform: var(--r-heading-text-transform);
|
||||
text-shadow: var(--r-heading-text-shadow);
|
||||
word-wrap: break-word;
|
||||
}
|
||||
|
||||
.reveal h1 {
|
||||
font-size: 2.5em; }
|
||||
font-size: var(--r-heading1-size);
|
||||
}
|
||||
|
||||
.reveal h2 {
|
||||
font-size: 1.6em; }
|
||||
font-size: var(--r-heading2-size);
|
||||
}
|
||||
|
||||
.reveal h3 {
|
||||
font-size: 1.3em; }
|
||||
font-size: var(--r-heading3-size);
|
||||
}
|
||||
|
||||
.reveal h4 {
|
||||
font-size: 1em; }
|
||||
font-size: var(--r-heading4-size);
|
||||
}
|
||||
|
||||
.reveal h1 {
|
||||
text-shadow: none; }
|
||||
text-shadow: var(--r-heading1-text-shadow);
|
||||
}
|
||||
|
||||
/*********************************************
|
||||
* OTHER
|
||||
*********************************************/
|
||||
.reveal p {
|
||||
margin: 20px 0;
|
||||
line-height: 1.3; }
|
||||
margin: var(--r-block-margin) 0;
|
||||
line-height: 1.3;
|
||||
}
|
||||
|
||||
/* Remove trailing margins after titles */
|
||||
.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 h5:last-child,
|
||||
.reveal h6:last-child {
|
||||
margin-bottom: 0; }
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
/* Ensure certain elements are never larger than the slide itself */
|
||||
.reveal img,
|
||||
.reveal video,
|
||||
.reveal iframe {
|
||||
max-width: 95%;
|
||||
max-height: 95%; }
|
||||
max-height: 95%;
|
||||
}
|
||||
|
||||
.reveal strong,
|
||||
.reveal b {
|
||||
font-weight: bold; }
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.reveal em {
|
||||
font-style: italic; }
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.reveal ol,
|
||||
.reveal dl,
|
||||
.reveal ul {
|
||||
display: inline-block;
|
||||
text-align: left;
|
||||
margin: 0 0 0 1em; }
|
||||
margin: 0 0 0 1em;
|
||||
}
|
||||
|
||||
.reveal ol {
|
||||
list-style-type: decimal; }
|
||||
list-style-type: decimal;
|
||||
}
|
||||
|
||||
.reveal ul {
|
||||
list-style-type: disc; }
|
||||
list-style-type: disc;
|
||||
}
|
||||
|
||||
.reveal ul ul {
|
||||
list-style-type: square; }
|
||||
list-style-type: square;
|
||||
}
|
||||
|
||||
.reveal ul ul ul {
|
||||
list-style-type: circle; }
|
||||
list-style-type: circle;
|
||||
}
|
||||
|
||||
.reveal ul ul,
|
||||
.reveal ul ol,
|
||||
.reveal ol ol,
|
||||
.reveal ol ul {
|
||||
display: block;
|
||||
margin-left: 40px; }
|
||||
margin-left: 40px;
|
||||
}
|
||||
|
||||
.reveal dt {
|
||||
font-weight: bold; }
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.reveal dd {
|
||||
margin-left: 40px; }
|
||||
margin-left: 40px;
|
||||
}
|
||||
|
||||
.reveal blockquote {
|
||||
display: block;
|
||||
position: relative;
|
||||
width: 70%;
|
||||
margin: 20px auto;
|
||||
margin: var(--r-block-margin) auto;
|
||||
padding: 5px;
|
||||
font-style: italic;
|
||||
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:last-child {
|
||||
display: inline-block; }
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.reveal q {
|
||||
font-style: italic; }
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.reveal pre {
|
||||
display: block;
|
||||
position: relative;
|
||||
width: 90%;
|
||||
margin: 20px auto;
|
||||
margin: var(--r-block-margin) auto;
|
||||
text-align: left;
|
||||
font-size: 0.55em;
|
||||
font-family: monospace;
|
||||
font-family: var(--r-code-font);
|
||||
line-height: 1.2em;
|
||||
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 {
|
||||
font-family: monospace;
|
||||
text-transform: none; }
|
||||
font-family: var(--r-code-font);
|
||||
text-transform: none;
|
||||
tab-size: 2;
|
||||
}
|
||||
|
||||
.reveal pre code {
|
||||
display: block;
|
||||
padding: 5px;
|
||||
overflow: auto;
|
||||
max-height: 400px;
|
||||
word-wrap: normal; }
|
||||
word-wrap: normal;
|
||||
}
|
||||
|
||||
.reveal .code-wrapper {
|
||||
white-space: normal;
|
||||
}
|
||||
|
||||
.reveal .code-wrapper code {
|
||||
white-space: pre;
|
||||
}
|
||||
|
||||
.reveal table {
|
||||
margin: auto;
|
||||
border-collapse: collapse;
|
||||
border-spacing: 0; }
|
||||
border-spacing: 0;
|
||||
}
|
||||
|
||||
.reveal table th {
|
||||
font-weight: bold; }
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.reveal table th,
|
||||
.reveal table td {
|
||||
text-align: left;
|
||||
padding: 0.2em 0.5em 0.2em 0.5em;
|
||||
border-bottom: 1px solid; }
|
||||
border-bottom: 1px solid;
|
||||
}
|
||||
|
||||
.reveal table th[align="center"],
|
||||
.reveal table td[align="center"] {
|
||||
text-align: center; }
|
||||
.reveal table th[align=center],
|
||||
.reveal table td[align=center] {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.reveal table th[align="right"],
|
||||
.reveal table td[align="right"] {
|
||||
text-align: right; }
|
||||
.reveal table th[align=right],
|
||||
.reveal table td[align=right] {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.reveal table tbody tr:last-child th,
|
||||
.reveal table tbody tr:last-child td {
|
||||
border-bottom: none; }
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.reveal sup {
|
||||
vertical-align: super;
|
||||
font-size: smaller; }
|
||||
font-size: smaller;
|
||||
}
|
||||
|
||||
.reveal sub {
|
||||
vertical-align: sub;
|
||||
font-size: smaller; }
|
||||
font-size: smaller;
|
||||
}
|
||||
|
||||
.reveal small {
|
||||
display: inline-block;
|
||||
font-size: 0.6em;
|
||||
line-height: 1.2em;
|
||||
vertical-align: top; }
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
.reveal small * {
|
||||
vertical-align: top; }
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
.reveal img {
|
||||
margin: 20px 0; }
|
||||
margin: var(--r-block-margin) 0;
|
||||
}
|
||||
|
||||
/*********************************************
|
||||
* LINKS
|
||||
*********************************************/
|
||||
.reveal a {
|
||||
color: #42affa;
|
||||
color: var(--r-link-color);
|
||||
text-decoration: none;
|
||||
transition: color .15s ease; }
|
||||
transition: color 0.15s ease;
|
||||
}
|
||||
|
||||
.reveal a:hover {
|
||||
color: #8dcffc;
|
||||
color: var(--r-link-color-hover);
|
||||
text-shadow: none;
|
||||
border: none; }
|
||||
border: none;
|
||||
}
|
||||
|
||||
.reveal .roll span:after {
|
||||
color: #fff;
|
||||
background: #068de9; }
|
||||
background: var(--r-link-color-dark);
|
||||
}
|
||||
|
||||
/*********************************************
|
||||
* Frame helper
|
||||
*********************************************/
|
||||
.reveal .r-frame {
|
||||
border: 4px solid #fff;
|
||||
box-shadow: 0 0 10px rgba(0, 0, 0, 0.15); }
|
||||
border: 4px solid var(--r-main-color);
|
||||
box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
|
||||
.reveal a .r-frame {
|
||||
transition: all .15s linear; }
|
||||
transition: all 0.15s linear;
|
||||
}
|
||||
|
||||
.reveal a:hover .r-frame {
|
||||
border-color: #42affa;
|
||||
box-shadow: 0 0 20px rgba(0, 0, 0, 0.55); }
|
||||
border-color: var(--r-link-color);
|
||||
box-shadow: 0 0 20px rgba(0, 0, 0, 0.55);
|
||||
}
|
||||
|
||||
/*********************************************
|
||||
* NAVIGATION CONTROLS
|
||||
*********************************************/
|
||||
.reveal .controls {
|
||||
color: #42affa; }
|
||||
color: var(--r-link-color);
|
||||
}
|
||||
|
||||
/*********************************************
|
||||
* PROGRESS BAR
|
||||
*********************************************/
|
||||
.reveal .progress {
|
||||
background: rgba(0, 0, 0, 0.2);
|
||||
color: #42affa; }
|
||||
color: var(--r-link-color);
|
||||
}
|
||||
|
||||
/*********************************************
|
||||
* PRINT BACKGROUND
|
||||
*********************************************/
|
||||
@media print {
|
||||
.backgrounds {
|
||||
background-color: #191919; } }
|
||||
background-color: var(--r-background-color);
|
||||
}
|
||||
}
|
||||
+174
-107
@@ -11,60 +11,68 @@
|
||||
*/
|
||||
@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 {
|
||||
color: #222; }
|
||||
color: #222;
|
||||
}
|
||||
|
||||
/*********************************************
|
||||
* GLOBAL STYLES
|
||||
*********************************************/
|
||||
:root {
|
||||
--background-color: #222;
|
||||
--main-font: Ubuntu, sans-serif;
|
||||
--main-font-size: 40px;
|
||||
--main-color: #eee;
|
||||
--block-margin: 20px;
|
||||
--heading-margin: 0 0 20px 0;
|
||||
--heading-font: Ubuntu, sans-serif;
|
||||
--heading-color: #eee;
|
||||
--heading-line-height: 1.2;
|
||||
--heading-letter-spacing: normal;
|
||||
--heading-text-transform: uppercase;
|
||||
--heading-text-shadow: 2px 2px 2px #222;
|
||||
--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);
|
||||
--heading1-size: 3.77em;
|
||||
--heading2-size: 2.11em;
|
||||
--heading3-size: 1.55em;
|
||||
--heading4-size: 1em;
|
||||
--code-font: monospace;
|
||||
--link-color: #a23;
|
||||
--link-color-hover: #dd5566;
|
||||
--selection-background-color: #a23;
|
||||
--selection-color: #fff; }
|
||||
--r-background-color: #222;
|
||||
--r-main-font: Ubuntu, sans-serif;
|
||||
--r-main-font-size: 40px;
|
||||
--r-main-color: #eee;
|
||||
--r-block-margin: 20px;
|
||||
--r-heading-margin: 0 0 20px 0;
|
||||
--r-heading-font: Ubuntu, sans-serif;
|
||||
--r-heading-color: #eee;
|
||||
--r-heading-line-height: 1.2;
|
||||
--r-heading-letter-spacing: normal;
|
||||
--r-heading-text-transform: uppercase;
|
||||
--r-heading-text-shadow: 2px 2px 2px #222;
|
||||
--r-heading-font-weight: normal;
|
||||
--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);
|
||||
--r-heading1-size: 3.77em;
|
||||
--r-heading2-size: 2.11em;
|
||||
--r-heading3-size: 1.55em;
|
||||
--r-heading4-size: 1em;
|
||||
--r-code-font: monospace;
|
||||
--r-link-color: #a23;
|
||||
--r-link-color-dark: #6a1520;
|
||||
--r-link-color-hover: #dd5566;
|
||||
--r-selection-background-color: #a23;
|
||||
--r-selection-color: #fff;
|
||||
}
|
||||
|
||||
.reveal-viewport {
|
||||
background: #222;
|
||||
background-color: #222; }
|
||||
background-color: var(--r-background-color);
|
||||
}
|
||||
|
||||
.reveal {
|
||||
font-family: Ubuntu, "sans-serif";
|
||||
font-size: 40px;
|
||||
font-family: var(--r-main-font);
|
||||
font-size: var(--r-main-font-size);
|
||||
font-weight: normal;
|
||||
color: #eee; }
|
||||
color: var(--r-main-color);
|
||||
}
|
||||
|
||||
.reveal ::selection {
|
||||
color: #fff;
|
||||
background: #a23;
|
||||
text-shadow: none; }
|
||||
color: var(--r-selection-color);
|
||||
background: var(--r-selection-background-color);
|
||||
text-shadow: none;
|
||||
}
|
||||
|
||||
.reveal ::-moz-selection {
|
||||
color: #fff;
|
||||
background: #a23;
|
||||
text-shadow: none; }
|
||||
color: var(--r-selection-color);
|
||||
background: var(--r-selection-background-color);
|
||||
text-shadow: none;
|
||||
}
|
||||
|
||||
.reveal .slides section,
|
||||
.reveal .slides section > section {
|
||||
line-height: 1.3;
|
||||
font-weight: inherit; }
|
||||
font-weight: inherit;
|
||||
}
|
||||
|
||||
/*********************************************
|
||||
* HEADERS
|
||||
@@ -75,37 +83,44 @@ section.has-light-background, section.has-light-background h1, section.has-light
|
||||
.reveal h4,
|
||||
.reveal h5,
|
||||
.reveal h6 {
|
||||
margin: 0 0 20px 0;
|
||||
color: #eee;
|
||||
font-family: Ubuntu, "sans-serif";
|
||||
font-weight: normal;
|
||||
line-height: 1.2;
|
||||
letter-spacing: normal;
|
||||
text-transform: uppercase;
|
||||
text-shadow: 2px 2px 2px #222;
|
||||
word-wrap: break-word; }
|
||||
margin: var(--r-heading-margin);
|
||||
color: var(--r-heading-color);
|
||||
font-family: var(--r-heading-font);
|
||||
font-weight: var(--r-heading-font-weight);
|
||||
line-height: var(--r-heading-line-height);
|
||||
letter-spacing: var(--r-heading-letter-spacing);
|
||||
text-transform: var(--r-heading-text-transform);
|
||||
text-shadow: var(--r-heading-text-shadow);
|
||||
word-wrap: break-word;
|
||||
}
|
||||
|
||||
.reveal h1 {
|
||||
font-size: 3.77em; }
|
||||
font-size: var(--r-heading1-size);
|
||||
}
|
||||
|
||||
.reveal h2 {
|
||||
font-size: 2.11em; }
|
||||
font-size: var(--r-heading2-size);
|
||||
}
|
||||
|
||||
.reveal h3 {
|
||||
font-size: 1.55em; }
|
||||
font-size: var(--r-heading3-size);
|
||||
}
|
||||
|
||||
.reveal h4 {
|
||||
font-size: 1em; }
|
||||
font-size: var(--r-heading4-size);
|
||||
}
|
||||
|
||||
.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
|
||||
*********************************************/
|
||||
.reveal p {
|
||||
margin: 20px 0;
|
||||
line-height: 1.3; }
|
||||
margin: var(--r-block-margin) 0;
|
||||
line-height: 1.3;
|
||||
}
|
||||
|
||||
/* Remove trailing margins after titles */
|
||||
.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 h5:last-child,
|
||||
.reveal h6:last-child {
|
||||
margin-bottom: 0; }
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
/* Ensure certain elements are never larger than the slide itself */
|
||||
.reveal img,
|
||||
.reveal video,
|
||||
.reveal iframe {
|
||||
max-width: 95%;
|
||||
max-height: 95%; }
|
||||
max-height: 95%;
|
||||
}
|
||||
|
||||
.reveal strong,
|
||||
.reveal b {
|
||||
font-weight: bold; }
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.reveal em {
|
||||
font-style: italic; }
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.reveal ol,
|
||||
.reveal dl,
|
||||
.reveal ul {
|
||||
display: inline-block;
|
||||
text-align: left;
|
||||
margin: 0 0 0 1em; }
|
||||
margin: 0 0 0 1em;
|
||||
}
|
||||
|
||||
.reveal ol {
|
||||
list-style-type: decimal; }
|
||||
list-style-type: decimal;
|
||||
}
|
||||
|
||||
.reveal ul {
|
||||
list-style-type: disc; }
|
||||
list-style-type: disc;
|
||||
}
|
||||
|
||||
.reveal ul ul {
|
||||
list-style-type: square; }
|
||||
list-style-type: square;
|
||||
}
|
||||
|
||||
.reveal ul ul ul {
|
||||
list-style-type: circle; }
|
||||
list-style-type: circle;
|
||||
}
|
||||
|
||||
.reveal ul ul,
|
||||
.reveal ul ol,
|
||||
.reveal ol ol,
|
||||
.reveal ol ul {
|
||||
display: block;
|
||||
margin-left: 40px; }
|
||||
margin-left: 40px;
|
||||
}
|
||||
|
||||
.reveal dt {
|
||||
font-weight: bold; }
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.reveal dd {
|
||||
margin-left: 40px; }
|
||||
margin-left: 40px;
|
||||
}
|
||||
|
||||
.reveal blockquote {
|
||||
display: block;
|
||||
position: relative;
|
||||
width: 70%;
|
||||
margin: 20px auto;
|
||||
margin: var(--r-block-margin) auto;
|
||||
padding: 5px;
|
||||
font-style: italic;
|
||||
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:last-child {
|
||||
display: inline-block; }
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.reveal q {
|
||||
font-style: italic; }
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.reveal pre {
|
||||
display: block;
|
||||
position: relative;
|
||||
width: 90%;
|
||||
margin: 20px auto;
|
||||
margin: var(--r-block-margin) auto;
|
||||
text-align: left;
|
||||
font-size: 0.55em;
|
||||
font-family: monospace;
|
||||
font-family: var(--r-code-font);
|
||||
line-height: 1.2em;
|
||||
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 {
|
||||
font-family: monospace;
|
||||
text-transform: none; }
|
||||
font-family: var(--r-code-font);
|
||||
text-transform: none;
|
||||
tab-size: 2;
|
||||
}
|
||||
|
||||
.reveal pre code {
|
||||
display: block;
|
||||
padding: 5px;
|
||||
overflow: auto;
|
||||
max-height: 400px;
|
||||
word-wrap: normal; }
|
||||
word-wrap: normal;
|
||||
}
|
||||
|
||||
.reveal .code-wrapper {
|
||||
white-space: normal;
|
||||
}
|
||||
|
||||
.reveal .code-wrapper code {
|
||||
white-space: pre;
|
||||
}
|
||||
|
||||
.reveal table {
|
||||
margin: auto;
|
||||
border-collapse: collapse;
|
||||
border-spacing: 0; }
|
||||
border-spacing: 0;
|
||||
}
|
||||
|
||||
.reveal table th {
|
||||
font-weight: bold; }
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.reveal table th,
|
||||
.reveal table td {
|
||||
text-align: left;
|
||||
padding: 0.2em 0.5em 0.2em 0.5em;
|
||||
border-bottom: 1px solid; }
|
||||
border-bottom: 1px solid;
|
||||
}
|
||||
|
||||
.reveal table th[align="center"],
|
||||
.reveal table td[align="center"] {
|
||||
text-align: center; }
|
||||
.reveal table th[align=center],
|
||||
.reveal table td[align=center] {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.reveal table th[align="right"],
|
||||
.reveal table td[align="right"] {
|
||||
text-align: right; }
|
||||
.reveal table th[align=right],
|
||||
.reveal table td[align=right] {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.reveal table tbody tr:last-child th,
|
||||
.reveal table tbody tr:last-child td {
|
||||
border-bottom: none; }
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.reveal sup {
|
||||
vertical-align: super;
|
||||
font-size: smaller; }
|
||||
font-size: smaller;
|
||||
}
|
||||
|
||||
.reveal sub {
|
||||
vertical-align: sub;
|
||||
font-size: smaller; }
|
||||
font-size: smaller;
|
||||
}
|
||||
|
||||
.reveal small {
|
||||
display: inline-block;
|
||||
font-size: 0.6em;
|
||||
line-height: 1.2em;
|
||||
vertical-align: top; }
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
.reveal small * {
|
||||
vertical-align: top; }
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
.reveal img {
|
||||
margin: 20px 0; }
|
||||
margin: var(--r-block-margin) 0;
|
||||
}
|
||||
|
||||
/*********************************************
|
||||
* LINKS
|
||||
*********************************************/
|
||||
.reveal a {
|
||||
color: #a23;
|
||||
color: var(--r-link-color);
|
||||
text-decoration: none;
|
||||
transition: color .15s ease; }
|
||||
transition: color 0.15s ease;
|
||||
}
|
||||
|
||||
.reveal a:hover {
|
||||
color: #dd5566;
|
||||
color: var(--r-link-color-hover);
|
||||
text-shadow: none;
|
||||
border: none; }
|
||||
border: none;
|
||||
}
|
||||
|
||||
.reveal .roll span:after {
|
||||
color: #fff;
|
||||
background: #6a1520; }
|
||||
background: var(--r-link-color-dark);
|
||||
}
|
||||
|
||||
/*********************************************
|
||||
* Frame helper
|
||||
*********************************************/
|
||||
.reveal .r-frame {
|
||||
border: 4px solid #eee;
|
||||
box-shadow: 0 0 10px rgba(0, 0, 0, 0.15); }
|
||||
border: 4px solid var(--r-main-color);
|
||||
box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
|
||||
.reveal a .r-frame {
|
||||
transition: all .15s linear; }
|
||||
transition: all 0.15s linear;
|
||||
}
|
||||
|
||||
.reveal a:hover .r-frame {
|
||||
border-color: #a23;
|
||||
box-shadow: 0 0 20px rgba(0, 0, 0, 0.55); }
|
||||
border-color: var(--r-link-color);
|
||||
box-shadow: 0 0 20px rgba(0, 0, 0, 0.55);
|
||||
}
|
||||
|
||||
/*********************************************
|
||||
* NAVIGATION CONTROLS
|
||||
*********************************************/
|
||||
.reveal .controls {
|
||||
color: #a23; }
|
||||
color: var(--r-link-color);
|
||||
}
|
||||
|
||||
/*********************************************
|
||||
* PROGRESS BAR
|
||||
*********************************************/
|
||||
.reveal .progress {
|
||||
background: rgba(0, 0, 0, 0.2);
|
||||
color: #a23; }
|
||||
color: var(--r-link-color);
|
||||
}
|
||||
|
||||
/*********************************************
|
||||
* PRINT BACKGROUND
|
||||
*********************************************/
|
||||
@media print {
|
||||
.backgrounds {
|
||||
background-color: #222; } }
|
||||
|
||||
background-color: var(--r-background-color);
|
||||
}
|
||||
}
|
||||
.reveal p {
|
||||
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 {
|
||||
text-shadow: none; }
|
||||
text-shadow: none;
|
||||
}
|
||||
|
||||
.reveal h1,
|
||||
.reveal h2,
|
||||
@@ -312,12 +376,15 @@ section.has-light-background p, section.has-light-background h1, section.has-lig
|
||||
.reveal h4,
|
||||
.reveal h5,
|
||||
.reveal h6 {
|
||||
font-weight: 700; }
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.reveal p code {
|
||||
background-color: #23241f;
|
||||
display: inline-block;
|
||||
border-radius: 7px; }
|
||||
border-radius: 7px;
|
||||
}
|
||||
|
||||
.reveal small code {
|
||||
vertical-align: baseline; }
|
||||
vertical-align: baseline;
|
||||
}
|
||||
+164
-101
@@ -8,35 +8,38 @@
|
||||
@import url(./fonts/league-gothic/league-gothic.css);
|
||||
@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 {
|
||||
color: #222; }
|
||||
color: #222;
|
||||
}
|
||||
|
||||
/*********************************************
|
||||
* GLOBAL STYLES
|
||||
*********************************************/
|
||||
:root {
|
||||
--background-color: #2b2b2b;
|
||||
--main-font: Lato, sans-serif;
|
||||
--main-font-size: 40px;
|
||||
--main-color: #eee;
|
||||
--block-margin: 20px;
|
||||
--heading-margin: 0 0 20px 0;
|
||||
--heading-font: League Gothic, Impact, sans-serif;
|
||||
--heading-color: #eee;
|
||||
--heading-line-height: 1.2;
|
||||
--heading-letter-spacing: normal;
|
||||
--heading-text-transform: uppercase;
|
||||
--heading-text-shadow: 0px 0px 6px rgba(0, 0, 0, 0.2);
|
||||
--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);
|
||||
--heading1-size: 3.77em;
|
||||
--heading2-size: 2.11em;
|
||||
--heading3-size: 1.55em;
|
||||
--heading4-size: 1em;
|
||||
--code-font: monospace;
|
||||
--link-color: #13DAEC;
|
||||
--link-color-hover: #71e9f4;
|
||||
--selection-background-color: #FF5E99;
|
||||
--selection-color: #fff; }
|
||||
--r-background-color: #2b2b2b;
|
||||
--r-main-font: Lato, sans-serif;
|
||||
--r-main-font-size: 40px;
|
||||
--r-main-color: #eee;
|
||||
--r-block-margin: 20px;
|
||||
--r-heading-margin: 0 0 20px 0;
|
||||
--r-heading-font: League Gothic, Impact, sans-serif;
|
||||
--r-heading-color: #eee;
|
||||
--r-heading-line-height: 1.2;
|
||||
--r-heading-letter-spacing: normal;
|
||||
--r-heading-text-transform: uppercase;
|
||||
--r-heading-text-shadow: 0px 0px 6px rgba(0, 0, 0, 0.2);
|
||||
--r-heading-font-weight: normal;
|
||||
--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);
|
||||
--r-heading1-size: 3.77em;
|
||||
--r-heading2-size: 2.11em;
|
||||
--r-heading3-size: 1.55em;
|
||||
--r-heading4-size: 1em;
|
||||
--r-code-font: monospace;
|
||||
--r-link-color: #13DAEC;
|
||||
--r-link-color-dark: #0d99a5;
|
||||
--r-link-color-hover: #71e9f4;
|
||||
--r-selection-background-color: #FF5E99;
|
||||
--r-selection-color: #fff;
|
||||
}
|
||||
|
||||
.reveal-viewport {
|
||||
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: -ms-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 {
|
||||
font-family: "Lato", sans-serif;
|
||||
font-size: 40px;
|
||||
font-family: var(--r-main-font);
|
||||
font-size: var(--r-main-font-size);
|
||||
font-weight: normal;
|
||||
color: #eee; }
|
||||
color: var(--r-main-color);
|
||||
}
|
||||
|
||||
.reveal ::selection {
|
||||
color: #fff;
|
||||
background: #FF5E99;
|
||||
text-shadow: none; }
|
||||
color: var(--r-selection-color);
|
||||
background: var(--r-selection-background-color);
|
||||
text-shadow: none;
|
||||
}
|
||||
|
||||
.reveal ::-moz-selection {
|
||||
color: #fff;
|
||||
background: #FF5E99;
|
||||
text-shadow: none; }
|
||||
color: var(--r-selection-color);
|
||||
background: var(--r-selection-background-color);
|
||||
text-shadow: none;
|
||||
}
|
||||
|
||||
.reveal .slides section,
|
||||
.reveal .slides section > section {
|
||||
line-height: 1.3;
|
||||
font-weight: inherit; }
|
||||
font-weight: inherit;
|
||||
}
|
||||
|
||||
/*********************************************
|
||||
* HEADERS
|
||||
@@ -78,37 +86,44 @@ section.has-light-background, section.has-light-background h1, section.has-light
|
||||
.reveal h4,
|
||||
.reveal h5,
|
||||
.reveal h6 {
|
||||
margin: 0 0 20px 0;
|
||||
color: #eee;
|
||||
font-family: "League Gothic", Impact, sans-serif;
|
||||
font-weight: normal;
|
||||
line-height: 1.2;
|
||||
letter-spacing: normal;
|
||||
text-transform: uppercase;
|
||||
text-shadow: 0px 0px 6px rgba(0, 0, 0, 0.2);
|
||||
word-wrap: break-word; }
|
||||
margin: var(--r-heading-margin);
|
||||
color: var(--r-heading-color);
|
||||
font-family: var(--r-heading-font);
|
||||
font-weight: var(--r-heading-font-weight);
|
||||
line-height: var(--r-heading-line-height);
|
||||
letter-spacing: var(--r-heading-letter-spacing);
|
||||
text-transform: var(--r-heading-text-transform);
|
||||
text-shadow: var(--r-heading-text-shadow);
|
||||
word-wrap: break-word;
|
||||
}
|
||||
|
||||
.reveal h1 {
|
||||
font-size: 3.77em; }
|
||||
font-size: var(--r-heading1-size);
|
||||
}
|
||||
|
||||
.reveal h2 {
|
||||
font-size: 2.11em; }
|
||||
font-size: var(--r-heading2-size);
|
||||
}
|
||||
|
||||
.reveal h3 {
|
||||
font-size: 1.55em; }
|
||||
font-size: var(--r-heading3-size);
|
||||
}
|
||||
|
||||
.reveal h4 {
|
||||
font-size: 1em; }
|
||||
font-size: var(--r-heading4-size);
|
||||
}
|
||||
|
||||
.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
|
||||
*********************************************/
|
||||
.reveal p {
|
||||
margin: 20px 0;
|
||||
line-height: 1.3; }
|
||||
margin: var(--r-block-margin) 0;
|
||||
line-height: 1.3;
|
||||
}
|
||||
|
||||
/* Remove trailing margins after titles */
|
||||
.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 h5:last-child,
|
||||
.reveal h6:last-child {
|
||||
margin-bottom: 0; }
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
/* Ensure certain elements are never larger than the slide itself */
|
||||
.reveal img,
|
||||
.reveal video,
|
||||
.reveal iframe {
|
||||
max-width: 95%;
|
||||
max-height: 95%; }
|
||||
max-height: 95%;
|
||||
}
|
||||
|
||||
.reveal strong,
|
||||
.reveal b {
|
||||
font-weight: bold; }
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.reveal em {
|
||||
font-style: italic; }
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.reveal ol,
|
||||
.reveal dl,
|
||||
.reveal ul {
|
||||
display: inline-block;
|
||||
text-align: left;
|
||||
margin: 0 0 0 1em; }
|
||||
margin: 0 0 0 1em;
|
||||
}
|
||||
|
||||
.reveal ol {
|
||||
list-style-type: decimal; }
|
||||
list-style-type: decimal;
|
||||
}
|
||||
|
||||
.reveal ul {
|
||||
list-style-type: disc; }
|
||||
list-style-type: disc;
|
||||
}
|
||||
|
||||
.reveal ul ul {
|
||||
list-style-type: square; }
|
||||
list-style-type: square;
|
||||
}
|
||||
|
||||
.reveal ul ul ul {
|
||||
list-style-type: circle; }
|
||||
list-style-type: circle;
|
||||
}
|
||||
|
||||
.reveal ul ul,
|
||||
.reveal ul ol,
|
||||
.reveal ol ol,
|
||||
.reveal ol ul {
|
||||
display: block;
|
||||
margin-left: 40px; }
|
||||
margin-left: 40px;
|
||||
}
|
||||
|
||||
.reveal dt {
|
||||
font-weight: bold; }
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.reveal dd {
|
||||
margin-left: 40px; }
|
||||
margin-left: 40px;
|
||||
}
|
||||
|
||||
.reveal blockquote {
|
||||
display: block;
|
||||
position: relative;
|
||||
width: 70%;
|
||||
margin: 20px auto;
|
||||
margin: var(--r-block-margin) auto;
|
||||
padding: 5px;
|
||||
font-style: italic;
|
||||
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:last-child {
|
||||
display: inline-block; }
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.reveal q {
|
||||
font-style: italic; }
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.reveal pre {
|
||||
display: block;
|
||||
position: relative;
|
||||
width: 90%;
|
||||
margin: 20px auto;
|
||||
margin: var(--r-block-margin) auto;
|
||||
text-align: left;
|
||||
font-size: 0.55em;
|
||||
font-family: monospace;
|
||||
font-family: var(--r-code-font);
|
||||
line-height: 1.2em;
|
||||
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 {
|
||||
font-family: monospace;
|
||||
text-transform: none; }
|
||||
font-family: var(--r-code-font);
|
||||
text-transform: none;
|
||||
tab-size: 2;
|
||||
}
|
||||
|
||||
.reveal pre code {
|
||||
display: block;
|
||||
padding: 5px;
|
||||
overflow: auto;
|
||||
max-height: 400px;
|
||||
word-wrap: normal; }
|
||||
word-wrap: normal;
|
||||
}
|
||||
|
||||
.reveal .code-wrapper {
|
||||
white-space: normal;
|
||||
}
|
||||
|
||||
.reveal .code-wrapper code {
|
||||
white-space: pre;
|
||||
}
|
||||
|
||||
.reveal table {
|
||||
margin: auto;
|
||||
border-collapse: collapse;
|
||||
border-spacing: 0; }
|
||||
border-spacing: 0;
|
||||
}
|
||||
|
||||
.reveal table th {
|
||||
font-weight: bold; }
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.reveal table th,
|
||||
.reveal table td {
|
||||
text-align: left;
|
||||
padding: 0.2em 0.5em 0.2em 0.5em;
|
||||
border-bottom: 1px solid; }
|
||||
border-bottom: 1px solid;
|
||||
}
|
||||
|
||||
.reveal table th[align="center"],
|
||||
.reveal table td[align="center"] {
|
||||
text-align: center; }
|
||||
.reveal table th[align=center],
|
||||
.reveal table td[align=center] {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.reveal table th[align="right"],
|
||||
.reveal table td[align="right"] {
|
||||
text-align: right; }
|
||||
.reveal table th[align=right],
|
||||
.reveal table td[align=right] {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.reveal table tbody tr:last-child th,
|
||||
.reveal table tbody tr:last-child td {
|
||||
border-bottom: none; }
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.reveal sup {
|
||||
vertical-align: super;
|
||||
font-size: smaller; }
|
||||
font-size: smaller;
|
||||
}
|
||||
|
||||
.reveal sub {
|
||||
vertical-align: sub;
|
||||
font-size: smaller; }
|
||||
font-size: smaller;
|
||||
}
|
||||
|
||||
.reveal small {
|
||||
display: inline-block;
|
||||
font-size: 0.6em;
|
||||
line-height: 1.2em;
|
||||
vertical-align: top; }
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
.reveal small * {
|
||||
vertical-align: top; }
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
.reveal img {
|
||||
margin: 20px 0; }
|
||||
margin: var(--r-block-margin) 0;
|
||||
}
|
||||
|
||||
/*********************************************
|
||||
* LINKS
|
||||
*********************************************/
|
||||
.reveal a {
|
||||
color: #13DAEC;
|
||||
color: var(--r-link-color);
|
||||
text-decoration: none;
|
||||
transition: color .15s ease; }
|
||||
transition: color 0.15s ease;
|
||||
}
|
||||
|
||||
.reveal a:hover {
|
||||
color: #71e9f4;
|
||||
color: var(--r-link-color-hover);
|
||||
text-shadow: none;
|
||||
border: none; }
|
||||
border: none;
|
||||
}
|
||||
|
||||
.reveal .roll span:after {
|
||||
color: #fff;
|
||||
background: #0d99a5; }
|
||||
background: var(--r-link-color-dark);
|
||||
}
|
||||
|
||||
/*********************************************
|
||||
* Frame helper
|
||||
*********************************************/
|
||||
.reveal .r-frame {
|
||||
border: 4px solid #eee;
|
||||
box-shadow: 0 0 10px rgba(0, 0, 0, 0.15); }
|
||||
border: 4px solid var(--r-main-color);
|
||||
box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
|
||||
.reveal a .r-frame {
|
||||
transition: all .15s linear; }
|
||||
transition: all 0.15s linear;
|
||||
}
|
||||
|
||||
.reveal a:hover .r-frame {
|
||||
border-color: #13DAEC;
|
||||
box-shadow: 0 0 20px rgba(0, 0, 0, 0.55); }
|
||||
border-color: var(--r-link-color);
|
||||
box-shadow: 0 0 20px rgba(0, 0, 0, 0.55);
|
||||
}
|
||||
|
||||
/*********************************************
|
||||
* NAVIGATION CONTROLS
|
||||
*********************************************/
|
||||
.reveal .controls {
|
||||
color: #13DAEC; }
|
||||
color: var(--r-link-color);
|
||||
}
|
||||
|
||||
/*********************************************
|
||||
* PROGRESS BAR
|
||||
*********************************************/
|
||||
.reveal .progress {
|
||||
background: rgba(0, 0, 0, 0.2);
|
||||
color: #13DAEC; }
|
||||
color: var(--r-link-color);
|
||||
}
|
||||
|
||||
/*********************************************
|
||||
* PRINT BACKGROUND
|
||||
*********************************************/
|
||||
@media print {
|
||||
.backgrounds {
|
||||
background-color: #2b2b2b; } }
|
||||
background-color: var(--r-background-color);
|
||||
}
|
||||
}
|
||||
+166
-102
@@ -9,63 +9,72 @@
|
||||
*/
|
||||
html * {
|
||||
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 {
|
||||
color: #222; }
|
||||
color: #222;
|
||||
}
|
||||
|
||||
/*********************************************
|
||||
* GLOBAL STYLES
|
||||
*********************************************/
|
||||
:root {
|
||||
--background-color: #002b36;
|
||||
--main-font: Lato, sans-serif;
|
||||
--main-font-size: 40px;
|
||||
--main-color: #93a1a1;
|
||||
--block-margin: 20px;
|
||||
--heading-margin: 0 0 20px 0;
|
||||
--heading-font: League Gothic, Impact, sans-serif;
|
||||
--heading-color: #eee8d5;
|
||||
--heading-line-height: 1.2;
|
||||
--heading-letter-spacing: normal;
|
||||
--heading-text-transform: uppercase;
|
||||
--heading-text-shadow: none;
|
||||
--heading-font-weight: normal;
|
||||
--heading1-text-shadow: none;
|
||||
--heading1-size: 3.77em;
|
||||
--heading2-size: 2.11em;
|
||||
--heading3-size: 1.55em;
|
||||
--heading4-size: 1em;
|
||||
--code-font: monospace;
|
||||
--link-color: #268bd2;
|
||||
--link-color-hover: #78b9e6;
|
||||
--selection-background-color: #d33682;
|
||||
--selection-color: #fff; }
|
||||
--r-background-color: #002b36;
|
||||
--r-main-font: Lato, sans-serif;
|
||||
--r-main-font-size: 40px;
|
||||
--r-main-color: #93a1a1;
|
||||
--r-block-margin: 20px;
|
||||
--r-heading-margin: 0 0 20px 0;
|
||||
--r-heading-font: League Gothic, Impact, sans-serif;
|
||||
--r-heading-color: #eee8d5;
|
||||
--r-heading-line-height: 1.2;
|
||||
--r-heading-letter-spacing: normal;
|
||||
--r-heading-text-transform: uppercase;
|
||||
--r-heading-text-shadow: none;
|
||||
--r-heading-font-weight: normal;
|
||||
--r-heading1-text-shadow: none;
|
||||
--r-heading1-size: 3.77em;
|
||||
--r-heading2-size: 2.11em;
|
||||
--r-heading3-size: 1.55em;
|
||||
--r-heading4-size: 1em;
|
||||
--r-code-font: monospace;
|
||||
--r-link-color: #268bd2;
|
||||
--r-link-color-dark: #1a6091;
|
||||
--r-link-color-hover: #78b9e6;
|
||||
--r-selection-background-color: #d33682;
|
||||
--r-selection-color: #fff;
|
||||
}
|
||||
|
||||
.reveal-viewport {
|
||||
background: #002b36;
|
||||
background-color: #002b36; }
|
||||
background-color: var(--r-background-color);
|
||||
}
|
||||
|
||||
.reveal {
|
||||
font-family: "Lato", sans-serif;
|
||||
font-size: 40px;
|
||||
font-family: var(--r-main-font);
|
||||
font-size: var(--r-main-font-size);
|
||||
font-weight: normal;
|
||||
color: #93a1a1; }
|
||||
color: var(--r-main-color);
|
||||
}
|
||||
|
||||
.reveal ::selection {
|
||||
color: #fff;
|
||||
background: #d33682;
|
||||
text-shadow: none; }
|
||||
color: var(--r-selection-color);
|
||||
background: var(--r-selection-background-color);
|
||||
text-shadow: none;
|
||||
}
|
||||
|
||||
.reveal ::-moz-selection {
|
||||
color: #fff;
|
||||
background: #d33682;
|
||||
text-shadow: none; }
|
||||
color: var(--r-selection-color);
|
||||
background: var(--r-selection-background-color);
|
||||
text-shadow: none;
|
||||
}
|
||||
|
||||
.reveal .slides section,
|
||||
.reveal .slides section > section {
|
||||
line-height: 1.3;
|
||||
font-weight: inherit; }
|
||||
font-weight: inherit;
|
||||
}
|
||||
|
||||
/*********************************************
|
||||
* HEADERS
|
||||
@@ -76,37 +85,44 @@ section.has-light-background, section.has-light-background h1, section.has-light
|
||||
.reveal h4,
|
||||
.reveal h5,
|
||||
.reveal h6 {
|
||||
margin: 0 0 20px 0;
|
||||
color: #eee8d5;
|
||||
font-family: "League Gothic", Impact, sans-serif;
|
||||
font-weight: normal;
|
||||
line-height: 1.2;
|
||||
letter-spacing: normal;
|
||||
text-transform: uppercase;
|
||||
text-shadow: none;
|
||||
word-wrap: break-word; }
|
||||
margin: var(--r-heading-margin);
|
||||
color: var(--r-heading-color);
|
||||
font-family: var(--r-heading-font);
|
||||
font-weight: var(--r-heading-font-weight);
|
||||
line-height: var(--r-heading-line-height);
|
||||
letter-spacing: var(--r-heading-letter-spacing);
|
||||
text-transform: var(--r-heading-text-transform);
|
||||
text-shadow: var(--r-heading-text-shadow);
|
||||
word-wrap: break-word;
|
||||
}
|
||||
|
||||
.reveal h1 {
|
||||
font-size: 3.77em; }
|
||||
font-size: var(--r-heading1-size);
|
||||
}
|
||||
|
||||
.reveal h2 {
|
||||
font-size: 2.11em; }
|
||||
font-size: var(--r-heading2-size);
|
||||
}
|
||||
|
||||
.reveal h3 {
|
||||
font-size: 1.55em; }
|
||||
font-size: var(--r-heading3-size);
|
||||
}
|
||||
|
||||
.reveal h4 {
|
||||
font-size: 1em; }
|
||||
font-size: var(--r-heading4-size);
|
||||
}
|
||||
|
||||
.reveal h1 {
|
||||
text-shadow: none; }
|
||||
text-shadow: var(--r-heading1-text-shadow);
|
||||
}
|
||||
|
||||
/*********************************************
|
||||
* OTHER
|
||||
*********************************************/
|
||||
.reveal p {
|
||||
margin: 20px 0;
|
||||
line-height: 1.3; }
|
||||
margin: var(--r-block-margin) 0;
|
||||
line-height: 1.3;
|
||||
}
|
||||
|
||||
/* Remove trailing margins after titles */
|
||||
.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 h5:last-child,
|
||||
.reveal h6:last-child {
|
||||
margin-bottom: 0; }
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
/* Ensure certain elements are never larger than the slide itself */
|
||||
.reveal img,
|
||||
.reveal video,
|
||||
.reveal iframe {
|
||||
max-width: 95%;
|
||||
max-height: 95%; }
|
||||
max-height: 95%;
|
||||
}
|
||||
|
||||
.reveal strong,
|
||||
.reveal b {
|
||||
font-weight: bold; }
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.reveal em {
|
||||
font-style: italic; }
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.reveal ol,
|
||||
.reveal dl,
|
||||
.reveal ul {
|
||||
display: inline-block;
|
||||
text-align: left;
|
||||
margin: 0 0 0 1em; }
|
||||
margin: 0 0 0 1em;
|
||||
}
|
||||
|
||||
.reveal ol {
|
||||
list-style-type: decimal; }
|
||||
list-style-type: decimal;
|
||||
}
|
||||
|
||||
.reveal ul {
|
||||
list-style-type: disc; }
|
||||
list-style-type: disc;
|
||||
}
|
||||
|
||||
.reveal ul ul {
|
||||
list-style-type: square; }
|
||||
list-style-type: square;
|
||||
}
|
||||
|
||||
.reveal ul ul ul {
|
||||
list-style-type: circle; }
|
||||
list-style-type: circle;
|
||||
}
|
||||
|
||||
.reveal ul ul,
|
||||
.reveal ul ol,
|
||||
.reveal ol ol,
|
||||
.reveal ol ul {
|
||||
display: block;
|
||||
margin-left: 40px; }
|
||||
margin-left: 40px;
|
||||
}
|
||||
|
||||
.reveal dt {
|
||||
font-weight: bold; }
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.reveal dd {
|
||||
margin-left: 40px; }
|
||||
margin-left: 40px;
|
||||
}
|
||||
|
||||
.reveal blockquote {
|
||||
display: block;
|
||||
position: relative;
|
||||
width: 70%;
|
||||
margin: 20px auto;
|
||||
margin: var(--r-block-margin) auto;
|
||||
padding: 5px;
|
||||
font-style: italic;
|
||||
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:last-child {
|
||||
display: inline-block; }
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.reveal q {
|
||||
font-style: italic; }
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.reveal pre {
|
||||
display: block;
|
||||
position: relative;
|
||||
width: 90%;
|
||||
margin: 20px auto;
|
||||
margin: var(--r-block-margin) auto;
|
||||
text-align: left;
|
||||
font-size: 0.55em;
|
||||
font-family: monospace;
|
||||
font-family: var(--r-code-font);
|
||||
line-height: 1.2em;
|
||||
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 {
|
||||
font-family: monospace;
|
||||
text-transform: none; }
|
||||
font-family: var(--r-code-font);
|
||||
text-transform: none;
|
||||
tab-size: 2;
|
||||
}
|
||||
|
||||
.reveal pre code {
|
||||
display: block;
|
||||
padding: 5px;
|
||||
overflow: auto;
|
||||
max-height: 400px;
|
||||
word-wrap: normal; }
|
||||
word-wrap: normal;
|
||||
}
|
||||
|
||||
.reveal .code-wrapper {
|
||||
white-space: normal;
|
||||
}
|
||||
|
||||
.reveal .code-wrapper code {
|
||||
white-space: pre;
|
||||
}
|
||||
|
||||
.reveal table {
|
||||
margin: auto;
|
||||
border-collapse: collapse;
|
||||
border-spacing: 0; }
|
||||
border-spacing: 0;
|
||||
}
|
||||
|
||||
.reveal table th {
|
||||
font-weight: bold; }
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.reveal table th,
|
||||
.reveal table td {
|
||||
text-align: left;
|
||||
padding: 0.2em 0.5em 0.2em 0.5em;
|
||||
border-bottom: 1px solid; }
|
||||
border-bottom: 1px solid;
|
||||
}
|
||||
|
||||
.reveal table th[align="center"],
|
||||
.reveal table td[align="center"] {
|
||||
text-align: center; }
|
||||
.reveal table th[align=center],
|
||||
.reveal table td[align=center] {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.reveal table th[align="right"],
|
||||
.reveal table td[align="right"] {
|
||||
text-align: right; }
|
||||
.reveal table th[align=right],
|
||||
.reveal table td[align=right] {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.reveal table tbody tr:last-child th,
|
||||
.reveal table tbody tr:last-child td {
|
||||
border-bottom: none; }
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.reveal sup {
|
||||
vertical-align: super;
|
||||
font-size: smaller; }
|
||||
font-size: smaller;
|
||||
}
|
||||
|
||||
.reveal sub {
|
||||
vertical-align: sub;
|
||||
font-size: smaller; }
|
||||
font-size: smaller;
|
||||
}
|
||||
|
||||
.reveal small {
|
||||
display: inline-block;
|
||||
font-size: 0.6em;
|
||||
line-height: 1.2em;
|
||||
vertical-align: top; }
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
.reveal small * {
|
||||
vertical-align: top; }
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
.reveal img {
|
||||
margin: 20px 0; }
|
||||
margin: var(--r-block-margin) 0;
|
||||
}
|
||||
|
||||
/*********************************************
|
||||
* LINKS
|
||||
*********************************************/
|
||||
.reveal a {
|
||||
color: #268bd2;
|
||||
color: var(--r-link-color);
|
||||
text-decoration: none;
|
||||
transition: color .15s ease; }
|
||||
transition: color 0.15s ease;
|
||||
}
|
||||
|
||||
.reveal a:hover {
|
||||
color: #78b9e6;
|
||||
color: var(--r-link-color-hover);
|
||||
text-shadow: none;
|
||||
border: none; }
|
||||
border: none;
|
||||
}
|
||||
|
||||
.reveal .roll span:after {
|
||||
color: #fff;
|
||||
background: #1a6091; }
|
||||
background: var(--r-link-color-dark);
|
||||
}
|
||||
|
||||
/*********************************************
|
||||
* Frame helper
|
||||
*********************************************/
|
||||
.reveal .r-frame {
|
||||
border: 4px solid #93a1a1;
|
||||
box-shadow: 0 0 10px rgba(0, 0, 0, 0.15); }
|
||||
border: 4px solid var(--r-main-color);
|
||||
box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
|
||||
.reveal a .r-frame {
|
||||
transition: all .15s linear; }
|
||||
transition: all 0.15s linear;
|
||||
}
|
||||
|
||||
.reveal a:hover .r-frame {
|
||||
border-color: #268bd2;
|
||||
box-shadow: 0 0 20px rgba(0, 0, 0, 0.55); }
|
||||
border-color: var(--r-link-color);
|
||||
box-shadow: 0 0 20px rgba(0, 0, 0, 0.55);
|
||||
}
|
||||
|
||||
/*********************************************
|
||||
* NAVIGATION CONTROLS
|
||||
*********************************************/
|
||||
.reveal .controls {
|
||||
color: #268bd2; }
|
||||
color: var(--r-link-color);
|
||||
}
|
||||
|
||||
/*********************************************
|
||||
* PROGRESS BAR
|
||||
*********************************************/
|
||||
.reveal .progress {
|
||||
background: rgba(0, 0, 0, 0.2);
|
||||
color: #268bd2; }
|
||||
color: var(--r-link-color);
|
||||
}
|
||||
|
||||
/*********************************************
|
||||
* PRINT BACKGROUND
|
||||
*********************************************/
|
||||
@media print {
|
||||
.backgrounds {
|
||||
background-color: #002b36; } }
|
||||
background-color: var(--r-background-color);
|
||||
}
|
||||
}
|
||||
+164
-101
@@ -6,60 +6,68 @@
|
||||
@import url(https://fonts.googleapis.com/css?family=Montserrat:700);
|
||||
@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 {
|
||||
color: #222; }
|
||||
color: #222;
|
||||
}
|
||||
|
||||
/*********************************************
|
||||
* GLOBAL STYLES
|
||||
*********************************************/
|
||||
:root {
|
||||
--background-color: #111;
|
||||
--main-font: Open Sans, sans-serif;
|
||||
--main-font-size: 40px;
|
||||
--main-color: #eee;
|
||||
--block-margin: 20px;
|
||||
--heading-margin: 0 0 20px 0;
|
||||
--heading-font: Montserrat, Impact, sans-serif;
|
||||
--heading-color: #eee;
|
||||
--heading-line-height: 1.2;
|
||||
--heading-letter-spacing: -0.03em;
|
||||
--heading-text-transform: none;
|
||||
--heading-text-shadow: none;
|
||||
--heading-font-weight: normal;
|
||||
--heading1-text-shadow: none;
|
||||
--heading1-size: 3.77em;
|
||||
--heading2-size: 2.11em;
|
||||
--heading3-size: 1.55em;
|
||||
--heading4-size: 1em;
|
||||
--code-font: monospace;
|
||||
--link-color: #e7ad52;
|
||||
--link-color-hover: #f3d7ac;
|
||||
--selection-background-color: #e7ad52;
|
||||
--selection-color: #fff; }
|
||||
--r-background-color: #111;
|
||||
--r-main-font: Open Sans, sans-serif;
|
||||
--r-main-font-size: 40px;
|
||||
--r-main-color: #eee;
|
||||
--r-block-margin: 20px;
|
||||
--r-heading-margin: 0 0 20px 0;
|
||||
--r-heading-font: Montserrat, Impact, sans-serif;
|
||||
--r-heading-color: #eee;
|
||||
--r-heading-line-height: 1.2;
|
||||
--r-heading-letter-spacing: -0.03em;
|
||||
--r-heading-text-transform: none;
|
||||
--r-heading-text-shadow: none;
|
||||
--r-heading-font-weight: normal;
|
||||
--r-heading1-text-shadow: none;
|
||||
--r-heading1-size: 3.77em;
|
||||
--r-heading2-size: 2.11em;
|
||||
--r-heading3-size: 1.55em;
|
||||
--r-heading4-size: 1em;
|
||||
--r-code-font: monospace;
|
||||
--r-link-color: #e7ad52;
|
||||
--r-link-color-dark: #d08a1d;
|
||||
--r-link-color-hover: #f3d7ac;
|
||||
--r-selection-background-color: #e7ad52;
|
||||
--r-selection-color: #fff;
|
||||
}
|
||||
|
||||
.reveal-viewport {
|
||||
background: #111;
|
||||
background-color: #111; }
|
||||
background-color: var(--r-background-color);
|
||||
}
|
||||
|
||||
.reveal {
|
||||
font-family: "Open Sans", sans-serif;
|
||||
font-size: 40px;
|
||||
font-family: var(--r-main-font);
|
||||
font-size: var(--r-main-font-size);
|
||||
font-weight: normal;
|
||||
color: #eee; }
|
||||
color: var(--r-main-color);
|
||||
}
|
||||
|
||||
.reveal ::selection {
|
||||
color: #fff;
|
||||
background: #e7ad52;
|
||||
text-shadow: none; }
|
||||
color: var(--r-selection-color);
|
||||
background: var(--r-selection-background-color);
|
||||
text-shadow: none;
|
||||
}
|
||||
|
||||
.reveal ::-moz-selection {
|
||||
color: #fff;
|
||||
background: #e7ad52;
|
||||
text-shadow: none; }
|
||||
color: var(--r-selection-color);
|
||||
background: var(--r-selection-background-color);
|
||||
text-shadow: none;
|
||||
}
|
||||
|
||||
.reveal .slides section,
|
||||
.reveal .slides section > section {
|
||||
line-height: 1.3;
|
||||
font-weight: inherit; }
|
||||
font-weight: inherit;
|
||||
}
|
||||
|
||||
/*********************************************
|
||||
* HEADERS
|
||||
@@ -70,37 +78,44 @@ section.has-light-background, section.has-light-background h1, section.has-light
|
||||
.reveal h4,
|
||||
.reveal h5,
|
||||
.reveal h6 {
|
||||
margin: 0 0 20px 0;
|
||||
color: #eee;
|
||||
font-family: "Montserrat", Impact, sans-serif;
|
||||
font-weight: normal;
|
||||
line-height: 1.2;
|
||||
letter-spacing: -0.03em;
|
||||
text-transform: none;
|
||||
text-shadow: none;
|
||||
word-wrap: break-word; }
|
||||
margin: var(--r-heading-margin);
|
||||
color: var(--r-heading-color);
|
||||
font-family: var(--r-heading-font);
|
||||
font-weight: var(--r-heading-font-weight);
|
||||
line-height: var(--r-heading-line-height);
|
||||
letter-spacing: var(--r-heading-letter-spacing);
|
||||
text-transform: var(--r-heading-text-transform);
|
||||
text-shadow: var(--r-heading-text-shadow);
|
||||
word-wrap: break-word;
|
||||
}
|
||||
|
||||
.reveal h1 {
|
||||
font-size: 3.77em; }
|
||||
font-size: var(--r-heading1-size);
|
||||
}
|
||||
|
||||
.reveal h2 {
|
||||
font-size: 2.11em; }
|
||||
font-size: var(--r-heading2-size);
|
||||
}
|
||||
|
||||
.reveal h3 {
|
||||
font-size: 1.55em; }
|
||||
font-size: var(--r-heading3-size);
|
||||
}
|
||||
|
||||
.reveal h4 {
|
||||
font-size: 1em; }
|
||||
font-size: var(--r-heading4-size);
|
||||
}
|
||||
|
||||
.reveal h1 {
|
||||
text-shadow: none; }
|
||||
text-shadow: var(--r-heading1-text-shadow);
|
||||
}
|
||||
|
||||
/*********************************************
|
||||
* OTHER
|
||||
*********************************************/
|
||||
.reveal p {
|
||||
margin: 20px 0;
|
||||
line-height: 1.3; }
|
||||
margin: var(--r-block-margin) 0;
|
||||
line-height: 1.3;
|
||||
}
|
||||
|
||||
/* Remove trailing margins after titles */
|
||||
.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 h5:last-child,
|
||||
.reveal h6:last-child {
|
||||
margin-bottom: 0; }
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
/* Ensure certain elements are never larger than the slide itself */
|
||||
.reveal img,
|
||||
.reveal video,
|
||||
.reveal iframe {
|
||||
max-width: 95%;
|
||||
max-height: 95%; }
|
||||
max-height: 95%;
|
||||
}
|
||||
|
||||
.reveal strong,
|
||||
.reveal b {
|
||||
font-weight: bold; }
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.reveal em {
|
||||
font-style: italic; }
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.reveal ol,
|
||||
.reveal dl,
|
||||
.reveal ul {
|
||||
display: inline-block;
|
||||
text-align: left;
|
||||
margin: 0 0 0 1em; }
|
||||
margin: 0 0 0 1em;
|
||||
}
|
||||
|
||||
.reveal ol {
|
||||
list-style-type: decimal; }
|
||||
list-style-type: decimal;
|
||||
}
|
||||
|
||||
.reveal ul {
|
||||
list-style-type: disc; }
|
||||
list-style-type: disc;
|
||||
}
|
||||
|
||||
.reveal ul ul {
|
||||
list-style-type: square; }
|
||||
list-style-type: square;
|
||||
}
|
||||
|
||||
.reveal ul ul ul {
|
||||
list-style-type: circle; }
|
||||
list-style-type: circle;
|
||||
}
|
||||
|
||||
.reveal ul ul,
|
||||
.reveal ul ol,
|
||||
.reveal ol ol,
|
||||
.reveal ol ul {
|
||||
display: block;
|
||||
margin-left: 40px; }
|
||||
margin-left: 40px;
|
||||
}
|
||||
|
||||
.reveal dt {
|
||||
font-weight: bold; }
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.reveal dd {
|
||||
margin-left: 40px; }
|
||||
margin-left: 40px;
|
||||
}
|
||||
|
||||
.reveal blockquote {
|
||||
display: block;
|
||||
position: relative;
|
||||
width: 70%;
|
||||
margin: 20px auto;
|
||||
margin: var(--r-block-margin) auto;
|
||||
padding: 5px;
|
||||
font-style: italic;
|
||||
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:last-child {
|
||||
display: inline-block; }
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.reveal q {
|
||||
font-style: italic; }
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.reveal pre {
|
||||
display: block;
|
||||
position: relative;
|
||||
width: 90%;
|
||||
margin: 20px auto;
|
||||
margin: var(--r-block-margin) auto;
|
||||
text-align: left;
|
||||
font-size: 0.55em;
|
||||
font-family: monospace;
|
||||
font-family: var(--r-code-font);
|
||||
line-height: 1.2em;
|
||||
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 {
|
||||
font-family: monospace;
|
||||
text-transform: none; }
|
||||
font-family: var(--r-code-font);
|
||||
text-transform: none;
|
||||
tab-size: 2;
|
||||
}
|
||||
|
||||
.reveal pre code {
|
||||
display: block;
|
||||
padding: 5px;
|
||||
overflow: auto;
|
||||
max-height: 400px;
|
||||
word-wrap: normal; }
|
||||
word-wrap: normal;
|
||||
}
|
||||
|
||||
.reveal .code-wrapper {
|
||||
white-space: normal;
|
||||
}
|
||||
|
||||
.reveal .code-wrapper code {
|
||||
white-space: pre;
|
||||
}
|
||||
|
||||
.reveal table {
|
||||
margin: auto;
|
||||
border-collapse: collapse;
|
||||
border-spacing: 0; }
|
||||
border-spacing: 0;
|
||||
}
|
||||
|
||||
.reveal table th {
|
||||
font-weight: bold; }
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.reveal table th,
|
||||
.reveal table td {
|
||||
text-align: left;
|
||||
padding: 0.2em 0.5em 0.2em 0.5em;
|
||||
border-bottom: 1px solid; }
|
||||
border-bottom: 1px solid;
|
||||
}
|
||||
|
||||
.reveal table th[align="center"],
|
||||
.reveal table td[align="center"] {
|
||||
text-align: center; }
|
||||
.reveal table th[align=center],
|
||||
.reveal table td[align=center] {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.reveal table th[align="right"],
|
||||
.reveal table td[align="right"] {
|
||||
text-align: right; }
|
||||
.reveal table th[align=right],
|
||||
.reveal table td[align=right] {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.reveal table tbody tr:last-child th,
|
||||
.reveal table tbody tr:last-child td {
|
||||
border-bottom: none; }
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.reveal sup {
|
||||
vertical-align: super;
|
||||
font-size: smaller; }
|
||||
font-size: smaller;
|
||||
}
|
||||
|
||||
.reveal sub {
|
||||
vertical-align: sub;
|
||||
font-size: smaller; }
|
||||
font-size: smaller;
|
||||
}
|
||||
|
||||
.reveal small {
|
||||
display: inline-block;
|
||||
font-size: 0.6em;
|
||||
line-height: 1.2em;
|
||||
vertical-align: top; }
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
.reveal small * {
|
||||
vertical-align: top; }
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
.reveal img {
|
||||
margin: 20px 0; }
|
||||
margin: var(--r-block-margin) 0;
|
||||
}
|
||||
|
||||
/*********************************************
|
||||
* LINKS
|
||||
*********************************************/
|
||||
.reveal a {
|
||||
color: #e7ad52;
|
||||
color: var(--r-link-color);
|
||||
text-decoration: none;
|
||||
transition: color .15s ease; }
|
||||
transition: color 0.15s ease;
|
||||
}
|
||||
|
||||
.reveal a:hover {
|
||||
color: #f3d7ac;
|
||||
color: var(--r-link-color-hover);
|
||||
text-shadow: none;
|
||||
border: none; }
|
||||
border: none;
|
||||
}
|
||||
|
||||
.reveal .roll span:after {
|
||||
color: #fff;
|
||||
background: #d08a1d; }
|
||||
background: var(--r-link-color-dark);
|
||||
}
|
||||
|
||||
/*********************************************
|
||||
* Frame helper
|
||||
*********************************************/
|
||||
.reveal .r-frame {
|
||||
border: 4px solid #eee;
|
||||
box-shadow: 0 0 10px rgba(0, 0, 0, 0.15); }
|
||||
border: 4px solid var(--r-main-color);
|
||||
box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
|
||||
.reveal a .r-frame {
|
||||
transition: all .15s linear; }
|
||||
transition: all 0.15s linear;
|
||||
}
|
||||
|
||||
.reveal a:hover .r-frame {
|
||||
border-color: #e7ad52;
|
||||
box-shadow: 0 0 20px rgba(0, 0, 0, 0.55); }
|
||||
border-color: var(--r-link-color);
|
||||
box-shadow: 0 0 20px rgba(0, 0, 0, 0.55);
|
||||
}
|
||||
|
||||
/*********************************************
|
||||
* NAVIGATION CONTROLS
|
||||
*********************************************/
|
||||
.reveal .controls {
|
||||
color: #e7ad52; }
|
||||
color: var(--r-link-color);
|
||||
}
|
||||
|
||||
/*********************************************
|
||||
* PROGRESS BAR
|
||||
*********************************************/
|
||||
.reveal .progress {
|
||||
background: rgba(0, 0, 0, 0.2);
|
||||
color: #e7ad52; }
|
||||
color: var(--r-link-color);
|
||||
}
|
||||
|
||||
/*********************************************
|
||||
* PRINT BACKGROUND
|
||||
*********************************************/
|
||||
@media print {
|
||||
.backgrounds {
|
||||
background-color: #111; } }
|
||||
background-color: var(--r-background-color);
|
||||
}
|
||||
}
|
||||
+166
-102
@@ -5,63 +5,72 @@
|
||||
* This theme is Copyright (C) 2012-2013 Owen Versteeg, http://owenversteeg.com - it is MIT licensed.
|
||||
*/
|
||||
.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 {
|
||||
color: #fff; }
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
/*********************************************
|
||||
* GLOBAL STYLES
|
||||
*********************************************/
|
||||
:root {
|
||||
--background-color: #F0F1EB;
|
||||
--main-font: Palatino Linotype, Book Antiqua, Palatino, FreeSerif, serif;
|
||||
--main-font-size: 40px;
|
||||
--main-color: #000;
|
||||
--block-margin: 20px;
|
||||
--heading-margin: 0 0 20px 0;
|
||||
--heading-font: Palatino Linotype, Book Antiqua, Palatino, FreeSerif, serif;
|
||||
--heading-color: #383D3D;
|
||||
--heading-line-height: 1.2;
|
||||
--heading-letter-spacing: normal;
|
||||
--heading-text-transform: none;
|
||||
--heading-text-shadow: none;
|
||||
--heading-font-weight: normal;
|
||||
--heading1-text-shadow: none;
|
||||
--heading1-size: 3.77em;
|
||||
--heading2-size: 2.11em;
|
||||
--heading3-size: 1.55em;
|
||||
--heading4-size: 1em;
|
||||
--code-font: monospace;
|
||||
--link-color: #51483D;
|
||||
--link-color-hover: #8b7c69;
|
||||
--selection-background-color: #26351C;
|
||||
--selection-color: #fff; }
|
||||
--r-background-color: #F0F1EB;
|
||||
--r-main-font: Palatino Linotype, Book Antiqua, Palatino, FreeSerif, serif;
|
||||
--r-main-font-size: 40px;
|
||||
--r-main-color: #000;
|
||||
--r-block-margin: 20px;
|
||||
--r-heading-margin: 0 0 20px 0;
|
||||
--r-heading-font: Palatino Linotype, Book Antiqua, Palatino, FreeSerif, serif;
|
||||
--r-heading-color: #383D3D;
|
||||
--r-heading-line-height: 1.2;
|
||||
--r-heading-letter-spacing: normal;
|
||||
--r-heading-text-transform: none;
|
||||
--r-heading-text-shadow: none;
|
||||
--r-heading-font-weight: normal;
|
||||
--r-heading1-text-shadow: none;
|
||||
--r-heading1-size: 3.77em;
|
||||
--r-heading2-size: 2.11em;
|
||||
--r-heading3-size: 1.55em;
|
||||
--r-heading4-size: 1em;
|
||||
--r-code-font: monospace;
|
||||
--r-link-color: #51483D;
|
||||
--r-link-color-dark: #25211c;
|
||||
--r-link-color-hover: #8b7c69;
|
||||
--r-selection-background-color: #26351C;
|
||||
--r-selection-color: #fff;
|
||||
}
|
||||
|
||||
.reveal-viewport {
|
||||
background: #F0F1EB;
|
||||
background-color: #F0F1EB; }
|
||||
background-color: var(--r-background-color);
|
||||
}
|
||||
|
||||
.reveal {
|
||||
font-family: "Palatino Linotype", "Book Antiqua", Palatino, FreeSerif, serif;
|
||||
font-size: 40px;
|
||||
font-family: var(--r-main-font);
|
||||
font-size: var(--r-main-font-size);
|
||||
font-weight: normal;
|
||||
color: #000; }
|
||||
color: var(--r-main-color);
|
||||
}
|
||||
|
||||
.reveal ::selection {
|
||||
color: #fff;
|
||||
background: #26351C;
|
||||
text-shadow: none; }
|
||||
color: var(--r-selection-color);
|
||||
background: var(--r-selection-background-color);
|
||||
text-shadow: none;
|
||||
}
|
||||
|
||||
.reveal ::-moz-selection {
|
||||
color: #fff;
|
||||
background: #26351C;
|
||||
text-shadow: none; }
|
||||
color: var(--r-selection-color);
|
||||
background: var(--r-selection-background-color);
|
||||
text-shadow: none;
|
||||
}
|
||||
|
||||
.reveal .slides section,
|
||||
.reveal .slides section > section {
|
||||
line-height: 1.3;
|
||||
font-weight: inherit; }
|
||||
font-weight: inherit;
|
||||
}
|
||||
|
||||
/*********************************************
|
||||
* HEADERS
|
||||
@@ -72,37 +81,44 @@ section.has-dark-background, section.has-dark-background h1, section.has-dark-ba
|
||||
.reveal h4,
|
||||
.reveal h5,
|
||||
.reveal h6 {
|
||||
margin: 0 0 20px 0;
|
||||
color: #383D3D;
|
||||
font-family: "Palatino Linotype", "Book Antiqua", Palatino, FreeSerif, serif;
|
||||
font-weight: normal;
|
||||
line-height: 1.2;
|
||||
letter-spacing: normal;
|
||||
text-transform: none;
|
||||
text-shadow: none;
|
||||
word-wrap: break-word; }
|
||||
margin: var(--r-heading-margin);
|
||||
color: var(--r-heading-color);
|
||||
font-family: var(--r-heading-font);
|
||||
font-weight: var(--r-heading-font-weight);
|
||||
line-height: var(--r-heading-line-height);
|
||||
letter-spacing: var(--r-heading-letter-spacing);
|
||||
text-transform: var(--r-heading-text-transform);
|
||||
text-shadow: var(--r-heading-text-shadow);
|
||||
word-wrap: break-word;
|
||||
}
|
||||
|
||||
.reveal h1 {
|
||||
font-size: 3.77em; }
|
||||
font-size: var(--r-heading1-size);
|
||||
}
|
||||
|
||||
.reveal h2 {
|
||||
font-size: 2.11em; }
|
||||
font-size: var(--r-heading2-size);
|
||||
}
|
||||
|
||||
.reveal h3 {
|
||||
font-size: 1.55em; }
|
||||
font-size: var(--r-heading3-size);
|
||||
}
|
||||
|
||||
.reveal h4 {
|
||||
font-size: 1em; }
|
||||
font-size: var(--r-heading4-size);
|
||||
}
|
||||
|
||||
.reveal h1 {
|
||||
text-shadow: none; }
|
||||
text-shadow: var(--r-heading1-text-shadow);
|
||||
}
|
||||
|
||||
/*********************************************
|
||||
* OTHER
|
||||
*********************************************/
|
||||
.reveal p {
|
||||
margin: 20px 0;
|
||||
line-height: 1.3; }
|
||||
margin: var(--r-block-margin) 0;
|
||||
line-height: 1.3;
|
||||
}
|
||||
|
||||
/* Remove trailing margins after titles */
|
||||
.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 h5:last-child,
|
||||
.reveal h6:last-child {
|
||||
margin-bottom: 0; }
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
/* Ensure certain elements are never larger than the slide itself */
|
||||
.reveal img,
|
||||
.reveal video,
|
||||
.reveal iframe {
|
||||
max-width: 95%;
|
||||
max-height: 95%; }
|
||||
max-height: 95%;
|
||||
}
|
||||
|
||||
.reveal strong,
|
||||
.reveal b {
|
||||
font-weight: bold; }
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.reveal em {
|
||||
font-style: italic; }
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.reveal ol,
|
||||
.reveal dl,
|
||||
.reveal ul {
|
||||
display: inline-block;
|
||||
text-align: left;
|
||||
margin: 0 0 0 1em; }
|
||||
margin: 0 0 0 1em;
|
||||
}
|
||||
|
||||
.reveal ol {
|
||||
list-style-type: decimal; }
|
||||
list-style-type: decimal;
|
||||
}
|
||||
|
||||
.reveal ul {
|
||||
list-style-type: disc; }
|
||||
list-style-type: disc;
|
||||
}
|
||||
|
||||
.reveal ul ul {
|
||||
list-style-type: square; }
|
||||
list-style-type: square;
|
||||
}
|
||||
|
||||
.reveal ul ul ul {
|
||||
list-style-type: circle; }
|
||||
list-style-type: circle;
|
||||
}
|
||||
|
||||
.reveal ul ul,
|
||||
.reveal ul ol,
|
||||
.reveal ol ol,
|
||||
.reveal ol ul {
|
||||
display: block;
|
||||
margin-left: 40px; }
|
||||
margin-left: 40px;
|
||||
}
|
||||
|
||||
.reveal dt {
|
||||
font-weight: bold; }
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.reveal dd {
|
||||
margin-left: 40px; }
|
||||
margin-left: 40px;
|
||||
}
|
||||
|
||||
.reveal blockquote {
|
||||
display: block;
|
||||
position: relative;
|
||||
width: 70%;
|
||||
margin: 20px auto;
|
||||
margin: var(--r-block-margin) auto;
|
||||
padding: 5px;
|
||||
font-style: italic;
|
||||
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:last-child {
|
||||
display: inline-block; }
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.reveal q {
|
||||
font-style: italic; }
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.reveal pre {
|
||||
display: block;
|
||||
position: relative;
|
||||
width: 90%;
|
||||
margin: 20px auto;
|
||||
margin: var(--r-block-margin) auto;
|
||||
text-align: left;
|
||||
font-size: 0.55em;
|
||||
font-family: monospace;
|
||||
font-family: var(--r-code-font);
|
||||
line-height: 1.2em;
|
||||
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 {
|
||||
font-family: monospace;
|
||||
text-transform: none; }
|
||||
font-family: var(--r-code-font);
|
||||
text-transform: none;
|
||||
tab-size: 2;
|
||||
}
|
||||
|
||||
.reveal pre code {
|
||||
display: block;
|
||||
padding: 5px;
|
||||
overflow: auto;
|
||||
max-height: 400px;
|
||||
word-wrap: normal; }
|
||||
word-wrap: normal;
|
||||
}
|
||||
|
||||
.reveal .code-wrapper {
|
||||
white-space: normal;
|
||||
}
|
||||
|
||||
.reveal .code-wrapper code {
|
||||
white-space: pre;
|
||||
}
|
||||
|
||||
.reveal table {
|
||||
margin: auto;
|
||||
border-collapse: collapse;
|
||||
border-spacing: 0; }
|
||||
border-spacing: 0;
|
||||
}
|
||||
|
||||
.reveal table th {
|
||||
font-weight: bold; }
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.reveal table th,
|
||||
.reveal table td {
|
||||
text-align: left;
|
||||
padding: 0.2em 0.5em 0.2em 0.5em;
|
||||
border-bottom: 1px solid; }
|
||||
border-bottom: 1px solid;
|
||||
}
|
||||
|
||||
.reveal table th[align="center"],
|
||||
.reveal table td[align="center"] {
|
||||
text-align: center; }
|
||||
.reveal table th[align=center],
|
||||
.reveal table td[align=center] {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.reveal table th[align="right"],
|
||||
.reveal table td[align="right"] {
|
||||
text-align: right; }
|
||||
.reveal table th[align=right],
|
||||
.reveal table td[align=right] {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.reveal table tbody tr:last-child th,
|
||||
.reveal table tbody tr:last-child td {
|
||||
border-bottom: none; }
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.reveal sup {
|
||||
vertical-align: super;
|
||||
font-size: smaller; }
|
||||
font-size: smaller;
|
||||
}
|
||||
|
||||
.reveal sub {
|
||||
vertical-align: sub;
|
||||
font-size: smaller; }
|
||||
font-size: smaller;
|
||||
}
|
||||
|
||||
.reveal small {
|
||||
display: inline-block;
|
||||
font-size: 0.6em;
|
||||
line-height: 1.2em;
|
||||
vertical-align: top; }
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
.reveal small * {
|
||||
vertical-align: top; }
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
.reveal img {
|
||||
margin: 20px 0; }
|
||||
margin: var(--r-block-margin) 0;
|
||||
}
|
||||
|
||||
/*********************************************
|
||||
* LINKS
|
||||
*********************************************/
|
||||
.reveal a {
|
||||
color: #51483D;
|
||||
color: var(--r-link-color);
|
||||
text-decoration: none;
|
||||
transition: color .15s ease; }
|
||||
transition: color 0.15s ease;
|
||||
}
|
||||
|
||||
.reveal a:hover {
|
||||
color: #8b7c69;
|
||||
color: var(--r-link-color-hover);
|
||||
text-shadow: none;
|
||||
border: none; }
|
||||
border: none;
|
||||
}
|
||||
|
||||
.reveal .roll span:after {
|
||||
color: #fff;
|
||||
background: #25211c; }
|
||||
background: var(--r-link-color-dark);
|
||||
}
|
||||
|
||||
/*********************************************
|
||||
* Frame helper
|
||||
*********************************************/
|
||||
.reveal .r-frame {
|
||||
border: 4px solid #000;
|
||||
box-shadow: 0 0 10px rgba(0, 0, 0, 0.15); }
|
||||
border: 4px solid var(--r-main-color);
|
||||
box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
|
||||
.reveal a .r-frame {
|
||||
transition: all .15s linear; }
|
||||
transition: all 0.15s linear;
|
||||
}
|
||||
|
||||
.reveal a:hover .r-frame {
|
||||
border-color: #51483D;
|
||||
box-shadow: 0 0 20px rgba(0, 0, 0, 0.55); }
|
||||
border-color: var(--r-link-color);
|
||||
box-shadow: 0 0 20px rgba(0, 0, 0, 0.55);
|
||||
}
|
||||
|
||||
/*********************************************
|
||||
* NAVIGATION CONTROLS
|
||||
*********************************************/
|
||||
.reveal .controls {
|
||||
color: #51483D; }
|
||||
color: var(--r-link-color);
|
||||
}
|
||||
|
||||
/*********************************************
|
||||
* PROGRESS BAR
|
||||
*********************************************/
|
||||
.reveal .progress {
|
||||
background: rgba(0, 0, 0, 0.2);
|
||||
color: #51483D; }
|
||||
color: var(--r-link-color);
|
||||
}
|
||||
|
||||
/*********************************************
|
||||
* PRINT BACKGROUND
|
||||
*********************************************/
|
||||
@media print {
|
||||
.backgrounds {
|
||||
background-color: #F0F1EB; } }
|
||||
background-color: var(--r-background-color);
|
||||
}
|
||||
}
|
||||
+164
-101
@@ -8,60 +8,68 @@
|
||||
@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);
|
||||
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
|
||||
*********************************************/
|
||||
:root {
|
||||
--background-color: #fff;
|
||||
--main-font: Lato, sans-serif;
|
||||
--main-font-size: 40px;
|
||||
--main-color: #000;
|
||||
--block-margin: 20px;
|
||||
--heading-margin: 0 0 20px 0;
|
||||
--heading-font: News Cycle, Impact, sans-serif;
|
||||
--heading-color: #000;
|
||||
--heading-line-height: 1.2;
|
||||
--heading-letter-spacing: normal;
|
||||
--heading-text-transform: none;
|
||||
--heading-text-shadow: none;
|
||||
--heading-font-weight: normal;
|
||||
--heading1-text-shadow: none;
|
||||
--heading1-size: 3.77em;
|
||||
--heading2-size: 2.11em;
|
||||
--heading3-size: 1.55em;
|
||||
--heading4-size: 1em;
|
||||
--code-font: monospace;
|
||||
--link-color: #00008B;
|
||||
--link-color-hover: #0000f1;
|
||||
--selection-background-color: rgba(0, 0, 0, 0.99);
|
||||
--selection-color: #fff; }
|
||||
--r-background-color: #fff;
|
||||
--r-main-font: Lato, sans-serif;
|
||||
--r-main-font-size: 40px;
|
||||
--r-main-color: #000;
|
||||
--r-block-margin: 20px;
|
||||
--r-heading-margin: 0 0 20px 0;
|
||||
--r-heading-font: News Cycle, Impact, sans-serif;
|
||||
--r-heading-color: #000;
|
||||
--r-heading-line-height: 1.2;
|
||||
--r-heading-letter-spacing: normal;
|
||||
--r-heading-text-transform: none;
|
||||
--r-heading-text-shadow: none;
|
||||
--r-heading-font-weight: normal;
|
||||
--r-heading1-text-shadow: none;
|
||||
--r-heading1-size: 3.77em;
|
||||
--r-heading2-size: 2.11em;
|
||||
--r-heading3-size: 1.55em;
|
||||
--r-heading4-size: 1em;
|
||||
--r-code-font: monospace;
|
||||
--r-link-color: #00008B;
|
||||
--r-link-color-dark: #00003f;
|
||||
--r-link-color-hover: #0000f1;
|
||||
--r-selection-background-color: rgba(0, 0, 0, 0.99);
|
||||
--r-selection-color: #fff;
|
||||
}
|
||||
|
||||
.reveal-viewport {
|
||||
background: #fff;
|
||||
background-color: #fff; }
|
||||
background-color: var(--r-background-color);
|
||||
}
|
||||
|
||||
.reveal {
|
||||
font-family: "Lato", sans-serif;
|
||||
font-size: 40px;
|
||||
font-family: var(--r-main-font);
|
||||
font-size: var(--r-main-font-size);
|
||||
font-weight: normal;
|
||||
color: #000; }
|
||||
color: var(--r-main-color);
|
||||
}
|
||||
|
||||
.reveal ::selection {
|
||||
color: #fff;
|
||||
background: rgba(0, 0, 0, 0.99);
|
||||
text-shadow: none; }
|
||||
color: var(--r-selection-color);
|
||||
background: var(--r-selection-background-color);
|
||||
text-shadow: none;
|
||||
}
|
||||
|
||||
.reveal ::-moz-selection {
|
||||
color: #fff;
|
||||
background: rgba(0, 0, 0, 0.99);
|
||||
text-shadow: none; }
|
||||
color: var(--r-selection-color);
|
||||
background: var(--r-selection-background-color);
|
||||
text-shadow: none;
|
||||
}
|
||||
|
||||
.reveal .slides section,
|
||||
.reveal .slides section > section {
|
||||
line-height: 1.3;
|
||||
font-weight: inherit; }
|
||||
font-weight: inherit;
|
||||
}
|
||||
|
||||
/*********************************************
|
||||
* HEADERS
|
||||
@@ -72,37 +80,44 @@ section.has-dark-background, section.has-dark-background h1, section.has-dark-ba
|
||||
.reveal h4,
|
||||
.reveal h5,
|
||||
.reveal h6 {
|
||||
margin: 0 0 20px 0;
|
||||
color: #000;
|
||||
font-family: "News Cycle", Impact, sans-serif;
|
||||
font-weight: normal;
|
||||
line-height: 1.2;
|
||||
letter-spacing: normal;
|
||||
text-transform: none;
|
||||
text-shadow: none;
|
||||
word-wrap: break-word; }
|
||||
margin: var(--r-heading-margin);
|
||||
color: var(--r-heading-color);
|
||||
font-family: var(--r-heading-font);
|
||||
font-weight: var(--r-heading-font-weight);
|
||||
line-height: var(--r-heading-line-height);
|
||||
letter-spacing: var(--r-heading-letter-spacing);
|
||||
text-transform: var(--r-heading-text-transform);
|
||||
text-shadow: var(--r-heading-text-shadow);
|
||||
word-wrap: break-word;
|
||||
}
|
||||
|
||||
.reveal h1 {
|
||||
font-size: 3.77em; }
|
||||
font-size: var(--r-heading1-size);
|
||||
}
|
||||
|
||||
.reveal h2 {
|
||||
font-size: 2.11em; }
|
||||
font-size: var(--r-heading2-size);
|
||||
}
|
||||
|
||||
.reveal h3 {
|
||||
font-size: 1.55em; }
|
||||
font-size: var(--r-heading3-size);
|
||||
}
|
||||
|
||||
.reveal h4 {
|
||||
font-size: 1em; }
|
||||
font-size: var(--r-heading4-size);
|
||||
}
|
||||
|
||||
.reveal h1 {
|
||||
text-shadow: none; }
|
||||
text-shadow: var(--r-heading1-text-shadow);
|
||||
}
|
||||
|
||||
/*********************************************
|
||||
* OTHER
|
||||
*********************************************/
|
||||
.reveal p {
|
||||
margin: 20px 0;
|
||||
line-height: 1.3; }
|
||||
margin: var(--r-block-margin) 0;
|
||||
line-height: 1.3;
|
||||
}
|
||||
|
||||
/* Remove trailing margins after titles */
|
||||
.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 h5:last-child,
|
||||
.reveal h6:last-child {
|
||||
margin-bottom: 0; }
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
/* Ensure certain elements are never larger than the slide itself */
|
||||
.reveal img,
|
||||
.reveal video,
|
||||
.reveal iframe {
|
||||
max-width: 95%;
|
||||
max-height: 95%; }
|
||||
max-height: 95%;
|
||||
}
|
||||
|
||||
.reveal strong,
|
||||
.reveal b {
|
||||
font-weight: bold; }
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.reveal em {
|
||||
font-style: italic; }
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.reveal ol,
|
||||
.reveal dl,
|
||||
.reveal ul {
|
||||
display: inline-block;
|
||||
text-align: left;
|
||||
margin: 0 0 0 1em; }
|
||||
margin: 0 0 0 1em;
|
||||
}
|
||||
|
||||
.reveal ol {
|
||||
list-style-type: decimal; }
|
||||
list-style-type: decimal;
|
||||
}
|
||||
|
||||
.reveal ul {
|
||||
list-style-type: disc; }
|
||||
list-style-type: disc;
|
||||
}
|
||||
|
||||
.reveal ul ul {
|
||||
list-style-type: square; }
|
||||
list-style-type: square;
|
||||
}
|
||||
|
||||
.reveal ul ul ul {
|
||||
list-style-type: circle; }
|
||||
list-style-type: circle;
|
||||
}
|
||||
|
||||
.reveal ul ul,
|
||||
.reveal ul ol,
|
||||
.reveal ol ol,
|
||||
.reveal ol ul {
|
||||
display: block;
|
||||
margin-left: 40px; }
|
||||
margin-left: 40px;
|
||||
}
|
||||
|
||||
.reveal dt {
|
||||
font-weight: bold; }
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.reveal dd {
|
||||
margin-left: 40px; }
|
||||
margin-left: 40px;
|
||||
}
|
||||
|
||||
.reveal blockquote {
|
||||
display: block;
|
||||
position: relative;
|
||||
width: 70%;
|
||||
margin: 20px auto;
|
||||
margin: var(--r-block-margin) auto;
|
||||
padding: 5px;
|
||||
font-style: italic;
|
||||
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:last-child {
|
||||
display: inline-block; }
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.reveal q {
|
||||
font-style: italic; }
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.reveal pre {
|
||||
display: block;
|
||||
position: relative;
|
||||
width: 90%;
|
||||
margin: 20px auto;
|
||||
margin: var(--r-block-margin) auto;
|
||||
text-align: left;
|
||||
font-size: 0.55em;
|
||||
font-family: monospace;
|
||||
font-family: var(--r-code-font);
|
||||
line-height: 1.2em;
|
||||
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 {
|
||||
font-family: monospace;
|
||||
text-transform: none; }
|
||||
font-family: var(--r-code-font);
|
||||
text-transform: none;
|
||||
tab-size: 2;
|
||||
}
|
||||
|
||||
.reveal pre code {
|
||||
display: block;
|
||||
padding: 5px;
|
||||
overflow: auto;
|
||||
max-height: 400px;
|
||||
word-wrap: normal; }
|
||||
word-wrap: normal;
|
||||
}
|
||||
|
||||
.reveal .code-wrapper {
|
||||
white-space: normal;
|
||||
}
|
||||
|
||||
.reveal .code-wrapper code {
|
||||
white-space: pre;
|
||||
}
|
||||
|
||||
.reveal table {
|
||||
margin: auto;
|
||||
border-collapse: collapse;
|
||||
border-spacing: 0; }
|
||||
border-spacing: 0;
|
||||
}
|
||||
|
||||
.reveal table th {
|
||||
font-weight: bold; }
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.reveal table th,
|
||||
.reveal table td {
|
||||
text-align: left;
|
||||
padding: 0.2em 0.5em 0.2em 0.5em;
|
||||
border-bottom: 1px solid; }
|
||||
border-bottom: 1px solid;
|
||||
}
|
||||
|
||||
.reveal table th[align="center"],
|
||||
.reveal table td[align="center"] {
|
||||
text-align: center; }
|
||||
.reveal table th[align=center],
|
||||
.reveal table td[align=center] {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.reveal table th[align="right"],
|
||||
.reveal table td[align="right"] {
|
||||
text-align: right; }
|
||||
.reveal table th[align=right],
|
||||
.reveal table td[align=right] {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.reveal table tbody tr:last-child th,
|
||||
.reveal table tbody tr:last-child td {
|
||||
border-bottom: none; }
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.reveal sup {
|
||||
vertical-align: super;
|
||||
font-size: smaller; }
|
||||
font-size: smaller;
|
||||
}
|
||||
|
||||
.reveal sub {
|
||||
vertical-align: sub;
|
||||
font-size: smaller; }
|
||||
font-size: smaller;
|
||||
}
|
||||
|
||||
.reveal small {
|
||||
display: inline-block;
|
||||
font-size: 0.6em;
|
||||
line-height: 1.2em;
|
||||
vertical-align: top; }
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
.reveal small * {
|
||||
vertical-align: top; }
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
.reveal img {
|
||||
margin: 20px 0; }
|
||||
margin: var(--r-block-margin) 0;
|
||||
}
|
||||
|
||||
/*********************************************
|
||||
* LINKS
|
||||
*********************************************/
|
||||
.reveal a {
|
||||
color: #00008B;
|
||||
color: var(--r-link-color);
|
||||
text-decoration: none;
|
||||
transition: color .15s ease; }
|
||||
transition: color 0.15s ease;
|
||||
}
|
||||
|
||||
.reveal a:hover {
|
||||
color: #0000f1;
|
||||
color: var(--r-link-color-hover);
|
||||
text-shadow: none;
|
||||
border: none; }
|
||||
border: none;
|
||||
}
|
||||
|
||||
.reveal .roll span:after {
|
||||
color: #fff;
|
||||
background: #00003f; }
|
||||
background: var(--r-link-color-dark);
|
||||
}
|
||||
|
||||
/*********************************************
|
||||
* Frame helper
|
||||
*********************************************/
|
||||
.reveal .r-frame {
|
||||
border: 4px solid #000;
|
||||
box-shadow: 0 0 10px rgba(0, 0, 0, 0.15); }
|
||||
border: 4px solid var(--r-main-color);
|
||||
box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
|
||||
.reveal a .r-frame {
|
||||
transition: all .15s linear; }
|
||||
transition: all 0.15s linear;
|
||||
}
|
||||
|
||||
.reveal a:hover .r-frame {
|
||||
border-color: #00008B;
|
||||
box-shadow: 0 0 20px rgba(0, 0, 0, 0.55); }
|
||||
border-color: var(--r-link-color);
|
||||
box-shadow: 0 0 20px rgba(0, 0, 0, 0.55);
|
||||
}
|
||||
|
||||
/*********************************************
|
||||
* NAVIGATION CONTROLS
|
||||
*********************************************/
|
||||
.reveal .controls {
|
||||
color: #00008B; }
|
||||
color: var(--r-link-color);
|
||||
}
|
||||
|
||||
/*********************************************
|
||||
* PROGRESS BAR
|
||||
*********************************************/
|
||||
.reveal .progress {
|
||||
background: rgba(0, 0, 0, 0.2);
|
||||
color: #00008B; }
|
||||
color: var(--r-link-color);
|
||||
}
|
||||
|
||||
/*********************************************
|
||||
* PRINT BACKGROUND
|
||||
*********************************************/
|
||||
@media print {
|
||||
.backgrounds {
|
||||
background-color: #fff; } }
|
||||
background-color: var(--r-background-color);
|
||||
}
|
||||
}
|
||||
Vendored
+166
-102
@@ -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=Open+Sans:400italic,700italic,400,700);
|
||||
.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 {
|
||||
color: #fff; }
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
/*********************************************
|
||||
* GLOBAL STYLES
|
||||
*********************************************/
|
||||
:root {
|
||||
--background-color: #f7fbfc;
|
||||
--main-font: Open Sans, sans-serif;
|
||||
--main-font-size: 40px;
|
||||
--main-color: #333;
|
||||
--block-margin: 20px;
|
||||
--heading-margin: 0 0 20px 0;
|
||||
--heading-font: Quicksand, sans-serif;
|
||||
--heading-color: #333;
|
||||
--heading-line-height: 1.2;
|
||||
--heading-letter-spacing: -0.08em;
|
||||
--heading-text-transform: uppercase;
|
||||
--heading-text-shadow: none;
|
||||
--heading-font-weight: normal;
|
||||
--heading1-text-shadow: none;
|
||||
--heading1-size: 3.77em;
|
||||
--heading2-size: 2.11em;
|
||||
--heading3-size: 1.55em;
|
||||
--heading4-size: 1em;
|
||||
--code-font: monospace;
|
||||
--link-color: #3b759e;
|
||||
--link-color-hover: #74a7cb;
|
||||
--selection-background-color: #134674;
|
||||
--selection-color: #fff; }
|
||||
--r-background-color: #f7fbfc;
|
||||
--r-main-font: Open Sans, sans-serif;
|
||||
--r-main-font-size: 40px;
|
||||
--r-main-color: #333;
|
||||
--r-block-margin: 20px;
|
||||
--r-heading-margin: 0 0 20px 0;
|
||||
--r-heading-font: Quicksand, sans-serif;
|
||||
--r-heading-color: #333;
|
||||
--r-heading-line-height: 1.2;
|
||||
--r-heading-letter-spacing: -0.08em;
|
||||
--r-heading-text-transform: uppercase;
|
||||
--r-heading-text-shadow: none;
|
||||
--r-heading-font-weight: normal;
|
||||
--r-heading1-text-shadow: none;
|
||||
--r-heading1-size: 3.77em;
|
||||
--r-heading2-size: 2.11em;
|
||||
--r-heading3-size: 1.55em;
|
||||
--r-heading4-size: 1em;
|
||||
--r-code-font: monospace;
|
||||
--r-link-color: #3b759e;
|
||||
--r-link-color-dark: #264c66;
|
||||
--r-link-color-hover: #74a7cb;
|
||||
--r-selection-background-color: #134674;
|
||||
--r-selection-color: #fff;
|
||||
}
|
||||
|
||||
.reveal-viewport {
|
||||
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: -ms-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 {
|
||||
font-family: "Open Sans", sans-serif;
|
||||
font-size: 40px;
|
||||
font-family: var(--r-main-font);
|
||||
font-size: var(--r-main-font-size);
|
||||
font-weight: normal;
|
||||
color: #333; }
|
||||
color: var(--r-main-color);
|
||||
}
|
||||
|
||||
.reveal ::selection {
|
||||
color: #fff;
|
||||
background: #134674;
|
||||
text-shadow: none; }
|
||||
color: var(--r-selection-color);
|
||||
background: var(--r-selection-background-color);
|
||||
text-shadow: none;
|
||||
}
|
||||
|
||||
.reveal ::-moz-selection {
|
||||
color: #fff;
|
||||
background: #134674;
|
||||
text-shadow: none; }
|
||||
color: var(--r-selection-color);
|
||||
background: var(--r-selection-background-color);
|
||||
text-shadow: none;
|
||||
}
|
||||
|
||||
.reveal .slides section,
|
||||
.reveal .slides section > section {
|
||||
line-height: 1.3;
|
||||
font-weight: inherit; }
|
||||
font-weight: inherit;
|
||||
}
|
||||
|
||||
/*********************************************
|
||||
* HEADERS
|
||||
@@ -79,37 +88,44 @@ section.has-dark-background, section.has-dark-background h1, section.has-dark-ba
|
||||
.reveal h4,
|
||||
.reveal h5,
|
||||
.reveal h6 {
|
||||
margin: 0 0 20px 0;
|
||||
color: #333;
|
||||
font-family: "Quicksand", sans-serif;
|
||||
font-weight: normal;
|
||||
line-height: 1.2;
|
||||
letter-spacing: -0.08em;
|
||||
text-transform: uppercase;
|
||||
text-shadow: none;
|
||||
word-wrap: break-word; }
|
||||
margin: var(--r-heading-margin);
|
||||
color: var(--r-heading-color);
|
||||
font-family: var(--r-heading-font);
|
||||
font-weight: var(--r-heading-font-weight);
|
||||
line-height: var(--r-heading-line-height);
|
||||
letter-spacing: var(--r-heading-letter-spacing);
|
||||
text-transform: var(--r-heading-text-transform);
|
||||
text-shadow: var(--r-heading-text-shadow);
|
||||
word-wrap: break-word;
|
||||
}
|
||||
|
||||
.reveal h1 {
|
||||
font-size: 3.77em; }
|
||||
font-size: var(--r-heading1-size);
|
||||
}
|
||||
|
||||
.reveal h2 {
|
||||
font-size: 2.11em; }
|
||||
font-size: var(--r-heading2-size);
|
||||
}
|
||||
|
||||
.reveal h3 {
|
||||
font-size: 1.55em; }
|
||||
font-size: var(--r-heading3-size);
|
||||
}
|
||||
|
||||
.reveal h4 {
|
||||
font-size: 1em; }
|
||||
font-size: var(--r-heading4-size);
|
||||
}
|
||||
|
||||
.reveal h1 {
|
||||
text-shadow: none; }
|
||||
text-shadow: var(--r-heading1-text-shadow);
|
||||
}
|
||||
|
||||
/*********************************************
|
||||
* OTHER
|
||||
*********************************************/
|
||||
.reveal p {
|
||||
margin: 20px 0;
|
||||
line-height: 1.3; }
|
||||
margin: var(--r-block-margin) 0;
|
||||
line-height: 1.3;
|
||||
}
|
||||
|
||||
/* Remove trailing margins after titles */
|
||||
.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 h5:last-child,
|
||||
.reveal h6:last-child {
|
||||
margin-bottom: 0; }
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
/* Ensure certain elements are never larger than the slide itself */
|
||||
.reveal img,
|
||||
.reveal video,
|
||||
.reveal iframe {
|
||||
max-width: 95%;
|
||||
max-height: 95%; }
|
||||
max-height: 95%;
|
||||
}
|
||||
|
||||
.reveal strong,
|
||||
.reveal b {
|
||||
font-weight: bold; }
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.reveal em {
|
||||
font-style: italic; }
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.reveal ol,
|
||||
.reveal dl,
|
||||
.reveal ul {
|
||||
display: inline-block;
|
||||
text-align: left;
|
||||
margin: 0 0 0 1em; }
|
||||
margin: 0 0 0 1em;
|
||||
}
|
||||
|
||||
.reveal ol {
|
||||
list-style-type: decimal; }
|
||||
list-style-type: decimal;
|
||||
}
|
||||
|
||||
.reveal ul {
|
||||
list-style-type: disc; }
|
||||
list-style-type: disc;
|
||||
}
|
||||
|
||||
.reveal ul ul {
|
||||
list-style-type: square; }
|
||||
list-style-type: square;
|
||||
}
|
||||
|
||||
.reveal ul ul ul {
|
||||
list-style-type: circle; }
|
||||
list-style-type: circle;
|
||||
}
|
||||
|
||||
.reveal ul ul,
|
||||
.reveal ul ol,
|
||||
.reveal ol ol,
|
||||
.reveal ol ul {
|
||||
display: block;
|
||||
margin-left: 40px; }
|
||||
margin-left: 40px;
|
||||
}
|
||||
|
||||
.reveal dt {
|
||||
font-weight: bold; }
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.reveal dd {
|
||||
margin-left: 40px; }
|
||||
margin-left: 40px;
|
||||
}
|
||||
|
||||
.reveal blockquote {
|
||||
display: block;
|
||||
position: relative;
|
||||
width: 70%;
|
||||
margin: 20px auto;
|
||||
margin: var(--r-block-margin) auto;
|
||||
padding: 5px;
|
||||
font-style: italic;
|
||||
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:last-child {
|
||||
display: inline-block; }
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.reveal q {
|
||||
font-style: italic; }
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.reveal pre {
|
||||
display: block;
|
||||
position: relative;
|
||||
width: 90%;
|
||||
margin: 20px auto;
|
||||
margin: var(--r-block-margin) auto;
|
||||
text-align: left;
|
||||
font-size: 0.55em;
|
||||
font-family: monospace;
|
||||
font-family: var(--r-code-font);
|
||||
line-height: 1.2em;
|
||||
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 {
|
||||
font-family: monospace;
|
||||
text-transform: none; }
|
||||
font-family: var(--r-code-font);
|
||||
text-transform: none;
|
||||
tab-size: 2;
|
||||
}
|
||||
|
||||
.reveal pre code {
|
||||
display: block;
|
||||
padding: 5px;
|
||||
overflow: auto;
|
||||
max-height: 400px;
|
||||
word-wrap: normal; }
|
||||
word-wrap: normal;
|
||||
}
|
||||
|
||||
.reveal .code-wrapper {
|
||||
white-space: normal;
|
||||
}
|
||||
|
||||
.reveal .code-wrapper code {
|
||||
white-space: pre;
|
||||
}
|
||||
|
||||
.reveal table {
|
||||
margin: auto;
|
||||
border-collapse: collapse;
|
||||
border-spacing: 0; }
|
||||
border-spacing: 0;
|
||||
}
|
||||
|
||||
.reveal table th {
|
||||
font-weight: bold; }
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.reveal table th,
|
||||
.reveal table td {
|
||||
text-align: left;
|
||||
padding: 0.2em 0.5em 0.2em 0.5em;
|
||||
border-bottom: 1px solid; }
|
||||
border-bottom: 1px solid;
|
||||
}
|
||||
|
||||
.reveal table th[align="center"],
|
||||
.reveal table td[align="center"] {
|
||||
text-align: center; }
|
||||
.reveal table th[align=center],
|
||||
.reveal table td[align=center] {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.reveal table th[align="right"],
|
||||
.reveal table td[align="right"] {
|
||||
text-align: right; }
|
||||
.reveal table th[align=right],
|
||||
.reveal table td[align=right] {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.reveal table tbody tr:last-child th,
|
||||
.reveal table tbody tr:last-child td {
|
||||
border-bottom: none; }
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.reveal sup {
|
||||
vertical-align: super;
|
||||
font-size: smaller; }
|
||||
font-size: smaller;
|
||||
}
|
||||
|
||||
.reveal sub {
|
||||
vertical-align: sub;
|
||||
font-size: smaller; }
|
||||
font-size: smaller;
|
||||
}
|
||||
|
||||
.reveal small {
|
||||
display: inline-block;
|
||||
font-size: 0.6em;
|
||||
line-height: 1.2em;
|
||||
vertical-align: top; }
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
.reveal small * {
|
||||
vertical-align: top; }
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
.reveal img {
|
||||
margin: 20px 0; }
|
||||
margin: var(--r-block-margin) 0;
|
||||
}
|
||||
|
||||
/*********************************************
|
||||
* LINKS
|
||||
*********************************************/
|
||||
.reveal a {
|
||||
color: #3b759e;
|
||||
color: var(--r-link-color);
|
||||
text-decoration: none;
|
||||
transition: color .15s ease; }
|
||||
transition: color 0.15s ease;
|
||||
}
|
||||
|
||||
.reveal a:hover {
|
||||
color: #74a7cb;
|
||||
color: var(--r-link-color-hover);
|
||||
text-shadow: none;
|
||||
border: none; }
|
||||
border: none;
|
||||
}
|
||||
|
||||
.reveal .roll span:after {
|
||||
color: #fff;
|
||||
background: #264c66; }
|
||||
background: var(--r-link-color-dark);
|
||||
}
|
||||
|
||||
/*********************************************
|
||||
* Frame helper
|
||||
*********************************************/
|
||||
.reveal .r-frame {
|
||||
border: 4px solid #333;
|
||||
box-shadow: 0 0 10px rgba(0, 0, 0, 0.15); }
|
||||
border: 4px solid var(--r-main-color);
|
||||
box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
|
||||
.reveal a .r-frame {
|
||||
transition: all .15s linear; }
|
||||
transition: all 0.15s linear;
|
||||
}
|
||||
|
||||
.reveal a:hover .r-frame {
|
||||
border-color: #3b759e;
|
||||
box-shadow: 0 0 20px rgba(0, 0, 0, 0.55); }
|
||||
border-color: var(--r-link-color);
|
||||
box-shadow: 0 0 20px rgba(0, 0, 0, 0.55);
|
||||
}
|
||||
|
||||
/*********************************************
|
||||
* NAVIGATION CONTROLS
|
||||
*********************************************/
|
||||
.reveal .controls {
|
||||
color: #3b759e; }
|
||||
color: var(--r-link-color);
|
||||
}
|
||||
|
||||
/*********************************************
|
||||
* PROGRESS BAR
|
||||
*********************************************/
|
||||
.reveal .progress {
|
||||
background: rgba(0, 0, 0, 0.2);
|
||||
color: #3b759e; }
|
||||
color: var(--r-link-color);
|
||||
}
|
||||
|
||||
/*********************************************
|
||||
* PRINT BACKGROUND
|
||||
*********************************************/
|
||||
@media print {
|
||||
.backgrounds {
|
||||
background-color: #f7fbfc; } }
|
||||
background-color: var(--r-background-color);
|
||||
}
|
||||
}
|
||||
+164
-101
@@ -9,60 +9,68 @@
|
||||
*/
|
||||
html * {
|
||||
color-profile: sRGB;
|
||||
rendering-intent: auto; }
|
||||
rendering-intent: auto;
|
||||
}
|
||||
|
||||
/*********************************************
|
||||
* GLOBAL STYLES
|
||||
*********************************************/
|
||||
:root {
|
||||
--background-color: #fdf6e3;
|
||||
--main-font: Lato, sans-serif;
|
||||
--main-font-size: 40px;
|
||||
--main-color: #657b83;
|
||||
--block-margin: 20px;
|
||||
--heading-margin: 0 0 20px 0;
|
||||
--heading-font: League Gothic, Impact, sans-serif;
|
||||
--heading-color: #586e75;
|
||||
--heading-line-height: 1.2;
|
||||
--heading-letter-spacing: normal;
|
||||
--heading-text-transform: uppercase;
|
||||
--heading-text-shadow: none;
|
||||
--heading-font-weight: normal;
|
||||
--heading1-text-shadow: none;
|
||||
--heading1-size: 3.77em;
|
||||
--heading2-size: 2.11em;
|
||||
--heading3-size: 1.55em;
|
||||
--heading4-size: 1em;
|
||||
--code-font: monospace;
|
||||
--link-color: #268bd2;
|
||||
--link-color-hover: #78b9e6;
|
||||
--selection-background-color: #d33682;
|
||||
--selection-color: #fff; }
|
||||
--r-background-color: #fdf6e3;
|
||||
--r-main-font: Lato, sans-serif;
|
||||
--r-main-font-size: 40px;
|
||||
--r-main-color: #657b83;
|
||||
--r-block-margin: 20px;
|
||||
--r-heading-margin: 0 0 20px 0;
|
||||
--r-heading-font: League Gothic, Impact, sans-serif;
|
||||
--r-heading-color: #586e75;
|
||||
--r-heading-line-height: 1.2;
|
||||
--r-heading-letter-spacing: normal;
|
||||
--r-heading-text-transform: uppercase;
|
||||
--r-heading-text-shadow: none;
|
||||
--r-heading-font-weight: normal;
|
||||
--r-heading1-text-shadow: none;
|
||||
--r-heading1-size: 3.77em;
|
||||
--r-heading2-size: 2.11em;
|
||||
--r-heading3-size: 1.55em;
|
||||
--r-heading4-size: 1em;
|
||||
--r-code-font: monospace;
|
||||
--r-link-color: #268bd2;
|
||||
--r-link-color-dark: #1a6091;
|
||||
--r-link-color-hover: #78b9e6;
|
||||
--r-selection-background-color: #d33682;
|
||||
--r-selection-color: #fff;
|
||||
}
|
||||
|
||||
.reveal-viewport {
|
||||
background: #fdf6e3;
|
||||
background-color: #fdf6e3; }
|
||||
background-color: var(--r-background-color);
|
||||
}
|
||||
|
||||
.reveal {
|
||||
font-family: "Lato", sans-serif;
|
||||
font-size: 40px;
|
||||
font-family: var(--r-main-font);
|
||||
font-size: var(--r-main-font-size);
|
||||
font-weight: normal;
|
||||
color: #657b83; }
|
||||
color: var(--r-main-color);
|
||||
}
|
||||
|
||||
.reveal ::selection {
|
||||
color: #fff;
|
||||
background: #d33682;
|
||||
text-shadow: none; }
|
||||
color: var(--r-selection-color);
|
||||
background: var(--r-selection-background-color);
|
||||
text-shadow: none;
|
||||
}
|
||||
|
||||
.reveal ::-moz-selection {
|
||||
color: #fff;
|
||||
background: #d33682;
|
||||
text-shadow: none; }
|
||||
color: var(--r-selection-color);
|
||||
background: var(--r-selection-background-color);
|
||||
text-shadow: none;
|
||||
}
|
||||
|
||||
.reveal .slides section,
|
||||
.reveal .slides section > section {
|
||||
line-height: 1.3;
|
||||
font-weight: inherit; }
|
||||
font-weight: inherit;
|
||||
}
|
||||
|
||||
/*********************************************
|
||||
* HEADERS
|
||||
@@ -73,37 +81,44 @@ html * {
|
||||
.reveal h4,
|
||||
.reveal h5,
|
||||
.reveal h6 {
|
||||
margin: 0 0 20px 0;
|
||||
color: #586e75;
|
||||
font-family: "League Gothic", Impact, sans-serif;
|
||||
font-weight: normal;
|
||||
line-height: 1.2;
|
||||
letter-spacing: normal;
|
||||
text-transform: uppercase;
|
||||
text-shadow: none;
|
||||
word-wrap: break-word; }
|
||||
margin: var(--r-heading-margin);
|
||||
color: var(--r-heading-color);
|
||||
font-family: var(--r-heading-font);
|
||||
font-weight: var(--r-heading-font-weight);
|
||||
line-height: var(--r-heading-line-height);
|
||||
letter-spacing: var(--r-heading-letter-spacing);
|
||||
text-transform: var(--r-heading-text-transform);
|
||||
text-shadow: var(--r-heading-text-shadow);
|
||||
word-wrap: break-word;
|
||||
}
|
||||
|
||||
.reveal h1 {
|
||||
font-size: 3.77em; }
|
||||
font-size: var(--r-heading1-size);
|
||||
}
|
||||
|
||||
.reveal h2 {
|
||||
font-size: 2.11em; }
|
||||
font-size: var(--r-heading2-size);
|
||||
}
|
||||
|
||||
.reveal h3 {
|
||||
font-size: 1.55em; }
|
||||
font-size: var(--r-heading3-size);
|
||||
}
|
||||
|
||||
.reveal h4 {
|
||||
font-size: 1em; }
|
||||
font-size: var(--r-heading4-size);
|
||||
}
|
||||
|
||||
.reveal h1 {
|
||||
text-shadow: none; }
|
||||
text-shadow: var(--r-heading1-text-shadow);
|
||||
}
|
||||
|
||||
/*********************************************
|
||||
* OTHER
|
||||
*********************************************/
|
||||
.reveal p {
|
||||
margin: 20px 0;
|
||||
line-height: 1.3; }
|
||||
margin: var(--r-block-margin) 0;
|
||||
line-height: 1.3;
|
||||
}
|
||||
|
||||
/* Remove trailing margins after titles */
|
||||
.reveal h1:last-child,
|
||||
@@ -112,187 +127,235 @@ html * {
|
||||
.reveal h4:last-child,
|
||||
.reveal h5:last-child,
|
||||
.reveal h6:last-child {
|
||||
margin-bottom: 0; }
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
/* Ensure certain elements are never larger than the slide itself */
|
||||
.reveal img,
|
||||
.reveal video,
|
||||
.reveal iframe {
|
||||
max-width: 95%;
|
||||
max-height: 95%; }
|
||||
max-height: 95%;
|
||||
}
|
||||
|
||||
.reveal strong,
|
||||
.reveal b {
|
||||
font-weight: bold; }
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.reveal em {
|
||||
font-style: italic; }
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.reveal ol,
|
||||
.reveal dl,
|
||||
.reveal ul {
|
||||
display: inline-block;
|
||||
text-align: left;
|
||||
margin: 0 0 0 1em; }
|
||||
margin: 0 0 0 1em;
|
||||
}
|
||||
|
||||
.reveal ol {
|
||||
list-style-type: decimal; }
|
||||
list-style-type: decimal;
|
||||
}
|
||||
|
||||
.reveal ul {
|
||||
list-style-type: disc; }
|
||||
list-style-type: disc;
|
||||
}
|
||||
|
||||
.reveal ul ul {
|
||||
list-style-type: square; }
|
||||
list-style-type: square;
|
||||
}
|
||||
|
||||
.reveal ul ul ul {
|
||||
list-style-type: circle; }
|
||||
list-style-type: circle;
|
||||
}
|
||||
|
||||
.reveal ul ul,
|
||||
.reveal ul ol,
|
||||
.reveal ol ol,
|
||||
.reveal ol ul {
|
||||
display: block;
|
||||
margin-left: 40px; }
|
||||
margin-left: 40px;
|
||||
}
|
||||
|
||||
.reveal dt {
|
||||
font-weight: bold; }
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.reveal dd {
|
||||
margin-left: 40px; }
|
||||
margin-left: 40px;
|
||||
}
|
||||
|
||||
.reveal blockquote {
|
||||
display: block;
|
||||
position: relative;
|
||||
width: 70%;
|
||||
margin: 20px auto;
|
||||
margin: var(--r-block-margin) auto;
|
||||
padding: 5px;
|
||||
font-style: italic;
|
||||
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:last-child {
|
||||
display: inline-block; }
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.reveal q {
|
||||
font-style: italic; }
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.reveal pre {
|
||||
display: block;
|
||||
position: relative;
|
||||
width: 90%;
|
||||
margin: 20px auto;
|
||||
margin: var(--r-block-margin) auto;
|
||||
text-align: left;
|
||||
font-size: 0.55em;
|
||||
font-family: monospace;
|
||||
font-family: var(--r-code-font);
|
||||
line-height: 1.2em;
|
||||
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 {
|
||||
font-family: monospace;
|
||||
text-transform: none; }
|
||||
font-family: var(--r-code-font);
|
||||
text-transform: none;
|
||||
tab-size: 2;
|
||||
}
|
||||
|
||||
.reveal pre code {
|
||||
display: block;
|
||||
padding: 5px;
|
||||
overflow: auto;
|
||||
max-height: 400px;
|
||||
word-wrap: normal; }
|
||||
word-wrap: normal;
|
||||
}
|
||||
|
||||
.reveal .code-wrapper {
|
||||
white-space: normal;
|
||||
}
|
||||
|
||||
.reveal .code-wrapper code {
|
||||
white-space: pre;
|
||||
}
|
||||
|
||||
.reveal table {
|
||||
margin: auto;
|
||||
border-collapse: collapse;
|
||||
border-spacing: 0; }
|
||||
border-spacing: 0;
|
||||
}
|
||||
|
||||
.reveal table th {
|
||||
font-weight: bold; }
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.reveal table th,
|
||||
.reveal table td {
|
||||
text-align: left;
|
||||
padding: 0.2em 0.5em 0.2em 0.5em;
|
||||
border-bottom: 1px solid; }
|
||||
border-bottom: 1px solid;
|
||||
}
|
||||
|
||||
.reveal table th[align="center"],
|
||||
.reveal table td[align="center"] {
|
||||
text-align: center; }
|
||||
.reveal table th[align=center],
|
||||
.reveal table td[align=center] {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.reveal table th[align="right"],
|
||||
.reveal table td[align="right"] {
|
||||
text-align: right; }
|
||||
.reveal table th[align=right],
|
||||
.reveal table td[align=right] {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.reveal table tbody tr:last-child th,
|
||||
.reveal table tbody tr:last-child td {
|
||||
border-bottom: none; }
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.reveal sup {
|
||||
vertical-align: super;
|
||||
font-size: smaller; }
|
||||
font-size: smaller;
|
||||
}
|
||||
|
||||
.reveal sub {
|
||||
vertical-align: sub;
|
||||
font-size: smaller; }
|
||||
font-size: smaller;
|
||||
}
|
||||
|
||||
.reveal small {
|
||||
display: inline-block;
|
||||
font-size: 0.6em;
|
||||
line-height: 1.2em;
|
||||
vertical-align: top; }
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
.reveal small * {
|
||||
vertical-align: top; }
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
.reveal img {
|
||||
margin: 20px 0; }
|
||||
margin: var(--r-block-margin) 0;
|
||||
}
|
||||
|
||||
/*********************************************
|
||||
* LINKS
|
||||
*********************************************/
|
||||
.reveal a {
|
||||
color: #268bd2;
|
||||
color: var(--r-link-color);
|
||||
text-decoration: none;
|
||||
transition: color .15s ease; }
|
||||
transition: color 0.15s ease;
|
||||
}
|
||||
|
||||
.reveal a:hover {
|
||||
color: #78b9e6;
|
||||
color: var(--r-link-color-hover);
|
||||
text-shadow: none;
|
||||
border: none; }
|
||||
border: none;
|
||||
}
|
||||
|
||||
.reveal .roll span:after {
|
||||
color: #fff;
|
||||
background: #1a6091; }
|
||||
background: var(--r-link-color-dark);
|
||||
}
|
||||
|
||||
/*********************************************
|
||||
* Frame helper
|
||||
*********************************************/
|
||||
.reveal .r-frame {
|
||||
border: 4px solid #657b83;
|
||||
box-shadow: 0 0 10px rgba(0, 0, 0, 0.15); }
|
||||
border: 4px solid var(--r-main-color);
|
||||
box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
|
||||
.reveal a .r-frame {
|
||||
transition: all .15s linear; }
|
||||
transition: all 0.15s linear;
|
||||
}
|
||||
|
||||
.reveal a:hover .r-frame {
|
||||
border-color: #268bd2;
|
||||
box-shadow: 0 0 20px rgba(0, 0, 0, 0.55); }
|
||||
border-color: var(--r-link-color);
|
||||
box-shadow: 0 0 20px rgba(0, 0, 0, 0.55);
|
||||
}
|
||||
|
||||
/*********************************************
|
||||
* NAVIGATION CONTROLS
|
||||
*********************************************/
|
||||
.reveal .controls {
|
||||
color: #268bd2; }
|
||||
color: var(--r-link-color);
|
||||
}
|
||||
|
||||
/*********************************************
|
||||
* PROGRESS BAR
|
||||
*********************************************/
|
||||
.reveal .progress {
|
||||
background: rgba(0, 0, 0, 0.2);
|
||||
color: #268bd2; }
|
||||
color: var(--r-link-color);
|
||||
}
|
||||
|
||||
/*********************************************
|
||||
* PRINT BACKGROUND
|
||||
*********************************************/
|
||||
@media print {
|
||||
.backgrounds {
|
||||
background-color: #fdf6e3; } }
|
||||
background-color: var(--r-background-color);
|
||||
}
|
||||
}
|
||||
+164
-101
@@ -5,60 +5,68 @@
|
||||
*/
|
||||
@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 {
|
||||
color: #fff; }
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
/*********************************************
|
||||
* GLOBAL STYLES
|
||||
*********************************************/
|
||||
:root {
|
||||
--background-color: #fff;
|
||||
--main-font: Source Sans Pro, Helvetica, sans-serif;
|
||||
--main-font-size: 42px;
|
||||
--main-color: #222;
|
||||
--block-margin: 20px;
|
||||
--heading-margin: 0 0 20px 0;
|
||||
--heading-font: Source Sans Pro, Helvetica, sans-serif;
|
||||
--heading-color: #222;
|
||||
--heading-line-height: 1.2;
|
||||
--heading-letter-spacing: normal;
|
||||
--heading-text-transform: uppercase;
|
||||
--heading-text-shadow: none;
|
||||
--heading-font-weight: 600;
|
||||
--heading1-text-shadow: none;
|
||||
--heading1-size: 2.5em;
|
||||
--heading2-size: 1.6em;
|
||||
--heading3-size: 1.3em;
|
||||
--heading4-size: 1em;
|
||||
--code-font: monospace;
|
||||
--link-color: #2a76dd;
|
||||
--link-color-hover: #6ca0e8;
|
||||
--selection-background-color: #98bdef;
|
||||
--selection-color: #fff; }
|
||||
--r-background-color: #fff;
|
||||
--r-main-font: Source Sans Pro, Helvetica, sans-serif;
|
||||
--r-main-font-size: 42px;
|
||||
--r-main-color: #222;
|
||||
--r-block-margin: 20px;
|
||||
--r-heading-margin: 0 0 20px 0;
|
||||
--r-heading-font: Source Sans Pro, Helvetica, sans-serif;
|
||||
--r-heading-color: #222;
|
||||
--r-heading-line-height: 1.2;
|
||||
--r-heading-letter-spacing: normal;
|
||||
--r-heading-text-transform: uppercase;
|
||||
--r-heading-text-shadow: none;
|
||||
--r-heading-font-weight: 600;
|
||||
--r-heading1-text-shadow: none;
|
||||
--r-heading1-size: 2.5em;
|
||||
--r-heading2-size: 1.6em;
|
||||
--r-heading3-size: 1.3em;
|
||||
--r-heading4-size: 1em;
|
||||
--r-code-font: monospace;
|
||||
--r-link-color: #2a76dd;
|
||||
--r-link-color-dark: #1a53a1;
|
||||
--r-link-color-hover: #6ca0e8;
|
||||
--r-selection-background-color: #98bdef;
|
||||
--r-selection-color: #fff;
|
||||
}
|
||||
|
||||
.reveal-viewport {
|
||||
background: #fff;
|
||||
background-color: #fff; }
|
||||
background-color: var(--r-background-color);
|
||||
}
|
||||
|
||||
.reveal {
|
||||
font-family: "Source Sans Pro", Helvetica, sans-serif;
|
||||
font-size: 42px;
|
||||
font-family: var(--r-main-font);
|
||||
font-size: var(--r-main-font-size);
|
||||
font-weight: normal;
|
||||
color: #222; }
|
||||
color: var(--r-main-color);
|
||||
}
|
||||
|
||||
.reveal ::selection {
|
||||
color: #fff;
|
||||
background: #98bdef;
|
||||
text-shadow: none; }
|
||||
color: var(--r-selection-color);
|
||||
background: var(--r-selection-background-color);
|
||||
text-shadow: none;
|
||||
}
|
||||
|
||||
.reveal ::-moz-selection {
|
||||
color: #fff;
|
||||
background: #98bdef;
|
||||
text-shadow: none; }
|
||||
color: var(--r-selection-color);
|
||||
background: var(--r-selection-background-color);
|
||||
text-shadow: none;
|
||||
}
|
||||
|
||||
.reveal .slides section,
|
||||
.reveal .slides section > section {
|
||||
line-height: 1.3;
|
||||
font-weight: inherit; }
|
||||
font-weight: inherit;
|
||||
}
|
||||
|
||||
/*********************************************
|
||||
* HEADERS
|
||||
@@ -69,37 +77,44 @@ section.has-dark-background, section.has-dark-background h1, section.has-dark-ba
|
||||
.reveal h4,
|
||||
.reveal h5,
|
||||
.reveal h6 {
|
||||
margin: 0 0 20px 0;
|
||||
color: #222;
|
||||
font-family: "Source Sans Pro", Helvetica, sans-serif;
|
||||
font-weight: 600;
|
||||
line-height: 1.2;
|
||||
letter-spacing: normal;
|
||||
text-transform: uppercase;
|
||||
text-shadow: none;
|
||||
word-wrap: break-word; }
|
||||
margin: var(--r-heading-margin);
|
||||
color: var(--r-heading-color);
|
||||
font-family: var(--r-heading-font);
|
||||
font-weight: var(--r-heading-font-weight);
|
||||
line-height: var(--r-heading-line-height);
|
||||
letter-spacing: var(--r-heading-letter-spacing);
|
||||
text-transform: var(--r-heading-text-transform);
|
||||
text-shadow: var(--r-heading-text-shadow);
|
||||
word-wrap: break-word;
|
||||
}
|
||||
|
||||
.reveal h1 {
|
||||
font-size: 2.5em; }
|
||||
font-size: var(--r-heading1-size);
|
||||
}
|
||||
|
||||
.reveal h2 {
|
||||
font-size: 1.6em; }
|
||||
font-size: var(--r-heading2-size);
|
||||
}
|
||||
|
||||
.reveal h3 {
|
||||
font-size: 1.3em; }
|
||||
font-size: var(--r-heading3-size);
|
||||
}
|
||||
|
||||
.reveal h4 {
|
||||
font-size: 1em; }
|
||||
font-size: var(--r-heading4-size);
|
||||
}
|
||||
|
||||
.reveal h1 {
|
||||
text-shadow: none; }
|
||||
text-shadow: var(--r-heading1-text-shadow);
|
||||
}
|
||||
|
||||
/*********************************************
|
||||
* OTHER
|
||||
*********************************************/
|
||||
.reveal p {
|
||||
margin: 20px 0;
|
||||
line-height: 1.3; }
|
||||
margin: var(--r-block-margin) 0;
|
||||
line-height: 1.3;
|
||||
}
|
||||
|
||||
/* Remove trailing margins after titles */
|
||||
.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 h5:last-child,
|
||||
.reveal h6:last-child {
|
||||
margin-bottom: 0; }
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
/* Ensure certain elements are never larger than the slide itself */
|
||||
.reveal img,
|
||||
.reveal video,
|
||||
.reveal iframe {
|
||||
max-width: 95%;
|
||||
max-height: 95%; }
|
||||
max-height: 95%;
|
||||
}
|
||||
|
||||
.reveal strong,
|
||||
.reveal b {
|
||||
font-weight: bold; }
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.reveal em {
|
||||
font-style: italic; }
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.reveal ol,
|
||||
.reveal dl,
|
||||
.reveal ul {
|
||||
display: inline-block;
|
||||
text-align: left;
|
||||
margin: 0 0 0 1em; }
|
||||
margin: 0 0 0 1em;
|
||||
}
|
||||
|
||||
.reveal ol {
|
||||
list-style-type: decimal; }
|
||||
list-style-type: decimal;
|
||||
}
|
||||
|
||||
.reveal ul {
|
||||
list-style-type: disc; }
|
||||
list-style-type: disc;
|
||||
}
|
||||
|
||||
.reveal ul ul {
|
||||
list-style-type: square; }
|
||||
list-style-type: square;
|
||||
}
|
||||
|
||||
.reveal ul ul ul {
|
||||
list-style-type: circle; }
|
||||
list-style-type: circle;
|
||||
}
|
||||
|
||||
.reveal ul ul,
|
||||
.reveal ul ol,
|
||||
.reveal ol ol,
|
||||
.reveal ol ul {
|
||||
display: block;
|
||||
margin-left: 40px; }
|
||||
margin-left: 40px;
|
||||
}
|
||||
|
||||
.reveal dt {
|
||||
font-weight: bold; }
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.reveal dd {
|
||||
margin-left: 40px; }
|
||||
margin-left: 40px;
|
||||
}
|
||||
|
||||
.reveal blockquote {
|
||||
display: block;
|
||||
position: relative;
|
||||
width: 70%;
|
||||
margin: 20px auto;
|
||||
margin: var(--r-block-margin) auto;
|
||||
padding: 5px;
|
||||
font-style: italic;
|
||||
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:last-child {
|
||||
display: inline-block; }
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.reveal q {
|
||||
font-style: italic; }
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.reveal pre {
|
||||
display: block;
|
||||
position: relative;
|
||||
width: 90%;
|
||||
margin: 20px auto;
|
||||
margin: var(--r-block-margin) auto;
|
||||
text-align: left;
|
||||
font-size: 0.55em;
|
||||
font-family: monospace;
|
||||
font-family: var(--r-code-font);
|
||||
line-height: 1.2em;
|
||||
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 {
|
||||
font-family: monospace;
|
||||
text-transform: none; }
|
||||
font-family: var(--r-code-font);
|
||||
text-transform: none;
|
||||
tab-size: 2;
|
||||
}
|
||||
|
||||
.reveal pre code {
|
||||
display: block;
|
||||
padding: 5px;
|
||||
overflow: auto;
|
||||
max-height: 400px;
|
||||
word-wrap: normal; }
|
||||
word-wrap: normal;
|
||||
}
|
||||
|
||||
.reveal .code-wrapper {
|
||||
white-space: normal;
|
||||
}
|
||||
|
||||
.reveal .code-wrapper code {
|
||||
white-space: pre;
|
||||
}
|
||||
|
||||
.reveal table {
|
||||
margin: auto;
|
||||
border-collapse: collapse;
|
||||
border-spacing: 0; }
|
||||
border-spacing: 0;
|
||||
}
|
||||
|
||||
.reveal table th {
|
||||
font-weight: bold; }
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.reveal table th,
|
||||
.reveal table td {
|
||||
text-align: left;
|
||||
padding: 0.2em 0.5em 0.2em 0.5em;
|
||||
border-bottom: 1px solid; }
|
||||
border-bottom: 1px solid;
|
||||
}
|
||||
|
||||
.reveal table th[align="center"],
|
||||
.reveal table td[align="center"] {
|
||||
text-align: center; }
|
||||
.reveal table th[align=center],
|
||||
.reveal table td[align=center] {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.reveal table th[align="right"],
|
||||
.reveal table td[align="right"] {
|
||||
text-align: right; }
|
||||
.reveal table th[align=right],
|
||||
.reveal table td[align=right] {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.reveal table tbody tr:last-child th,
|
||||
.reveal table tbody tr:last-child td {
|
||||
border-bottom: none; }
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.reveal sup {
|
||||
vertical-align: super;
|
||||
font-size: smaller; }
|
||||
font-size: smaller;
|
||||
}
|
||||
|
||||
.reveal sub {
|
||||
vertical-align: sub;
|
||||
font-size: smaller; }
|
||||
font-size: smaller;
|
||||
}
|
||||
|
||||
.reveal small {
|
||||
display: inline-block;
|
||||
font-size: 0.6em;
|
||||
line-height: 1.2em;
|
||||
vertical-align: top; }
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
.reveal small * {
|
||||
vertical-align: top; }
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
.reveal img {
|
||||
margin: 20px 0; }
|
||||
margin: var(--r-block-margin) 0;
|
||||
}
|
||||
|
||||
/*********************************************
|
||||
* LINKS
|
||||
*********************************************/
|
||||
.reveal a {
|
||||
color: #2a76dd;
|
||||
color: var(--r-link-color);
|
||||
text-decoration: none;
|
||||
transition: color .15s ease; }
|
||||
transition: color 0.15s ease;
|
||||
}
|
||||
|
||||
.reveal a:hover {
|
||||
color: #6ca0e8;
|
||||
color: var(--r-link-color-hover);
|
||||
text-shadow: none;
|
||||
border: none; }
|
||||
border: none;
|
||||
}
|
||||
|
||||
.reveal .roll span:after {
|
||||
color: #fff;
|
||||
background: #1a53a1; }
|
||||
background: var(--r-link-color-dark);
|
||||
}
|
||||
|
||||
/*********************************************
|
||||
* Frame helper
|
||||
*********************************************/
|
||||
.reveal .r-frame {
|
||||
border: 4px solid #222;
|
||||
box-shadow: 0 0 10px rgba(0, 0, 0, 0.15); }
|
||||
border: 4px solid var(--r-main-color);
|
||||
box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
|
||||
.reveal a .r-frame {
|
||||
transition: all .15s linear; }
|
||||
transition: all 0.15s linear;
|
||||
}
|
||||
|
||||
.reveal a:hover .r-frame {
|
||||
border-color: #2a76dd;
|
||||
box-shadow: 0 0 20px rgba(0, 0, 0, 0.55); }
|
||||
border-color: var(--r-link-color);
|
||||
box-shadow: 0 0 20px rgba(0, 0, 0, 0.55);
|
||||
}
|
||||
|
||||
/*********************************************
|
||||
* NAVIGATION CONTROLS
|
||||
*********************************************/
|
||||
.reveal .controls {
|
||||
color: #2a76dd; }
|
||||
color: var(--r-link-color);
|
||||
}
|
||||
|
||||
/*********************************************
|
||||
* PROGRESS BAR
|
||||
*********************************************/
|
||||
.reveal .progress {
|
||||
background: rgba(0, 0, 0, 0.2);
|
||||
color: #2a76dd; }
|
||||
color: var(--r-link-color);
|
||||
}
|
||||
|
||||
/*********************************************
|
||||
* PRINT BACKGROUND
|
||||
*********************************************/
|
||||
@media print {
|
||||
.backgrounds {
|
||||
background-color: #fff; } }
|
||||
background-color: var(--r-background-color);
|
||||
}
|
||||
}
|
||||
@@ -18,7 +18,6 @@
|
||||
<div class="reveal">
|
||||
|
||||
<div class="slides">
|
||||
|
||||
<section data-auto-animate data-auto-animate-unmatched="fade">
|
||||
<h3>Auto-Animate Example</h3>
|
||||
<p>This will fade out</p>
|
||||
@@ -126,7 +125,7 @@
|
||||
</section>
|
||||
|
||||
<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>
|
||||
<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>
|
||||
@@ -134,7 +133,7 @@
|
||||
<div data-id="4" style="background: white; position: absolute; top: 150px; left: 76%; width: 60px; height: 60px;"></div>
|
||||
</section>
|
||||
<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>
|
||||
<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>
|
||||
@@ -142,7 +141,7 @@
|
||||
<div data-id="4" style="background: red; position: absolute; bottom: 190px; left: 76%; width: 60px; height: 360px;"></div>
|
||||
</section>
|
||||
<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>
|
||||
<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>
|
||||
@@ -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>
|
||||
</section>
|
||||
<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>
|
||||
<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>
|
||||
@@ -158,6 +157,25 @@
|
||||
<div data-id="4" style="background: cyan; position: absolute; top: 250px; left: 76%; width: 60px; height: 60px;"></div>
|
||||
</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>
|
||||
|
||||
@@ -123,7 +123,7 @@
|
||||
|
||||
<section id="vstack">
|
||||
<h2>VStack</h2>
|
||||
<p>Stacks multiple elements horizontally.</p>
|
||||
<p>Stacks multiple elements vertically.</p>
|
||||
<pre><code class="html" data-trim data-line-numbers>
|
||||
<div class="r-vstack">
|
||||
<img width="450" height="300" src="...">
|
||||
|
||||
@@ -21,8 +21,8 @@
|
||||
<!-- 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>
|
||||
|
||||
<!-- Slides are separated by three dashes (quick 'n dirty regular expression) -->
|
||||
<section data-markdown data-separator="---">
|
||||
<!-- Slides are separated by three dashes (the default) -->
|
||||
<section data-markdown>
|
||||
<script type="text/template">
|
||||
## Demo 1
|
||||
Slide 1
|
||||
@@ -35,7 +35,7 @@
|
||||
</script>
|
||||
</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$">
|
||||
<script type="text/template">
|
||||
## Demo 2
|
||||
@@ -53,8 +53,8 @@
|
||||
</script>
|
||||
</section>
|
||||
|
||||
<!-- No "extra" slides, since there are no separators defined (so they'll become horizontal rulers) -->
|
||||
<section data-markdown>
|
||||
<!-- No "extra" slides, since the separator can't be matched ("---" will become horizontal rulers) -->
|
||||
<section data-markdown data-separator="$x">
|
||||
<script type="text/template">
|
||||
A
|
||||
|
||||
@@ -106,6 +106,16 @@
|
||||
</script>
|
||||
</section>
|
||||
|
||||
<!-- Math -->
|
||||
<section data-markdown>
|
||||
## The Lorenz Equations
|
||||
`\[\begin{aligned}
|
||||
\dot{x} & = \sigma(y-x) \\
|
||||
\dot{y} & = \rho x - y - xz \\
|
||||
\dot{z} & = -\beta z + xy
|
||||
\end{aligned} \]`
|
||||
</section>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -113,6 +123,7 @@
|
||||
<script src="../plugin/markdown/markdown.js"></script>
|
||||
<script src="../plugin/highlight/highlight.js"></script>
|
||||
<script src="../plugin/notes/notes.js"></script>
|
||||
<script src="../plugin/math/math.js"></script>
|
||||
|
||||
<script>
|
||||
|
||||
@@ -122,7 +133,7 @@
|
||||
history: true,
|
||||
center: true,
|
||||
|
||||
plugins: [ RevealMarkdown, RevealHighlight, RevealNotes ]
|
||||
plugins: [ RevealMarkdown, RevealHighlight, RevealNotes, RevealMath.KaTeX ]
|
||||
});
|
||||
|
||||
</script>
|
||||
|
||||
@@ -31,6 +31,11 @@ Content 3.1
|
||||
Content 3.2
|
||||
|
||||
|
||||
## External 3.3
|
||||
## External 3.3 (Image)
|
||||
|
||||
|
||||
|
||||
|
||||
## External 3.4 (Math)
|
||||
|
||||
`\[ J(\theta_0,\theta_1) = \sum_{i=0} \]`
|
||||
|
||||
@@ -20,7 +20,7 @@
|
||||
|
||||
<section>
|
||||
<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>
|
||||
@@ -182,8 +182,7 @@
|
||||
history: true,
|
||||
transition: 'linear',
|
||||
|
||||
math: {
|
||||
// mathjax: 'https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.0/MathJax.js',
|
||||
mathjax2: {
|
||||
config: 'TeX-AMS_HTML-full',
|
||||
TeX: {
|
||||
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>
|
||||
|
||||
|
||||
@@ -3,6 +3,7 @@ const path = require('path')
|
||||
const glob = require('glob')
|
||||
const yargs = require('yargs')
|
||||
const colors = require('colors')
|
||||
const through = require('through2');
|
||||
const qunit = require('node-qunit-puppeteer')
|
||||
|
||||
const {rollup} = require('rollup')
|
||||
@@ -10,11 +11,11 @@ const {terser} = require('rollup-plugin-terser')
|
||||
const babel = require('@rollup/plugin-babel').default
|
||||
const commonjs = require('@rollup/plugin-commonjs')
|
||||
const resolve = require('@rollup/plugin-node-resolve').default
|
||||
const sass = require('sass')
|
||||
|
||||
const gulp = require('gulp')
|
||||
const tap = require('gulp-tap')
|
||||
const zip = require('gulp-zip')
|
||||
const sass = require('gulp-sass')
|
||||
const header = require('gulp-header')
|
||||
const eslint = require('gulp-eslint')
|
||||
const minify = require('gulp-clean-css')
|
||||
@@ -23,13 +24,14 @@ const autoprefixer = require('gulp-autoprefixer')
|
||||
|
||||
const root = yargs.argv.root || '.'
|
||||
const port = yargs.argv.port || 8000
|
||||
const host = yargs.argv.host || 'localhost'
|
||||
|
||||
const banner = `/*!
|
||||
* reveal.js ${pkg.version}
|
||||
* ${pkg.homepage}
|
||||
* MIT licensed
|
||||
*
|
||||
* Copyright (C) 2020 Hakim El Hattab, https://hakim.se
|
||||
* Copyright (C) 2011-2022 Hakim El Hattab, https://hakim.se
|
||||
*/\n`
|
||||
|
||||
// Prevents warnings from opening too many test pages
|
||||
@@ -59,11 +61,11 @@ const babelConfig = {
|
||||
// polyfilling older browsers and a larger bundle.
|
||||
const babelConfigESM = JSON.parse( JSON.stringify( babelConfig ) );
|
||||
babelConfigESM.presets[0][1].targets = { browsers: [
|
||||
'last 2 Chrome versions', 'not Chrome < 60',
|
||||
'last 2 Safari versions', 'not Safari < 10.1',
|
||||
'last 2 iOS versions', 'not iOS < 10.3',
|
||||
'last 2 Firefox versions', 'not Firefox < 60',
|
||||
'last 2 Edge versions', 'not Edge < 16',
|
||||
'last 2 Chrome versions',
|
||||
'last 2 Safari versions',
|
||||
'last 2 iOS versions',
|
||||
'last 2 Firefox versions',
|
||||
'last 2 Edge versions',
|
||||
] };
|
||||
|
||||
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}'])
|
||||
.pipe(sass())
|
||||
.pipe(compileSass())
|
||||
.pipe(gulp.dest('./dist/theme')))
|
||||
|
||||
gulp.task('css-core', () => gulp.src(['css/reveal.scss'])
|
||||
.pipe(sass())
|
||||
.pipe(compileSass())
|
||||
.pipe(autoprefixer())
|
||||
.pipe(minify({compatibility: 'ie9'}))
|
||||
.pipe(header(banner))
|
||||
@@ -173,7 +197,7 @@ gulp.task('qunit', () => {
|
||||
let serverConfig = {
|
||||
root,
|
||||
port: 8009,
|
||||
host: '0.0.0.0',
|
||||
host: 'localhost',
|
||||
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('package', gulp.series('default', () =>
|
||||
gulp.task('package', gulp.series(() =>
|
||||
|
||||
gulp.src([
|
||||
'./index.html',
|
||||
'./dist/**',
|
||||
'./lib/**',
|
||||
'./images/**',
|
||||
'./plugin/**',
|
||||
'./**.md'
|
||||
]).pipe(zip('reveal-js-presentation.zip')).pipe(gulp.dest('./'))
|
||||
gulp.src(
|
||||
[
|
||||
'./index.html',
|
||||
'./dist/**',
|
||||
'./lib/**',
|
||||
'./images/**',
|
||||
'./plugin/**',
|
||||
'./**.md'
|
||||
],
|
||||
{ base: './' }
|
||||
)
|
||||
.pipe(zip('reveal-js-presentation.zip')).pipe(gulp.dest('./'))
|
||||
|
||||
))
|
||||
|
||||
@@ -266,15 +294,15 @@ gulp.task('serve', () => {
|
||||
connect.server({
|
||||
root: root,
|
||||
port: port,
|
||||
host: '0.0.0.0',
|
||||
host: host,
|
||||
livereload: true
|
||||
})
|
||||
|
||||
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([
|
||||
'css/theme/source/*.{sass,scss}',
|
||||
|
||||
@@ -8,10 +8,10 @@
|
||||
|
||||
<link rel="stylesheet" href="dist/reset.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 -->
|
||||
<link rel="stylesheet" href="plugin/highlight/monokai.css" id="highlight-theme">
|
||||
<link rel="stylesheet" href="plugin/highlight/monokai.css">
|
||||
</head>
|
||||
<body>
|
||||
<div class="reveal">
|
||||
|
||||
@@ -73,8 +73,8 @@ export default {
|
||||
|
||||
// Optional function that blocks keyboard events when retuning false
|
||||
//
|
||||
// If you set this to 'foucsed', we will only capture keyboard events
|
||||
// for embdedded decks when they are in focus
|
||||
// If you set this to 'focused', we will only capture keyboard events
|
||||
// for embedded decks when they are in focus
|
||||
keyboardCondition: null,
|
||||
|
||||
// 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
|
||||
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
|
||||
// - true: All media will autoplay, regardless of individual setting
|
||||
// - false: No media will autoplay, regardless of individual setting
|
||||
|
||||
@@ -27,8 +27,16 @@ export default class AutoAnimate {
|
||||
// Clean up after prior animations
|
||||
this.reset();
|
||||
|
||||
// Ensure that both slides are auto-animate targets
|
||||
if( fromSlide.hasAttribute( 'data-auto-animate' ) && toSlide.hasAttribute( 'data-auto-animate' ) ) {
|
||||
let allSlides = this.Reveal.getSlides();
|
||||
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
|
||||
this.autoAnimateStyleSheet = this.autoAnimateStyleSheet || createStyleSheet();
|
||||
@@ -40,8 +48,7 @@ export default class AutoAnimate {
|
||||
toSlide.dataset.autoAnimate = 'pending';
|
||||
|
||||
// Flag the navigation direction, needed for fragment buildup
|
||||
let allSlides = this.Reveal.getSlides();
|
||||
animationOptions.slideDirection = allSlides.indexOf( toSlide ) > allSlides.indexOf( fromSlide ) ? 'forward' : 'backward';
|
||||
animationOptions.slideDirection = toSlideIndex > fromSlideIndex ? 'forward' : 'backward';
|
||||
|
||||
// Inject our auto-animate styles for this transition
|
||||
let css = this.getAutoAnimatableElements( fromSlide, toSlide ).map( elements => {
|
||||
|
||||
@@ -27,8 +27,6 @@ export default class Backgrounds {
|
||||
*/
|
||||
create() {
|
||||
|
||||
let printMode = this.Reveal.isPrintingPDF();
|
||||
|
||||
// Clear prior backgrounds
|
||||
this.element.innerHTML = '';
|
||||
this.element.classList.add( 'no-transition' );
|
||||
@@ -114,9 +112,24 @@ export default class Backgrounds {
|
||||
*/
|
||||
sync( slide ) {
|
||||
|
||||
let element = slide.slideBackgroundElement,
|
||||
const element = slide.slideBackgroundElement,
|
||||
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
|
||||
// initial sync
|
||||
slide.classList.remove( 'has-dark-background' );
|
||||
@@ -135,19 +148,6 @@ export default class Backgrounds {
|
||||
contentElement.style.opacity = '';
|
||||
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 ) {
|
||||
// Auto-wrap image urls in url(...)
|
||||
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.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
|
||||
if( data.backgroundSize ) contentElement.style.backgroundSize = data.backgroundSize;
|
||||
@@ -192,8 +192,8 @@ export default class Backgrounds {
|
||||
// color, no class will be added
|
||||
let contrastColor = data.backgroundColor;
|
||||
|
||||
// If no bg color was found, check the computed background
|
||||
if( !contrastColor ) {
|
||||
// If no bg color was found, or it cannot be converted by colorToRgb, check the computed background
|
||||
if( !contrastColor || !colorToRgb( contrastColor ) ) {
|
||||
let computedBackgroundStyle = window.getComputedStyle( element );
|
||||
if( computedBackgroundStyle && computedBackgroundStyle.backgroundColor ) {
|
||||
contrastColor = computedBackgroundStyle.backgroundColor;
|
||||
@@ -201,7 +201,7 @@ export default class Backgrounds {
|
||||
}
|
||||
|
||||
if( contrastColor ) {
|
||||
let rgb = colorToRgb( contrastColor );
|
||||
const rgb = colorToRgb( contrastColor );
|
||||
|
||||
// Ignore fully transparent backgrounds. Some browsers return
|
||||
// rgba(0,0,0,0) when reading the computed background color of
|
||||
@@ -394,4 +394,10 @@ export default class Backgrounds {
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
destroy() {
|
||||
|
||||
this.element.remove();
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@@ -188,6 +188,13 @@ export default class Controls {
|
||||
}
|
||||
}
|
||||
|
||||
destroy() {
|
||||
|
||||
this.unbind();
|
||||
this.element.remove();
|
||||
|
||||
}
|
||||
|
||||
/**
|
||||
* Event handlers for navigation control buttons.
|
||||
*/
|
||||
|
||||
@@ -79,6 +79,12 @@ export default class Focus {
|
||||
|
||||
}
|
||||
|
||||
destroy() {
|
||||
|
||||
this.Reveal.getRevealElement().classList.remove( 'focused' );
|
||||
|
||||
}
|
||||
|
||||
onRevealPointerDown( event ) {
|
||||
|
||||
this.focus();
|
||||
|
||||
@@ -235,6 +235,7 @@ export default class Fragments {
|
||||
el.classList.remove( 'current-fragment' );
|
||||
|
||||
if( wasVisible ) {
|
||||
this.Reveal.slideContent.stopEmbeddedContent( el );
|
||||
changedFragments.hidden.push( el );
|
||||
this.Reveal.dispatchEvent({
|
||||
target: el,
|
||||
|
||||
@@ -32,15 +32,15 @@ export default class Keyboard {
|
||||
}
|
||||
else {
|
||||
this.shortcuts['N , SPACE'] = 'Next slide';
|
||||
this.shortcuts['P'] = 'Previous slide';
|
||||
this.shortcuts['P , Shift SPACE'] = 'Previous slide';
|
||||
this.shortcuts['← , H'] = 'Navigate left';
|
||||
this.shortcuts['→ , L'] = 'Navigate right';
|
||||
this.shortcuts['↑ , K'] = 'Navigate up';
|
||||
this.shortcuts['↓ , J'] = 'Navigate down';
|
||||
}
|
||||
|
||||
this.shortcuts['Home , Shift ←'] = 'First slide';
|
||||
this.shortcuts['End , Shift →'] = 'Last slide';
|
||||
this.shortcuts['Alt + ←/↑/→/↓'] = 'Navigate without fragments';
|
||||
this.shortcuts['Shift + ←/↑/→/↓'] = 'Jump to first/last slide';
|
||||
this.shortcuts['B , .'] = 'Pause';
|
||||
this.shortcuts['F'] = 'Fullscreen';
|
||||
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 activeElementIsNotes = document.activeElement && document.activeElement.className && /speaker-notes/i.test( document.activeElement.className);
|
||||
|
||||
// Whitelist specific modified + keycode combinations
|
||||
let prevSlideShortcut = event.shiftKey && event.keyCode === 32;
|
||||
let firstSlideShortcut = event.shiftKey && keyCode === 37;
|
||||
let lastSlideShortcut = event.shiftKey && keyCode === 39;
|
||||
// Whitelist certain modifiers for slide navigation shortcuts
|
||||
let isNavigationKey = [32, 37, 38, 39, 40, 78, 80].indexOf( event.keyCode ) !== -1;
|
||||
|
||||
// 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 );
|
||||
|
||||
// Disregard the event if there's a focused element or a
|
||||
@@ -277,52 +275,58 @@ export default class Keyboard {
|
||||
|
||||
// P, PAGE UP
|
||||
if( keyCode === 80 || keyCode === 33 ) {
|
||||
this.Reveal.prev();
|
||||
this.Reveal.prev({skipFragments: event.altKey});
|
||||
}
|
||||
// N, PAGE DOWN
|
||||
else if( keyCode === 78 || keyCode === 34 ) {
|
||||
this.Reveal.next();
|
||||
this.Reveal.next({skipFragments: event.altKey});
|
||||
}
|
||||
// H, LEFT
|
||||
else if( keyCode === 72 || keyCode === 37 ) {
|
||||
if( firstSlideShortcut ) {
|
||||
if( event.shiftKey ) {
|
||||
this.Reveal.slide( 0 );
|
||||
}
|
||||
else if( !this.Reveal.overview.isActive() && useLinearMode ) {
|
||||
this.Reveal.prev();
|
||||
this.Reveal.prev({skipFragments: event.altKey});
|
||||
}
|
||||
else {
|
||||
this.Reveal.left();
|
||||
this.Reveal.left({skipFragments: event.altKey});
|
||||
}
|
||||
}
|
||||
// L, RIGHT
|
||||
else if( keyCode === 76 || keyCode === 39 ) {
|
||||
if( lastSlideShortcut ) {
|
||||
this.Reveal.slide( Number.MAX_VALUE );
|
||||
if( event.shiftKey ) {
|
||||
this.Reveal.slide( this.Reveal.getHorizontalSlides().length - 1 );
|
||||
}
|
||||
else if( !this.Reveal.overview.isActive() && useLinearMode ) {
|
||||
this.Reveal.next();
|
||||
this.Reveal.next({skipFragments: event.altKey});
|
||||
}
|
||||
else {
|
||||
this.Reveal.right();
|
||||
this.Reveal.right({skipFragments: event.altKey});
|
||||
}
|
||||
}
|
||||
// K, UP
|
||||
else if( keyCode === 75 || keyCode === 38 ) {
|
||||
if( !this.Reveal.overview.isActive() && useLinearMode ) {
|
||||
this.Reveal.prev();
|
||||
if( event.shiftKey ) {
|
||||
this.Reveal.slide( undefined, 0 );
|
||||
}
|
||||
else if( !this.Reveal.overview.isActive() && useLinearMode ) {
|
||||
this.Reveal.prev({skipFragments: event.altKey});
|
||||
}
|
||||
else {
|
||||
this.Reveal.up();
|
||||
this.Reveal.up({skipFragments: event.altKey});
|
||||
}
|
||||
}
|
||||
// J, DOWN
|
||||
else if( keyCode === 74 || keyCode === 40 ) {
|
||||
if( !this.Reveal.overview.isActive() && useLinearMode ) {
|
||||
this.Reveal.next();
|
||||
if( event.shiftKey ) {
|
||||
this.Reveal.slide( undefined, Number.MAX_VALUE );
|
||||
}
|
||||
else if( !this.Reveal.overview.isActive() && useLinearMode ) {
|
||||
this.Reveal.next({skipFragments: event.altKey});
|
||||
}
|
||||
else {
|
||||
this.Reveal.down();
|
||||
this.Reveal.down({skipFragments: event.altKey});
|
||||
}
|
||||
}
|
||||
// HOME
|
||||
@@ -331,7 +335,7 @@ export default class Keyboard {
|
||||
}
|
||||
// END
|
||||
else if( keyCode === 35 ) {
|
||||
this.Reveal.slide( Number.MAX_VALUE );
|
||||
this.Reveal.slide( this.Reveal.getHorizontalSlides().length - 1 );
|
||||
}
|
||||
// SPACE
|
||||
else if( keyCode === 32 ) {
|
||||
@@ -339,10 +343,10 @@ export default class Keyboard {
|
||||
this.Reveal.overview.deactivate();
|
||||
}
|
||||
if( event.shiftKey ) {
|
||||
this.Reveal.prev();
|
||||
this.Reveal.prev({skipFragments: event.altKey});
|
||||
}
|
||||
else {
|
||||
this.Reveal.next();
|
||||
this.Reveal.next({skipFragments: event.altKey});
|
||||
}
|
||||
}
|
||||
// TWO-SPOT, SEMICOLON, B, V, PERIOD, LOGITECH PRESENTER TOOLS "BLACK SCREEN" BUTTON
|
||||
|
||||
@@ -3,6 +3,10 @@
|
||||
*/
|
||||
export default class Location {
|
||||
|
||||
// The minimum number of milliseconds that must pass between
|
||||
// calls to history.replaceState
|
||||
MAX_REPLACE_STATE_FREQUENCY = 1000
|
||||
|
||||
constructor( Reveal ) {
|
||||
|
||||
this.Reveal = Reveal;
|
||||
@@ -10,6 +14,8 @@ export default class Location {
|
||||
// Delays updates to the URL due to a Chrome thumbnailer bug
|
||||
this.writeURLTimeout = 0;
|
||||
|
||||
this.replaceStateTimestamp = 0;
|
||||
|
||||
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() {
|
||||
|
||||
let config = this.Reveal.getConfig();
|
||||
let indices = this.Reveal.getIndices();
|
||||
let currentSlide = this.Reveal.getCurrentSlide();
|
||||
|
||||
let hash = window.location.hash;
|
||||
getIndicesFromHash( hash=window.location.hash ) {
|
||||
|
||||
// Attempt to parse the hash as either an index or name
|
||||
let bits = hash.slice( 2 ).split( '/' ),
|
||||
name = hash.replace( /#\/?/gi, '' );
|
||||
let name = hash.replace( /^#\/?/, '' );
|
||||
let bits = name.split( '/' );
|
||||
|
||||
// If the first bit is not fully numeric and there is a name we
|
||||
// can assume that this is a named link
|
||||
@@ -61,23 +66,12 @@ export default class Location {
|
||||
}
|
||||
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 the slide exists and is not the current slide...
|
||||
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 );
|
||||
return { ...this.Reveal.getIndices( element ), f };
|
||||
}
|
||||
}
|
||||
else {
|
||||
const config = this.Reveal.getConfig();
|
||||
let hashIndexBase = config.hashOneBasedIndex ? 1 : 0;
|
||||
|
||||
// Read the index components of the hash
|
||||
@@ -92,10 +86,32 @@ export default class Location {
|
||||
}
|
||||
}
|
||||
|
||||
if( h !== indices.h || v !== indices.v || f !== undefined ) {
|
||||
this.Reveal.slide( h, v, f );
|
||||
return { 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 ) {
|
||||
// If the hash is empty, don't add it to the URL
|
||||
if( hash === '/' ) {
|
||||
window.history.replaceState( null, null, window.location.pathname + window.location.search );
|
||||
this.debouncedReplaceState( window.location.pathname + window.location.search );
|
||||
}
|
||||
else {
|
||||
window.history.replaceState( null, null, '#' + hash );
|
||||
this.debouncedReplaceState( '#' + hash );
|
||||
}
|
||||
}
|
||||
// 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.
|
||||
*
|
||||
|
||||
@@ -111,4 +111,10 @@ export default class Notes {
|
||||
|
||||
}
|
||||
|
||||
destroy() {
|
||||
|
||||
this.element.remove();
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
@@ -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 = [];
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@@ -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
|
||||
* to determine if the cursor is active or not.
|
||||
|
||||
@@ -16,20 +16,26 @@ export default class Print {
|
||||
* Configures the presentation for printing to a static
|
||||
* 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
|
||||
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 ) );
|
||||
|
||||
// Dimensions of slides within the pages
|
||||
let slideWidth = slideSize.width,
|
||||
const slideWidth = slideSize.width,
|
||||
slideHeight = slideSize.height;
|
||||
|
||||
await new Promise( requestAnimationFrame );
|
||||
|
||||
// Let the browser know what page size we want to print
|
||||
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.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
|
||||
await new Promise( requestAnimationFrame );
|
||||
this.Reveal.layoutSlideContents( slideWidth, slideHeight );
|
||||
|
||||
// Compute slide numbers now, before we start duplicating slides
|
||||
let doingSlideNumbers = config.slideNumber && /all|print/i.test( config.showSlideNumber );
|
||||
queryAll( this.Reveal.getRevealElement(), SLIDES_SELECTOR ).forEach( function( slide ) {
|
||||
slide.setAttribute( 'data-slide-number', this.Reveal.slideNumber.getSlideNumber( slide ) );
|
||||
}, this );
|
||||
// Batch scrollHeight access to prevent layout thrashing
|
||||
await new Promise( requestAnimationFrame );
|
||||
|
||||
const slideScrollHeights = slides.map( slide => slide.scrollHeight );
|
||||
|
||||
const pages = [];
|
||||
const pageContainer = slides[0].parentNode;
|
||||
|
||||
// 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
|
||||
// children will be
|
||||
if( slide.classList.contains( 'stack' ) === false ) {
|
||||
// Center the slide inside of the page, giving the slide some margin
|
||||
let left = ( pageWidth - slideWidth ) / 2,
|
||||
top = ( pageHeight - slideHeight ) / 2;
|
||||
let left = ( pageWidth - slideWidth ) / 2;
|
||||
let top = ( pageHeight - slideHeight ) / 2;
|
||||
|
||||
let contentHeight = slide.scrollHeight;
|
||||
const contentHeight = slideScrollHeights[ index ];
|
||||
let numberOfPages = Math.max( Math.ceil( contentHeight / pageHeight ), 1 );
|
||||
|
||||
// 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
|
||||
// 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.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 );
|
||||
|
||||
// Position the slide inside of the page
|
||||
@@ -83,6 +109,10 @@ export default class Print {
|
||||
slide.style.top = top + '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 ) {
|
||||
page.insertBefore( slide.slideBackgroundElement, slide );
|
||||
}
|
||||
@@ -91,19 +121,19 @@ export default class Print {
|
||||
if( config.showNotes ) {
|
||||
|
||||
// Are there notes for this slide?
|
||||
let notes = this.Reveal.getSlideNotes( slide );
|
||||
const notes = this.Reveal.getSlideNotes( slide );
|
||||
if( notes ) {
|
||||
|
||||
let notesSpacing = 8;
|
||||
let notesLayout = typeof config.showNotes === 'string' ? config.showNotes : 'inline';
|
||||
let notesElement = document.createElement( 'div' );
|
||||
const notesSpacing = 8;
|
||||
const notesLayout = typeof config.showNotes === 'string' ? config.showNotes : 'inline';
|
||||
const notesElement = document.createElement( 'div' );
|
||||
notesElement.classList.add( 'speaker-notes' );
|
||||
notesElement.classList.add( 'speaker-notes-pdf' );
|
||||
notesElement.setAttribute( 'data-layout', notesLayout );
|
||||
notesElement.innerHTML = notes;
|
||||
|
||||
if( notesLayout === 'separate-page' ) {
|
||||
page.parentNode.insertBefore( notesElement, page.nextSibling );
|
||||
pages.push( notesElement );
|
||||
}
|
||||
else {
|
||||
notesElement.style.left = notesSpacing + 'px';
|
||||
@@ -118,10 +148,11 @@ export default class Print {
|
||||
|
||||
// Inject slide numbers if `slideNumbers` are enabled
|
||||
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-pdf' );
|
||||
numberElement.innerHTML = slide.getAttribute( 'data-slide-number' );
|
||||
numberElement.innerHTML = slideNumber;
|
||||
page.appendChild( numberElement );
|
||||
}
|
||||
|
||||
@@ -131,10 +162,9 @@ export default class Print {
|
||||
// Each fragment 'group' is an array containing one or more
|
||||
// fragments. Multiple fragments that appear at the same time
|
||||
// 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 previousPage;
|
||||
|
||||
fragmentGroups.forEach( function( fragments ) {
|
||||
|
||||
@@ -151,11 +181,10 @@ export default class Print {
|
||||
}, this );
|
||||
|
||||
// Create a separate page for the current fragment state
|
||||
let clonedPage = page.cloneNode( true );
|
||||
page.parentNode.insertBefore( clonedPage, ( previousPage || page ).nextSibling );
|
||||
const clonedPage = page.cloneNode( true );
|
||||
pages.push( clonedPage );
|
||||
|
||||
previousFragmentStep = fragments;
|
||||
previousPage = clonedPage;
|
||||
|
||||
}, this );
|
||||
|
||||
@@ -178,6 +207,10 @@ export default class Print {
|
||||
|
||||
}, this );
|
||||
|
||||
await new Promise( requestAnimationFrame );
|
||||
|
||||
pages.forEach( page => pageContainer.appendChild( page ) );
|
||||
|
||||
// Notify subscribers that the PDF layout is good to go
|
||||
this.Reveal.dispatchEvent({ type: 'pdf-ready' });
|
||||
|
||||
@@ -192,4 +225,4 @@ export default class Print {
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
@@ -88,16 +88,23 @@ export default class Progress {
|
||||
|
||||
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 );
|
||||
|
||||
if( this.Reveal.getConfig().rtl ) {
|
||||
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();
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
@@ -1,5 +1,4 @@
|
||||
import { HORIZONTAL_SLIDES_SELECTOR, VERTICAL_SLIDES_SELECTOR } from '../utils/constants.js'
|
||||
import { extend, queryAll, closest } from '../utils/util.js'
|
||||
import { extend, queryAll, closest, getMimeTypeFromFile } from '../utils/util.js'
|
||||
import { isMobile } from '../utils/device.js'
|
||||
|
||||
import fitty from 'fitty';
|
||||
@@ -102,7 +101,16 @@ export default class SlideContent {
|
||||
|
||||
// Images
|
||||
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
|
||||
else if ( backgroundVideo && !this.Reveal.isSpeakerNotes() ) {
|
||||
@@ -128,7 +136,13 @@ export default class SlideContent {
|
||||
|
||||
// Support comma separated lists of video sources
|
||||
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 );
|
||||
@@ -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
|
||||
// size of its container. This needs to happen after the
|
||||
// slide is visible in order to measure the text.
|
||||
Array.from( slide.querySelectorAll( '.r-fit-text:not([data-fitted])' ) ).forEach( element => {
|
||||
element.dataset.fitted = '';
|
||||
Array.from( slide.querySelectorAll( '.r-fit-text' ) ).forEach( element => {
|
||||
fitty( element, {
|
||||
minSize: 24,
|
||||
maxSize: this.Reveal.getConfig().height * 0.8,
|
||||
@@ -453,4 +476,4 @@ export default class SlideContent {
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
@@ -123,4 +123,10 @@ export default class SlideNumber {
|
||||
|
||||
}
|
||||
|
||||
destroy() {
|
||||
|
||||
this.element.remove();
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
@@ -1,4 +1,5 @@
|
||||
import { isAndroid } from '../utils/device.js'
|
||||
import { matches } from '../utils/util.js'
|
||||
|
||||
const SWIPE_THRESHOLD = 40;
|
||||
|
||||
@@ -82,6 +83,9 @@ export default class Touch {
|
||||
*/
|
||||
isSwipePrevented( target ) {
|
||||
|
||||
// Prevent accidental swipes when scrubbing timelines
|
||||
if( matches( target, 'video, audio' ) ) return true;
|
||||
|
||||
while( target && typeof target.hasAttribute === 'function' ) {
|
||||
if( target.hasAttribute( 'data-prevent-swipe' ) ) return true;
|
||||
target = target.parentNode;
|
||||
|
||||
+223
-53
@@ -26,14 +26,14 @@ import {
|
||||
} from './utils/constants.js'
|
||||
|
||||
// The reveal.js version
|
||||
export const VERSION = '4.1.0';
|
||||
export const VERSION = '4.3.1';
|
||||
|
||||
/**
|
||||
* reveal.js
|
||||
* https://revealjs.com
|
||||
* 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 ) {
|
||||
|
||||
@@ -121,10 +121,14 @@ export default function( revealElement, options ) {
|
||||
*/
|
||||
function initialize( initOptions ) {
|
||||
|
||||
if( !revealElement ) throw 'Unable to find presentation root (<div class="reveal">).';
|
||||
|
||||
// Cache references to key DOM elements
|
||||
dom.wrapper = revealElement;
|
||||
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:
|
||||
// 1. Default reveal.js options
|
||||
// 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
|
||||
setupScrollPrevention();
|
||||
|
||||
// Adds bindings for fullscreen mode
|
||||
setupFullscreen();
|
||||
|
||||
// Resets all vertical slides so that only the first is visible
|
||||
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
|
||||
* possible to call all reveal.js API methods from another
|
||||
@@ -385,32 +405,7 @@ export default function( revealElement, options ) {
|
||||
function setupPostMessage() {
|
||||
|
||||
if( config.postMessage ) {
|
||||
window.addEventListener( 'message', 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' );
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}, false );
|
||||
window.addEventListener( 'message', onPostMessage, false );
|
||||
}
|
||||
|
||||
}
|
||||
@@ -525,6 +520,7 @@ export default function( revealElement, options ) {
|
||||
controls.bind();
|
||||
focus.bind();
|
||||
|
||||
dom.slides.addEventListener( 'click', onSlidesClicked, false );
|
||||
dom.slides.addEventListener( 'transitionend', onTransitionEnd, false );
|
||||
dom.pauseOverlay.addEventListener( 'click', resume, false );
|
||||
|
||||
@@ -550,11 +546,71 @@ export default function( revealElement, options ) {
|
||||
|
||||
window.removeEventListener( 'resize', onWindowResize, false );
|
||||
|
||||
dom.slides.removeEventListener( 'click', onSlidesClicked, false );
|
||||
dom.slides.removeEventListener( 'transitionend', onTransitionEnd, 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,
|
||||
* like slidechanged.
|
||||
@@ -614,6 +670,8 @@ export default function( revealElement, options ) {
|
||||
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} [f] Index of a fragment within the
|
||||
* 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
|
||||
previousSlide = currentSlide;
|
||||
@@ -1251,7 +1322,10 @@ export default function( revealElement, options ) {
|
||||
// Note 20-03-2020:
|
||||
// This needs to happen before we update slide visibility,
|
||||
// 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;
|
||||
dom.slides.classList.add( 'disable-slide-transitions' );
|
||||
}
|
||||
@@ -1323,7 +1397,7 @@ export default function( revealElement, options ) {
|
||||
indexv,
|
||||
previousSlide,
|
||||
currentSlide,
|
||||
origin: o
|
||||
origin
|
||||
}
|
||||
});
|
||||
}
|
||||
@@ -1335,7 +1409,11 @@ export default function( revealElement, options ) {
|
||||
}
|
||||
|
||||
// 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();
|
||||
controls.update();
|
||||
@@ -2186,55 +2264,55 @@ export default function( revealElement, options ) {
|
||||
|
||||
}
|
||||
|
||||
function navigateLeft() {
|
||||
function navigateLeft({skipFragments=false}={}) {
|
||||
|
||||
navigationHistory.hasNavigatedHorizontally = true;
|
||||
|
||||
// Reverse for 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 );
|
||||
}
|
||||
}
|
||||
// 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 );
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
function navigateRight() {
|
||||
function navigateRight({skipFragments=false}={}) {
|
||||
|
||||
navigationHistory.hasNavigatedHorizontally = true;
|
||||
|
||||
// Reverse for 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 );
|
||||
}
|
||||
}
|
||||
// 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 );
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
function navigateUp() {
|
||||
function navigateUp({skipFragments=false}={}) {
|
||||
|
||||
// Prioritize hiding fragments
|
||||
if( ( overview.isActive() || fragments.prev() === false ) && availableRoutes().up ) {
|
||||
if( ( overview.isActive() || skipFragments || fragments.prev() === false ) && availableRoutes().up ) {
|
||||
slide( indexh, indexv - 1 );
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
function navigateDown() {
|
||||
function navigateDown({skipFragments=false}={}) {
|
||||
|
||||
navigationHistory.hasNavigatedVertically = true;
|
||||
|
||||
// Prioritize revealing fragments
|
||||
if( ( overview.isActive() || fragments.next() === false ) && availableRoutes().down ) {
|
||||
if( ( overview.isActive() || skipFragments || fragments.next() === false ) && availableRoutes().down ) {
|
||||
slide( indexh, indexv + 1 );
|
||||
}
|
||||
|
||||
@@ -2246,12 +2324,12 @@ export default function( revealElement, options ) {
|
||||
* 2) Previous vertical slide
|
||||
* 3) Previous horizontal slide
|
||||
*/
|
||||
function navigatePrev() {
|
||||
function navigatePrev({skipFragments=false}={}) {
|
||||
|
||||
// Prioritize revealing fragments
|
||||
if( fragments.prev() === false ) {
|
||||
if( skipFragments || fragments.prev() === false ) {
|
||||
if( availableRoutes().up ) {
|
||||
navigateUp();
|
||||
navigateUp({skipFragments});
|
||||
}
|
||||
else {
|
||||
// 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();
|
||||
}
|
||||
|
||||
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 h = indexh - 1;
|
||||
slide( h, v );
|
||||
}
|
||||
else {
|
||||
navigateLeft({skipFragments});
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -2277,31 +2360,31 @@ export default function( revealElement, options ) {
|
||||
/**
|
||||
* The reverse of #navigatePrev().
|
||||
*/
|
||||
function navigateNext() {
|
||||
function navigateNext({skipFragments=false}={}) {
|
||||
|
||||
navigationHistory.hasNavigatedHorizontally = true;
|
||||
navigationHistory.hasNavigatedVertically = true;
|
||||
|
||||
// Prioritize revealing fragments
|
||||
if( fragments.next() === false ) {
|
||||
if( skipFragments || fragments.next() === false ) {
|
||||
|
||||
let routes = availableRoutes();
|
||||
|
||||
// When looping is enabled `routes.down` is always available
|
||||
// so we need a separate check for when we've reached the
|
||||
// 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;
|
||||
}
|
||||
|
||||
if( routes.down ) {
|
||||
navigateDown();
|
||||
navigateDown({skipFragments});
|
||||
}
|
||||
else if( config.rtl ) {
|
||||
navigateLeft();
|
||||
navigateLeft({skipFragments});
|
||||
}
|
||||
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.
|
||||
*
|
||||
@@ -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.
|
||||
*
|
||||
@@ -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
|
||||
* iframe overlay.
|
||||
@@ -2425,6 +2587,7 @@ export default function( revealElement, options ) {
|
||||
|
||||
initialize,
|
||||
configure,
|
||||
destroy,
|
||||
|
||||
sync,
|
||||
syncSlide,
|
||||
@@ -2500,6 +2663,10 @@ export default function( revealElement, options ) {
|
||||
loadSlide: slideContent.load.bind( slideContent ),
|
||||
unloadSlide: slideContent.unload.bind( slideContent ),
|
||||
|
||||
// Preview management
|
||||
showPreview,
|
||||
hidePreview: closeOverlay,
|
||||
|
||||
// Adds or removes all internal event listeners
|
||||
addEventListeners,
|
||||
removeEventListeners,
|
||||
@@ -2577,6 +2744,9 @@ export default function( revealElement, options ) {
|
||||
// Helper method, retrieves query string as a key:value map
|
||||
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
|
||||
getRevealElement: () => revealElement,
|
||||
getSlidesElement: () => dom.slides,
|
||||
|
||||
@@ -29,9 +29,9 @@ export const colorToRgb = ( color ) => {
|
||||
if( hex6 && hex6[1] ) {
|
||||
hex6 = hex6[1];
|
||||
return {
|
||||
r: parseInt( hex6.substr( 0, 2 ), 16 ),
|
||||
g: parseInt( hex6.substr( 2, 2 ), 16 ),
|
||||
b: parseInt( hex6.substr( 4, 2 ), 16 )
|
||||
r: parseInt( hex6.slice( 0, 2 ), 16 ),
|
||||
g: parseInt( hex6.slice( 2, 4 ), 16 ),
|
||||
b: parseInt( hex6.slice( 4, 6 ), 16 )
|
||||
};
|
||||
}
|
||||
|
||||
|
||||
@@ -279,4 +279,19 @@ export const getRemainingHeight = ( element, height = 0 ) => {
|
||||
|
||||
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()]
|
||||
}
|
||||
Generated
+12430
-3472
File diff suppressed because it is too large
Load Diff
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "reveal.js",
|
||||
"version": "4.1.0",
|
||||
"version": "4.3.1",
|
||||
"description": "The HTML Presentation Framework",
|
||||
"homepage": "https://revealjs.com",
|
||||
"subdomain": "revealjs",
|
||||
@@ -10,7 +10,7 @@
|
||||
"scripts": {
|
||||
"test": "gulp test",
|
||||
"start": "gulp serve",
|
||||
"build": "gulp"
|
||||
"build": "gulp build"
|
||||
},
|
||||
"author": {
|
||||
"name": "Hakim El Hattab",
|
||||
@@ -30,32 +30,32 @@
|
||||
"presentation"
|
||||
],
|
||||
"devDependencies": {
|
||||
"@babel/core": "^7.9.6",
|
||||
"@babel/preset-env": "^7.9.6",
|
||||
"@rollup/plugin-babel": "^5.2.0",
|
||||
"@rollup/plugin-commonjs": "^15.0.0",
|
||||
"@rollup/plugin-node-resolve": "^9.0.0",
|
||||
"babel-eslint": "^10.1.0",
|
||||
"@babel/core": "^7.14.3",
|
||||
"@babel/eslint-parser": "^7.14.3",
|
||||
"@babel/preset-env": "^7.14.2",
|
||||
"@rollup/plugin-babel": "^5.3.0",
|
||||
"@rollup/plugin-commonjs": "^19.0.0",
|
||||
"@rollup/plugin-node-resolve": "^13.0.0",
|
||||
"babel-plugin-transform-html-import-to-string": "0.0.1",
|
||||
"colors": "^1.4.0",
|
||||
"core-js": "^3.6.5",
|
||||
"core-js": "^3.12.1",
|
||||
"fitty": "^2.3.0",
|
||||
"glob": "^7.1.6",
|
||||
"glob": "^7.1.7",
|
||||
"gulp": "^4.0.2",
|
||||
"gulp-autoprefixer": "^7.0.1",
|
||||
"gulp-autoprefixer": "^8.0.0",
|
||||
"gulp-clean-css": "^4.2.0",
|
||||
"gulp-connect": "^5.7.0",
|
||||
"gulp-eslint": "^6.0.0",
|
||||
"gulp-header": "^2.0.9",
|
||||
"gulp-sass": "^4.0.2",
|
||||
"gulp-tap": "^2.0.0",
|
||||
"gulp-zip": "^5.0.1",
|
||||
"gulp-zip": "^4.2.0",
|
||||
"highlight.js": "^10.0.3",
|
||||
"marked": "^1.1.0",
|
||||
"node-qunit-puppeteer": "^2.0.1",
|
||||
"qunit": "^2.10.0",
|
||||
"rollup": "^2.26.4",
|
||||
"rollup-plugin-terser": "^7.0.0",
|
||||
"marked": "^4.0.12",
|
||||
"node-qunit-puppeteer": "^2.1.0",
|
||||
"qunit": "^2.17.2",
|
||||
"rollup": "^2.48.0",
|
||||
"rollup-plugin-terser": "^7.0.2",
|
||||
"sass": "^1.39.2",
|
||||
"yargs": "^15.1.0"
|
||||
},
|
||||
"browserslist": "> 0.5%, IE 11, not dead",
|
||||
@@ -64,10 +64,11 @@
|
||||
"browser": true,
|
||||
"es6": true
|
||||
},
|
||||
"parser": "babel-eslint",
|
||||
"parser": "@babel/eslint-parser",
|
||||
"parserOptions": {
|
||||
"sourceType": "module",
|
||||
"allowImportExportEverywhere": true
|
||||
"allowImportExportEverywhere": true,
|
||||
"requireConfigFile": false
|
||||
},
|
||||
"globals": {
|
||||
"module": false,
|
||||
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@@ -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.
|
||||
@@ -16,7 +16,7 @@ const Plugin = {
|
||||
HIGHLIGHT_LINE_DELIMITER: ',',
|
||||
HIGHLIGHT_LINE_RANGE_DELIMITER: '-',
|
||||
|
||||
hljs: hljs,
|
||||
hljs,
|
||||
|
||||
/**
|
||||
* Highlights code blocks withing the given deck.
|
||||
@@ -29,11 +29,14 @@ const Plugin = {
|
||||
init: function( reveal ) {
|
||||
|
||||
// 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.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
|
||||
// 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)
|
||||
block.addEventListener( 'focusout', function( event ) {
|
||||
hljs.highlightBlock( event.currentTarget );
|
||||
hljs.highlightElement( event.currentTarget );
|
||||
}, 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
|
||||
// all blocks in the deck into view at once
|
||||
reveal.on( 'pdf-ready', function() {
|
||||
@@ -85,7 +96,7 @@ const Plugin = {
|
||||
*/
|
||||
highlightBlock: function( block ) {
|
||||
|
||||
hljs.highlightBlock( block );
|
||||
hljs.highlightElement( block );
|
||||
|
||||
// Don't generate line numbers for empty code blocks
|
||||
if( block.innerHTML.trim().length === 0 ) return;
|
||||
@@ -95,7 +106,7 @@ const Plugin = {
|
||||
|
||||
var scrollState = { currentBlock: block };
|
||||
|
||||
// If there is at least one highlight step, generate
|
||||
// If there is more than one highlight step, generate
|
||||
// fragments
|
||||
var highlightSteps = Plugin.deserializeHighlightSteps( block.getAttribute( 'data-line-numbers' ) );
|
||||
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] ] ) );
|
||||
|
||||
}
|
||||
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@@ -4,9 +4,9 @@
|
||||
* 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_ELEMENT_ATTRIBUTES_SEPARATOR = '\\\.element\\\s*?(.+?)$',
|
||||
DEFAULT_SLIDE_ATTRIBUTES_SEPARATOR = '\\\.slide:\\\s*?(\\\S.+?)$';
|
||||
@@ -206,7 +206,7 @@ const Plugin = () => {
|
||||
|
||||
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 ) {
|
||||
|
||||
@@ -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 ), {
|
||||
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;
|
||||
|
||||
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
|
||||
let lineNumbers = '';
|
||||
renderer.code = ( code, language ) => {
|
||||
|
||||
// Users can opt in to show line numbers and highlight
|
||||
// specific lines.
|
||||
// ```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();
|
||||
}
|
||||
// Off by default
|
||||
let lineNumbers = '';
|
||||
|
||||
// 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 );
|
||||
// Users can opt in to show line numbers and highlight
|
||||
// specific lines.
|
||||
// ```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();
|
||||
}
|
||||
|
||||
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( {
|
||||
renderer,
|
||||
...deck.getConfig().markdown
|
||||
...markedOptions
|
||||
} );
|
||||
|
||||
return processSlides( deck.getRevealElement() ).then( convertSlides );
|
||||
|
||||
Executable
+96
@@ -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 ) );
|
||||
}
|
||||
});
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
};
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@@ -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 ] );
|
||||
|
||||
} );
|
||||
|
||||
} );
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
};
|
||||
@@ -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();
|
||||
} );
|
||||
} );
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
};
|
||||
Executable → Regular
+14
-90
@@ -1,91 +1,15 @@
|
||||
/**
|
||||
* A plugin which enables rendering of math equations inside
|
||||
* of reveal.js slides. Essentially a thin wrapper for MathJax.
|
||||
*
|
||||
* @author Hakim El Hattab
|
||||
import {KaTeX} from "./katex";
|
||||
import {MathJax2} from "./mathjax2";
|
||||
import {MathJax3} from "./mathjax3";
|
||||
|
||||
const defaultTypesetter = MathJax2;
|
||||
|
||||
/*!
|
||||
* This plugin is a wrapper for the MathJax2,
|
||||
* MathJax3 and KaTeX typesetter plugins.
|
||||
*/
|
||||
const Plugin = () => {
|
||||
|
||||
// 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: '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;
|
||||
export default Plugin = Object.assign( defaultTypesetter(), {
|
||||
KaTeX,
|
||||
MathJax2,
|
||||
MathJax3
|
||||
} );
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@@ -1,6 +1,6 @@
|
||||
import speakerViewHTML from './speaker-view.html';
|
||||
|
||||
import marked from 'marked';
|
||||
import { marked } from 'marked';
|
||||
|
||||
/**
|
||||
* Handles opening of and synchronization with the reveal.js
|
||||
@@ -15,141 +15,172 @@ import marked from 'marked';
|
||||
*/
|
||||
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) {
|
||||
popup.focus();
|
||||
return;
|
||||
}
|
||||
if( !speakerWindow ) {
|
||||
alert( 'Speaker view popup failed to open. Please make sure popups are allowed and reopen the speaker view.' );
|
||||
return;
|
||||
}
|
||||
|
||||
popup = window.open( 'about:blank', 'reveal.js - Notes', 'width=1100,height=700' );
|
||||
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();
|
||||
}
|
||||
|
||||
/**
|
||||
* 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 );
|
||||
if( data && data.namespace === 'reveal-notes' && data.type === 'connected' ) {
|
||||
clearInterval( connectInterval );
|
||||
onConnected();
|
||||
}
|
||||
if( data && data.namespace === 'reveal-notes' && data.type === 'call' ) {
|
||||
callRevealApi( data.methodName, data.arguments, data.callId );
|
||||
}
|
||||
} );
|
||||
/**
|
||||
* Reconnect with an existing speaker view window.
|
||||
*/
|
||||
function reconnectSpeakerWindow( reconnectWindow ) {
|
||||
|
||||
if( speakerWindow && !speakerWindow.closed ) {
|
||||
speakerWindow.focus();
|
||||
}
|
||||
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',
|
||||
type: 'return',
|
||||
result: result,
|
||||
callId: callId
|
||||
type: 'connect',
|
||||
state: deck.getState(),
|
||||
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';
|
||||
}
|
||||
|
||||
/**
|
||||
* 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' );
|
||||
// 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 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 ), '*' );
|
||||
|
||||
}
|
||||
|
||||
/**
|
||||
* 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();
|
||||
|
||||
// Look for notes defined in an aside element
|
||||
if( notesElement ) {
|
||||
messageData.notes = notesElement.innerHTML;
|
||||
messageData.markdown = typeof notesElement.getAttribute( 'data-markdown' ) === 'string';
|
||||
}
|
||||
|
||||
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( 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
|
||||
deck.addKeyBinding({keyCode: 83, key: 'S', description: 'Speaker notes view'}, function() {
|
||||
openNotes();
|
||||
openSpeakerWindow();
|
||||
} );
|
||||
|
||||
}
|
||||
|
||||
},
|
||||
|
||||
open: openNotes
|
||||
open: openSpeakerWindow
|
||||
};
|
||||
|
||||
};
|
||||
|
||||
@@ -1,3 +1,6 @@
|
||||
<!--
|
||||
NOTE: You need to build the notes plugin after making changes to this file.
|
||||
-->
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
@@ -347,7 +350,8 @@
|
||||
layoutDropdown,
|
||||
pendingCalls = {},
|
||||
lastRevealApiCallId = 0,
|
||||
connected = false;
|
||||
connected = false,
|
||||
whitelistedWindows = [window.opener];
|
||||
|
||||
var SPEAKER_LAYOUTS = {
|
||||
'default': 'Default',
|
||||
@@ -362,9 +366,14 @@
|
||||
var connectionTimeout = setTimeout( function() {
|
||||
connectionStatus.innerHTML = 'Error connecting to main window.<br>Please try closing and reopening the speaker view.';
|
||||
}, 5000 );
|
||||
|
||||
;
|
||||
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 );
|
||||
connectionStatus.style.display = 'none';
|
||||
|
||||
@@ -395,13 +404,21 @@
|
||||
}
|
||||
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.
|
||||
*/
|
||||
@@ -432,6 +449,7 @@
|
||||
setupKeyboard();
|
||||
setupNotes();
|
||||
setupTimer();
|
||||
setupHeartbeat();
|
||||
}
|
||||
|
||||
}
|
||||
@@ -521,6 +539,8 @@
|
||||
upcomingSlide.setAttribute( 'src', upcomingURL );
|
||||
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 ) {
|
||||
|
||||
callRevealApi( 'getSlidesAttributes', [], function ( slideAttributes ) {
|
||||
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@@ -25,6 +25,12 @@ const Plugin = {
|
||||
}
|
||||
} );
|
||||
|
||||
},
|
||||
|
||||
destroy: () => {
|
||||
|
||||
zoom.reset();
|
||||
|
||||
}
|
||||
|
||||
};
|
||||
@@ -52,19 +58,11 @@ var zoom = (function(){
|
||||
panUpdateInterval = -1;
|
||||
|
||||
// Check for transform support so that we can fallback otherwise
|
||||
var supportsTransforms = '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;
|
||||
var supportsTransforms = 'transform' in document.body.style;
|
||||
|
||||
if( supportsTransforms ) {
|
||||
// The easing that will be applied when we zoom in/out
|
||||
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
|
||||
@@ -105,10 +103,6 @@ var zoom = (function(){
|
||||
// Reset
|
||||
if( scale === 1 ) {
|
||||
document.body.style.transform = '';
|
||||
document.body.style.OTransform = '';
|
||||
document.body.style.msTransform = '';
|
||||
document.body.style.MozTransform = '';
|
||||
document.body.style.WebkitTransform = '';
|
||||
}
|
||||
// Scale
|
||||
else {
|
||||
@@ -116,16 +110,7 @@ var zoom = (function(){
|
||||
transform = 'translate('+ -rect.x +'px,'+ -rect.y +'px) scale('+ scale +')';
|
||||
|
||||
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.OTransform = transform;
|
||||
document.body.style.msTransform = transform;
|
||||
document.body.style.MozTransform = transform;
|
||||
document.body.style.WebkitTransform = transform;
|
||||
}
|
||||
}
|
||||
else {
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
/*!
|
||||
* 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}
|
||||
|
||||
@@ -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
|
||||
*/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}}));
|
||||
|
||||
@@ -9,4 +9,4 @@ var a = 1;
|
||||
|
||||
|
||||
|
||||
## Slide 2
|
||||
## Slide 2
|
||||
@@ -23,19 +23,19 @@
|
||||
<section data-auto-animate>
|
||||
<h1>h1</h1>
|
||||
<h2>h2</h2>
|
||||
<h3 style="position: absolute; left: 0;">h3</h2>
|
||||
<h3 style="position: absolute; left: 0;">h3</h3>
|
||||
</section>
|
||||
|
||||
<section data-auto-animate>
|
||||
<h1 data-auto-animate-duration="0.1">h1</h1>
|
||||
<h2 style="opacity: 0;">h2</h2>
|
||||
<h3 style="position: absolute; left: 100px;">h3</h2>
|
||||
<h3 style="position: absolute; left: 100px;">h3</h3>
|
||||
</section>
|
||||
|
||||
<section data-auto-animate data-auto-animate-duration="0.1">
|
||||
<h1>h1</h1>
|
||||
<h2>h2</h2>
|
||||
<h3>h3</h2>
|
||||
<h3>h3</h3>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
|
||||
@@ -281,6 +281,15 @@
|
||||
```
|
||||
</script>
|
||||
</section>
|
||||
<section data-markdown class="with-code-in-fragment">
|
||||
<script type="text/template">
|
||||
```js
|
||||
foo.bar();
|
||||
```
|
||||
|
||||
<!-- .element: class="fragment" -->
|
||||
</script>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -452,6 +461,10 @@
|
||||
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 );
|
||||
});
|
||||
|
||||
QUnit.test( '```block should allow custom fragment', function( assert ) {
|
||||
assert.strictEqual( deck6.getRevealElement().querySelectorAll( '.with-code-in-fragment pre.fragment' ).length, 1 );
|
||||
});
|
||||
|
||||
} );
|
||||
|
||||
|
||||
@@ -36,7 +36,7 @@
|
||||
<section data-background="examples/assets/image2.png" data-notes="speaker notes 2">
|
||||
<h1>2.1</h1>
|
||||
</section>
|
||||
<section>
|
||||
<section data-background-image="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEASABIAAD/4gIcSUNDX1BST0ZJTEUAAQEAAAIMbGNtcwIQAABtbnRyUkdCIFhZWiAH3AABABkAAwApADlhY3NwQVBQTAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA9tYAAQAAAADTLWxjbXMAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAApkZXNjAAAA/">
|
||||
<h1>2.2</h1>
|
||||
</section>
|
||||
<section>
|
||||
@@ -97,6 +97,11 @@
|
||||
// 4
|
||||
Reveal.initialize().then( function() {
|
||||
|
||||
// Helper methods
|
||||
function triggerKeyboardEvent(config) {
|
||||
document.dispatchEvent( new KeyboardEvent( 'keydown', config ) );
|
||||
}
|
||||
|
||||
// ---------------------------------------------------------------
|
||||
// DOM TESTS
|
||||
|
||||
@@ -336,38 +341,38 @@
|
||||
Reveal.configure({ hash: true, fragmentInURL: false });
|
||||
|
||||
Reveal.slide( 2, 0 );
|
||||
assert.strictEqual( window.location.hash, '#/2' );
|
||||
assert.strictEqual( Reveal.getSlidePath(), '/2' );
|
||||
|
||||
Reveal.slide( 2, 1 );
|
||||
assert.strictEqual( window.location.hash, '#/2/1' );
|
||||
assert.strictEqual( Reveal.getSlidePath(), '/2/1' );
|
||||
|
||||
Reveal.slide( 2, 0, 1 );
|
||||
assert.strictEqual( window.location.hash, '#/2' );
|
||||
assert.strictEqual( Reveal.getSlidePath(), '/2' );
|
||||
|
||||
Reveal.slide( 2, 2, 0 );
|
||||
assert.strictEqual( window.location.hash, '#/fragments3' );
|
||||
assert.strictEqual( Reveal.getSlidePath(), '/fragments3' );
|
||||
|
||||
Reveal.slide( 2, 2, 1 );
|
||||
assert.strictEqual( window.location.hash, '#/fragments3' );
|
||||
assert.strictEqual( Reveal.getSlidePath(), '/fragments3' );
|
||||
});
|
||||
|
||||
QUnit.test( 'Write (fragmentInURL: true)', function( assert ) {
|
||||
Reveal.configure({ hash: true, fragmentInURL: true });
|
||||
|
||||
Reveal.slide( 2, 0, -1 );
|
||||
assert.strictEqual( window.location.hash, '#/2' );
|
||||
assert.strictEqual( Reveal.getSlidePath(), '/2' );
|
||||
|
||||
Reveal.slide( 2, 1, -1 );
|
||||
assert.strictEqual( window.location.hash, '#/2/1' );
|
||||
assert.strictEqual( Reveal.getSlidePath(), '/2/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 );
|
||||
assert.strictEqual( window.location.hash, '#/fragments3' );
|
||||
assert.strictEqual( Reveal.getSlidePath(), '/fragments3' );
|
||||
|
||||
Reveal.slide( 2, 2, 1 );
|
||||
assert.strictEqual( window.location.hash, '#/fragments3/1' );
|
||||
assert.strictEqual( Reveal.getSlidePath(), '/fragments3/1' );
|
||||
});
|
||||
|
||||
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' );
|
||||
Reveal.toggleHelp( false );
|
||||
|
||||
let event = new KeyboardEvent( 'keydown', { 'keyCode':88 } );
|
||||
document.dispatchEvent( event );
|
||||
triggerKeyboardEvent({ keyCode: 88 });
|
||||
|
||||
Reveal.removeKeyBinding( 88 );
|
||||
|
||||
// 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();
|
||||
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 ) {
|
||||
var imageSource1 = Reveal.getSlide( 0 ).getAttribute( 'data-background-image' );
|
||||
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
|
||||
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, 1 ).querySelector( '.slide-background-content' ).style.backgroundImage.indexOf( imageSource3 ) !== -1, 'data-background worked' );
|
||||
});
|
||||
|
||||
|
||||
@@ -739,6 +783,31 @@
|
||||
|
||||
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 ) {
|
||||
assert.expect( 3 );
|
||||
var done = assert.async( 3 );
|
||||
|
||||
Reference in New Issue
Block a user