update packages and add valign
This commit is contained in:
@@ -1,6 +1,6 @@
|
||||
[codespell]
|
||||
# Ref: https://github.com/codespell-project/codespell#using-a-config-file
|
||||
skip = .git*,package-lock.json,*.css,.codespellrc
|
||||
skip = .git*,node_modules,package-lock.json,*.css,.codespellrc,react
|
||||
check-hidden = true
|
||||
# Ignore super long lines -- must be minimized etc, acronyms
|
||||
# and some near hit variables
|
||||
|
||||
@@ -21,3 +21,5 @@ jobs:
|
||||
uses: actions/checkout@v4
|
||||
- name: Codespell
|
||||
uses: codespell-project/actions-codespell@v2
|
||||
with:
|
||||
skip: ./.git,./dist,package-lock.json,*.css,.codespellrc,./react/
|
||||
|
||||
+1
-1
@@ -13,8 +13,8 @@ jobs:
|
||||
strategy:
|
||||
matrix:
|
||||
node-version:
|
||||
- 18
|
||||
- 20
|
||||
- 22
|
||||
|
||||
steps:
|
||||
- uses: actions/checkout@v4
|
||||
|
||||
@@ -8,4 +8,9 @@ out/
|
||||
log/*.log
|
||||
tmp/**
|
||||
node_modules/
|
||||
.sass-cache
|
||||
.sass-cache
|
||||
presentation
|
||||
presentation.zip
|
||||
dist/reveal.es5.js
|
||||
react/demo/dist
|
||||
react/dist/plugin
|
||||
@@ -1,5 +0,0 @@
|
||||
/test
|
||||
/examples
|
||||
.github
|
||||
.sass-cache
|
||||
gulpfile.js
|
||||
@@ -0,0 +1,7 @@
|
||||
js/**/*.js
|
||||
plugin/**/*.js
|
||||
**/*.md
|
||||
test/**/*.html
|
||||
examples/**/*.md
|
||||
dist/**/*
|
||||
*.html
|
||||
@@ -0,0 +1,8 @@
|
||||
{
|
||||
"useTabs": true,
|
||||
"tabWidth": 2,
|
||||
"trailingComma": "es5",
|
||||
"printWidth": 100,
|
||||
"singleQuote": true,
|
||||
"bracketSameLine": false
|
||||
}
|
||||
@@ -1,4 +1,4 @@
|
||||
Copyright (C) 2011-2024 Hakim El Hattab, http://hakim.se, and reveal.js contributors
|
||||
Copyright (C) 2011-2026 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
|
||||
|
||||
@@ -18,13 +18,15 @@ Want to create reveal.js presentation in a graphical editor? Try <https://slides
|
||||
---
|
||||
|
||||
### 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)
|
||||
|
||||
---
|
||||
---
|
||||
|
||||
<div align="center">
|
||||
MIT licensed | Copyright © 2011-2024 Hakim El Hattab, https://hakim.se
|
||||
MIT licensed | Copyright © 2011-2026 Hakim El Hattab, https://hakim.se
|
||||
</div>
|
||||
|
||||
@@ -38,7 +38,8 @@
|
||||
.reveal .r-hstack {
|
||||
display: flex;
|
||||
|
||||
img, video {
|
||||
img,
|
||||
video {
|
||||
min-width: 0;
|
||||
min-height: 0;
|
||||
object-fit: contain;
|
||||
@@ -58,13 +59,31 @@
|
||||
}
|
||||
|
||||
// Naming based on tailwindcss
|
||||
.reveal .items-stretch { align-items: stretch; }
|
||||
.reveal .items-start { align-items: flex-start; }
|
||||
.reveal .items-center { align-items: center; }
|
||||
.reveal .items-end { align-items: flex-end; }
|
||||
.reveal .items-stretch {
|
||||
align-items: stretch;
|
||||
}
|
||||
.reveal .items-start {
|
||||
align-items: flex-start;
|
||||
}
|
||||
.reveal .items-center {
|
||||
align-items: center;
|
||||
}
|
||||
.reveal .items-end {
|
||||
align-items: flex-end;
|
||||
}
|
||||
|
||||
.reveal .justify-between { justify-content: space-between; }
|
||||
.reveal .justify-around { justify-content: space-around; }
|
||||
.reveal .justify-start { justify-content: flex-start; }
|
||||
.reveal .justify-center { justify-content: center; }
|
||||
.reveal .justify-end { justify-content: flex-end; }
|
||||
.reveal .justify-between {
|
||||
justify-content: space-between;
|
||||
}
|
||||
.reveal .justify-around {
|
||||
justify-content: space-around;
|
||||
}
|
||||
.reveal .justify-start {
|
||||
justify-content: flex-start;
|
||||
}
|
||||
.reveal .justify-center {
|
||||
justify-content: center;
|
||||
}
|
||||
.reveal .justify-end {
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
@@ -1,4 +1,3 @@
|
||||
|
||||
@media print {
|
||||
html:not(.print-pdf) {
|
||||
overflow: visible;
|
||||
@@ -24,25 +23,46 @@
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
p, td, li {
|
||||
font-size: 20pt!important;
|
||||
p,
|
||||
td,
|
||||
li {
|
||||
font-size: 20pt !important;
|
||||
color: #000;
|
||||
}
|
||||
|
||||
h1,h2,h3,h4,h5,h6 {
|
||||
color: #000!important;
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
color: #000 !important;
|
||||
height: auto;
|
||||
line-height: normal;
|
||||
text-align: left;
|
||||
letter-spacing: normal;
|
||||
}
|
||||
|
||||
h1 { font-size: 28pt !important; }
|
||||
h2 { font-size: 24pt !important; }
|
||||
h3 { font-size: 22pt !important; }
|
||||
h4 { font-size: 22pt !important; font-variant: small-caps; }
|
||||
h5 { font-size: 21pt !important; }
|
||||
h6 { font-size: 20pt !important; font-style: italic; }
|
||||
h1 {
|
||||
font-size: 28pt !important;
|
||||
}
|
||||
h2 {
|
||||
font-size: 24pt !important;
|
||||
}
|
||||
h3 {
|
||||
font-size: 22pt !important;
|
||||
}
|
||||
h4 {
|
||||
font-size: 22pt !important;
|
||||
font-variant: small-caps;
|
||||
}
|
||||
h5 {
|
||||
font-size: 21pt !important;
|
||||
}
|
||||
h6 {
|
||||
font-size: 20pt !important;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
a:link,
|
||||
a:visited {
|
||||
@@ -51,7 +71,10 @@
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
ul, ol, div, p {
|
||||
ul,
|
||||
ol,
|
||||
div,
|
||||
p {
|
||||
visibility: visible;
|
||||
position: static;
|
||||
width: auto;
|
||||
@@ -137,7 +160,7 @@
|
||||
section img {
|
||||
display: block;
|
||||
margin: 15px 0px;
|
||||
background: rgba(255,255,255,1);
|
||||
background: rgba(255, 255, 255, 1);
|
||||
border: 1px solid #666;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
@@ -135,7 +135,7 @@ html.reveal-print {
|
||||
}
|
||||
|
||||
/* Layout option which makes notes appear on a separate page */
|
||||
.reveal .speaker-notes-pdf[data-layout="separate-page"] {
|
||||
.reveal .speaker-notes-pdf[data-layout='separate-page'] {
|
||||
position: relative;
|
||||
color: inherit;
|
||||
background-color: transparent;
|
||||
|
||||
@@ -0,0 +1,31 @@
|
||||
/* http://meyerweb.com/eric/tools/css/reset/
|
||||
v4.0 | 20180602
|
||||
License: none (public domain)
|
||||
*/
|
||||
|
||||
/* prettier-ignore */
|
||||
html, body, div, span, applet, object, iframe,
|
||||
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
|
||||
a, abbr, acronym, address, big, cite, code,
|
||||
del, dfn, em, img, ins, kbd, q, s, samp,
|
||||
small, strike, strong, sub, sup, tt, var,
|
||||
b, u, i, center,
|
||||
dl, dt, dd, ol, ul, li,
|
||||
fieldset, form, label, legend,
|
||||
table, caption, tbody, tfoot, thead, tr, th, td,
|
||||
article, aside, canvas, details, embed,
|
||||
figure, figcaption, footer, header, hgroup,
|
||||
main, menu, nav, output, ruby, section, summary,
|
||||
time, mark, audio, video {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
font-size: 100%;
|
||||
font: inherit;
|
||||
vertical-align: baseline;
|
||||
}
|
||||
/* prettier-ignore */
|
||||
article, aside, details, figcaption, figure,
|
||||
footer, header, hgroup, main, menu, nav, section {
|
||||
display: block;
|
||||
}
|
||||
+513
-377
File diff suppressed because it is too large
Load Diff
@@ -4,18 +4,17 @@ Themes are written using Sass to keep things modular and reduce the need for rep
|
||||
|
||||
## Creating a Theme
|
||||
|
||||
To create your own theme, start by duplicating a ```.scss``` file in [/css/theme/source](https://github.com/hakimel/reveal.js/blob/master/css/theme/source). It will be automatically compiled from Sass to CSS (see the [gulpfile](https://github.com/hakimel/reveal.js/blob/master/gulpfile.js)) when you run `npm run build -- css-themes`.
|
||||
To create your own theme, start by duplicating a `.scss` file in [css/theme](css/theme). It will be automatically compiled from Sass to CSS when you run `npm run build:styles` (see [vite.config.styles.ts](../../vite.config.styles.ts)).
|
||||
|
||||
Each theme file does four things in the following order:
|
||||
Each theme file follows the same structure:
|
||||
|
||||
1. **Include [/css/theme/template/mixins.scss](https://github.com/hakimel/reveal.js/blob/master/css/theme/template/mixins.scss)**
|
||||
Shared utility functions.
|
||||
1. **Include [/css/theme/template/mixins.scss](https://github.com/hakimel/reveal.js/blob/master/css/theme/template/mixins.scss)**
|
||||
Shared utility functions.
|
||||
|
||||
2. **Include [/css/theme/template/settings.scss](https://github.com/hakimel/reveal.js/blob/master/css/theme/template/settings.scss)**
|
||||
Declares a set of custom variables that the template file (step 4) expects. Can be overridden in step 3.
|
||||
2. **Include [/css/theme/template/settings.scss](https://github.com/hakimel/reveal.js/blob/master/css/theme/template/settings.scss)**
|
||||
Declares a set of custom CSS variables that the template file (step 4) expects. Each of these variables can be overridden to customize the theme.
|
||||
|
||||
3. **Override**
|
||||
This is where you override the default theme. Either by specifying variables (see [settings.scss](https://github.com/hakimel/reveal.js/blob/master/css/theme/template/settings.scss) for reference) or by adding any selectors and styles you please.
|
||||
3. **Include [/css/theme/template/theme.scss](https://github.com/hakimel/reveal.js/blob/master/css/theme/template/theme.scss)**
|
||||
The template theme file which will generate final CSS output based on the currently defined variables.
|
||||
|
||||
4. **Include [/css/theme/template/theme.scss](https://github.com/hakimel/reveal.js/blob/master/css/theme/template/theme.scss)**
|
||||
The template theme file which will generate final CSS output based on the currently defined variables.
|
||||
4. **Optionally add custom fonts and/or additional styles**
|
||||
|
||||
@@ -0,0 +1,58 @@
|
||||
/**
|
||||
* Beige theme for reveal.js.
|
||||
*
|
||||
* Copyright (C) 2011-2012 Hakim El Hattab, http://hakim.se
|
||||
*/
|
||||
|
||||
// Load utils
|
||||
@use 'sass:color';
|
||||
@use 'template/mixins' as mixins;
|
||||
|
||||
$active-color: #8b743d;
|
||||
|
||||
// Inject theme variables (with some overrides)
|
||||
@use 'template/settings' with (
|
||||
$background-color: #f7f3de,
|
||||
$background: radial-gradient(rgba(255, 255, 255, 1), rgba(247, 242, 211, 1)),
|
||||
$main-font: "'Source Sans Pro', Helvetica, sans-serif",
|
||||
$main-font-size: 42px,
|
||||
$main-color: #333,
|
||||
|
||||
$heading-color: #333,
|
||||
$heading-font: "'Source Sans Pro', Helvetica, sans-serif",
|
||||
$heading-font-weight: 600,
|
||||
|
||||
$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: 2.5em,
|
||||
$heading2-size: 1.6em,
|
||||
$heading3-size: 1.3em,
|
||||
$heading4-size: 1em,
|
||||
|
||||
$link-color: $active-color,
|
||||
$link-color-hover: color.scale($active-color, $lightness: 20%),
|
||||
$selection-color: #333,
|
||||
$selection-background-color: color.scale($active-color, $lightness: 35%),
|
||||
$overlay-element-bg-color: '0 0 0',
|
||||
$overlay-element-fg-color: '240 240 240'
|
||||
);
|
||||
|
||||
// Inject the theme template
|
||||
@use 'template/theme';
|
||||
|
||||
// Include theme-specific fonts
|
||||
@import url('./fonts/league-gothic/league-gothic.css');
|
||||
@import url('https://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic');
|
||||
|
||||
// Change text colors against light slide backgrounds
|
||||
@include mixins.dark-bg-text-color(#fff);
|
||||
@@ -0,0 +1,46 @@
|
||||
/**
|
||||
* Black compact & high contrast reveal.js theme, with headers not in capitals.
|
||||
*
|
||||
* By Peter Kehl. Based on black.(s)css by Hakim El Hattab, http://hakim.se
|
||||
*
|
||||
* - Keep the source similar to black.css - for easy comparison.
|
||||
* - $mainFontSize controls code blocks, too (although under some ratio).
|
||||
*/
|
||||
|
||||
// Load utils
|
||||
@use 'sass:color';
|
||||
@use 'template/mixins' as mixins;
|
||||
|
||||
$active-color: #42affa;
|
||||
|
||||
// Inject theme variables (with some overrides)
|
||||
@use 'template/settings' with (
|
||||
$background-color: #000,
|
||||
|
||||
$main-font: "'Source Sans Pro', Helvetica, sans-serif",
|
||||
$main-font-size: 42px,
|
||||
$main-color: #fff,
|
||||
|
||||
$heading-color: #fff,
|
||||
$heading-font: "'Source Sans Pro', Helvetica, sans-serif",
|
||||
$heading-font-weight: 600,
|
||||
|
||||
$heading1-size: 2.5em,
|
||||
$heading2-size: 1.6em,
|
||||
$heading3-size: 1.3em,
|
||||
$heading4-size: 1em,
|
||||
|
||||
$link-color: $active-color,
|
||||
$link-color-hover: color.scale($active-color, $lightness: 15%),
|
||||
$selection-color: #fff,
|
||||
$selection-background-color: color.scale($active-color, $lightness: -35%)
|
||||
);
|
||||
|
||||
// Inject the theme template
|
||||
@use 'template/theme';
|
||||
|
||||
// Include theme-specific fonts
|
||||
@import url('./fonts/source-sans-pro/source-sans-pro.css');
|
||||
|
||||
// Change text colors against light slide backgrounds
|
||||
@include mixins.light-bg-text-color(#000);
|
||||
@@ -0,0 +1,43 @@
|
||||
/**
|
||||
* Black theme for reveal.js. This is the opposite of the 'white' theme.
|
||||
*
|
||||
* By Hakim El Hattab, http://hakim.se
|
||||
*/
|
||||
|
||||
// Load utils
|
||||
@use 'sass:color';
|
||||
@use 'template/mixins' as mixins;
|
||||
|
||||
$active-color: #42affa;
|
||||
|
||||
// Inject theme variables (with some overrides)
|
||||
@use 'template/settings' with (
|
||||
$background-color: #191919,
|
||||
|
||||
$main-font: "'Source Sans Pro', Helvetica, sans-serif",
|
||||
$main-font-size: 42px,
|
||||
$main-color: #fff,
|
||||
|
||||
$heading-color: #fff,
|
||||
$heading-font: "'Source Sans Pro', Helvetica, sans-serif",
|
||||
$heading-font-weight: 600,
|
||||
|
||||
$heading1-size: 2.5em,
|
||||
$heading2-size: 1.6em,
|
||||
$heading3-size: 1.3em,
|
||||
$heading4-size: 1em,
|
||||
|
||||
$link-color: $active-color,
|
||||
$link-color-hover: color.scale($active-color, $lightness: 15%),
|
||||
$selection-color: #fff,
|
||||
$selection-background-color: color.scale($active-color, $lightness: -35%)
|
||||
);
|
||||
|
||||
// Inject the theme template
|
||||
@use 'template/theme';
|
||||
|
||||
// Include theme-specific fonts
|
||||
@import url('./fonts/source-sans-pro/source-sans-pro.css');
|
||||
|
||||
// Change text colors against light slide backgrounds
|
||||
@include mixins.light-bg-text-color(#222);
|
||||
@@ -0,0 +1,90 @@
|
||||
/**
|
||||
* Blood theme for reveal.js
|
||||
* Author: Walther http://github.com/Walther
|
||||
*
|
||||
* Designed to be used with highlight.js theme
|
||||
* "monokai_sublime.css" available from
|
||||
* https://github.com/isagalaev/highlight.js/
|
||||
*
|
||||
* For other themes, change $codeBackground accordingly.
|
||||
*
|
||||
*/
|
||||
|
||||
// Load utils
|
||||
@use 'sass:color';
|
||||
@use 'template/mixins' as mixins;
|
||||
|
||||
$coal: #222;
|
||||
$active-color: #a23;
|
||||
$code-background-color: #23241f;
|
||||
|
||||
// Inject theme variables (with some overrides)
|
||||
@use 'template/settings' with (
|
||||
$background-color: $coal,
|
||||
|
||||
$main-font: 'Ubuntu, sans-serif',
|
||||
$main-color: #eee,
|
||||
|
||||
$heading-font: 'Ubuntu, sans-serif',
|
||||
$heading-text-shadow: 2px 2px 2px $coal,
|
||||
|
||||
$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)},
|
||||
|
||||
$link-color: $active-color,
|
||||
$link-color-hover: color.scale($active-color, $lightness: 20%),
|
||||
$selection-background-color: $active-color,
|
||||
$selection-color: #fff
|
||||
);
|
||||
|
||||
// Inject the theme template
|
||||
@use 'template/theme';
|
||||
|
||||
// Fonts
|
||||
@import url('https://fonts.googleapis.com/css?family=Ubuntu:300,700,300italic,700italic');
|
||||
|
||||
// Invert text color when the background is light
|
||||
@include mixins.light-bg-text-color(#222);
|
||||
|
||||
.reveal p {
|
||||
font-weight: 300;
|
||||
text-shadow: 1px 1px $coal;
|
||||
}
|
||||
|
||||
section.has-light-background {
|
||||
p,
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4 {
|
||||
text-shadow: none;
|
||||
}
|
||||
}
|
||||
|
||||
.reveal h1,
|
||||
.reveal h2,
|
||||
.reveal h3,
|
||||
.reveal h4,
|
||||
.reveal h5,
|
||||
.reveal h6 {
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.reveal p code {
|
||||
background-color: $code-background-color;
|
||||
display: inline-block;
|
||||
border-radius: 7px;
|
||||
}
|
||||
|
||||
.reveal small code {
|
||||
vertical-align: baseline;
|
||||
}
|
||||
@@ -0,0 +1,96 @@
|
||||
/**
|
||||
* Dracula Dark theme for reveal.js.
|
||||
* Based on https://draculatheme.com
|
||||
*/
|
||||
|
||||
// Load utils
|
||||
@use 'sass:color';
|
||||
@use 'template/mixins' as mixins;
|
||||
|
||||
// Include theme-specific fonts
|
||||
$systemFontsSansSerif: -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui,
|
||||
helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif;
|
||||
$systemFontsMono: Menlo, Consolas, Monaco, Liberation Mono, Lucida Console, monospace;
|
||||
|
||||
$background: #282a36;
|
||||
$foreground: #f8f8f2;
|
||||
$selection: #44475a;
|
||||
$comment: #6272a4;
|
||||
$red: #ff5555;
|
||||
$orange: #ffb86c;
|
||||
$yellow: #f1fa8c;
|
||||
$green: #50fa7b;
|
||||
$purple: #bd93f9;
|
||||
$cyan: #8be9fd;
|
||||
$pink: #ff79c6;
|
||||
|
||||
$mainFont: $systemFontsSansSerif;
|
||||
$codeFont: 'Fira Code', $systemFontsMono;
|
||||
|
||||
// Inject theme variables (with some overrides)
|
||||
@use 'template/settings' with (
|
||||
$background-color: #191919,
|
||||
|
||||
$main-font: $mainFont,
|
||||
$main-font-size: 42px,
|
||||
$main-color: $foreground,
|
||||
|
||||
$code-font: $codeFont,
|
||||
|
||||
$heading-color: $purple,
|
||||
$heading-font: $mainFont,
|
||||
$heading-font-weight: 600,
|
||||
$heading-text-transform: none,
|
||||
|
||||
$heading1-size: 2.5em,
|
||||
$heading2-size: 1.6em,
|
||||
$heading3-size: 1.3em,
|
||||
$heading4-size: 1em,
|
||||
|
||||
$link-color: $pink,
|
||||
$link-color-hover: $cyan,
|
||||
|
||||
$selection-color: #fff,
|
||||
$selection-background-color: $selection
|
||||
);
|
||||
|
||||
// Inject the theme template
|
||||
@use 'template/theme';
|
||||
|
||||
// Change text colors against light slide backgrounds
|
||||
@include mixins.light-bg-text-color($background);
|
||||
|
||||
// Define additional color effects based on Dracula spec
|
||||
// https://spec.draculatheme.com/
|
||||
:root {
|
||||
--r-bold-color: #{$orange};
|
||||
--r-italic-color: #{$yellow};
|
||||
--r-inline-code-color: #{$green};
|
||||
--r-list-bullet-color: #{$cyan};
|
||||
}
|
||||
|
||||
/**
|
||||
* Dracula colors by Zeno Rocha
|
||||
* https://draculatheme.com/contribute
|
||||
*/
|
||||
.reveal {
|
||||
strong,
|
||||
b {
|
||||
color: var(--r-bold-color);
|
||||
}
|
||||
em,
|
||||
i,
|
||||
blockquote {
|
||||
color: var(--r-italic-color);
|
||||
}
|
||||
code {
|
||||
color: var(--r-inline-code-color);
|
||||
}
|
||||
// Dracula colored list bullets and numbers
|
||||
ul,
|
||||
ol {
|
||||
li::marker {
|
||||
color: var(--r-list-bullet-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,7 @@
|
||||
@font-face {
|
||||
font-family: 'League Gothic';
|
||||
src: url('./league-gothic.woff') format('woff');
|
||||
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}
|
||||
@@ -0,0 +1,27 @@
|
||||
@font-face {
|
||||
font-family: 'Source Sans Pro';
|
||||
src: url('./source-sans-pro-regular.woff') format('woff');
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Source Sans Pro';
|
||||
src: url('./source-sans-pro-italic.woff') format('woff');
|
||||
font-weight: normal;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Source Sans Pro';
|
||||
src: url('./source-sans-pro-semibold.woff') format('woff');
|
||||
font-weight: 600;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Source Sans Pro';
|
||||
src: url('./source-sans-pro-semibolditalic.woff') format('woff');
|
||||
font-weight: 600;
|
||||
font-style: italic;
|
||||
}
|
||||
@@ -0,0 +1,39 @@
|
||||
/**
|
||||
* League theme for reveal.js.
|
||||
*
|
||||
* This was the default theme pre-3.0.0.
|
||||
*
|
||||
* Copyright (C) 2011-2012 Hakim El Hattab, http://hakim.se
|
||||
*/
|
||||
|
||||
// Load utils
|
||||
@use 'sass:color';
|
||||
@use 'template/mixins' as mixins;
|
||||
|
||||
// Inject theme variables (with some overrides)
|
||||
@use 'template/settings' with (
|
||||
$background: radial-gradient(rgba(85, 90, 95, 1), rgba(28, 30, 32, 1)),
|
||||
$background-color: rgba(28, 30, 32, 1),
|
||||
$heading-text-shadow: #{0px 0px 6px rgba(0, 0, 0, 0.2)},
|
||||
$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)}
|
||||
);
|
||||
|
||||
// Inject the theme template
|
||||
@use 'template/theme';
|
||||
|
||||
// Include theme-specific fonts
|
||||
@import url('./fonts/league-gothic/league-gothic.css');
|
||||
@import url('https://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic');
|
||||
|
||||
// Change text colors against light slide backgrounds
|
||||
@include mixins.light-bg-text-color(#222);
|
||||
@@ -0,0 +1,52 @@
|
||||
/**
|
||||
* Solarized Dark theme for reveal.js.
|
||||
* Author: Achim Staebler
|
||||
*/
|
||||
|
||||
// Load utils
|
||||
@use 'sass:color';
|
||||
@use 'template/mixins' as mixins;
|
||||
|
||||
// Solarized colors by Ethan Schoonover
|
||||
$base03: #002b36;
|
||||
$base02: #073642;
|
||||
$base01: #586e75;
|
||||
$base00: #657b83;
|
||||
$base0: #839496;
|
||||
$base1: #93a1a1;
|
||||
$base2: #eee8d5;
|
||||
$base3: #fdf6e3;
|
||||
$yellow: #b58900;
|
||||
$orange: #cb4b16;
|
||||
$red: #dc322f;
|
||||
$magenta: #d33682;
|
||||
$violet: #6c71c4;
|
||||
$blue: #268bd2;
|
||||
$cyan: #2aa198;
|
||||
$green: #859900;
|
||||
|
||||
$active-color: $blue;
|
||||
|
||||
// Inject theme variables (with some overrides)
|
||||
@use 'template/settings' with (
|
||||
$background-color: $base03,
|
||||
|
||||
$main-color: $base1,
|
||||
$heading-color: $base2,
|
||||
|
||||
$link-color: $active-color,
|
||||
$link-color-hover: color.scale($active-color, $lightness: 20%),
|
||||
$selection-color: #fff,
|
||||
$selection-background-color: $magenta
|
||||
);
|
||||
|
||||
// Inject the theme template
|
||||
@use 'template/theme';
|
||||
|
||||
// Include theme-specific fonts
|
||||
// Include theme-specific fonts
|
||||
@import url('./fonts/league-gothic/league-gothic.css');
|
||||
@import url('https://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic');
|
||||
|
||||
// Change text colors against light slide backgrounds
|
||||
@include mixins.light-bg-text-color(#222);
|
||||
@@ -0,0 +1,39 @@
|
||||
/**
|
||||
* Black theme for reveal.js.
|
||||
*
|
||||
* Copyright (C) 2011-2012 Hakim El Hattab, http://hakim.se
|
||||
*/
|
||||
|
||||
// Load utils
|
||||
@use 'sass:color';
|
||||
@use 'template/mixins' as mixins;
|
||||
|
||||
$active-color: #e7ad52;
|
||||
|
||||
// Inject theme variables (with some overrides)
|
||||
@use 'template/settings' with (
|
||||
$background-color: #111,
|
||||
|
||||
$main-font: "'Open Sans', sans-serif",
|
||||
$main-color: #fff,
|
||||
|
||||
$heading-color: #fff,
|
||||
$heading-font: "'Montserrat', Impact, sans-serif",
|
||||
$heading-text-transform: none,
|
||||
$heading-letter-spacing: -0.03em,
|
||||
|
||||
$link-color: $active-color,
|
||||
$link-color-hover: color.scale($active-color, $lightness: 20%),
|
||||
$selection-color: #111,
|
||||
$selection-background-color: $active-color
|
||||
);
|
||||
|
||||
// Inject the theme template
|
||||
@use 'template/theme';
|
||||
|
||||
// Include theme-specific fonts
|
||||
@import url('https://fonts.googleapis.com/css?family=Montserrat:700');
|
||||
@import url('https://fonts.googleapis.com/css?family=Open+Sans:400,700,400italic,700italic');
|
||||
|
||||
// Change text colors against light slide backgrounds
|
||||
@include mixins.light-bg-text-color(#222);
|
||||
@@ -0,0 +1,44 @@
|
||||
/**
|
||||
* A simple theme for reveal.js presentations, similar
|
||||
* to the default theme. The accent color is brown.
|
||||
*
|
||||
* This theme is Copyright (C) 2012-2013 Owen Versteeg, http://owenversteeg.com - it is MIT licensed.
|
||||
*/
|
||||
|
||||
// Load utils
|
||||
@use 'sass:color';
|
||||
@use 'template/mixins' as mixins;
|
||||
|
||||
$active-color: #51483d;
|
||||
|
||||
// Inject theme variables (with some overrides)
|
||||
@use 'template/settings' with (
|
||||
$background-color: #f0f1eb,
|
||||
|
||||
$main-font: "'Palatino Linotype', 'Book Antiqua', Palatino, FreeSerif, serif",
|
||||
$main-font-size: 42px,
|
||||
$main-color: #000,
|
||||
|
||||
$heading-color: #383d3d,
|
||||
$heading-font: "'Palatino Linotype', 'Book Antiqua', Palatino, FreeSerif, serif",
|
||||
$heading-font-weight: 600,
|
||||
$heading-text-transform: none,
|
||||
|
||||
$link-color: $active-color,
|
||||
$link-color-hover: color.scale($active-color, $lightness: 25%),
|
||||
$selection-color: #fff,
|
||||
$selection-background-color: $active-color,
|
||||
|
||||
$overlay-element-bg-color: '0 0 0',
|
||||
$overlay-element-fg-color: '240 240 240'
|
||||
);
|
||||
|
||||
// Inject the theme template
|
||||
@use 'template/theme';
|
||||
|
||||
// Change text colors against light slide backgrounds
|
||||
@include mixins.dark-bg-text-color(#fff);
|
||||
|
||||
.reveal a {
|
||||
line-height: 1.3em;
|
||||
}
|
||||
@@ -0,0 +1,48 @@
|
||||
/**
|
||||
* A simple theme for reveal.js presentations, similar
|
||||
* to the default theme. The accent color is darkblue.
|
||||
*
|
||||
* This theme is Copyright (C) 2012 Owen Versteeg, https://github.com/StereotypicalApps. It is MIT licensed.
|
||||
* reveal.js is Copyright (C) 2011-2012 Hakim El Hattab, http://hakim.se
|
||||
*/
|
||||
|
||||
// Load utils
|
||||
@use 'sass:color';
|
||||
@use 'template/mixins' as mixins;
|
||||
|
||||
$active-color: #00008b;
|
||||
|
||||
// Inject theme variables (with some overrides)
|
||||
@use 'template/settings' with (
|
||||
$background-color: #fff,
|
||||
|
||||
$main-color: #000,
|
||||
$main-font: "'Lato', sans-serif",
|
||||
|
||||
$heading-color: #000,
|
||||
$heading-font: "'News Cycle', Impact, sans-serif",
|
||||
$heading-font-weight: 600,
|
||||
|
||||
$heading1-size: 2.5em,
|
||||
$heading2-size: 1.6em,
|
||||
$heading3-size: 1.3em,
|
||||
$heading4-size: 1em,
|
||||
|
||||
$link-color: $active-color,
|
||||
$link-color-hover: color.scale($active-color, $lightness: 20%),
|
||||
$selection-color: #fff,
|
||||
$selection-background-color: $active-color,
|
||||
|
||||
$overlay-element-bg-color: '0, 0, 0',
|
||||
$overlay-element-fg-color: '240, 240, 240'
|
||||
);
|
||||
|
||||
// Inject the theme template
|
||||
@use 'template/theme';
|
||||
|
||||
// Include theme-specific fonts
|
||||
@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');
|
||||
|
||||
// Change text when the background is inverted
|
||||
@include mixins.dark-bg-text-color(#fff);
|
||||
@@ -0,0 +1,46 @@
|
||||
/**
|
||||
* Sky theme for reveal.js.
|
||||
*
|
||||
* Copyright (C) 2011-2012 Hakim El Hattab, http://hakim.se
|
||||
*/
|
||||
|
||||
// Load utils
|
||||
@use 'sass:color';
|
||||
@use 'template/mixins' as mixins;
|
||||
|
||||
$active-color: #2a76dd;
|
||||
|
||||
// Inject theme variables (with some overrides)
|
||||
@use 'template/settings' with (
|
||||
$background: radial-gradient(#f7fbfc, #add9e4),
|
||||
$background-color: #f7fbfc,
|
||||
|
||||
$main-color: #333,
|
||||
$main-font: "'Open Sans', sans-serif",
|
||||
|
||||
$heading-color: #333,
|
||||
$heading-font: "'Quicksand', sans-serif",
|
||||
$heading-letter-spacing: -0.05em,
|
||||
|
||||
$link-color: $active-color,
|
||||
$link-color-hover: color.scale($active-color, $lightness: 15%),
|
||||
$selection-color: #fff,
|
||||
$selection-background-color: $active-color,
|
||||
|
||||
$overlay-element-bg-color: '0 0 0',
|
||||
$overlay-element-fg-color: '240 240 240'
|
||||
);
|
||||
|
||||
// Inject the theme template
|
||||
@use 'template/theme';
|
||||
|
||||
// Include theme-specific fonts
|
||||
@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');
|
||||
|
||||
// Change text when the background is inverted
|
||||
@include mixins.dark-bg-text-color(#fff);
|
||||
|
||||
.reveal a {
|
||||
line-height: 1.3em;
|
||||
}
|
||||
@@ -0,0 +1,54 @@
|
||||
/**
|
||||
* Solarized Light theme for reveal.js.
|
||||
* Author: Achim Staebler
|
||||
*/
|
||||
|
||||
// Load utils
|
||||
@use 'sass:color';
|
||||
@use 'template/mixins' as mixins;
|
||||
|
||||
// Solarized colors by Ethan Schoonover
|
||||
$base03: #002b36;
|
||||
$base02: #073642;
|
||||
$base01: #586e75;
|
||||
$base00: #657b83;
|
||||
$base0: #839496;
|
||||
$base1: #93a1a1;
|
||||
$base2: #eee8d5;
|
||||
$base3: #fdf6e3;
|
||||
$yellow: #b58900;
|
||||
$orange: #cb4b16;
|
||||
$red: #dc322f;
|
||||
$magenta: #d33682;
|
||||
$violet: #6c71c4;
|
||||
$blue: #268bd2;
|
||||
$cyan: #2aa198;
|
||||
$green: #859900;
|
||||
|
||||
$active-color: $blue;
|
||||
|
||||
// Inject theme variables (with some overrides)
|
||||
@use 'template/settings' with (
|
||||
$background-color: $base3,
|
||||
|
||||
$main-color: $base00,
|
||||
$heading-color: $base01,
|
||||
|
||||
$link-color: $active-color,
|
||||
$link-color-hover: color.scale($active-color, $lightness: 20%),
|
||||
$selection-color: #fff,
|
||||
$selection-background-color: $magenta,
|
||||
|
||||
$overlay-element-bg-color: '0 0 0',
|
||||
$overlay-element-fg-color: '240 240 240'
|
||||
);
|
||||
|
||||
// Inject the theme template
|
||||
@use 'template/theme';
|
||||
|
||||
// Include theme-specific fonts
|
||||
@import url('./fonts/league-gothic/league-gothic.css');
|
||||
@import url('https://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic');
|
||||
|
||||
// Change text when the background is inverted
|
||||
@include mixins.dark-bg-text-color(#fff);
|
||||
@@ -1,45 +0,0 @@
|
||||
/**
|
||||
* Beige theme for reveal.js.
|
||||
*
|
||||
* Copyright (C) 2011-2012 Hakim El Hattab, http://hakim.se
|
||||
*/
|
||||
|
||||
|
||||
// Default mixins and settings -----------------
|
||||
@use "sass:color";
|
||||
@import "../template/mixins";
|
||||
@import "../template/settings";
|
||||
// ---------------------------------------------
|
||||
|
||||
|
||||
|
||||
// Include theme-specific fonts
|
||||
@import url(./fonts/league-gothic/league-gothic.css);
|
||||
@import url(https://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic);
|
||||
|
||||
|
||||
// Override theme settings (see ../template/settings.scss)
|
||||
$mainColor: #333;
|
||||
$headingColor: #333;
|
||||
$headingTextShadow: none;
|
||||
$backgroundColor: #f7f3de;
|
||||
$linkColor: #8b743d;
|
||||
$linkColorHover: color.scale( $linkColor, $lightness: 20% );
|
||||
$selectionBackgroundColor: rgba(79, 64, 28, 0.99);
|
||||
$heading1TextShadow: 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,.1), 0 0 5px rgba(0,0,0,.1), 0 1px 3px rgba(0,0,0,.3), 0 3px 5px rgba(0,0,0,.2), 0 5px 10px rgba(0,0,0,.25), 0 20px 20px rgba(0,0,0,.15);
|
||||
|
||||
$overlayElementBgColor: 0, 0, 0;
|
||||
$overlayElementFgColor: 240, 240, 240;
|
||||
|
||||
// Background generator
|
||||
@mixin bodyBackground() {
|
||||
@include radial-gradient( rgba(247,242,211,1), rgba(255,255,255,1) );
|
||||
}
|
||||
|
||||
// Change text colors against dark slide backgrounds
|
||||
@include dark-bg-text-color(#fff);
|
||||
|
||||
|
||||
// Theme template ------------------------------
|
||||
@import "../template/theme";
|
||||
// ---------------------------------------------
|
||||
@@ -1,50 +0,0 @@
|
||||
/**
|
||||
* Black compact & high contrast reveal.js theme, with headers not in capitals.
|
||||
*
|
||||
* By Peter Kehl. Based on black.(s)css by Hakim El Hattab, http://hakim.se
|
||||
*
|
||||
* - Keep the source similar to black.css - for easy comparison.
|
||||
* - $mainFontSize controls code blocks, too (although under some ratio).
|
||||
*/
|
||||
|
||||
|
||||
// Default mixins and settings -----------------
|
||||
@use "sass:color";
|
||||
@import "../template/mixins";
|
||||
@import "../template/settings";
|
||||
// ---------------------------------------------
|
||||
|
||||
|
||||
// Include theme-specific fonts
|
||||
@import url(./fonts/source-sans-pro/source-sans-pro.css);
|
||||
|
||||
|
||||
// Override theme settings (see ../template/settings.scss)
|
||||
$backgroundColor: #000000;
|
||||
|
||||
$mainColor: #fff;
|
||||
$headingColor: #fff;
|
||||
|
||||
$mainFontSize: 42px;
|
||||
$mainFont: 'Source Sans Pro', Helvetica, sans-serif;
|
||||
$headingFont: 'Source Sans Pro', Helvetica, sans-serif;
|
||||
$headingTextShadow: none;
|
||||
$headingLetterSpacing: normal;
|
||||
$headingTextTransform: uppercase;
|
||||
$headingFontWeight: 600;
|
||||
$linkColor: #42affa;
|
||||
$linkColorHover: color.scale( $linkColor, $lightness: 15% );
|
||||
$selectionBackgroundColor: color.scale( $linkColor, $lightness: 25% );
|
||||
|
||||
$heading1Size: 2.5em;
|
||||
$heading2Size: 1.6em;
|
||||
$heading3Size: 1.3em;
|
||||
$heading4Size: 1.0em;
|
||||
|
||||
// Change text colors against light slide backgrounds
|
||||
@include light-bg-text-color(#000);
|
||||
|
||||
|
||||
// Theme template ------------------------------
|
||||
@import "../template/theme";
|
||||
// ---------------------------------------------
|
||||
@@ -1,47 +0,0 @@
|
||||
/**
|
||||
* Black theme for reveal.js. This is the opposite of the 'white' theme.
|
||||
*
|
||||
* By Hakim El Hattab, http://hakim.se
|
||||
*/
|
||||
|
||||
|
||||
// Default mixins and settings -----------------
|
||||
@use "sass:color";
|
||||
@import "../template/mixins";
|
||||
@import "../template/settings";
|
||||
// ---------------------------------------------
|
||||
|
||||
|
||||
// Include theme-specific fonts
|
||||
@import url(./fonts/source-sans-pro/source-sans-pro.css);
|
||||
|
||||
|
||||
// Override theme settings (see ../template/settings.scss)
|
||||
$backgroundColor: #191919;
|
||||
|
||||
$mainColor: #fff;
|
||||
$headingColor: #fff;
|
||||
|
||||
$mainFontSize: 42px;
|
||||
$mainFont: 'Source Sans Pro', Helvetica, sans-serif;
|
||||
$headingFont: 'Source Sans Pro', Helvetica, sans-serif;
|
||||
$headingTextShadow: none;
|
||||
$headingLetterSpacing: normal;
|
||||
$headingTextTransform: uppercase;
|
||||
$headingFontWeight: 600;
|
||||
$linkColor: #42affa;
|
||||
$linkColorHover: color.scale( $linkColor, $lightness: 15% );
|
||||
$selectionBackgroundColor: rgba( $linkColor, 0.75 );
|
||||
|
||||
$heading1Size: 2.5em;
|
||||
$heading2Size: 1.6em;
|
||||
$heading3Size: 1.3em;
|
||||
$heading4Size: 1.0em;
|
||||
|
||||
// Change text colors against light slide backgrounds
|
||||
@include light-bg-text-color(#222);
|
||||
|
||||
|
||||
// Theme template ------------------------------
|
||||
@import "../template/theme";
|
||||
// ---------------------------------------------
|
||||
@@ -1,88 +0,0 @@
|
||||
/**
|
||||
* Blood theme for reveal.js
|
||||
* Author: Walther http://github.com/Walther
|
||||
*
|
||||
* Designed to be used with highlight.js theme
|
||||
* "monokai_sublime.css" available from
|
||||
* https://github.com/isagalaev/highlight.js/
|
||||
*
|
||||
* For other themes, change $codeBackground accordingly.
|
||||
*
|
||||
*/
|
||||
|
||||
// Default mixins and settings -----------------
|
||||
@use "sass:color";
|
||||
@import "../template/mixins";
|
||||
@import "../template/settings";
|
||||
// ---------------------------------------------
|
||||
|
||||
// Include theme-specific fonts
|
||||
|
||||
@import url(https://fonts.googleapis.com/css?family=Ubuntu:300,700,300italic,700italic);
|
||||
|
||||
// Colors used in the theme
|
||||
$blood: #a23;
|
||||
$coal: #222;
|
||||
$codeBackground: #23241f;
|
||||
|
||||
$backgroundColor: $coal;
|
||||
|
||||
// Main text
|
||||
$mainFont: Ubuntu, 'sans-serif';
|
||||
$mainColor: #eee;
|
||||
|
||||
// Headings
|
||||
$headingFont: Ubuntu, 'sans-serif';
|
||||
$headingTextShadow: 2px 2px 2px $coal;
|
||||
|
||||
// h1 shadow, borrowed humbly from
|
||||
// (c) Default theme by Hakim El Hattab
|
||||
$heading1TextShadow: 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,.1), 0 0 5px rgba(0,0,0,.1), 0 1px 3px rgba(0,0,0,.3), 0 3px 5px rgba(0,0,0,.2), 0 5px 10px rgba(0,0,0,.25), 0 20px 20px rgba(0,0,0,.15);
|
||||
|
||||
// Links
|
||||
$linkColor: $blood;
|
||||
$linkColorHover: color.scale( $linkColor, $lightness: 20% );
|
||||
|
||||
// Text selection
|
||||
$selectionBackgroundColor: $blood;
|
||||
$selectionColor: #fff;
|
||||
|
||||
// Change text colors against dark slide backgrounds
|
||||
@include light-bg-text-color(#222);
|
||||
|
||||
|
||||
// Theme template ------------------------------
|
||||
@import "../template/theme";
|
||||
// ---------------------------------------------
|
||||
|
||||
// some overrides after theme template import
|
||||
|
||||
.reveal p {
|
||||
font-weight: 300;
|
||||
text-shadow: 1px 1px $coal;
|
||||
}
|
||||
|
||||
section.has-light-background {
|
||||
p, h1, h2, h3, h4 {
|
||||
text-shadow: none;
|
||||
}
|
||||
}
|
||||
|
||||
.reveal h1,
|
||||
.reveal h2,
|
||||
.reveal h3,
|
||||
.reveal h4,
|
||||
.reveal h5,
|
||||
.reveal h6 {
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.reveal p code {
|
||||
background-color: $codeBackground;
|
||||
display: inline-block;
|
||||
border-radius: 7px;
|
||||
}
|
||||
|
||||
.reveal small code {
|
||||
vertical-align: baseline;
|
||||
}
|
||||
@@ -1,106 +0,0 @@
|
||||
/**
|
||||
* Dracula Dark theme for reveal.js.
|
||||
* Based on https://draculatheme.com
|
||||
*/
|
||||
|
||||
|
||||
// Default mixins and settings -----------------
|
||||
@import "../template/mixins";
|
||||
@import "../template/settings";
|
||||
// ---------------------------------------------
|
||||
|
||||
|
||||
|
||||
// Include theme-specific fonts
|
||||
$systemFontsSansSerif: -apple-system,
|
||||
BlinkMacSystemFont,
|
||||
avenir next,
|
||||
avenir,
|
||||
segoe ui,
|
||||
helvetica neue,
|
||||
helvetica,
|
||||
Cantarell,
|
||||
Ubuntu,
|
||||
roboto,
|
||||
noto,
|
||||
arial,
|
||||
sans-serif;
|
||||
$systemFontsMono: Menlo,
|
||||
Consolas,
|
||||
Monaco,
|
||||
Liberation Mono,
|
||||
Lucida Console,
|
||||
monospace;
|
||||
|
||||
/**
|
||||
* Dracula colors by Zeno Rocha
|
||||
* https://draculatheme.com/contribute
|
||||
*/
|
||||
html * {
|
||||
color-profile: sRGB;
|
||||
rendering-intent: auto;
|
||||
}
|
||||
|
||||
$background: #282A36;
|
||||
$foreground: #F8F8F2;
|
||||
$selection: #44475A;
|
||||
$comment: #6272A4;
|
||||
$red: #FF5555;
|
||||
$orange: #FFB86C;
|
||||
$yellow: #F1FA8C;
|
||||
$green: #50FA7B;
|
||||
$purple: #BD93F9;
|
||||
$cyan: #8BE9FD;
|
||||
$pink: #FF79C6;
|
||||
|
||||
|
||||
|
||||
// Override theme settings (see ../template/settings.scss)
|
||||
$mainColor: $foreground;
|
||||
$headingColor: $purple;
|
||||
$headingTextShadow: none;
|
||||
$headingTextTransform: none;
|
||||
$backgroundColor: $background;
|
||||
$linkColor: $pink;
|
||||
$linkColorHover: $cyan;
|
||||
$selectionBackgroundColor: $selection;
|
||||
$inlineCodeColor: $green;
|
||||
$listBulletColor: $cyan;
|
||||
|
||||
$mainFont: $systemFontsSansSerif;
|
||||
$codeFont: "Fira Code", $systemFontsMono;
|
||||
|
||||
// Change text colors against light slide backgrounds
|
||||
@include light-bg-text-color($background);
|
||||
|
||||
// Theme template ------------------------------
|
||||
@import "../template/theme";
|
||||
// ---------------------------------------------
|
||||
|
||||
// Define additional color effects based on Dracula spec
|
||||
// https://spec.draculatheme.com/
|
||||
:root {
|
||||
--r-bold-color: #{$orange};
|
||||
--r-italic-color: #{$yellow};
|
||||
--r-inline-code-color: #{$inlineCodeColor};
|
||||
--r-list-bullet-color: #{$listBulletColor};
|
||||
}
|
||||
|
||||
.reveal {
|
||||
strong, b {
|
||||
color: var(--r-bold-color);
|
||||
}
|
||||
em, i, blockquote {
|
||||
color: var(--r-italic-color);
|
||||
}
|
||||
code {
|
||||
color: var(--r-inline-code-color);
|
||||
}
|
||||
// Dracula colored list bullets and numbers
|
||||
ul, ol {
|
||||
li::marker {
|
||||
color: var(--r-list-bullet-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,36 +0,0 @@
|
||||
/**
|
||||
* League theme for reveal.js.
|
||||
*
|
||||
* This was the default theme pre-3.0.0.
|
||||
*
|
||||
* Copyright (C) 2011-2012 Hakim El Hattab, http://hakim.se
|
||||
*/
|
||||
|
||||
|
||||
// Default mixins and settings -----------------
|
||||
@import "../template/mixins";
|
||||
@import "../template/settings";
|
||||
// ---------------------------------------------
|
||||
|
||||
|
||||
|
||||
// Include theme-specific fonts
|
||||
@import url(./fonts/league-gothic/league-gothic.css);
|
||||
@import url(https://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic);
|
||||
|
||||
// Override theme settings (see ../template/settings.scss)
|
||||
$headingTextShadow: 0px 0px 6px rgba(0,0,0,0.2);
|
||||
$heading1TextShadow: 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,.1), 0 0 5px rgba(0,0,0,.1), 0 1px 3px rgba(0,0,0,.3), 0 3px 5px rgba(0,0,0,.2), 0 5px 10px rgba(0,0,0,.25), 0 20px 20px rgba(0,0,0,.15);
|
||||
|
||||
// Background generator
|
||||
@mixin bodyBackground() {
|
||||
@include radial-gradient( rgba(28,30,32,1), rgba(85,90,95,1) );
|
||||
}
|
||||
|
||||
// Change text colors against light slide backgrounds
|
||||
@include light-bg-text-color(#222);
|
||||
|
||||
|
||||
// Theme template ------------------------------
|
||||
@import "../template/theme";
|
||||
// ---------------------------------------------
|
||||
@@ -1,55 +0,0 @@
|
||||
/**
|
||||
* Solarized Dark theme for reveal.js.
|
||||
* Author: Achim Staebler
|
||||
*/
|
||||
|
||||
|
||||
// Default mixins and settings -----------------
|
||||
@use "sass:color";
|
||||
@import "../template/mixins";
|
||||
@import "../template/settings";
|
||||
// ---------------------------------------------
|
||||
|
||||
|
||||
|
||||
// Include theme-specific fonts
|
||||
@import url(./fonts/league-gothic/league-gothic.css);
|
||||
@import url(https://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic);
|
||||
|
||||
/**
|
||||
* Solarized colors by Ethan Schoonover
|
||||
*/
|
||||
|
||||
// Solarized colors
|
||||
$base03: #002b36;
|
||||
$base02: #073642;
|
||||
$base01: #586e75;
|
||||
$base00: #657b83;
|
||||
$base0: #839496;
|
||||
$base1: #93a1a1;
|
||||
$base2: #eee8d5;
|
||||
$base3: #fdf6e3;
|
||||
$yellow: #b58900;
|
||||
$orange: #cb4b16;
|
||||
$red: #dc322f;
|
||||
$magenta: #d33682;
|
||||
$violet: #6c71c4;
|
||||
$blue: #268bd2;
|
||||
$cyan: #2aa198;
|
||||
$green: #859900;
|
||||
|
||||
// Override theme settings (see ../template/settings.scss)
|
||||
$mainColor: $base1;
|
||||
$headingColor: $base2;
|
||||
$headingTextShadow: none;
|
||||
$backgroundColor: $base03;
|
||||
$linkColor: $blue;
|
||||
$linkColorHover: color.scale( $linkColor, $lightness: 20% );
|
||||
$selectionBackgroundColor: $magenta;
|
||||
|
||||
// Change text colors against light slide backgrounds
|
||||
@include light-bg-text-color(#222);
|
||||
|
||||
// Theme template ------------------------------
|
||||
@import "../template/theme";
|
||||
// ---------------------------------------------
|
||||
@@ -1,38 +0,0 @@
|
||||
/**
|
||||
* Black theme for reveal.js.
|
||||
*
|
||||
* Copyright (C) 2011-2012 Hakim El Hattab, http://hakim.se
|
||||
*/
|
||||
|
||||
|
||||
// Default mixins and settings -----------------
|
||||
@use "sass:color";
|
||||
@import "../template/mixins";
|
||||
@import "../template/settings";
|
||||
// ---------------------------------------------
|
||||
|
||||
|
||||
// Include theme-specific fonts
|
||||
@import url(https://fonts.googleapis.com/css?family=Montserrat:700);
|
||||
@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,700,400italic,700italic);
|
||||
|
||||
|
||||
// Override theme settings (see ../template/settings.scss)
|
||||
$backgroundColor: #111;
|
||||
|
||||
$mainFont: 'Open Sans', sans-serif;
|
||||
$linkColor: #e7ad52;
|
||||
$linkColorHover: color.scale( $linkColor, $lightness: 20% );
|
||||
$headingFont: 'Montserrat', Impact, sans-serif;
|
||||
$headingTextShadow: none;
|
||||
$headingLetterSpacing: -0.03em;
|
||||
$headingTextTransform: none;
|
||||
$selectionBackgroundColor: #e7ad52;
|
||||
|
||||
// Change text colors against light slide backgrounds
|
||||
@include light-bg-text-color(#222);
|
||||
|
||||
|
||||
// Theme template ------------------------------
|
||||
@import "../template/theme";
|
||||
// ---------------------------------------------
|
||||
@@ -1,42 +0,0 @@
|
||||
/**
|
||||
* A simple theme for reveal.js presentations, similar
|
||||
* to the default theme. The accent color is brown.
|
||||
*
|
||||
* This theme is Copyright (C) 2012-2013 Owen Versteeg, http://owenversteeg.com - it is MIT licensed.
|
||||
*/
|
||||
|
||||
|
||||
// Default mixins and settings -----------------
|
||||
@use "sass:color";
|
||||
@import "../template/mixins";
|
||||
@import "../template/settings";
|
||||
// ---------------------------------------------
|
||||
|
||||
|
||||
|
||||
// Override theme settings (see ../template/settings.scss)
|
||||
$mainFont: 'Palatino Linotype', 'Book Antiqua', Palatino, FreeSerif, serif;
|
||||
$mainColor: #000;
|
||||
$headingFont: 'Palatino Linotype', 'Book Antiqua', Palatino, FreeSerif, serif;
|
||||
$headingColor: #383D3D;
|
||||
$headingTextShadow: none;
|
||||
$headingTextTransform: none;
|
||||
$backgroundColor: #F0F1EB;
|
||||
$linkColor: #51483D;
|
||||
$linkColorHover: color.scale( $linkColor, $lightness: 20% );
|
||||
$selectionBackgroundColor: #26351C;
|
||||
|
||||
$overlayElementBgColor: 0, 0, 0;
|
||||
$overlayElementFgColor: 240, 240, 240;
|
||||
|
||||
.reveal a {
|
||||
line-height: 1.3em;
|
||||
}
|
||||
|
||||
// Change text colors against dark slide backgrounds
|
||||
@include dark-bg-text-color(#fff);
|
||||
|
||||
|
||||
// Theme template ------------------------------
|
||||
@import "../template/theme";
|
||||
// ---------------------------------------------
|
||||
@@ -1,44 +0,0 @@
|
||||
/**
|
||||
* A simple theme for reveal.js presentations, similar
|
||||
* to the default theme. The accent color is darkblue.
|
||||
*
|
||||
* This theme is Copyright (C) 2012 Owen Versteeg, https://github.com/StereotypicalApps. It is MIT licensed.
|
||||
* reveal.js is Copyright (C) 2011-2012 Hakim El Hattab, http://hakim.se
|
||||
*/
|
||||
|
||||
|
||||
// Default mixins and settings -----------------
|
||||
@use "sass:color";
|
||||
@import "../template/mixins";
|
||||
@import "../template/settings";
|
||||
// ---------------------------------------------
|
||||
|
||||
|
||||
|
||||
// Include theme-specific fonts
|
||||
@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);
|
||||
|
||||
|
||||
// Override theme settings (see ../template/settings.scss)
|
||||
$mainFont: 'Lato', sans-serif;
|
||||
$mainColor: #000;
|
||||
$headingFont: 'News Cycle', Impact, sans-serif;
|
||||
$headingColor: #000;
|
||||
$headingTextShadow: none;
|
||||
$headingTextTransform: none;
|
||||
$backgroundColor: #fff;
|
||||
$linkColor: #00008B;
|
||||
$linkColorHover: color.scale( $linkColor, $lightness: 20% );
|
||||
$selectionBackgroundColor: rgba(0, 0, 0, 0.99);
|
||||
|
||||
$overlayElementBgColor: 0, 0, 0;
|
||||
$overlayElementFgColor: 240, 240, 240;
|
||||
|
||||
// Change text colors against dark slide backgrounds
|
||||
@include dark-bg-text-color(#fff);
|
||||
|
||||
|
||||
// Theme template ------------------------------
|
||||
@import "../template/theme";
|
||||
// ---------------------------------------------
|
||||
@@ -1,53 +0,0 @@
|
||||
/**
|
||||
* Sky theme for reveal.js.
|
||||
*
|
||||
* Copyright (C) 2011-2012 Hakim El Hattab, http://hakim.se
|
||||
*/
|
||||
|
||||
|
||||
// Default mixins and settings -----------------
|
||||
@use "sass:color";
|
||||
@import "../template/mixins";
|
||||
@import "../template/settings";
|
||||
// ---------------------------------------------
|
||||
|
||||
|
||||
|
||||
// Include theme-specific fonts
|
||||
@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);
|
||||
|
||||
|
||||
// Override theme settings (see ../template/settings.scss)
|
||||
$mainFont: 'Open Sans', sans-serif;
|
||||
$mainColor: #333;
|
||||
$headingFont: 'Quicksand', sans-serif;
|
||||
$headingColor: #333;
|
||||
$headingLetterSpacing: -0.08em;
|
||||
$headingTextShadow: none;
|
||||
$backgroundColor: #f7fbfc;
|
||||
$linkColor: #3b759e;
|
||||
$linkColorHover: color.scale( $linkColor, $lightness: 20% );
|
||||
$selectionBackgroundColor: #134674;
|
||||
|
||||
$overlayElementBgColor: 0, 0, 0;
|
||||
$overlayElementFgColor: 240, 240, 240;
|
||||
|
||||
// Fix links so they are not cut off
|
||||
.reveal a {
|
||||
line-height: 1.3em;
|
||||
}
|
||||
|
||||
// Background generator
|
||||
@mixin bodyBackground() {
|
||||
@include radial-gradient( #add9e4, #f7fbfc );
|
||||
}
|
||||
|
||||
// Change text colors against dark slide backgrounds
|
||||
@include dark-bg-text-color(#fff);
|
||||
|
||||
|
||||
|
||||
// Theme template ------------------------------
|
||||
@import "../template/theme";
|
||||
// ---------------------------------------------
|
||||
@@ -1,67 +0,0 @@
|
||||
/**
|
||||
* Solarized Light theme for reveal.js.
|
||||
* Author: Achim Staebler
|
||||
*/
|
||||
|
||||
|
||||
// Default mixins and settings -----------------
|
||||
@use "sass:color";
|
||||
@import "../template/mixins";
|
||||
@import "../template/settings";
|
||||
// ---------------------------------------------
|
||||
|
||||
|
||||
|
||||
// Include theme-specific fonts
|
||||
@import url(./fonts/league-gothic/league-gothic.css);
|
||||
@import url(https://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic);
|
||||
|
||||
|
||||
/**
|
||||
* Solarized colors by Ethan Schoonover
|
||||
*/
|
||||
html * {
|
||||
color-profile: sRGB;
|
||||
rendering-intent: auto;
|
||||
}
|
||||
|
||||
// Solarized colors
|
||||
$base03: #002b36;
|
||||
$base02: #073642;
|
||||
$base01: #586e75;
|
||||
$base00: #657b83;
|
||||
$base0: #839496;
|
||||
$base1: #93a1a1;
|
||||
$base2: #eee8d5;
|
||||
$base3: #fdf6e3;
|
||||
$yellow: #b58900;
|
||||
$orange: #cb4b16;
|
||||
$red: #dc322f;
|
||||
$magenta: #d33682;
|
||||
$violet: #6c71c4;
|
||||
$blue: #268bd2;
|
||||
$cyan: #2aa198;
|
||||
$green: #859900;
|
||||
|
||||
// Override theme settings (see ../template/settings.scss)
|
||||
$mainColor: $base00;
|
||||
$headingColor: $base01;
|
||||
$headingTextShadow: none;
|
||||
$backgroundColor: $base3;
|
||||
$linkColor: $blue;
|
||||
$linkColorHover: color.scale( $linkColor, $lightness: 20% );
|
||||
$selectionBackgroundColor: $magenta;
|
||||
|
||||
$overlayElementBgColor: 0, 0, 0;
|
||||
$overlayElementFgColor: 240, 240, 240;
|
||||
|
||||
// Background generator
|
||||
// @mixin bodyBackground() {
|
||||
// @include radial-gradient( rgba($base3,1), rgba(lighten($base3, 20%),1) );
|
||||
// }
|
||||
|
||||
|
||||
|
||||
// Theme template ------------------------------
|
||||
@import "../template/theme";
|
||||
// ---------------------------------------------
|
||||
@@ -1,53 +0,0 @@
|
||||
/**
|
||||
* White compact & high contrast reveal.js theme, with headers not in capitals.
|
||||
*
|
||||
* By Peter Kehl. Based on white.(s)css by Hakim El Hattab, http://hakim.se
|
||||
*
|
||||
* - Keep the source similar to black.css - for easy comparison.
|
||||
* - $mainFontSize controls code blocks, too (although under some ratio).
|
||||
*/
|
||||
|
||||
|
||||
// Default mixins and settings -----------------
|
||||
@use "sass:color";
|
||||
@import "../template/mixins";
|
||||
@import "../template/settings";
|
||||
// ---------------------------------------------
|
||||
|
||||
|
||||
// Include theme-specific fonts
|
||||
@import url(./fonts/source-sans-pro/source-sans-pro.css);
|
||||
|
||||
|
||||
// Override theme settings (see ../template/settings.scss)
|
||||
$backgroundColor: #fff;
|
||||
|
||||
$mainColor: #000;
|
||||
$headingColor: #000;
|
||||
|
||||
$mainFontSize: 42px;
|
||||
$mainFont: 'Source Sans Pro', Helvetica, sans-serif;
|
||||
$headingFont: 'Source Sans Pro', Helvetica, sans-serif;
|
||||
$headingTextShadow: none;
|
||||
$headingLetterSpacing: normal;
|
||||
$headingTextTransform: uppercase;
|
||||
$headingFontWeight: 600;
|
||||
$linkColor: #2a76dd;
|
||||
$linkColorHover: color.scale( $linkColor, $lightness: 15% );
|
||||
$selectionBackgroundColor: color.scale( $linkColor, $lightness: 25% );
|
||||
|
||||
$heading1Size: 2.5em;
|
||||
$heading2Size: 1.6em;
|
||||
$heading3Size: 1.3em;
|
||||
$heading4Size: 1.0em;
|
||||
|
||||
$overlayElementBgColor: 0, 0, 0;
|
||||
$overlayElementFgColor: 240, 240, 240;
|
||||
|
||||
// Change text colors against dark slide backgrounds
|
||||
@include dark-bg-text-color(#fff);
|
||||
|
||||
|
||||
// Theme template ------------------------------
|
||||
@import "../template/theme";
|
||||
// ---------------------------------------------
|
||||
@@ -1,50 +0,0 @@
|
||||
/**
|
||||
* White theme for reveal.js. This is the opposite of the 'black' theme.
|
||||
*
|
||||
* By Hakim El Hattab, http://hakim.se
|
||||
*/
|
||||
|
||||
|
||||
// Default mixins and settings -----------------
|
||||
@use "sass:color";
|
||||
@import "../template/mixins";
|
||||
@import "../template/settings";
|
||||
// ---------------------------------------------
|
||||
|
||||
|
||||
// Include theme-specific fonts
|
||||
@import url(./fonts/source-sans-pro/source-sans-pro.css);
|
||||
|
||||
|
||||
// Override theme settings (see ../template/settings.scss)
|
||||
$backgroundColor: #fff;
|
||||
|
||||
$mainColor: #222;
|
||||
$headingColor: #222;
|
||||
|
||||
$mainFontSize: 42px;
|
||||
$mainFont: 'Source Sans Pro', Helvetica, sans-serif;
|
||||
$headingFont: 'Source Sans Pro', Helvetica, sans-serif;
|
||||
$headingTextShadow: none;
|
||||
$headingLetterSpacing: normal;
|
||||
$headingTextTransform: uppercase;
|
||||
$headingFontWeight: 600;
|
||||
$linkColor: #2a76dd;
|
||||
$linkColorHover: color.scale( $linkColor, $lightness: 15% );
|
||||
$selectionBackgroundColor: color.scale( $linkColor, $lightness: 25% );
|
||||
|
||||
$heading1Size: 2.5em;
|
||||
$heading2Size: 1.6em;
|
||||
$heading3Size: 1.3em;
|
||||
$heading4Size: 1.0em;
|
||||
|
||||
$overlayElementBgColor: 0, 0, 0;
|
||||
$overlayElementFgColor: 240, 240, 240;
|
||||
|
||||
// Change text colors against dark slide backgrounds
|
||||
@include dark-bg-text-color(#fff);
|
||||
|
||||
|
||||
// Theme template ------------------------------
|
||||
@import "../template/theme";
|
||||
// ---------------------------------------------
|
||||
@@ -1,32 +0,0 @@
|
||||
// Exposes theme's variables for easy reuse in CSS for plugin authors
|
||||
|
||||
@use "sass:color";
|
||||
|
||||
:root {
|
||||
--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: #{color.scale( $linkColor, $lightness: -15% )};
|
||||
--r-link-color-hover: #{$linkColorHover};
|
||||
--r-selection-background-color: #{$selectionBackgroundColor};
|
||||
--r-selection-color: #{$selectionColor};
|
||||
--r-overlay-element-bg-color: #{$overlayElementBgColor};
|
||||
--r-overlay-element-fg-color: #{$overlayElementFgColor};
|
||||
}
|
||||
@@ -1,45 +1,27 @@
|
||||
@mixin vertical-gradient( $top, $bottom ) {
|
||||
background: $top;
|
||||
background: -moz-linear-gradient( top, $top 0%, $bottom 100% );
|
||||
background: -webkit-gradient( linear, left top, left bottom, color-stop(0%,$top), color-stop(100%,$bottom) );
|
||||
background: -webkit-linear-gradient( top, $top 0%, $bottom 100% );
|
||||
background: -o-linear-gradient( top, $top 0%, $bottom 100% );
|
||||
background: -ms-linear-gradient( top, $top 0%, $bottom 100% );
|
||||
background: linear-gradient( top, $top 0%, $bottom 100% );
|
||||
}
|
||||
|
||||
@mixin horizontal-gradient( $top, $bottom ) {
|
||||
background: $top;
|
||||
background: -moz-linear-gradient( left, $top 0%, $bottom 100% );
|
||||
background: -webkit-gradient( linear, left top, right top, color-stop(0%,$top), color-stop(100%,$bottom) );
|
||||
background: -webkit-linear-gradient( left, $top 0%, $bottom 100% );
|
||||
background: -o-linear-gradient( left, $top 0%, $bottom 100% );
|
||||
background: -ms-linear-gradient( left, $top 0%, $bottom 100% );
|
||||
background: linear-gradient( left, $top 0%, $bottom 100% );
|
||||
}
|
||||
|
||||
@mixin radial-gradient( $outer, $inner, $type: circle ) {
|
||||
background: $outer;
|
||||
background: -moz-radial-gradient( center, $type cover, $inner 0%, $outer 100% );
|
||||
background: -webkit-gradient( radial, center center, 0px, center center, 100%, color-stop(0%,$inner), color-stop(100%,$outer) );
|
||||
background: -webkit-radial-gradient( center, $type cover, $inner 0%, $outer 100% );
|
||||
background: -o-radial-gradient( center, $type cover, $inner 0%, $outer 100% );
|
||||
background: -ms-radial-gradient( center, $type cover, $inner 0%, $outer 100% );
|
||||
background: radial-gradient( center, $type cover, $inner 0%, $outer 100% );
|
||||
}
|
||||
|
||||
@mixin light-bg-text-color( $color ) {
|
||||
@mixin light-bg-text-color($color) {
|
||||
section.has-light-background {
|
||||
&, h1, h2, h3, h4, h5, h6 {
|
||||
&,
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
color: $color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@mixin dark-bg-text-color( $color ) {
|
||||
@mixin dark-bg-text-color($color) {
|
||||
section.has-dark-background {
|
||||
&, h1, h2, h3, h4, h5, h6 {
|
||||
&,
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
color: $color;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,52 +1,96 @@
|
||||
@use "sass:color";
|
||||
|
||||
// Base settings for all themes that can optionally be
|
||||
// overridden by the super-theme
|
||||
|
||||
@use 'sass:color';
|
||||
@use 'sass:meta';
|
||||
|
||||
// Background of the presentation
|
||||
$backgroundColor: #2b2b2b;
|
||||
$background: #2b2b2b !default;
|
||||
$background-color: #bbb !default;
|
||||
|
||||
// Primary/body text
|
||||
$mainFont: 'Lato', sans-serif;
|
||||
$mainFontSize: 40px;
|
||||
$mainColor: #eee;
|
||||
$main-font: 'Lato', sans-serif !default;
|
||||
$main-font-size: 40px !default;
|
||||
$main-color: #eee !default;
|
||||
|
||||
// Vertical spacing between blocks of text
|
||||
$blockMargin: 20px;
|
||||
$block-margin: 20px !default;
|
||||
|
||||
// Headings
|
||||
$headingMargin: 0 0 $blockMargin 0;
|
||||
$headingFont: 'League Gothic', Impact, sans-serif;
|
||||
$headingColor: #eee;
|
||||
$headingLineHeight: 1.2;
|
||||
$headingLetterSpacing: normal;
|
||||
$headingTextTransform: uppercase;
|
||||
$headingTextShadow: none;
|
||||
$headingFontWeight: normal;
|
||||
$heading1TextShadow: $headingTextShadow;
|
||||
$heading-margin: 0 0 20px 0 !default;
|
||||
$heading-font: 'League Gothic', Impact, sans-serif !default;
|
||||
$heading-color: #eee !default;
|
||||
$heading-line-height: 1.2 !default;
|
||||
$heading-letter-spacing: normal !default;
|
||||
$heading-text-transform: uppercase !default;
|
||||
$heading-text-shadow: none !default;
|
||||
$heading-font-weight: normal !default;
|
||||
$heading1-text-shadow: none !default;
|
||||
|
||||
$heading1Size: 3.77em;
|
||||
$heading2Size: 2.11em;
|
||||
$heading3Size: 1.55em;
|
||||
$heading4Size: 1.00em;
|
||||
$heading1-size: 3.77em !default;
|
||||
$heading2-size: 2.11em !default;
|
||||
$heading3-size: 1.55em !default;
|
||||
$heading4-size: 1em !default;
|
||||
|
||||
$codeFont: monospace;
|
||||
$code-font: monospace !default;
|
||||
|
||||
// Links and actions
|
||||
$linkColor: #13DAEC;
|
||||
$linkColorHover: color.scale( $linkColor, $lightness: 20% );
|
||||
$link-color: #13daec !default;
|
||||
$link-color-dark: color.scale($link-color, $lightness: -15%) !default;
|
||||
$link-color-hover: color.scale($link-color, $lightness: 20%) !default;
|
||||
|
||||
// Text selection
|
||||
$selectionBackgroundColor: #FF5E99;
|
||||
$selectionColor: #fff;
|
||||
$selection-background-color: #0fadbb !default;
|
||||
$selection-color: #fff !default;
|
||||
|
||||
// Colors used for UI elements that are overlaid on top of
|
||||
// the presentation
|
||||
$overlayElementBgColor: 240, 240, 240;
|
||||
$overlayElementFgColor: 0, 0, 0;
|
||||
$overlay-element-bg-color: 240, 240, 240 !default;
|
||||
$overlay-element-fg-color: 0, 0, 0 !default;
|
||||
|
||||
// Generates the presentation background, can be overridden
|
||||
// to return a background image or gradient
|
||||
@mixin bodyBackground() {
|
||||
background: $backgroundColor;
|
||||
// Expose all SCSS variables as CSS custom properties
|
||||
:root {
|
||||
// Background of the presentation
|
||||
--r-background: #{$background};
|
||||
--r-background-color: #{$background-color};
|
||||
|
||||
// Primary/body text
|
||||
--r-main-font: #{$main-font};
|
||||
--r-main-font-size: #{$main-font-size};
|
||||
--r-main-color: #{$main-color};
|
||||
|
||||
// Vertical spacing between blocks of text
|
||||
--r-block-margin: #{$block-margin};
|
||||
|
||||
// Headings
|
||||
--r-heading-margin: #{$heading-margin};
|
||||
--r-heading-font: #{$heading-font};
|
||||
--r-heading-color: #{$heading-color};
|
||||
--r-heading-line-height: #{$heading-line-height};
|
||||
--r-heading-letter-spacing: #{$heading-letter-spacing};
|
||||
--r-heading-text-transform: #{$heading-text-transform};
|
||||
--r-heading-text-shadow: #{$heading-text-shadow};
|
||||
--r-heading-font-weight: #{$heading-font-weight};
|
||||
--r-heading1-text-shadow: #{$heading1-text-shadow};
|
||||
|
||||
--r-heading1-size: #{$heading1-size};
|
||||
--r-heading2-size: #{$heading2-size};
|
||||
--r-heading3-size: #{$heading3-size};
|
||||
--r-heading4-size: #{$heading4-size};
|
||||
|
||||
--r-code-font: #{$code-font};
|
||||
|
||||
// Links and actions
|
||||
--r-link-color: #{$link-color};
|
||||
--r-link-color-dark: #{$link-color-dark};
|
||||
--r-link-color-hover: #{$link-color-hover};
|
||||
|
||||
// Text selection
|
||||
--r-selection-background-color: #{$selection-background-color};
|
||||
--r-selection-color: #{$selection-color};
|
||||
|
||||
// Colors used for UI elements that are overlaid on top of
|
||||
// the presentation
|
||||
--r-overlay-element-bg-color: #{$overlay-element-bg-color};
|
||||
--r-overlay-element-fg-color: #{$overlay-element-fg-color};
|
||||
}
|
||||
|
||||
@@ -4,10 +4,8 @@
|
||||
* GLOBAL STYLES
|
||||
*********************************************/
|
||||
|
||||
@import "./exposer";
|
||||
|
||||
.reveal-viewport {
|
||||
@include bodyBackground();
|
||||
background: var(--r-background);
|
||||
background-color: var(--r-background-color);
|
||||
}
|
||||
|
||||
@@ -31,7 +29,7 @@
|
||||
}
|
||||
|
||||
.reveal .slides section,
|
||||
.reveal .slides section>section {
|
||||
.reveal .slides section > section {
|
||||
line-height: 1.3;
|
||||
font-weight: inherit;
|
||||
}
|
||||
@@ -60,16 +58,23 @@
|
||||
word-wrap: break-word;
|
||||
}
|
||||
|
||||
.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 {
|
||||
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: var(--r-heading1-text-shadow);
|
||||
}
|
||||
|
||||
|
||||
/*********************************************
|
||||
* OTHER
|
||||
*********************************************/
|
||||
@@ -155,12 +160,12 @@
|
||||
|
||||
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;
|
||||
}
|
||||
.reveal blockquote p:first-child,
|
||||
.reveal blockquote p:last-child {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.reveal q {
|
||||
font-style: italic;
|
||||
@@ -221,13 +226,13 @@
|
||||
border-bottom: 1px solid;
|
||||
}
|
||||
|
||||
.reveal table th[align="center"],
|
||||
.reveal table td[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"] {
|
||||
.reveal table th[align='right'],
|
||||
.reveal table td[align='right'] {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
@@ -260,7 +265,6 @@
|
||||
margin: var(--r-block-margin) 0;
|
||||
}
|
||||
|
||||
|
||||
/*********************************************
|
||||
* LINKS
|
||||
*********************************************/
|
||||
@@ -268,21 +272,20 @@
|
||||
.reveal a {
|
||||
color: var(--r-link-color);
|
||||
text-decoration: none;
|
||||
transition: color .15s ease;
|
||||
transition: color 0.15s ease;
|
||||
}
|
||||
.reveal a:hover {
|
||||
color: var(--r-link-color-hover);
|
||||
text-shadow: none;
|
||||
border: none;
|
||||
}
|
||||
.reveal a:hover {
|
||||
color: var(--r-link-color-hover);
|
||||
text-shadow: none;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.reveal .roll span:after {
|
||||
color: #fff;
|
||||
// background: darken( var(--r-link-color), 15% );
|
||||
background: var(--r-link-color-dark);
|
||||
|
||||
}
|
||||
|
||||
|
||||
/*********************************************
|
||||
* Frame helper
|
||||
*********************************************/
|
||||
@@ -293,7 +296,7 @@
|
||||
}
|
||||
|
||||
.reveal a .r-frame {
|
||||
transition: all .15s linear;
|
||||
transition: all 0.15s linear;
|
||||
}
|
||||
|
||||
.reveal a:hover .r-frame {
|
||||
@@ -301,7 +304,6 @@
|
||||
box-shadow: 0 0 20px rgba(0, 0, 0, 0.55);
|
||||
}
|
||||
|
||||
|
||||
/*********************************************
|
||||
* NAVIGATION CONTROLS
|
||||
*********************************************/
|
||||
@@ -310,21 +312,20 @@
|
||||
color: var(--r-link-color);
|
||||
}
|
||||
|
||||
|
||||
/*********************************************
|
||||
* PROGRESS BAR
|
||||
*********************************************/
|
||||
|
||||
.reveal .progress {
|
||||
background: rgba(0,0,0,0.2);
|
||||
background: rgba(0, 0, 0, 0.2);
|
||||
color: var(--r-link-color);
|
||||
}
|
||||
|
||||
/*********************************************
|
||||
* PRINT BACKGROUND
|
||||
*********************************************/
|
||||
@media print {
|
||||
.backgrounds {
|
||||
background-color: var(--r-background-color);
|
||||
}
|
||||
@media print {
|
||||
.backgrounds {
|
||||
background-color: var(--r-background-color);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -0,0 +1,49 @@
|
||||
/**
|
||||
* White compact & high contrast reveal.js theme, with headers not in capitals.
|
||||
*
|
||||
* By Peter Kehl. Based on white.(s)css by Hakim El Hattab, http://hakim.se
|
||||
*
|
||||
* - Keep the source similar to black.css - for easy comparison.
|
||||
* - $mainFontSize controls code blocks, too (although under some ratio).
|
||||
*/
|
||||
|
||||
// Load utils
|
||||
@use 'sass:color';
|
||||
@use 'template/mixins' as mixins;
|
||||
|
||||
$active-color: #2a76dd;
|
||||
|
||||
// Inject theme variables (with some overrides)
|
||||
@use 'template/settings' with (
|
||||
$background-color: #fff,
|
||||
|
||||
$main-font: "'Source Sans Pro', Helvetica, sans-serif",
|
||||
$main-font-size: 42px,
|
||||
$main-color: #000,
|
||||
|
||||
$heading-color: #000,
|
||||
$heading-font: "'Source Sans Pro', Helvetica, sans-serif",
|
||||
$heading-font-weight: 600,
|
||||
|
||||
$heading1-size: 2.5em,
|
||||
$heading2-size: 1.6em,
|
||||
$heading3-size: 1.3em,
|
||||
$heading4-size: 1em,
|
||||
|
||||
$link-color: $active-color,
|
||||
$link-color-hover: color.scale($active-color, $lightness: 15%),
|
||||
$selection-color: #fff,
|
||||
$selection-background-color: $active-color,
|
||||
|
||||
$overlay-element-bg-color: '0, 0, 0',
|
||||
$overlay-element-fg-color: '240, 240, 240'
|
||||
);
|
||||
|
||||
// Inject the theme template
|
||||
@use 'template/theme';
|
||||
|
||||
// Include theme-specific fonts
|
||||
@import url('./fonts/source-sans-pro/source-sans-pro.css');
|
||||
|
||||
// Change text when the background is inverted
|
||||
@include mixins.dark-bg-text-color(#fff);
|
||||
@@ -0,0 +1,46 @@
|
||||
/**
|
||||
* White theme for reveal.js. This is the opposite of the 'black' theme.
|
||||
*
|
||||
* By Hakim El Hattab, http://hakim.se
|
||||
*/
|
||||
|
||||
// Load utils
|
||||
@use 'sass:color';
|
||||
@use 'template/mixins' as mixins;
|
||||
|
||||
$active-color: #2a76dd;
|
||||
|
||||
// Inject theme variables (with some overrides)
|
||||
@use 'template/settings' with (
|
||||
$background-color: #fff,
|
||||
|
||||
$main-color: #222,
|
||||
$main-font: "'Source Sans Pro', Helvetica, sans-serif",
|
||||
$main-font-size: 42px,
|
||||
|
||||
$heading-color: #222,
|
||||
$heading-font: "'Source Sans Pro', Helvetica, sans-serif",
|
||||
$heading-font-weight: 600,
|
||||
|
||||
$heading1-size: 2.5em,
|
||||
$heading2-size: 1.6em,
|
||||
$heading3-size: 1.3em,
|
||||
$heading4-size: 1em,
|
||||
|
||||
$link-color: $active-color,
|
||||
$link-color-hover: color.scale($active-color, $lightness: 15%),
|
||||
$selection-color: #fff,
|
||||
$selection-background-color: $active-color,
|
||||
|
||||
$overlay-element-bg-color: '0 0 0',
|
||||
$overlay-element-fg-color: '240 240 240'
|
||||
);
|
||||
|
||||
// Inject the theme template
|
||||
@use 'template/theme';
|
||||
|
||||
// Include theme-specific fonts
|
||||
@import url('./fonts/source-sans-pro/source-sans-pro.css');
|
||||
|
||||
// Change text when the background is inverted
|
||||
@include mixins.dark-bg-text-color(#fff);
|
||||
+313
-108
@@ -1,47 +1,58 @@
|
||||
<!doctype html>
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta charset="utf-8" />
|
||||
|
||||
<title>reveal.js – The HTML Presentation Framework</title>
|
||||
|
||||
<meta name="description" content="A framework for easily creating beautiful presentations using HTML">
|
||||
<meta name="author" content="Hakim El Hattab">
|
||||
<meta
|
||||
name="description"
|
||||
content="A framework for easily creating beautiful presentations using HTML"
|
||||
/>
|
||||
<meta name="author" content="Hakim El Hattab" />
|
||||
|
||||
<meta name="apple-mobile-web-app-capable" content="yes">
|
||||
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
|
||||
<meta name="mobile-web-app-capable" content="yes" />
|
||||
<meta name="mobile-web-app-status-bar-style" content="black-translucent" />
|
||||
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
|
||||
<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="css/reset.css" />
|
||||
<link rel="stylesheet" href="css/reveal.scss" />
|
||||
<link rel="stylesheet" href="css/theme/black.scss" id="theme" />
|
||||
|
||||
<!-- Theme used for syntax highlighting of code -->
|
||||
<link rel="stylesheet" href="plugin/highlight/monokai.css">
|
||||
<link rel="stylesheet" href="plugin/highlight/monokai.css" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<div class="reveal">
|
||||
|
||||
<!-- Any section element inside of this container is displayed as a slide -->
|
||||
<div class="slides">
|
||||
<section>
|
||||
<a href="https://revealjs.com">
|
||||
<img src="https://static.slid.es/reveal/logo-v1/reveal-white-text.svg" alt="reveal.js logo" style="height: 180px; margin: 0 auto 4rem auto; background: transparent;" class="demo-logo">
|
||||
<img
|
||||
src="https://static.slid.es/reveal/logo-v1/reveal-white-text.svg"
|
||||
alt="reveal.js logo"
|
||||
style="height: 180px; margin: 0 auto 4rem auto; background: transparent"
|
||||
class="demo-logo"
|
||||
/>
|
||||
</a>
|
||||
<h3>The HTML Presentation Framework</h3>
|
||||
<p>
|
||||
<small>Created by <a href="http://hakim.se">Hakim El Hattab</a> and <a href="https://github.com/hakimel/reveal.js/graphs/contributors">contributors</a></small>
|
||||
<small
|
||||
>Created by <a href="http://hakim.se">Hakim El Hattab</a> and
|
||||
<a href="https://github.com/hakimel/reveal.js/graphs/contributors"
|
||||
>contributors</a
|
||||
></small
|
||||
>
|
||||
</p>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h2>Hello There</h2>
|
||||
<p>
|
||||
reveal.js enables you to create beautiful interactive slide decks using HTML. This presentation will show you examples of what it can do.
|
||||
reveal.js enables you to create beautiful interactive slide decks using HTML. This
|
||||
presentation will show you examples of what it can do.
|
||||
</p>
|
||||
</section>
|
||||
|
||||
@@ -51,21 +62,38 @@
|
||||
<h2>Vertical Slides</h2>
|
||||
<p>Slides can be nested inside of each other.</p>
|
||||
<p>Use the <em>Space</em> key to navigate through all slides.</p>
|
||||
<br>
|
||||
<br />
|
||||
<a href="#/2/1" class="navigate-down">
|
||||
<img class="r-frame" style="background: rgba(255,255,255,0.1);" width="178" height="238" data-src="https://static.slid.es/reveal/arrow.png" alt="Down arrow">
|
||||
<img
|
||||
class="r-frame"
|
||||
style="background: rgba(255, 255, 255, 0.1)"
|
||||
width="178"
|
||||
height="238"
|
||||
data-src="https://static.slid.es/reveal/arrow.png"
|
||||
alt="Down arrow"
|
||||
/>
|
||||
</a>
|
||||
</section>
|
||||
<section>
|
||||
<h2>Basement Level 1</h2>
|
||||
<p>Nested slides are useful for adding additional detail underneath a high level horizontal slide.</p>
|
||||
<p>
|
||||
Nested slides are useful for adding additional detail underneath a high level
|
||||
horizontal slide.
|
||||
</p>
|
||||
</section>
|
||||
<section>
|
||||
<h2>Basement Level 2</h2>
|
||||
<p>That's it, time to go back up.</p>
|
||||
<br>
|
||||
<br />
|
||||
<a href="#/2">
|
||||
<img class="r-frame" style="background: rgba(255,255,255,0.1); transform: rotate(180deg);" width="178" height="238" data-src="https://static.slid.es/reveal/arrow.png" alt="Up arrow">
|
||||
<img
|
||||
class="r-frame"
|
||||
style="background: rgba(255, 255, 255, 0.1); transform: rotate(180deg)"
|
||||
width="178"
|
||||
height="238"
|
||||
data-src="https://static.slid.es/reveal/arrow.png"
|
||||
alt="Up arrow"
|
||||
/>
|
||||
</a>
|
||||
</section>
|
||||
</section>
|
||||
@@ -73,37 +101,46 @@
|
||||
<section>
|
||||
<h2>Slides</h2>
|
||||
<p>
|
||||
Not a coder? Not a problem. There's a fully-featured visual editor for authoring these, try it out at <a href="https://slides.com" target="_blank">https://slides.com</a>.
|
||||
Not a coder? Not a problem. There's a fully-featured visual editor for authoring these,
|
||||
try it out at <a href="https://slides.com" target="_blank">https://slides.com</a>.
|
||||
</p>
|
||||
</section>
|
||||
|
||||
<section data-visibility="hidden">
|
||||
<h2>Hidden Slides</h2>
|
||||
<p>
|
||||
This slide is visible in the source, but hidden when the presentation is viewed. You can show all hidden slides by setting the `showHiddenSlides` config option to `true`.
|
||||
This slide is visible in the source, but hidden when the presentation is viewed. You can
|
||||
show all hidden slides by setting the `showHiddenSlides` config option to `true`.
|
||||
</p>
|
||||
</section>
|
||||
|
||||
<section data-auto-animate>
|
||||
<h2 data-id="code-title">Pretty Code</h2>
|
||||
<pre data-id="code-animation"><code class="hljs javascript" data-trim data-line-numbers>
|
||||
import React, { useState } from 'react';
|
||||
import { useState } from 'react';
|
||||
|
||||
function Example() {
|
||||
const [count, setCount] = useState(0);
|
||||
|
||||
return (
|
||||
...
|
||||
|
||||
...
|
||||
|
||||
);
|
||||
}
|
||||
</code></pre>
|
||||
<p>Code syntax highlighting courtesy of <a href="https://highlightjs.org/usage/">highlight.js</a>.</p>
|
||||
<p>
|
||||
Code syntax highlighting courtesy of
|
||||
<a href="https://highlightjs.org/usage/">highlight.js</a>.
|
||||
</p>
|
||||
</section>
|
||||
|
||||
<section data-auto-animate>
|
||||
<h2 data-id="code-title">With Animations</h2>
|
||||
<pre data-id="code-animation"><code class="hljs javascript" data-trim data-line-numbers="|4,8-11|17|22-24"><script type="text/template">
|
||||
import React, { useState } from 'react';
|
||||
<pre
|
||||
data-id="code-animation"
|
||||
><code class="hljs javascript" data-trim data-line-numbers="|4,8-11|17|22-24"><script type="text/template">
|
||||
import { useState } from 'react';
|
||||
|
||||
function Example() {
|
||||
const [count, setCount] = useState(0);
|
||||
@@ -135,47 +172,79 @@
|
||||
|
||||
<section>
|
||||
<h2>Point of View</h2>
|
||||
<p>Press <strong>ESC</strong> to enter the slide overview.</p>
|
||||
<p>
|
||||
Press <strong>ESC</strong> to enter the slide overview.
|
||||
</p>
|
||||
<p>
|
||||
Hold down the <strong>alt</strong> key (<strong>ctrl</strong> in Linux) and click on any element to zoom towards it using <a href="http://lab.hakim.se/zoom-js">zoom.js</a>. Click again to zoom back out.
|
||||
</p>
|
||||
<p>
|
||||
(NOTE: Use ctrl + click in Linux.)
|
||||
Hold down the <strong>alt</strong> key (<strong>ctrl</strong> in Linux) and click on any
|
||||
element to zoom towards it using <a href="http://lab.hakim.se/zoom-js">zoom.js</a>.
|
||||
Click again to zoom back out.
|
||||
</p>
|
||||
<p>(NOTE: Use ctrl + click in Linux.)</p>
|
||||
</section>
|
||||
|
||||
<section data-auto-animate data-auto-animate-easing="cubic-bezier(0.770, 0.000, 0.175, 1.000)">
|
||||
<section
|
||||
data-auto-animate
|
||||
data-auto-animate-easing="cubic-bezier(0.770, 0.000, 0.175, 1.000)"
|
||||
>
|
||||
<h2>Auto-Animate</h2>
|
||||
<p>Automatically animate matching elements across slides with <a href="https://revealjs.com/auto-animate/">Auto-Animate</a>.</p>
|
||||
<p>
|
||||
Automatically animate matching elements across slides with
|
||||
<a href="https://revealjs.com/auto-animate/">Auto-Animate</a>.
|
||||
</p>
|
||||
<div class="r-hstack justify-center">
|
||||
<div data-id="box1" style="background: #999; width: 50px; height: 50px; margin: 10px; border-radius: 5px;"></div>
|
||||
<div data-id="box2" style="background: #999; width: 50px; height: 50px; margin: 10px; border-radius: 5px;"></div>
|
||||
<div data-id="box3" style="background: #999; width: 50px; height: 50px; margin: 10px; border-radius: 5px;"></div>
|
||||
<div
|
||||
data-id="box1"
|
||||
style="background: #999; width: 50px; height: 50px; margin: 10px; border-radius: 5px"
|
||||
></div>
|
||||
<div
|
||||
data-id="box2"
|
||||
style="background: #999; width: 50px; height: 50px; margin: 10px; border-radius: 5px"
|
||||
></div>
|
||||
<div
|
||||
data-id="box3"
|
||||
style="background: #999; width: 50px; height: 50px; margin: 10px; border-radius: 5px"
|
||||
></div>
|
||||
</div>
|
||||
</section>
|
||||
<section data-auto-animate data-auto-animate-easing="cubic-bezier(0.770, 0.000, 0.175, 1.000)">
|
||||
<section
|
||||
data-auto-animate
|
||||
data-auto-animate-easing="cubic-bezier(0.770, 0.000, 0.175, 1.000)"
|
||||
>
|
||||
<div class="r-hstack justify-center">
|
||||
<div data-id="box1" data-auto-animate-delay="0" style="background: cyan; width: 150px; height: 100px; margin: 10px;"></div>
|
||||
<div data-id="box2" data-auto-animate-delay="0.1" style="background: magenta; width: 150px; height: 100px; margin: 10px;"></div>
|
||||
<div data-id="box3" data-auto-animate-delay="0.2" style="background: yellow; width: 150px; height: 100px; margin: 10px;"></div>
|
||||
<div
|
||||
data-id="box1"
|
||||
data-auto-animate-delay="0"
|
||||
style="background: cyan; width: 150px; height: 100px; margin: 10px"
|
||||
></div>
|
||||
<div
|
||||
data-id="box2"
|
||||
data-auto-animate-delay="0.1"
|
||||
style="background: magenta; width: 150px; height: 100px; margin: 10px"
|
||||
></div>
|
||||
<div
|
||||
data-id="box3"
|
||||
data-auto-animate-delay="0.2"
|
||||
style="background: yellow; width: 150px; height: 100px; margin: 10px"
|
||||
></div>
|
||||
</div>
|
||||
<h2 style="margin-top: 20px;">Auto-Animate</h2>
|
||||
<h2 style="margin-top: 20px">Auto-Animate</h2>
|
||||
</section>
|
||||
<section data-auto-animate data-auto-animate-easing="cubic-bezier(0.770, 0.000, 0.175, 1.000)">
|
||||
<section
|
||||
data-auto-animate
|
||||
data-auto-animate-easing="cubic-bezier(0.770, 0.000, 0.175, 1.000)"
|
||||
>
|
||||
<div class="r-stack">
|
||||
<div data-id="box1" style="background: cyan; width: 300px; height: 300px;"></div>
|
||||
<div data-id="box2" style="background: magenta; width: 200px; height: 200px;"></div>
|
||||
<div data-id="box3" style="background: yellow; width: 100px; height: 100px;"></div>
|
||||
<div data-id="box1" style="background: cyan; width: 300px; height: 300px"></div>
|
||||
<div data-id="box2" style="background: magenta; width: 200px; height: 200px"></div>
|
||||
<div data-id="box3" style="background: yellow; width: 100px; height: 100px"></div>
|
||||
</div>
|
||||
<h2 style="margin-top: 20px;">Auto-Animate</h2>
|
||||
<h2 style="margin-top: 20px">Auto-Animate</h2>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h2>Touch Optimized</h2>
|
||||
<p>
|
||||
Presentations look great on touch devices, like mobile phones and tablets. Simply swipe through your slides.
|
||||
Presentations look great on touch devices, like mobile phones and tablets. Simply swipe
|
||||
through your slides.
|
||||
</p>
|
||||
</section>
|
||||
|
||||
@@ -226,7 +295,10 @@
|
||||
<h2>Fragments</h2>
|
||||
<p>Hit the next arrow...</p>
|
||||
<p class="fragment">... to step through ...</p>
|
||||
<p><span class="fragment">... a</span> <span class="fragment">fragmented</span> <span class="fragment">slide.</span></p>
|
||||
<p>
|
||||
<span class="fragment">... a</span> <span class="fragment">fragmented</span>
|
||||
<span class="fragment">slide.</span>
|
||||
</p>
|
||||
|
||||
<aside class="notes">
|
||||
This slide has fragments which are also stepped through in the notes window.
|
||||
@@ -239,21 +311,25 @@
|
||||
<p class="fragment shrink">shrink</p>
|
||||
<p class="fragment fade-out">fade-out</p>
|
||||
<p>
|
||||
<span style="display: inline-block;" class="fragment fade-right">fade-right, </span>
|
||||
<span style="display: inline-block;" class="fragment fade-up">up, </span>
|
||||
<span style="display: inline-block;" class="fragment fade-down">down, </span>
|
||||
<span style="display: inline-block;" class="fragment fade-left">left</span>
|
||||
<span style="display: inline-block" class="fragment fade-right">fade-right, </span>
|
||||
<span style="display: inline-block" class="fragment fade-up">up, </span>
|
||||
<span style="display: inline-block" class="fragment fade-down">down, </span>
|
||||
<span style="display: inline-block" class="fragment fade-left">left</span>
|
||||
</p>
|
||||
<p class="fragment fade-in-then-out">fade-in-then-out</p>
|
||||
<p class="fragment fade-in-then-semi-out">fade-in-then-semi-out</p>
|
||||
<p>Highlight <span class="fragment highlight-red">red</span> <span class="fragment highlight-blue">blue</span> <span class="fragment highlight-green">green</span></p>
|
||||
<p>
|
||||
Highlight <span class="fragment highlight-red">red</span>
|
||||
<span class="fragment highlight-blue">blue</span>
|
||||
<span class="fragment highlight-green">green</span>
|
||||
</p>
|
||||
</section>
|
||||
</section>
|
||||
|
||||
<section id="transitions">
|
||||
<h2>Transition Styles</h2>
|
||||
<p>
|
||||
You can select from different transitions, like: <br>
|
||||
You can select from different transitions, like: <br />
|
||||
<a href="?transition=none#/transitions">None</a> -
|
||||
<a href="?transition=fade#/transitions">Fade</a> -
|
||||
<a href="?transition=slide#/transitions">Slide</a> -
|
||||
@@ -266,19 +342,73 @@
|
||||
<section id="themes">
|
||||
<h2>Themes</h2>
|
||||
<p>
|
||||
reveal.js comes with a few themes built in: <br>
|
||||
reveal.js comes with a few themes built in: <br />
|
||||
<!-- Hacks to swap themes after the page has loaded. Not flexible and only intended for the reveal.js demo deck. -->
|
||||
<a href="#/themes" onclick="document.getElementById('theme').setAttribute('href','dist/theme/black.css'); return false;">Black (default)</a> -
|
||||
<a href="#/themes" onclick="document.getElementById('theme').setAttribute('href','dist/theme/white.css'); return false;">White</a> -
|
||||
<a href="#/themes" onclick="document.getElementById('theme').setAttribute('href','dist/theme/league.css'); return false;">League</a> -
|
||||
<a href="#/themes" onclick="document.getElementById('theme').setAttribute('href','dist/theme/sky.css'); return false;">Sky</a> -
|
||||
<a href="#/themes" onclick="document.getElementById('theme').setAttribute('href','dist/theme/beige.css'); return false;">Beige</a> -
|
||||
<a href="#/themes" onclick="document.getElementById('theme').setAttribute('href','dist/theme/simple.css'); return false;">Simple</a> <br>
|
||||
<a href="#/themes" onclick="document.getElementById('theme').setAttribute('href','dist/theme/serif.css'); return false;">Serif</a> -
|
||||
<a href="#/themes" onclick="document.getElementById('theme').setAttribute('href','dist/theme/blood.css'); return false;">Blood</a> -
|
||||
<a href="#/themes" onclick="document.getElementById('theme').setAttribute('href','dist/theme/night.css'); return false;">Night</a> -
|
||||
<a href="#/themes" onclick="document.getElementById('theme').setAttribute('href','dist/theme/moon.css'); return false;">Moon</a> -
|
||||
<a href="#/themes" onclick="document.getElementById('theme').setAttribute('href','dist/theme/solarized.css'); return false;">Solarized</a>
|
||||
<a
|
||||
href="#/themes"
|
||||
onclick="document.getElementById('theme').setAttribute('href','dist/theme/black.css'); return false;"
|
||||
>Black (default)</a
|
||||
>
|
||||
-
|
||||
<a
|
||||
href="#/themes"
|
||||
onclick="document.getElementById('theme').setAttribute('href','dist/theme/white.css'); return false;"
|
||||
>White</a
|
||||
>
|
||||
-
|
||||
<a
|
||||
href="#/themes"
|
||||
onclick="document.getElementById('theme').setAttribute('href','dist/theme/league.css'); return false;"
|
||||
>League</a
|
||||
>
|
||||
-
|
||||
<a
|
||||
href="#/themes"
|
||||
onclick="document.getElementById('theme').setAttribute('href','dist/theme/sky.css'); return false;"
|
||||
>Sky</a
|
||||
>
|
||||
-
|
||||
<a
|
||||
href="#/themes"
|
||||
onclick="document.getElementById('theme').setAttribute('href','dist/theme/beige.css'); return false;"
|
||||
>Beige</a
|
||||
>
|
||||
-
|
||||
<a
|
||||
href="#/themes"
|
||||
onclick="document.getElementById('theme').setAttribute('href','dist/theme/simple.css'); return false;"
|
||||
>Simple</a
|
||||
>
|
||||
<br />
|
||||
<a
|
||||
href="#/themes"
|
||||
onclick="document.getElementById('theme').setAttribute('href','dist/theme/serif.css'); return false;"
|
||||
>Serif</a
|
||||
>
|
||||
-
|
||||
<a
|
||||
href="#/themes"
|
||||
onclick="document.getElementById('theme').setAttribute('href','dist/theme/blood.css'); return false;"
|
||||
>Blood</a
|
||||
>
|
||||
-
|
||||
<a
|
||||
href="#/themes"
|
||||
onclick="document.getElementById('theme').setAttribute('href','dist/theme/night.css'); return false;"
|
||||
>Night</a
|
||||
>
|
||||
-
|
||||
<a
|
||||
href="#/themes"
|
||||
onclick="document.getElementById('theme').setAttribute('href','dist/theme/moon.css'); return false;"
|
||||
>Moon</a
|
||||
>
|
||||
-
|
||||
<a
|
||||
href="#/themes"
|
||||
onclick="document.getElementById('theme').setAttribute('href','dist/theme/solarized.css'); return false;"
|
||||
>Solarized</a
|
||||
>
|
||||
</p>
|
||||
</section>
|
||||
|
||||
@@ -286,10 +416,18 @@
|
||||
<section data-background="#dddddd">
|
||||
<h2>Slide Backgrounds</h2>
|
||||
<p>
|
||||
Set <code>data-background="#dddddd"</code> on a slide to change the background color. All CSS color formats are supported.
|
||||
Set <code>data-background="#dddddd"</code> on a slide to change the background color.
|
||||
All CSS color formats are supported.
|
||||
</p>
|
||||
<a href="#" class="navigate-down">
|
||||
<img class="r-frame" style="background: rgba(255,255,255,0.1);" width="178" height="238" data-src="https://static.slid.es/reveal/arrow.png" alt="Down arrow">
|
||||
<img
|
||||
class="r-frame"
|
||||
style="background: rgba(255, 255, 255, 0.1)"
|
||||
width="178"
|
||||
height="238"
|
||||
data-src="https://static.slid.es/reveal/arrow.png"
|
||||
alt="Down arrow"
|
||||
/>
|
||||
</a>
|
||||
</section>
|
||||
<section data-background-gradient="linear-gradient(to bottom, #283b95, #17b2c3)">
|
||||
@@ -301,12 +439,19 @@
|
||||
<h2>Image Backgrounds</h2>
|
||||
<pre><code class="hljs html"><section data-background="image.png"></code></pre>
|
||||
</section>
|
||||
<section data-background="https://static.slid.es/reveal/image-placeholder.png" data-background-repeat="repeat" data-background-size="100px">
|
||||
<section
|
||||
data-background="https://static.slid.es/reveal/image-placeholder.png"
|
||||
data-background-repeat="repeat"
|
||||
data-background-size="100px"
|
||||
>
|
||||
<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://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;">
|
||||
<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>
|
||||
</div>
|
||||
@@ -316,26 +461,48 @@
|
||||
</section>
|
||||
</section>
|
||||
|
||||
<section data-transition="slide" data-background="#4d7e65" data-background-transition="zoom">
|
||||
<section
|
||||
data-transition="slide"
|
||||
data-background="#4d7e65"
|
||||
data-background-transition="zoom"
|
||||
>
|
||||
<h2>Background Transitions</h2>
|
||||
<p>
|
||||
Different background transitions are available via the backgroundTransition option. This one's called "zoom".
|
||||
Different background transitions are available via the backgroundTransition option. This
|
||||
one's called "zoom".
|
||||
</p>
|
||||
<pre><code class="hljs javascript">Reveal.configure({ backgroundTransition: 'zoom' })</code></pre>
|
||||
</section>
|
||||
|
||||
<section data-transition="slide" data-background="#b5533c" data-background-transition="zoom">
|
||||
<section
|
||||
data-transition="slide"
|
||||
data-background="#b5533c"
|
||||
data-background-transition="zoom"
|
||||
>
|
||||
<h2>Background Transitions</h2>
|
||||
<p>
|
||||
You can override background transitions per-slide.
|
||||
</p>
|
||||
<p>You can override background transitions per-slide.</p>
|
||||
<pre><code class="hljs html" style="word-wrap: break-word;"><section data-background-transition="zoom"></code></pre>
|
||||
</section>
|
||||
|
||||
<section data-background-iframe="https://hakim.se" data-background-interactive>
|
||||
<div style="position: absolute; width: 40%; right: 0; box-shadow: 0 1px 4px rgba(0,0,0,0.5), 0 5px 25px rgba(0,0,0,0.2); background-color: rgba(0, 0, 0, 0.9); color: #fff; padding: 20px; font-size: 20px; text-align: left;">
|
||||
<div
|
||||
style="
|
||||
position: absolute;
|
||||
width: 40%;
|
||||
right: 0;
|
||||
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5), 0 5px 25px rgba(0, 0, 0, 0.2);
|
||||
background-color: rgba(0, 0, 0, 0.9);
|
||||
color: #fff;
|
||||
padding: 20px;
|
||||
font-size: 20px;
|
||||
text-align: left;
|
||||
"
|
||||
>
|
||||
<h2>Iframe Backgrounds</h2>
|
||||
<p>Since reveal.js runs on the web, you can easily embed other web content. Try interacting with the page in the background.</p>
|
||||
<p>
|
||||
Since reveal.js runs on the web, you can easily embed other web content. Try
|
||||
interacting with the page in the background.
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
@@ -391,11 +558,19 @@
|
||||
<section>
|
||||
<h2>Clever Quotes</h2>
|
||||
<p>
|
||||
These guys come in two forms, inline: <q cite="http://searchservervirtualization.techtarget.com/definition/Our-Favorite-Technology-Quotations">The nice thing about standards is that there are so many to choose from</q> and block:
|
||||
These guys come in two forms, inline:
|
||||
<q
|
||||
cite="http://searchservervirtualization.techtarget.com/definition/Our-Favorite-Technology-Quotations"
|
||||
>The nice thing about standards is that there are so many to choose from</q
|
||||
>
|
||||
and block:
|
||||
</p>
|
||||
<blockquote cite="http://searchservervirtualization.techtarget.com/definition/Our-Favorite-Technology-Quotations">
|
||||
“For years there has been a theory that millions of monkeys typing at random on millions of typewriters would
|
||||
reproduce the entire works of Shakespeare. The Internet has proven this theory to be untrue.”
|
||||
<blockquote
|
||||
cite="http://searchservervirtualization.techtarget.com/definition/Our-Favorite-Technology-Quotations"
|
||||
>
|
||||
“For years there has been a theory that millions of monkeys typing at random on
|
||||
millions of typewriters would reproduce the entire works of Shakespeare. The Internet
|
||||
has proven this theory to be untrue.”
|
||||
</blockquote>
|
||||
</section>
|
||||
|
||||
@@ -409,18 +584,36 @@
|
||||
|
||||
<section>
|
||||
<h2>Speaker View</h2>
|
||||
<p>There's a <a href="https://revealjs.com/speaker-view/">speaker view</a>. It includes a timer, preview of the upcoming slide as well as your speaker notes.</p>
|
||||
<p>
|
||||
There's a <a href="https://revealjs.com/speaker-view/">speaker view</a>. It includes a
|
||||
timer, preview of the upcoming slide as well as your speaker notes.
|
||||
</p>
|
||||
<p>Press the <em>S</em> key to try it out.</p>
|
||||
|
||||
<aside class="notes">
|
||||
Oh hey, these are some notes. They'll be hidden in your presentation, but you can see them if you open the speaker notes window (hit 's' on your keyboard).
|
||||
Oh hey, these are some notes. They'll be hidden in your presentation, but you can see
|
||||
them if you open the speaker notes window (hit 's' on your keyboard).
|
||||
</aside>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h2>Export to PDF</h2>
|
||||
<p>Presentations can be <a href="https://revealjs.com/pdf-export/">exported to PDF</a>, here's an example:</p>
|
||||
<iframe data-src="https://www.slideshare.net/slideshow/embed_code/42840540" width="445" height="355" frameborder="0" marginwidth="0" marginheight="0" scrolling="no" style="border:3px solid #666; margin-bottom:5px; max-width: 100%;" allowfullscreen> </iframe>
|
||||
<p>
|
||||
Presentations can be <a href="https://revealjs.com/pdf-export/">exported to PDF</a>,
|
||||
here's an example:
|
||||
</p>
|
||||
<iframe
|
||||
data-src="https://www.slideshare.net/slideshow/embed_code/42840540"
|
||||
width="445"
|
||||
height="355"
|
||||
frameborder="0"
|
||||
marginwidth="0"
|
||||
marginheight="0"
|
||||
scrolling="no"
|
||||
style="border: 3px solid #666; margin-bottom: 5px; max-width: 100%"
|
||||
allowfullscreen
|
||||
>
|
||||
</iframe>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
@@ -435,7 +628,8 @@
|
||||
<section data-state="customevent">
|
||||
<h2>State Events</h2>
|
||||
<p>
|
||||
Additionally custom events can be triggered on a per slide basis by binding to the <code>data-state</code> name.
|
||||
Additionally custom events can be triggered on a per slide basis by binding to the
|
||||
<code>data-state</code> name.
|
||||
</p>
|
||||
<pre><code class="javascript" data-trim contenteditable style="font-size: 18px;">
|
||||
Reveal.on( 'customevent', function() {
|
||||
@@ -447,7 +641,8 @@ Reveal.on( 'customevent', function() {
|
||||
<section>
|
||||
<h2>Take a Moment</h2>
|
||||
<p>
|
||||
Press B or . on your keyboard to pause the presentation. This is helpful when you're on stage and want to take distracting slides off the screen.
|
||||
Press B or . on your keyboard to pause the presentation. This is helpful when you're on
|
||||
stage and want to take distracting slides off the screen.
|
||||
</p>
|
||||
</section>
|
||||
|
||||
@@ -457,30 +652,42 @@ Reveal.on( 'customevent', function() {
|
||||
<li>Right-to-left support</li>
|
||||
<li><a href="https://revealjs.com/api/">Extensive JavaScript API</a></li>
|
||||
<li><a href="https://revealjs.com/auto-slide/">Auto-progression</a></li>
|
||||
<li><a href="https://revealjs.com/backgrounds/#parallax-background">Parallax backgrounds</a></li>
|
||||
<li>
|
||||
<a href="https://revealjs.com/backgrounds/#parallax-background"
|
||||
>Parallax backgrounds</a
|
||||
>
|
||||
</li>
|
||||
<li><a href="https://revealjs.com/keyboard/">Custom keyboard bindings</a></li>
|
||||
</ul>
|
||||
</section>
|
||||
|
||||
<section style="text-align: left;">
|
||||
<section style="text-align: left">
|
||||
<h1>THE END</h1>
|
||||
<p>
|
||||
- <a href="https://slides.com">Try the online editor</a> <br>
|
||||
- <a href="https://slides.com">Try the online editor</a> <br />
|
||||
- <a href="https://github.com/hakimel/reveal.js">Source code & documentation</a>
|
||||
</p>
|
||||
</section>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- Use the built assets if you want to run reveal.js without a web server -->
|
||||
<!--
|
||||
<script src="dist/reveal.js"></script>
|
||||
<script src="plugin/zoom/zoom.js"></script>
|
||||
<script src="plugin/notes/notes.js"></script>
|
||||
<script src="plugin/search/search.js"></script>
|
||||
<script src="plugin/markdown/markdown.js"></script>
|
||||
<script src="plugin/highlight/highlight.js"></script>
|
||||
<script>
|
||||
<script src="dist/plugin/zoom.js"></script>
|
||||
<script src="dist/plugin/notes.js"></script>
|
||||
<script src="dist/plugin/search.js"></script>
|
||||
<script src="dist/plugin/markdown.js"></script>
|
||||
<script src="dist/plugin/highlight.js"></script>
|
||||
-->
|
||||
|
||||
<script type="module">
|
||||
import Reveal from 'reveal.js';
|
||||
import RevealZoom from 'reveal.js/plugin/zoom';
|
||||
import RevealNotes from 'reveal.js/plugin/notes';
|
||||
import RevealSearch from 'reveal.js/plugin/search';
|
||||
import RevealMarkdown from 'reveal.js/plugin/markdown';
|
||||
import RevealHighlight from 'reveal.js/plugin/highlight';
|
||||
|
||||
// Also available as an ES module, see:
|
||||
// https://revealjs.com/initialization/
|
||||
@@ -491,10 +698,8 @@ Reveal.on( 'customevent', function() {
|
||||
hash: true,
|
||||
|
||||
// Learn about plugins: https://revealjs.com/plugins/
|
||||
plugins: [ RevealZoom, RevealNotes, RevealSearch, RevealMarkdown, RevealHighlight ]
|
||||
plugins: [RevealZoom, RevealNotes, RevealSearch, RevealMarkdown, RevealHighlight],
|
||||
});
|
||||
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
Vendored
+753
@@ -0,0 +1,753 @@
|
||||
/**
|
||||
* Slide transition styles.
|
||||
*
|
||||
* @see {@link https://revealjs.com/transitions/}
|
||||
*/
|
||||
type TransitionStyle = 'none' | 'fade' | 'slide' | 'convex' | 'concave' | 'zoom';
|
||||
/**
|
||||
* Slide transition speeds.
|
||||
*
|
||||
* @see {@link https://revealjs.com/transitions/}
|
||||
*/
|
||||
type TransitionSpeed = 'default' | 'fast' | 'slow';
|
||||
/**
|
||||
* Fragment animation classes.
|
||||
*
|
||||
* @see {@link https://revealjs.com/fragments/}
|
||||
*/
|
||||
type FragmentAnimation = 'fade-out' | 'fade-up' | 'fade-down' | 'fade-left' | 'fade-right' | 'fade-in-then-out' | 'fade-in-then-semi-out' | 'grow' | 'shrink' | 'strike' | 'highlight-red' | 'highlight-blue' | 'highlight-green' | 'highlight-current-red' | 'highlight-current-blue' | 'highlight-current-green' | (string & {});
|
||||
/**
|
||||
* katex - Math Plugin configuration
|
||||
*
|
||||
* @see {@link https://github.com/reveal/revealjs.com/blob/master/src/math.md}
|
||||
* @see {@link https://github.com/hakimel/reveal.js/blob/master/plugin/math/katex.js}
|
||||
*/
|
||||
interface KatexConfig {
|
||||
local?: string;
|
||||
version?: string;
|
||||
delimiters?: Array<{
|
||||
left: string;
|
||||
right: string;
|
||||
display: boolean;
|
||||
}>;
|
||||
ignoredTags?: string[];
|
||||
}
|
||||
/**
|
||||
* mathjax2 - Math Plugin configuration
|
||||
*
|
||||
* @see {@link https://github.com/reveal/revealjs.com/blob/master/src/math.md}
|
||||
* @see {@link https://github.com/hakimel/reveal.js/blob/master/plugin/math/mathjax2.js}
|
||||
*/
|
||||
interface Mathjax2Config {
|
||||
mathjax?: string;
|
||||
config?: string;
|
||||
tex2jax?: {
|
||||
inlineMath?: any;
|
||||
skipTags?: string[];
|
||||
};
|
||||
}
|
||||
/**
|
||||
* mathjax3 - Math Plugin configuration
|
||||
*
|
||||
* @see {@link https://github.com/reveal/revealjs.com/blob/master/src/math.md}
|
||||
* @see {@link https://github.com/hakimel/reveal.js/blob/master/plugin/math/mathjax3.js}
|
||||
*/
|
||||
interface Mathjax3Config {
|
||||
mathjax?: string;
|
||||
tex?: {
|
||||
inlineMath?: any;
|
||||
};
|
||||
options?: {
|
||||
skipHtmlTags: string[];
|
||||
};
|
||||
}
|
||||
/**
|
||||
* mathjax4 - Math Plugin configuration
|
||||
*
|
||||
* @see {@link https://github.com/reveal/revealjs.com/blob/master/src/math.md}
|
||||
* @see {@link https://github.com/hakimel/reveal.js/blob/master/plugin/math/mathjax4.js}
|
||||
*/
|
||||
interface Mathjax4Config {
|
||||
mathjax?: string;
|
||||
tex?: {
|
||||
inlineMath?: Array<[string, string]>;
|
||||
displayMath?: Array<[string, string]>;
|
||||
macros?: Record<string, string | [string, number]>;
|
||||
};
|
||||
options?: {
|
||||
skipHtmlTags?: string[];
|
||||
};
|
||||
startup?: {
|
||||
ready?: () => void;
|
||||
};
|
||||
output?: {
|
||||
font?: string;
|
||||
displayOverflow?: string;
|
||||
linebreaks?: {
|
||||
inline?: boolean;
|
||||
width?: string;
|
||||
lineleading?: number;
|
||||
LinebreakVisitor?: unknown;
|
||||
};
|
||||
};
|
||||
}
|
||||
/**
|
||||
* Highlight Plugin configuration
|
||||
*
|
||||
* @see {@link https://github.com/hakimel/reveal.js/blob/master/plugin/highlight/plugin.js}
|
||||
*/
|
||||
interface HighlightConfig {
|
||||
highlightOnLoad?: boolean;
|
||||
escapeHTML?: boolean;
|
||||
beforeHighlight?: (...args: any) => any;
|
||||
}
|
||||
/**
|
||||
* Markdown Plugin configuration
|
||||
*
|
||||
* @see {@link https://github.com/reveal/revealjs.com/blob/master/src/markdown.md}
|
||||
* @see {@link https://marked.js.org/using_advanced}
|
||||
*/
|
||||
interface MarkdownConfig {
|
||||
async?: boolean;
|
||||
baseUrl?: string;
|
||||
breaks?: boolean;
|
||||
gfm?: boolean;
|
||||
headerIds?: boolean;
|
||||
headerPrefix?: string;
|
||||
highlight?: (...args: any) => any;
|
||||
langPrefix?: string;
|
||||
mangle?: boolean;
|
||||
pedantic?: boolean;
|
||||
renderer?: object;
|
||||
sanitize?: boolean;
|
||||
sanitizer?: (...args: any) => any;
|
||||
silent?: boolean;
|
||||
smartLists?: boolean;
|
||||
smartypants?: boolean;
|
||||
tokenizer?: object;
|
||||
walkTokens?: (...args: any) => any;
|
||||
xhtml?: boolean;
|
||||
separator?: string;
|
||||
verticalSeparator?: string;
|
||||
notesSeparator?: string;
|
||||
attributes?: string;
|
||||
}
|
||||
/**
|
||||
* Configuration object for reveal.js.
|
||||
*
|
||||
* @see {@link https://revealjs.com/config/}
|
||||
*/
|
||||
interface RevealConfig {
|
||||
/**
|
||||
* The "normal" size of the presentation, aspect ratio will be preserved
|
||||
* when the presentation is scaled to fit different resolutions
|
||||
*
|
||||
* @see {@link https://revealjs.com/presentation-size/}
|
||||
*
|
||||
* @defaultValue 960
|
||||
*/
|
||||
width?: number | string;
|
||||
/**
|
||||
* The "normal" size of the presentation, aspect ratio will be preserved
|
||||
* when the presentation is scaled to fit different resolutions
|
||||
*
|
||||
* @see {@link https://revealjs.com/presentation-size/}
|
||||
*
|
||||
* @defaultValue 700
|
||||
*/
|
||||
height?: number | string;
|
||||
/**
|
||||
* Factor of the display size that should remain empty around the content
|
||||
*
|
||||
* @see {@link https://revealjs.com/presentation-size/}
|
||||
*
|
||||
* @defaultValue 0.04
|
||||
*/
|
||||
margin?: number;
|
||||
/**
|
||||
* The smallest possible factor to scale content down by in order to fit
|
||||
* the available viewport.
|
||||
*
|
||||
* @see {@link https://revealjs.com/presentation-size/}
|
||||
*
|
||||
* @defaultValue 0.2
|
||||
*/
|
||||
minScale?: number;
|
||||
/**
|
||||
* The largest possible factor to scale content up by in order to cover
|
||||
* the available viewport.
|
||||
*
|
||||
* @see {@link https://revealjs.com/presentation-size/}
|
||||
*
|
||||
* @defaultValue 2.0
|
||||
*/
|
||||
maxScale?: number;
|
||||
/**
|
||||
* Display presentation control arrows
|
||||
* - true: Display controls in all views
|
||||
* - false: Hide controls in all views
|
||||
* - 'speaker': Display controls only in the speaker view
|
||||
*
|
||||
* @defaultValue true
|
||||
*/
|
||||
controls?: boolean | 'speaker' | 'speaker-only';
|
||||
/**
|
||||
* Help the user learn the controls by providing hints, for example by
|
||||
* bouncing the down arrow when they first encounter a vertical slide
|
||||
*
|
||||
* @defaultValue true
|
||||
*/
|
||||
controlsTutorial?: boolean;
|
||||
/**
|
||||
* Determines where controls appear, "edges" or "bottom-right"
|
||||
*
|
||||
* @defaultValue 'bottom-right'
|
||||
*/
|
||||
controlsLayout?: 'edges' | 'bottom-right';
|
||||
/**
|
||||
* Visibility rule for backwards navigation arrows; "faded", "hidden"
|
||||
* or "visible"
|
||||
*
|
||||
* @defaultValue 'faded'
|
||||
*/
|
||||
controlsBackArrows?: 'faded' | 'hidden' | 'visible';
|
||||
/**
|
||||
* Display a presentation progress bar
|
||||
*
|
||||
* @defaultValue true
|
||||
*/
|
||||
progress?: boolean;
|
||||
/**
|
||||
* Display the page number of the current slide
|
||||
* - true: Show slide number
|
||||
* - false: Hide slide number
|
||||
*
|
||||
* Can optionally be set as a string that specifies the number formatting:
|
||||
* - "h.v": Horizontal . vertical slide number (default)
|
||||
* - "h/v": Horizontal / vertical slide number
|
||||
* - "c": Flattened slide number
|
||||
* - "c/t": Flattened slide number / total slides
|
||||
*
|
||||
* Alternatively, you can provide a function that returns the slide
|
||||
* number for the current slide. The function should take in a slide
|
||||
* object and return an array with one string [slideNumber] or
|
||||
* three strings [n1,delimiter,n2]. See #formatSlideNumber().
|
||||
*
|
||||
* @defaultValue false
|
||||
*/
|
||||
slideNumber?: boolean | 'h.v' | 'h/v' | 'c' | 'c/t' | ((slide: any) => string | [string, string, string]);
|
||||
/**
|
||||
* Can be used to limit the contexts in which the slide number appears
|
||||
* - "all": Always show the slide number
|
||||
* - "print": Only when printing to PDF
|
||||
* - "speaker": Only in the speaker view
|
||||
*
|
||||
* @defaultValue 'all'
|
||||
*/
|
||||
showSlideNumber?: 'all' | 'print' | 'speaker';
|
||||
/**
|
||||
* Use 1 based indexing for # links to match slide number (default is zero
|
||||
* based)
|
||||
*
|
||||
* @defaultValue false
|
||||
*/
|
||||
hashOneBasedIndex?: boolean;
|
||||
/**
|
||||
* Add the current slide number to the URL hash so that reloading the
|
||||
* page/copying the URL will return you to the same slide
|
||||
*
|
||||
* @defaultValue false
|
||||
*/
|
||||
hash?: boolean;
|
||||
/**
|
||||
* Flags if we should monitor the hash and change slides accordingly
|
||||
*
|
||||
* @defaultValue true
|
||||
*/
|
||||
respondToHashChanges?: boolean;
|
||||
/**
|
||||
* Enable support for jump-to-slide navigation shortcuts
|
||||
*
|
||||
* @defaultValue true
|
||||
*/
|
||||
jumpToSlide?: boolean;
|
||||
/**
|
||||
* Push each slide change to the browser history. Implies `hash: true`
|
||||
*
|
||||
* @defaultValue false
|
||||
*/
|
||||
history?: boolean;
|
||||
/**
|
||||
* Enable keyboard shortcuts for navigation
|
||||
*
|
||||
* @defaultValue true
|
||||
*/
|
||||
keyboard?: boolean | {
|
||||
[keyCode: number]: string | ((event: KeyboardEvent) => void);
|
||||
};
|
||||
/**
|
||||
* Optional function that blocks keyboard events when returning false
|
||||
*
|
||||
* If you set this to 'focused', we will only capture keyboard events
|
||||
* for embedded decks when they are in focus
|
||||
*
|
||||
* @defaultValue null
|
||||
*/
|
||||
keyboardCondition?: null | 'focused' | ((event: KeyboardEvent) => boolean);
|
||||
/**
|
||||
* Disables the default reveal.js slide layout (scaling and centering)
|
||||
* so that you can use custom CSS layout
|
||||
*
|
||||
* @defaultValue false
|
||||
*/
|
||||
disableLayout?: boolean;
|
||||
/**
|
||||
* Enable the slide overview mode
|
||||
*
|
||||
* @see {@link https://revealjs.com/overview/}
|
||||
*
|
||||
* @defaultValue true
|
||||
*/
|
||||
overview?: boolean;
|
||||
/**
|
||||
* Vertical centering of slides
|
||||
*
|
||||
* @defaultValue true
|
||||
*/
|
||||
center?: boolean;
|
||||
/**
|
||||
* Enables touch navigation on devices with touch input
|
||||
*
|
||||
* @defaultValue true
|
||||
*/
|
||||
touch?: boolean;
|
||||
/**
|
||||
* Loop the presentation
|
||||
*
|
||||
* @defaultValue false
|
||||
*/
|
||||
loop?: boolean;
|
||||
/**
|
||||
* Change the presentation direction to be RTL
|
||||
*
|
||||
* @defaultValue false
|
||||
*/
|
||||
rtl?: boolean;
|
||||
/**
|
||||
* Changes the behavior of our navigation directions.
|
||||
*
|
||||
* "default"
|
||||
* Left/right arrow keys step between horizontal slides, up/down
|
||||
* arrow keys step between vertical slides. Space key steps through
|
||||
* all slides (both horizontal and vertical).
|
||||
*
|
||||
* "linear"
|
||||
* Removes the up/down arrows. Left/right arrows step through all
|
||||
* slides (both horizontal and vertical).
|
||||
*
|
||||
* "grid"
|
||||
* When this is enabled, stepping left/right from a vertical stack
|
||||
* to an adjacent vertical stack will land you at the same vertical
|
||||
* index.
|
||||
*
|
||||
* Consider a deck with six slides ordered in two vertical stacks:
|
||||
* 1.1 2.1
|
||||
* 1.2 2.2
|
||||
* 1.3 2.3
|
||||
*
|
||||
* If you're on slide 1.3 and navigate right, you will normally move
|
||||
* from 1.3 -> 2.1. If "grid" is used, the same navigation takes you
|
||||
* from 1.3 -> 2.3.
|
||||
*
|
||||
* @defaultValue 'default'
|
||||
*/
|
||||
navigationMode?: 'default' | 'linear' | 'grid';
|
||||
/**
|
||||
* Randomizes the order of slides each time the presentation loads
|
||||
*
|
||||
* @defaultValue false
|
||||
*/
|
||||
shuffle?: boolean;
|
||||
/**
|
||||
* Turns fragments on and off globally
|
||||
*
|
||||
* @see {@link https://revealjs.com/fragments/}
|
||||
*
|
||||
* @defaultValue true
|
||||
*/
|
||||
fragments?: boolean;
|
||||
/**
|
||||
* Flags whether to include the current fragment in the URL,
|
||||
* so that reloading brings you to the same fragment position
|
||||
*
|
||||
* @defaultValue true
|
||||
*/
|
||||
fragmentInURL?: boolean;
|
||||
/**
|
||||
* Flags if the presentation is running in an embedded mode,
|
||||
* i.e. contained within a limited portion of the screen
|
||||
*
|
||||
* @defaultValue false
|
||||
*/
|
||||
embedded?: boolean;
|
||||
/**
|
||||
* Flags if we should show a help overlay when the question-mark
|
||||
* key is pressed
|
||||
*
|
||||
* @defaultValue true
|
||||
*/
|
||||
help?: boolean;
|
||||
/**
|
||||
* Flags if it should be possible to pause the presentation (blackout)
|
||||
*
|
||||
* @defaultValue true
|
||||
*/
|
||||
pause?: boolean;
|
||||
/**
|
||||
* Flags if speaker notes should be visible to all viewers
|
||||
*
|
||||
* @defaultValue false
|
||||
*/
|
||||
showNotes?: boolean;
|
||||
/**
|
||||
* Flags if slides with data-visibility="hidden" should be kept visible
|
||||
*
|
||||
* @defaultValue false
|
||||
*/
|
||||
showHiddenSlides?: boolean;
|
||||
/**
|
||||
* 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
|
||||
*
|
||||
* @defaultValue null
|
||||
*/
|
||||
autoPlayMedia?: null | boolean;
|
||||
/**
|
||||
* Global override for preloading lazy-loaded iframes
|
||||
* - null: Iframes with data-src AND data-preload will be loaded when within
|
||||
* the viewDistance, iframes with only data-src will be loaded when visible
|
||||
* - true: All iframes with data-src will be loaded when within the viewDistance
|
||||
* - false: All iframes with data-src will be loaded only when visible
|
||||
*
|
||||
* @defaultValue null
|
||||
*/
|
||||
preloadIframes?: null | boolean;
|
||||
/**
|
||||
* Prevent embedded iframes from automatically focusing on themselves
|
||||
*
|
||||
* @defaultValue false
|
||||
*/
|
||||
preventIframeAutoFocus?: boolean;
|
||||
/**
|
||||
* Can be used to globally disable auto-animation
|
||||
*
|
||||
* @see {@link https://revealjs.com/auto-animate/}
|
||||
*
|
||||
* @defaultValue true
|
||||
*/
|
||||
autoAnimate?: boolean;
|
||||
/**
|
||||
* Optionally provide a custom element matcher that will be
|
||||
* used to dictate which elements we can animate between.
|
||||
*
|
||||
* @defaultValue null
|
||||
*/
|
||||
autoAnimateMatcher?: null | Function;
|
||||
/**
|
||||
* Default settings for our auto-animate transitions, can be
|
||||
* overridden per-slide or per-element via data arguments
|
||||
*
|
||||
* @defaultValue 'ease'
|
||||
*/
|
||||
autoAnimateEasing?: 'ease' | string;
|
||||
/**
|
||||
* Number of seconds to animate each element.
|
||||
*
|
||||
* @defaultValue 1.0
|
||||
*/
|
||||
autoAnimateDuration?: number;
|
||||
/**
|
||||
* Should unmatched elements be faded in?
|
||||
*
|
||||
* @defaultValue true
|
||||
*/
|
||||
autoAnimateUnmatched?: boolean;
|
||||
/**
|
||||
* CSS properties that can be auto-animated. Position & scale
|
||||
* is matched separately so there's no need to include styles
|
||||
* like top/right/bottom/left, width/height or margin.
|
||||
*
|
||||
* @defaultValue ['opacity', 'color', 'background-color', 'padding', 'font-size', 'line-height', 'letter-spacing', 'border-width', 'border-color', 'border-radius', 'outline', 'outline-offset']
|
||||
*/
|
||||
autoAnimateStyles?: string[];
|
||||
/**
|
||||
* Controls automatic progression to the next slide
|
||||
* - 0: Auto-sliding only happens if the data-autoslide HTML attribute
|
||||
* is present on the current slide or fragment
|
||||
* - 1+: All slides will progress automatically at the given interval
|
||||
* - false: No auto-sliding, even if data-autoslide is present
|
||||
*
|
||||
* @defaultValue 0
|
||||
*/
|
||||
autoSlide?: number | false;
|
||||
/**
|
||||
* Stop auto-sliding after user input
|
||||
*
|
||||
* @defaultValue true
|
||||
*/
|
||||
autoSlideStoppable?: boolean;
|
||||
/**
|
||||
* Use this method for navigation when auto-sliding (defaults to navigateNext)
|
||||
*
|
||||
* @defaultValue null
|
||||
*/
|
||||
autoSlideMethod?: null | Function;
|
||||
/**
|
||||
* Specify the average time in seconds that you think you will spend
|
||||
* presenting each slide. This is used to show a pacing timer in the
|
||||
* speaker view
|
||||
*
|
||||
* @defaultValue null
|
||||
*/
|
||||
defaultTiming?: null;
|
||||
/**
|
||||
* Enable slide navigation via mouse wheel
|
||||
*
|
||||
* @defaultValue false
|
||||
*/
|
||||
mouseWheel?: boolean;
|
||||
/**
|
||||
* Opens links in an iframe preview overlay
|
||||
* Add `data-preview-link` and `data-preview-link="false"` to customize each link
|
||||
* individually
|
||||
*
|
||||
* @defaultValue false
|
||||
*/
|
||||
previewLinks?: boolean;
|
||||
/**
|
||||
* Exposes the reveal.js API through window.postMessage
|
||||
*
|
||||
* @defaultValue true
|
||||
*/
|
||||
postMessage?: boolean;
|
||||
/**
|
||||
* Dispatches all reveal.js events to the parent window through postMessage
|
||||
*
|
||||
* @defaultValue false
|
||||
*/
|
||||
postMessageEvents?: boolean;
|
||||
/**
|
||||
* Focuses body when page changes visibility to ensure keyboard shortcuts work
|
||||
*
|
||||
* @defaultValue true
|
||||
*/
|
||||
focusBodyOnPageVisibilityChange?: boolean;
|
||||
/**
|
||||
* Transition style
|
||||
*
|
||||
* @see {@link https://revealjs.com/transitions/}
|
||||
*
|
||||
* @defaultValue 'slide'
|
||||
*/
|
||||
transition?: TransitionStyle;
|
||||
/**
|
||||
* Transition speed
|
||||
*
|
||||
* @defaultValue 'default'
|
||||
*/
|
||||
transitionSpeed?: TransitionSpeed;
|
||||
/**
|
||||
* Transition style for full page slide backgrounds
|
||||
*
|
||||
* @defaultValue 'fade'
|
||||
*/
|
||||
backgroundTransition?: TransitionStyle;
|
||||
/**
|
||||
* Parallax background image
|
||||
*
|
||||
* @defaultValue ''
|
||||
*/
|
||||
parallaxBackgroundImage?: null | string;
|
||||
/**
|
||||
* Parallax background size
|
||||
*
|
||||
* @defaultValue ''
|
||||
*/
|
||||
parallaxBackgroundSize?: null | string;
|
||||
/**
|
||||
* Parallax background repeat
|
||||
*
|
||||
* @defaultValue ''
|
||||
*/
|
||||
parallaxBackgroundRepeat?: null | string;
|
||||
/**
|
||||
* Parallax background position
|
||||
*
|
||||
* @defaultValue ''
|
||||
*/
|
||||
parallaxBackgroundPosition?: null | string;
|
||||
/**
|
||||
* Amount of pixels to move the parallax background per slide step
|
||||
*
|
||||
* @defaultValue null
|
||||
*/
|
||||
parallaxBackgroundHorizontal?: null | number;
|
||||
/**
|
||||
*
|
||||
* @defaultValue null
|
||||
*/
|
||||
parallaxBackgroundVertical?: null | number;
|
||||
/**
|
||||
* Can be used to initialize reveal.js in one of the following views:
|
||||
* - print: Render the presentation so that it can be printed to PDF
|
||||
* - scroll: Show the presentation as a tall scrollable page with scroll
|
||||
* triggered animations
|
||||
*
|
||||
* @see {@link https://revealjs.com/scroll-view/}
|
||||
*
|
||||
* @defaultValue null
|
||||
*/
|
||||
view?: null | 'print' | 'scroll';
|
||||
/**
|
||||
* Adjusts the height of each slide in the scroll view.
|
||||
* - full: Each slide is as tall as the viewport
|
||||
* - compact: Slides are as small as possible, allowing multiple slides
|
||||
* to be visible in parallel on tall devices
|
||||
*
|
||||
* @defaultValue 'full'
|
||||
*/
|
||||
scrollLayout?: 'full' | 'compact';
|
||||
/**
|
||||
* Control how scroll snapping works in the scroll view.
|
||||
* - false: No snapping, scrolling is continuous
|
||||
* - proximity: Snap when close to a slide
|
||||
* - mandatory: Always snap to the closest slide
|
||||
*
|
||||
* Only applies to presentations in scroll view.
|
||||
*
|
||||
* @defaultValue 'mandatory'
|
||||
*/
|
||||
scrollSnap?: false | 'proximity' | 'mandatory';
|
||||
/**
|
||||
* Enables and configures the scroll view progress bar.
|
||||
* - 'auto': Show the scrollbar while scrolling, hide while idle
|
||||
* - true: Always show the scrollbar
|
||||
* - false: Never show the scrollbar
|
||||
*
|
||||
* @defaultValue 'auto'
|
||||
*/
|
||||
scrollProgress?: 'auto' | boolean;
|
||||
/**
|
||||
* Automatically activate the scroll view when we the viewport falls
|
||||
* below the given width.
|
||||
*
|
||||
* @defaultValue 435
|
||||
*/
|
||||
scrollActivationWidth?: number;
|
||||
/**
|
||||
* The maximum number of pages a single slide can expand onto when printing
|
||||
* to PDF, unlimited by default
|
||||
*
|
||||
* @defaultValue Number.POSITIVE_INFINITY
|
||||
*/
|
||||
pdfMaxPagesPerSlide?: number;
|
||||
/**
|
||||
* Prints each fragment on a separate slide
|
||||
*
|
||||
* @defaultValue true
|
||||
*/
|
||||
pdfSeparateFragments?: boolean;
|
||||
/**
|
||||
* Offset used to reduce the height of content within exported PDF pages.
|
||||
* This exists to account for environment differences based on how you
|
||||
* print to PDF. CLI printing options, like phantomjs and wkpdf, can end
|
||||
* on precisely the total height of the document whereas in-browser
|
||||
* printing has to end one pixel before.
|
||||
*
|
||||
* @defaultValue -1
|
||||
*/
|
||||
pdfPageHeightOffset?: number;
|
||||
/**
|
||||
* Number of slides away from the current that are visible
|
||||
*
|
||||
* @defaultValue 3
|
||||
*/
|
||||
viewDistance?: number;
|
||||
/**
|
||||
* Number of slides away from the current that are visible on mobile
|
||||
* devices. It is advisable to set this to a lower number than
|
||||
* viewDistance in order to save resources.
|
||||
*
|
||||
* @defaultValue 2
|
||||
*/
|
||||
mobileViewDistance?: number;
|
||||
/**
|
||||
* The display mode that will be used to show slides
|
||||
*
|
||||
* @defaultValue 'block'
|
||||
*/
|
||||
display?: string;
|
||||
/**
|
||||
* Hide cursor if inactive
|
||||
*
|
||||
* @defaultValue true
|
||||
*/
|
||||
hideInactiveCursor?: boolean;
|
||||
/**
|
||||
* Time before the cursor is hidden (in ms)
|
||||
*
|
||||
* @defaultValue 5000
|
||||
*/
|
||||
hideCursorTime?: number;
|
||||
/**
|
||||
* Should we automatically sort and set indices for fragments
|
||||
* at each sync? (See Reveal.sync)
|
||||
*
|
||||
* @defaultValue true
|
||||
*/
|
||||
sortFragmentsOnSync?: boolean;
|
||||
/**
|
||||
* Highlight plugin configuration
|
||||
*/
|
||||
highlight?: HighlightConfig;
|
||||
/**
|
||||
* Markdown plugin configuration
|
||||
*/
|
||||
markdown?: MarkdownConfig;
|
||||
/**
|
||||
* KaTeX math plugin configuration
|
||||
*/
|
||||
katex?: KatexConfig;
|
||||
/**
|
||||
* MathJax 2 plugin configuration
|
||||
*/
|
||||
mathjax2?: Mathjax2Config;
|
||||
/**
|
||||
* MathJax 3 plugin configuration
|
||||
*/
|
||||
mathjax3?: Mathjax3Config;
|
||||
/**
|
||||
* MathJax 4 plugin configuration
|
||||
*/
|
||||
mathjax4?: Mathjax4Config;
|
||||
/**
|
||||
* Script dependencies to load
|
||||
*
|
||||
* @defaultValue []
|
||||
*/
|
||||
dependencies?: any[];
|
||||
/**
|
||||
* Plugin objects to register and use for this presentation
|
||||
*
|
||||
* @defaultValue []
|
||||
*/
|
||||
plugins?: any[];
|
||||
}
|
||||
/**
|
||||
* The default reveal.js config object.
|
||||
*/
|
||||
declare const defaultConfig: RevealConfig;
|
||||
export type { RevealConfig, TransitionStyle, TransitionSpeed, FragmentAnimation, KatexConfig, Mathjax2Config, Mathjax3Config, Mathjax4Config, HighlightConfig, MarkdownConfig, };
|
||||
export { defaultConfig };
|
||||
+40
@@ -0,0 +1,40 @@
|
||||
import { HLJSApi } from 'highlight.js';
|
||||
import { RevealPlugin } from 'reveal.js';
|
||||
export interface HighlightLine {
|
||||
start?: number;
|
||||
end?: number;
|
||||
}
|
||||
export interface HighlightLineNumbersOptions {
|
||||
singleLine?: boolean;
|
||||
startFrom?: number;
|
||||
}
|
||||
export interface HighlightJsApi extends HLJSApi {
|
||||
initLineNumbersOnLoad(options?: HighlightLineNumbersOptions): void;
|
||||
lineNumbersBlock(element: HTMLElement, options?: HighlightLineNumbersOptions): void;
|
||||
lineNumbersValue(code: string, options?: HighlightLineNumbersOptions): string | undefined;
|
||||
}
|
||||
export interface HighlightScrollState {
|
||||
currentBlock?: HTMLElement;
|
||||
animationFrameID?: number;
|
||||
}
|
||||
export interface HighlightLineBounds {
|
||||
top: number;
|
||||
bottom: number;
|
||||
}
|
||||
export type HighlightLineStep = HighlightLine[];
|
||||
export interface HighlightPlugin extends RevealPlugin {
|
||||
id: 'highlight';
|
||||
HIGHLIGHT_STEP_DELIMITER: '|';
|
||||
HIGHLIGHT_LINE_DELIMITER: ',';
|
||||
HIGHLIGHT_LINE_RANGE_DELIMITER: '-';
|
||||
hljs: HighlightJsApi;
|
||||
highlightBlock(block: HTMLElement): void;
|
||||
scrollHighlightedLineIntoView(block: HTMLElement, scrollState: HighlightScrollState, skipAnimation?: boolean): void;
|
||||
easeInOutQuart(t: number): number;
|
||||
getHighlightedLineBounds(block: HTMLElement): HighlightLineBounds;
|
||||
highlightLines(block: HTMLElement, linesToHighlight?: string): void;
|
||||
deserializeHighlightSteps(highlightSteps: string): HighlightLineStep[];
|
||||
serializeHighlightSteps(highlightSteps: HighlightLineStep[]): string;
|
||||
}
|
||||
declare const Highlight: () => HighlightPlugin;
|
||||
export default Highlight;
|
||||
+17
File diff suppressed because one or more lines are too long
+49449
File diff suppressed because one or more lines are too long
scripts/reveal.js/plugin/highlight/zenburn.css → scripts/reveal.js/dist/plugin/highlight/zenburn.css
Vendored
-1
@@ -70,7 +70,6 @@ based on dark.css by Ivan Sagalaev
|
||||
color: #7f9f7f;
|
||||
}
|
||||
|
||||
|
||||
.hljs-emphasis {
|
||||
font-style: italic;
|
||||
}
|
||||
+21
@@ -0,0 +1,21 @@
|
||||
import { MarkdownConfig, RevealPlugin } from 'reveal.js';
|
||||
import { Marked } from 'marked';
|
||||
export interface MarkdownSlidifyOptions {
|
||||
separator?: string | null;
|
||||
verticalSeparator?: string | null;
|
||||
notesSeparator?: string;
|
||||
attributes?: string;
|
||||
}
|
||||
export interface MarkdownOptions extends MarkdownConfig {
|
||||
animateLists?: boolean;
|
||||
}
|
||||
export interface MarkdownPlugin extends RevealPlugin {
|
||||
id: 'markdown';
|
||||
processSlides(scope: ParentNode): Promise<void[]>;
|
||||
convertSlides(): Promise<void>;
|
||||
slidify(markdown: string, options?: MarkdownSlidifyOptions): string;
|
||||
readonly marked: Marked | null;
|
||||
readonly markdownOptions: MarkdownOptions;
|
||||
}
|
||||
declare const Markdown: () => MarkdownPlugin;
|
||||
export default Markdown;
|
||||
+63
File diff suppressed because one or more lines are too long
+1380
File diff suppressed because one or more lines are too long
+21
@@ -0,0 +1,21 @@
|
||||
import { RevealPlugin } from 'reveal.js';
|
||||
export interface KaTeXPlugin extends RevealPlugin {
|
||||
id: 'katex';
|
||||
}
|
||||
export interface MathJax2Plugin extends RevealPlugin {
|
||||
id: 'mathjax2';
|
||||
}
|
||||
export interface MathJax3Plugin extends RevealPlugin {
|
||||
id: 'mathjax3';
|
||||
}
|
||||
export interface MathJax4Plugin extends RevealPlugin {
|
||||
id: 'mathjax4';
|
||||
}
|
||||
export interface MathPlugin extends MathJax2Plugin {
|
||||
KaTeX: () => KaTeXPlugin;
|
||||
MathJax2: () => MathJax2Plugin;
|
||||
MathJax3: () => MathJax3Plugin;
|
||||
MathJax4: () => MathJax4Plugin;
|
||||
}
|
||||
declare const Math: MathPlugin;
|
||||
export default Math;
|
||||
+1
@@ -0,0 +1 @@
|
||||
(function(d,p){typeof exports=="object"&&typeof module<"u"?module.exports=p():typeof define=="function"&&define.amd?define(p):(d=typeof globalThis<"u"?globalThis:d||self,d.RevealMath=p())})(this,(function(){"use strict";const d=()=>{let n,s={version:"latest",delimiters:[{left:"$$",right:"$$",display:!0},{left:"$",right:"$",display:!1},{left:"\\(",right:"\\)",display:!1},{left:"\\[",right:"\\]",display:!0}],ignoredTags:["script","noscript","style","textarea","pre","code"]};const r=t=>{let a=document.createElement("link");a.rel="stylesheet",a.href=t,document.head.appendChild(a)},o=t=>new Promise((a,i)=>{const l=document.createElement("script");l.type="text/javascript",l.onload=a,l.onerror=i,l.src=t,document.head.append(l)});async function e(t){for(const a of t)await o(a)}return{id:"katex",init:function(t){n=t;let a=n.getConfig().katex||{},i={...s,...a};const{local:l,version:x,extensions:$,...g}=i;let c=i.local||"https://cdn.jsdelivr.net/npm/katex",u=i.local?"":"@"+i.version,M=c+u+"/dist/katex.min.css",J=c+u+"/dist/katex.min.js",v=c+u+"/dist/contrib/mhchem.min.js",S=c+u+"/dist/contrib/auto-render.min.js",h=[J];i.extensions&&i.extensions.includes("mhchem")&&h.push(v),h.push(S);const m=()=>{renderMathInElement(t.getSlidesElement(),g),n.layout()};r(M),e(h).then(()=>{n.isReady()?m():n.on("ready",m.bind(this))})}}},p=()=>{let n,s={messageStyle:"none",tex2jax:{inlineMath:[["$","$"],["\\(","\\)"]],skipTags:["script","noscript","style","textarea","pre","code"]},skipStartupTypeset:!0};function r(o,e){let t=document.querySelector("head"),a=document.createElement("script");a.type="text/javascript",a.src=o;let i=()=>{typeof e=="function"&&(e.call(),e=null)};a.onload=i,a.onreadystatechange=()=>{this.readyState==="loaded"&&i()},t.appendChild(a)}return{id:"mathjax2",init:function(o){n=o;let e=n.getConfig().mathjax2||n.getConfig().math||{},t={...s,...e},a=t.mathjax||"https://cdn.jsdelivr.net/npm/mathjax@2/MathJax.js",i=t.config||"TeX-AMS_HTML-full",l=a+"?config="+i;t.tex2jax={...s.tex2jax,...e.tex2jax},t.mathjax=t.config=null,r(l,function(){MathJax.Hub.Config(t),MathJax.Hub.Queue(["Typeset",MathJax.Hub,n.getRevealElement()]),MathJax.Hub.Queue(n.layout),n.on("slidechanged",function(x){MathJax.Hub.Queue(["Typeset",MathJax.Hub,x.currentSlide])})})}}},f=()=>{let n,s={tex:{inlineMath:[["$","$"],["\\(","\\)"]]},options:{skipHtmlTags:["script","noscript","style","textarea","pre","code"]},startup:{ready:()=>{MathJax.startup.defaultReady(),MathJax.startup.promise.then(()=>{n.layout()})}}};function r(o,e){let t=document.createElement("script");t.type="text/javascript",t.id="MathJax-script",t.src=o,t.async=!0,t.onload=()=>{typeof e=="function"&&(e.call(),e=null)},document.head.appendChild(t)}return{id:"mathjax3",init:function(o){n=o;let e=n.getConfig().mathjax3||{},t={...s,...e};t.tex={...s.tex,...e.tex},t.options={...s.options,...e.options},t.startup={...s.startup,...e.startup};let a=t.mathjax||"https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js";t.mathjax=null,window.MathJax=t,r(a,function(){n.addEventListener("slidechanged",function(i){MathJax.typeset()})})}}},y=()=>{let n,s={tex:{inlineMath:[["$","$"],["\\(","\\)"]]},options:{skipHtmlTags:["script","noscript","style","textarea","pre","code"]},startup:{ready:()=>{MathJax.startup.defaultReady(),MathJax.startup.promise.then(()=>{n.layout()})}}};function r(o,e){let t=document.createElement("script");t.type="text/javascript",t.id="MathJax-script",t.src=o,t.async=!0,t.onload=()=>{typeof e=="function"&&(e.call(),e=null)},document.head.appendChild(t)}return{id:"mathjax4",init:function(o){n=o;let e=n.getConfig().mathjax4||{},t={...s,...e};t.tex={...s.tex,...e.tex},t.options={...s.options,...e.options},t.startup={...s.startup,...e.startup};let a=t.mathjax||"https://cdn.jsdelivr.net/npm/mathjax@4/tex-mml-chtml.js";t.mathjax=null,window.MathJax=t,r(a,function(){MathJax.startup.promise.then(()=>{MathJax.typeset(),n.addEventListener("slidechanged",function(i){MathJax.typeset()})})})}}},j=p;return Plugin=Object.assign(j(),{KaTeX:d,MathJax2:p,MathJax3:f,MathJax4:y})}));
|
||||
+154
@@ -0,0 +1,154 @@
|
||||
const M = () => {
|
||||
let a, s = {
|
||||
version: "latest",
|
||||
delimiters: [
|
||||
{ left: "$$", right: "$$", display: !0 },
|
||||
// Note: $$ has to come before $
|
||||
{ left: "$", right: "$", display: !1 },
|
||||
{ left: "\\(", right: "\\)", display: !1 },
|
||||
{ left: "\\[", right: "\\]", display: !0 }
|
||||
],
|
||||
ignoredTags: ["script", "noscript", "style", "textarea", "pre", "code"]
|
||||
};
|
||||
const r = (t) => {
|
||||
let n = document.createElement("link");
|
||||
n.rel = "stylesheet", n.href = t, document.head.appendChild(n);
|
||||
}, o = (t) => new Promise((n, i) => {
|
||||
const l = document.createElement("script");
|
||||
l.type = "text/javascript", l.onload = n, l.onerror = i, l.src = t, document.head.append(l);
|
||||
});
|
||||
async function e(t) {
|
||||
for (const n of t)
|
||||
await o(n);
|
||||
}
|
||||
return {
|
||||
id: "katex",
|
||||
init: function(t) {
|
||||
a = t;
|
||||
let n = a.getConfig().katex || {}, i = { ...s, ...n };
|
||||
const { local: l, version: u, extensions: $, ...m } = i;
|
||||
let p = i.local || "https://cdn.jsdelivr.net/npm/katex", c = i.local ? "" : "@" + i.version, f = p + c + "/dist/katex.min.css", y = p + c + "/dist/katex.min.js", j = p + c + "/dist/contrib/mhchem.min.js", g = p + c + "/dist/contrib/auto-render.min.js", d = [y];
|
||||
i.extensions && i.extensions.includes("mhchem") && d.push(j), d.push(g);
|
||||
const h = () => {
|
||||
renderMathInElement(t.getSlidesElement(), m), a.layout();
|
||||
};
|
||||
r(f), e(d).then(() => {
|
||||
a.isReady() ? h() : a.on("ready", h.bind(this));
|
||||
});
|
||||
}
|
||||
};
|
||||
}, x = () => {
|
||||
let a, s = {
|
||||
messageStyle: "none",
|
||||
tex2jax: {
|
||||
inlineMath: [["$", "$"], ["\\(", "\\)"]],
|
||||
skipTags: ["script", "noscript", "style", "textarea", "pre", "code"]
|
||||
},
|
||||
skipStartupTypeset: !0
|
||||
};
|
||||
function r(o, e) {
|
||||
let t = document.querySelector("head"), n = document.createElement("script");
|
||||
n.type = "text/javascript", n.src = o;
|
||||
let i = () => {
|
||||
typeof e == "function" && (e.call(), e = null);
|
||||
};
|
||||
n.onload = i, n.onreadystatechange = () => {
|
||||
this.readyState === "loaded" && i();
|
||||
}, t.appendChild(n);
|
||||
}
|
||||
return {
|
||||
id: "mathjax2",
|
||||
init: function(o) {
|
||||
a = o;
|
||||
let e = a.getConfig().mathjax2 || a.getConfig().math || {}, t = { ...s, ...e }, n = t.mathjax || "https://cdn.jsdelivr.net/npm/mathjax@2/MathJax.js", i = t.config || "TeX-AMS_HTML-full", l = n + "?config=" + i;
|
||||
t.tex2jax = { ...s.tex2jax, ...e.tex2jax }, t.mathjax = t.config = null, r(l, function() {
|
||||
MathJax.Hub.Config(t), MathJax.Hub.Queue(["Typeset", MathJax.Hub, a.getRevealElement()]), MathJax.Hub.Queue(a.layout), a.on("slidechanged", function(u) {
|
||||
MathJax.Hub.Queue(["Typeset", MathJax.Hub, u.currentSlide]);
|
||||
});
|
||||
});
|
||||
}
|
||||
};
|
||||
}, J = () => {
|
||||
let a, s = {
|
||||
tex: {
|
||||
inlineMath: [["$", "$"], ["\\(", "\\)"]]
|
||||
},
|
||||
options: {
|
||||
skipHtmlTags: ["script", "noscript", "style", "textarea", "pre", "code"]
|
||||
},
|
||||
startup: {
|
||||
ready: () => {
|
||||
MathJax.startup.defaultReady(), MathJax.startup.promise.then(() => {
|
||||
a.layout();
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
function r(o, e) {
|
||||
let t = document.createElement("script");
|
||||
t.type = "text/javascript", t.id = "MathJax-script", t.src = o, t.async = !0, t.onload = () => {
|
||||
typeof e == "function" && (e.call(), e = null);
|
||||
}, document.head.appendChild(t);
|
||||
}
|
||||
return {
|
||||
id: "mathjax3",
|
||||
init: function(o) {
|
||||
a = o;
|
||||
let e = a.getConfig().mathjax3 || {}, t = { ...s, ...e };
|
||||
t.tex = { ...s.tex, ...e.tex }, t.options = { ...s.options, ...e.options }, t.startup = { ...s.startup, ...e.startup };
|
||||
let n = t.mathjax || "https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js";
|
||||
t.mathjax = null, window.MathJax = t, r(n, function() {
|
||||
a.addEventListener("slidechanged", function(i) {
|
||||
MathJax.typeset();
|
||||
});
|
||||
});
|
||||
}
|
||||
};
|
||||
}, v = () => {
|
||||
let a, s = {
|
||||
tex: {
|
||||
inlineMath: [["$", "$"], ["\\(", "\\)"]]
|
||||
},
|
||||
options: {
|
||||
skipHtmlTags: ["script", "noscript", "style", "textarea", "pre", "code"]
|
||||
},
|
||||
startup: {
|
||||
ready: () => {
|
||||
MathJax.startup.defaultReady(), MathJax.startup.promise.then(() => {
|
||||
a.layout();
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
function r(o, e) {
|
||||
let t = document.createElement("script");
|
||||
t.type = "text/javascript", t.id = "MathJax-script", t.src = o, t.async = !0, t.onload = () => {
|
||||
typeof e == "function" && (e.call(), e = null);
|
||||
}, document.head.appendChild(t);
|
||||
}
|
||||
return {
|
||||
id: "mathjax4",
|
||||
init: function(o) {
|
||||
a = o;
|
||||
let e = a.getConfig().mathjax4 || {}, t = { ...s, ...e };
|
||||
t.tex = { ...s.tex, ...e.tex }, t.options = { ...s.options, ...e.options }, t.startup = { ...s.startup, ...e.startup };
|
||||
let n = t.mathjax || "https://cdn.jsdelivr.net/npm/mathjax@4/tex-mml-chtml.js";
|
||||
t.mathjax = null, window.MathJax = t, r(n, function() {
|
||||
MathJax.startup.promise.then(() => {
|
||||
MathJax.typeset(), a.addEventListener("slidechanged", function(i) {
|
||||
MathJax.typeset();
|
||||
});
|
||||
});
|
||||
});
|
||||
}
|
||||
};
|
||||
}, S = x;
|
||||
const k = Plugin = Object.assign(S(), {
|
||||
KaTeX: M,
|
||||
MathJax2: x,
|
||||
MathJax3: J,
|
||||
MathJax4: v
|
||||
}), C = k;
|
||||
export {
|
||||
C as default
|
||||
};
|
||||
+7
@@ -0,0 +1,7 @@
|
||||
import { RevealPlugin } from 'reveal.js';
|
||||
export interface NotesPlugin extends RevealPlugin {
|
||||
id: 'notes';
|
||||
open(): void;
|
||||
}
|
||||
declare const Notes: () => NotesPlugin;
|
||||
export default Notes;
|
||||
+970
File diff suppressed because one or more lines are too long
+2126
File diff suppressed because one or more lines are too long
+9
@@ -0,0 +1,9 @@
|
||||
import { RevealPlugin } from 'reveal.js';
|
||||
export interface SearchPlugin extends RevealPlugin {
|
||||
id: 'search';
|
||||
open(): void;
|
||||
close(): void;
|
||||
toggle(): void;
|
||||
}
|
||||
declare const Search: () => SearchPlugin;
|
||||
export default Search;
|
||||
+2
@@ -0,0 +1,2 @@
|
||||
(function(p,y){typeof exports=="object"&&typeof module<"u"?module.exports=y():typeof define=="function"&&define.amd?define(y):(p=typeof globalThis<"u"?globalThis:p||self,p.RevealSearch=y())})(this,(function(){"use strict";return()=>{let c,t,i,n,o,v,s;function x(){t=document.createElement("div"),t.classList.add("searchbox"),t.style.position="absolute",t.style.top="10px",t.style.right="10px",t.style.zIndex=10,t.innerHTML=`<input type="search" class="searchinput" placeholder="Search..." style="vertical-align: top;"/>
|
||||
</span>`,i=t.querySelector(".searchinput"),i.style.width="240px",i.style.fontSize="14px",i.style.padding="4px 6px",i.style.color="#000",i.style.background="#fff",i.style.borderRadius="2px",i.style.border="0",i.style.outline="0",i.style.boxShadow="0 2px 18px rgba(0, 0, 0, 0.2)",i.style["-webkit-appearance"]="none",c.getRevealElement().appendChild(t),i.addEventListener("keyup",function(r){r.keyCode===13?(r.preventDefault(),L(),v=!1):v=!0},!1),m()}function E(){t||x(),t.style.display="inline",i.focus(),i.select()}function m(){t||x(),t.style.display="none",s&&s.remove()}function N(){t||x(),t.style.display!=="inline"?E():m()}function L(){if(v){var r=i.value;r===""?(s&&s.remove(),n=null):(s=new I("slidecontent"),n=s.apply(r),o=0)}n&&(n.length&&n.length<=o&&(o=0),n.length>o&&(c.slide(n[o].h,n[o].v),o++))}function I(r,f){var M=document.getElementById(r)||document.body,S=f||"EM",B=new RegExp("^(?:"+S+"|SCRIPT|FORM)$"),R=["#ff6","#a0ffff","#9f9","#f99","#f6f"],b=[],D=0,g="",d=[];this.setRegex=function(e){e=e.trim(),g=new RegExp("("+e+")","i")},this.getRegex=function(){return g.toString().replace(/^\/\\b\(|\)\\b\/i$/g,"").replace(/\|/g," ")},this.hiliteWords=function(e){if(!(e==null||!e)&&g&&!B.test(e.nodeName)){if(e.hasChildNodes())for(var l=0;l<e.childNodes.length;l++)this.hiliteWords(e.childNodes[l]);if(e.nodeType==3){var T,a;if((T=e.nodeValue)&&(a=g.exec(T))){for(var h=e;h!=null&&h.nodeName!="SECTION";)h=h.parentNode;for(var w=c.getIndices(h),F=d.length,k=!1,l=0;l<F;l++)d[l].h===w.h&&d[l].v===w.v&&(k=!0);k||d.push(w),b[a[0].toLowerCase()]||(b[a[0].toLowerCase()]=R[D++%R.length]);var u=document.createElement(S);u.appendChild(document.createTextNode(a[0])),u.style.backgroundColor=b[a[0].toLowerCase()],u.style.fontStyle="inherit",u.style.color="#000";var C=e.splitText(a.index);C.nodeValue=C.nodeValue.substring(a[0].length),e.parentNode.insertBefore(u,C)}}}},this.remove=function(){for(var e=document.getElementsByTagName(S),l;e.length&&(l=e[0]);)l.parentNode.replaceChild(l.firstChild,l)},this.apply=function(e){if(!(e==null||!e))return this.remove(),this.setRegex(e),this.hiliteWords(M),d}}return{id:"search",init:r=>{c=r,c.registerKeyboardShortcut("CTRL + Shift + F","Search"),document.addEventListener("keydown",function(f){f.key=="F"&&(f.ctrlKey||f.metaKey)&&(f.preventDefault(),N())},!1)},open:E,close:m,toggle:N}}}));
|
||||
+73
@@ -0,0 +1,73 @@
|
||||
const D = () => {
|
||||
let f, t, l, n, a, y, s;
|
||||
function g() {
|
||||
t = document.createElement("div"), t.classList.add("searchbox"), t.style.position = "absolute", t.style.top = "10px", t.style.right = "10px", t.style.zIndex = 10, t.innerHTML = `<input type="search" class="searchinput" placeholder="Search..." style="vertical-align: top;"/>
|
||||
</span>`, l = t.querySelector(".searchinput"), l.style.width = "240px", l.style.fontSize = "14px", l.style.padding = "4px 6px", l.style.color = "#000", l.style.background = "#fff", l.style.borderRadius = "2px", l.style.border = "0", l.style.outline = "0", l.style.boxShadow = "0 2px 18px rgba(0, 0, 0, 0.2)", l.style["-webkit-appearance"] = "none", f.getRevealElement().appendChild(t), l.addEventListener("keyup", function(r) {
|
||||
r.keyCode === 13 ? (r.preventDefault(), k(), y = !1) : y = !0;
|
||||
}, !1), v();
|
||||
}
|
||||
function w() {
|
||||
t || g(), t.style.display = "inline", l.focus(), l.select();
|
||||
}
|
||||
function v() {
|
||||
t || g(), t.style.display = "none", s && s.remove();
|
||||
}
|
||||
function C() {
|
||||
t || g(), t.style.display !== "inline" ? w() : v();
|
||||
}
|
||||
function k() {
|
||||
if (y) {
|
||||
var r = l.value;
|
||||
r === "" ? (s && s.remove(), n = null) : (s = new T("slidecontent"), n = s.apply(r), a = 0);
|
||||
}
|
||||
n && (n.length && n.length <= a && (a = 0), n.length > a && (f.slide(n[a].h, n[a].v), a++));
|
||||
}
|
||||
function T(r, c) {
|
||||
var L = document.getElementById(r) || document.body, x = c || "EM", I = new RegExp("^(?:" + x + "|SCRIPT|FORM)$"), E = ["#ff6", "#a0ffff", "#9f9", "#f99", "#f6f"], m = [], M = 0, p = "", d = [];
|
||||
this.setRegex = function(e) {
|
||||
e = e.trim(), p = new RegExp("(" + e + ")", "i");
|
||||
}, this.getRegex = function() {
|
||||
return p.toString().replace(/^\/\\b\(|\)\\b\/i$/g, "").replace(/\|/g, " ");
|
||||
}, this.hiliteWords = function(e) {
|
||||
if (!(e == null || !e) && p && !I.test(e.nodeName)) {
|
||||
if (e.hasChildNodes())
|
||||
for (var i = 0; i < e.childNodes.length; i++)
|
||||
this.hiliteWords(e.childNodes[i]);
|
||||
if (e.nodeType == 3) {
|
||||
var N, o;
|
||||
if ((N = e.nodeValue) && (o = p.exec(N))) {
|
||||
for (var h = e; h != null && h.nodeName != "SECTION"; )
|
||||
h = h.parentNode;
|
||||
for (var S = f.getIndices(h), B = d.length, R = !1, i = 0; i < B; i++)
|
||||
d[i].h === S.h && d[i].v === S.v && (R = !0);
|
||||
R || d.push(S), m[o[0].toLowerCase()] || (m[o[0].toLowerCase()] = E[M++ % E.length]);
|
||||
var u = document.createElement(x);
|
||||
u.appendChild(document.createTextNode(o[0])), u.style.backgroundColor = m[o[0].toLowerCase()], u.style.fontStyle = "inherit", u.style.color = "#000";
|
||||
var b = e.splitText(o.index);
|
||||
b.nodeValue = b.nodeValue.substring(o[0].length), e.parentNode.insertBefore(u, b);
|
||||
}
|
||||
}
|
||||
}
|
||||
}, this.remove = function() {
|
||||
for (var e = document.getElementsByTagName(x), i; e.length && (i = e[0]); )
|
||||
i.parentNode.replaceChild(i.firstChild, i);
|
||||
}, this.apply = function(e) {
|
||||
if (!(e == null || !e))
|
||||
return this.remove(), this.setRegex(e), this.hiliteWords(L), d;
|
||||
};
|
||||
}
|
||||
return {
|
||||
id: "search",
|
||||
init: (r) => {
|
||||
f = r, f.registerKeyboardShortcut("CTRL + Shift + F", "Search"), document.addEventListener("keydown", function(c) {
|
||||
c.key == "F" && (c.ctrlKey || c.metaKey) && (c.preventDefault(), C());
|
||||
}, !1);
|
||||
},
|
||||
open: w,
|
||||
close: v,
|
||||
toggle: C
|
||||
};
|
||||
}, F = D;
|
||||
export {
|
||||
F as default
|
||||
};
|
||||
+6
@@ -0,0 +1,6 @@
|
||||
import { RevealPlugin } from 'reveal.js';
|
||||
export interface ZoomPlugin extends RevealPlugin {
|
||||
id: 'zoom';
|
||||
}
|
||||
declare const Zoom: () => ZoomPlugin;
|
||||
export default Zoom;
|
||||
+1
@@ -0,0 +1 @@
|
||||
(function(f,m){typeof exports=="object"&&typeof module<"u"?module.exports=m():typeof define=="function"&&define.amd?define(m):(f=typeof globalThis<"u"?globalThis:f||self,f.RevealZoom=m())})(this,(function(){"use strict";const f={id:"zoom",init:function(n){n.getRevealElement().addEventListener("mousedown",function(i){var l=/Linux/.test(window.navigator.platform)?"ctrl":"alt",r=(n.getConfig().zoomKey?n.getConfig().zoomKey:l)+"Key",s=n.getConfig().zoomLevel?n.getConfig().zoomLevel:2;i[r]&&!n.isOverview()&&(i.preventDefault(),u.to({x:i.clientX,y:i.clientY,scale:s,pan:!1}))})},destroy:()=>{u.reset()}},m=()=>f;var u=(function(){var n=1,i=0,l=0,r=-1,s=-1,y="transform"in document.body.style;y&&(document.body.style.transition="transform 0.8s ease"),document.addEventListener("keyup",function(e){n!==1&&e.keyCode===27&&u.out()}),document.addEventListener("mousemove",function(e){n!==1&&(i=e.clientX,l=e.clientY)});function c(e,t){var o=w();if(e.width=e.width||1,e.height=e.height||1,e.x-=(window.innerWidth-e.width*t)/2,e.y-=(window.innerHeight-e.height*t)/2,y)if(t===1)document.body.style.transform="";else{var d=o.x+"px "+o.y+"px",h="translate("+-e.x+"px,"+-e.y+"px) scale("+t+")";document.body.style.transformOrigin=d,document.body.style.transform=h}else t===1?(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+e.x)/t+"px",document.body.style.top=-(o.y+e.y)/t+"px",document.body.style.width=t*100+"%",document.body.style.height=t*100+"%",document.body.style.zoom=t);n=t,document.documentElement.classList&&(n!==1?document.documentElement.classList.add("zoomed"):document.documentElement.classList.remove("zoomed"))}function a(){var e=.12,t=window.innerWidth*e,o=window.innerHeight*e,d=w();l<o?window.scroll(d.x,d.y-(1-l/o)*(14/n)):l>window.innerHeight-o&&window.scroll(d.x,d.y+(1-(window.innerHeight-l)/o)*(14/n)),i<t?window.scroll(d.x-(1-i/t)*(14/n),d.y):i>window.innerWidth-t&&window.scroll(d.x+(1-(window.innerWidth-i)/t)*(14/n),d.y)}function w(){return{x:window.scrollX!==void 0?window.scrollX:window.pageXOffset,y:window.scrollY!==void 0?window.scrollY:window.pageYOffset}}return{to:function(e){if(n!==1)u.out();else{if(e.x=e.x||0,e.y=e.y||0,e.element){var t=20,o=e.element.getBoundingClientRect();e.x=o.left-t,e.y=o.top-t,e.width=o.width+t*2,e.height=o.height+t*2}e.width!==void 0&&e.height!==void 0&&(e.scale=Math.max(Math.min(window.innerWidth/e.width,window.innerHeight/e.height),1)),e.scale>1&&(e.x*=e.scale,e.y*=e.scale,c(e,e.scale),e.pan!==!1&&(r=setTimeout(function(){s=setInterval(a,1e3/60)},800)))}},out:function(){clearTimeout(r),clearInterval(s),c({x:0,y:0},1),n=1},magnify:function(e){this.to(e)},reset:function(){this.out()},zoomLevel:function(){return n}}})();return m}));
|
||||
+93
@@ -0,0 +1,93 @@
|
||||
const c = {
|
||||
id: "zoom",
|
||||
init: function(n) {
|
||||
n.getRevealElement().addEventListener("mousedown", function(o) {
|
||||
var l = /Linux/.test(window.navigator.platform) ? "ctrl" : "alt", f = (n.getConfig().zoomKey ? n.getConfig().zoomKey : l) + "Key", m = n.getConfig().zoomLevel ? n.getConfig().zoomLevel : 2;
|
||||
o[f] && !n.isOverview() && (o.preventDefault(), r.to({
|
||||
x: o.clientX,
|
||||
y: o.clientY,
|
||||
scale: m,
|
||||
pan: !1
|
||||
}));
|
||||
});
|
||||
},
|
||||
destroy: () => {
|
||||
r.reset();
|
||||
}
|
||||
}, h = () => c;
|
||||
var r = (function() {
|
||||
var n = 1, o = 0, l = 0, f = -1, m = -1, u = "transform" in document.body.style;
|
||||
u && (document.body.style.transition = "transform 0.8s ease"), document.addEventListener("keyup", function(e) {
|
||||
n !== 1 && e.keyCode === 27 && r.out();
|
||||
}), document.addEventListener("mousemove", function(e) {
|
||||
n !== 1 && (o = e.clientX, l = e.clientY);
|
||||
});
|
||||
function y(e, t) {
|
||||
var i = s();
|
||||
if (e.width = e.width || 1, e.height = e.height || 1, e.x -= (window.innerWidth - e.width * t) / 2, e.y -= (window.innerHeight - e.height * t) / 2, u)
|
||||
if (t === 1)
|
||||
document.body.style.transform = "";
|
||||
else {
|
||||
var d = i.x + "px " + i.y + "px", w = "translate(" + -e.x + "px," + -e.y + "px) scale(" + t + ")";
|
||||
document.body.style.transformOrigin = d, document.body.style.transform = w;
|
||||
}
|
||||
else
|
||||
t === 1 ? (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 = -(i.x + e.x) / t + "px", document.body.style.top = -(i.y + e.y) / t + "px", document.body.style.width = t * 100 + "%", document.body.style.height = t * 100 + "%", document.body.style.zoom = t);
|
||||
n = t, document.documentElement.classList && (n !== 1 ? document.documentElement.classList.add("zoomed") : document.documentElement.classList.remove("zoomed"));
|
||||
}
|
||||
function a() {
|
||||
var e = 0.12, t = window.innerWidth * e, i = window.innerHeight * e, d = s();
|
||||
l < i ? window.scroll(d.x, d.y - (1 - l / i) * (14 / n)) : l > window.innerHeight - i && window.scroll(d.x, d.y + (1 - (window.innerHeight - l) / i) * (14 / n)), o < t ? window.scroll(d.x - (1 - o / t) * (14 / n), d.y) : o > window.innerWidth - t && window.scroll(d.x + (1 - (window.innerWidth - o) / t) * (14 / n), d.y);
|
||||
}
|
||||
function s() {
|
||||
return {
|
||||
x: window.scrollX !== void 0 ? window.scrollX : window.pageXOffset,
|
||||
y: window.scrollY !== void 0 ? window.scrollY : window.pageYOffset
|
||||
};
|
||||
}
|
||||
return {
|
||||
/**
|
||||
* Zooms in on either a rectangle or HTML element.
|
||||
*
|
||||
* @param {Object} options
|
||||
* - element: HTML element to zoom in on
|
||||
* OR
|
||||
* - x/y: coordinates in non-transformed space to zoom in on
|
||||
* - width/height: the portion of the screen to zoom in on
|
||||
* - scale: can be used instead of width/height to explicitly set scale
|
||||
*/
|
||||
to: function(e) {
|
||||
if (n !== 1)
|
||||
r.out();
|
||||
else {
|
||||
if (e.x = e.x || 0, e.y = e.y || 0, e.element) {
|
||||
var t = 20, i = e.element.getBoundingClientRect();
|
||||
e.x = i.left - t, e.y = i.top - t, e.width = i.width + t * 2, e.height = i.height + t * 2;
|
||||
}
|
||||
e.width !== void 0 && e.height !== void 0 && (e.scale = Math.max(Math.min(window.innerWidth / e.width, window.innerHeight / e.height), 1)), e.scale > 1 && (e.x *= e.scale, e.y *= e.scale, y(e, e.scale), e.pan !== !1 && (f = setTimeout(function() {
|
||||
m = setInterval(a, 1e3 / 60);
|
||||
}, 800)));
|
||||
}
|
||||
},
|
||||
/**
|
||||
* Resets the document zoom state to its default.
|
||||
*/
|
||||
out: function() {
|
||||
clearTimeout(f), clearInterval(m), y({ x: 0, y: 0 }, 1), n = 1;
|
||||
},
|
||||
// Alias
|
||||
magnify: function(e) {
|
||||
this.to(e);
|
||||
},
|
||||
reset: function() {
|
||||
this.out();
|
||||
},
|
||||
zoomLevel: function() {
|
||||
return n;
|
||||
}
|
||||
};
|
||||
})();
|
||||
const g = h;
|
||||
export {
|
||||
g as default
|
||||
};
|
||||
Vendored
+1
-30
@@ -1,30 +1 @@
|
||||
/* http://meyerweb.com/eric/tools/css/reset/
|
||||
v4.0 | 20180602
|
||||
License: none (public domain)
|
||||
*/
|
||||
|
||||
html, body, div, span, applet, object, iframe,
|
||||
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
|
||||
a, abbr, acronym, address, big, cite, code,
|
||||
del, dfn, em, img, ins, kbd, q, s, samp,
|
||||
small, strike, strong, sub, sup, tt, var,
|
||||
b, u, i, center,
|
||||
dl, dt, dd, ol, ul, li,
|
||||
fieldset, form, label, legend,
|
||||
table, caption, tbody, tfoot, thead, tr, th, td,
|
||||
article, aside, canvas, details, embed,
|
||||
figure, figcaption, footer, header, hgroup,
|
||||
main, menu, nav, output, ruby, section, summary,
|
||||
time, mark, audio, video {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
font-size: 100%;
|
||||
font: inherit;
|
||||
vertical-align: baseline;
|
||||
}
|
||||
/* HTML5 display-role reset for older browsers */
|
||||
article, aside, details, figcaption, figure,
|
||||
footer, header, hgroup, main, menu, nav, section {
|
||||
display: block;
|
||||
}
|
||||
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,main,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,section{display:block}
|
||||
|
||||
Vendored
+1
-9
File diff suppressed because one or more lines are too long
Vendored
+864
@@ -0,0 +1,864 @@
|
||||
import { RevealConfig, TransitionStyle, TransitionSpeed, FragmentAnimation, KatexConfig, Mathjax2Config, Mathjax3Config, Mathjax4Config, HighlightConfig, MarkdownConfig } from './config';
|
||||
export type {
|
||||
RevealConfig,
|
||||
TransitionStyle,
|
||||
TransitionSpeed,
|
||||
FragmentAnimation,
|
||||
KatexConfig,
|
||||
Mathjax2Config,
|
||||
Mathjax3Config,
|
||||
Mathjax4Config,
|
||||
HighlightConfig,
|
||||
MarkdownConfig,
|
||||
} from './config';
|
||||
|
||||
export default Reveal;
|
||||
|
||||
// The type definitions in this file are adapted from those
|
||||
// originally created by the community on DefinitelyTyped:
|
||||
// https://github.com/DefinitelyTyped/DefinitelyTyped/tree/master/types/reveal.js
|
||||
|
||||
/**
|
||||
* reveal.js - MIT licensed
|
||||
*
|
||||
* Copyright (C) 2011-2026 Hakim El Hattab, https://hakim.se
|
||||
*
|
||||
* @see {@link https://revealjs.com}
|
||||
* @see {@link https://github.com/hakimel/reveal.js/blob/master/js/reveal.js}
|
||||
* @see {@link https://revealjs.com/api/}
|
||||
*/
|
||||
declare const Reveal: {
|
||||
new (options?: RevealConfig): RevealApi;
|
||||
new (revealElement: HTMLElement, options?: RevealConfig): RevealApi;
|
||||
} & RevealApi;
|
||||
|
||||
/**
|
||||
* The public reveal.js API
|
||||
*
|
||||
* @see {@link https://github.com/hakimel/reveal.js/blob/master/js/reveal.js}
|
||||
*/
|
||||
export interface RevealApi {
|
||||
/**
|
||||
* The reveal.js version
|
||||
*
|
||||
* @returns reveal.js version
|
||||
*/
|
||||
VERSION: string;
|
||||
|
||||
/**
|
||||
* Starts up the presentation.
|
||||
*
|
||||
* @param options - RevealOption see {@link Options}
|
||||
* @returns a promise
|
||||
*/
|
||||
initialize(options?: RevealConfig): Promise<RevealApi>;
|
||||
|
||||
/**
|
||||
* Applies the configuration settings from the config
|
||||
* object. May be called multiple times.
|
||||
*
|
||||
* @param options - RevealOption see {@link RevealConfig}
|
||||
*/
|
||||
configure(options?: RevealConfig): void;
|
||||
|
||||
/**
|
||||
* Uninitializes reveal.js by undoing changes made to the
|
||||
* DOM and removing all event listeners.
|
||||
*/
|
||||
destroy(): void;
|
||||
|
||||
/**
|
||||
* Syncs the presentation with the current DOM. Useful
|
||||
* when new slides or control elements are added or when
|
||||
* the configuration has changed.
|
||||
*/
|
||||
sync(): void;
|
||||
|
||||
/**
|
||||
* Updates reveal.js to keep in sync with new slide attributes. For
|
||||
* example, if you add a new `data-background-image` you can call
|
||||
* this to have reveal.js render the new background image.
|
||||
*
|
||||
* Similar to #sync() but more efficient when you only need to
|
||||
* refresh a specific slide. Dispatches a `slidesync` event
|
||||
* when syncing has completed.
|
||||
*
|
||||
* @param slide
|
||||
* @see {@link sync}
|
||||
*/
|
||||
syncSlide(slide: HTMLElement): void;
|
||||
|
||||
/**
|
||||
* Formats the fragments on the given slide so that they have
|
||||
* valid indices. Call this if fragments are changed in the DOM
|
||||
* after reveal.js has already initialized.
|
||||
*
|
||||
* @param slide
|
||||
* @returns a list of the HTML fragments that were synced
|
||||
*/
|
||||
syncFragments(slide: HTMLElement): HTMLElement[];
|
||||
|
||||
/**
|
||||
* Removes hidden slides (data-visibility="hidden") from the DOM.
|
||||
* This happens automatically when reveal.js initialized, so only
|
||||
* call this to remove hidden slides before initialization.
|
||||
*/
|
||||
removeHiddenSlides(): void;
|
||||
|
||||
/**
|
||||
* Steps from the current point in the presentation to the
|
||||
* slide which matches the specified horizontal and vertical
|
||||
* indices.
|
||||
*
|
||||
* @param horizontalIndex - Horizontal index of the target slide
|
||||
* @param verticalIndex - Vertical index of the target slide
|
||||
* @param fragmentIndex - Index of a fragment within the target slide to activate
|
||||
* @param origin - Origin for use in multimaster environments
|
||||
*/
|
||||
slide(
|
||||
horizontalIndex?: number,
|
||||
verticalIndex?: number,
|
||||
fragmentIndex?: number,
|
||||
origin?: number
|
||||
): void;
|
||||
|
||||
/**
|
||||
* Navigate one step to the left
|
||||
*
|
||||
* @param params see {@link NavigateParams}
|
||||
*/
|
||||
left: NavigationFunction;
|
||||
|
||||
/**
|
||||
* Navigate one step to the right
|
||||
*
|
||||
* @param params see {@link NavigateParams}
|
||||
*/
|
||||
right: NavigationFunction;
|
||||
|
||||
/**
|
||||
* Navigate one step up
|
||||
*
|
||||
* @param params see {@link NavigateParams}
|
||||
*/
|
||||
up: NavigationFunction;
|
||||
|
||||
/**
|
||||
* Navigate one step down
|
||||
*
|
||||
* @param params see {@link NavigateParams}
|
||||
*/
|
||||
down: NavigationFunction;
|
||||
|
||||
/**
|
||||
* Navigates backwards, prioritized in the following order:
|
||||
* 1) Previous fragment
|
||||
* 2) Previous vertical slide
|
||||
* 3) Previous horizontal slide
|
||||
*
|
||||
* @param params see {@link NavigateParams}
|
||||
*/
|
||||
prev: NavigationFunction;
|
||||
|
||||
/**
|
||||
* Navigates forwards, prioritized in the following order:
|
||||
* 1) Next fragment
|
||||
* 2) Next vertical slide
|
||||
* 3) Next horizontal slide
|
||||
*
|
||||
* @param params see {@link NavigateParams}
|
||||
*/
|
||||
next: NavigationFunction;
|
||||
|
||||
// Navigation aliases
|
||||
|
||||
/**
|
||||
* Alias for `left` see {@link left}
|
||||
*/
|
||||
navigateLeft: NavigationFunction;
|
||||
|
||||
/**
|
||||
* Alias for `right` see {@link right}
|
||||
*/
|
||||
navigateRight: NavigationFunction;
|
||||
|
||||
/**
|
||||
* Alias for `up` see {@link up}
|
||||
*/
|
||||
navigateUp: NavigationFunction;
|
||||
|
||||
/**
|
||||
* Alias for `down` see {@link down}
|
||||
*/
|
||||
navigateDown: NavigationFunction;
|
||||
|
||||
/**
|
||||
* Alias for `prev` see {@link prev}
|
||||
*/
|
||||
navigatePrev: NavigationFunction;
|
||||
|
||||
/**
|
||||
* Alias for `next` see {@link next}
|
||||
*/
|
||||
navigateNext: NavigationFunction;
|
||||
|
||||
/**
|
||||
* Navigate to the specified slide fragment.
|
||||
*
|
||||
* @param index - The index of the fragment that
|
||||
* should be shown, -1 means all are invisible
|
||||
* @param offset - Integer offset to apply to the
|
||||
* fragment index
|
||||
*
|
||||
* @returns true if a change was made in any
|
||||
* fragments visibility as part of this call
|
||||
*/
|
||||
navigateFragment(index?: number, offset?: number): boolean;
|
||||
|
||||
/**
|
||||
* Navigate to the previous slide fragment.
|
||||
*
|
||||
* @returns true if there was a previous fragment,
|
||||
* false otherwise
|
||||
*/
|
||||
prevFragment(): boolean;
|
||||
|
||||
/**
|
||||
* Navigate to the next slide fragment.
|
||||
*
|
||||
* @returns true if there was a next fragment,
|
||||
* false otherwise
|
||||
*/
|
||||
nextFragment(): boolean;
|
||||
|
||||
/**
|
||||
* Adds a listener to one of our custom reveal.js events,
|
||||
* like slidechanged and slidesync.
|
||||
*
|
||||
* @param type
|
||||
* @param listener
|
||||
* @param useCapture
|
||||
*/
|
||||
on: HTMLElement['addEventListener'];
|
||||
|
||||
/**
|
||||
* Unsubscribes from a reveal.js event.
|
||||
*
|
||||
* @param type
|
||||
* @param listener
|
||||
* @param useCapture
|
||||
*/
|
||||
off: HTMLElement['removeEventListener'];
|
||||
|
||||
/**
|
||||
* Legacy event binding methods left in for backwards compatibility
|
||||
* Adds a listener to one of our custom reveal.js events,
|
||||
* like slidechanged and slidesync.
|
||||
* See: {@link on}
|
||||
*
|
||||
* @param type
|
||||
* @param listener
|
||||
* @param useCapture
|
||||
*/
|
||||
addEventListener: HTMLElement['addEventListener'];
|
||||
|
||||
/**
|
||||
* Legacy event binding methods left in for backwards compatibility
|
||||
* Unsubscribes from a reveal.js event.
|
||||
* See: {@link off}
|
||||
*
|
||||
* @param type
|
||||
* @param listener
|
||||
* @param useCapture
|
||||
*/
|
||||
removeEventListener: HTMLElement['removeEventListener'];
|
||||
|
||||
/**
|
||||
* Applies JavaScript-controlled layout rules to the
|
||||
* presentation.
|
||||
*/
|
||||
layout(): void;
|
||||
|
||||
/**
|
||||
* Randomly shuffles all slides in the deck.
|
||||
*/
|
||||
shuffle(slides?: HTMLElement[]): void;
|
||||
|
||||
/**
|
||||
* Determine what available routes there are for navigation.
|
||||
*
|
||||
* @param params - If includeFragments is set, a route will be considered
|
||||
* available if either a slide OR a fragment is available in the given direction
|
||||
*
|
||||
* @returns Available route {left, right, up, down}
|
||||
*/
|
||||
availableRoutes(params?: { includeFragments?: boolean }): {
|
||||
down: boolean;
|
||||
left: boolean;
|
||||
right: boolean;
|
||||
up: boolean;
|
||||
};
|
||||
|
||||
/**
|
||||
* Returns an object describing the available fragment
|
||||
* directions.
|
||||
*
|
||||
* @returns Available fragments {prev, next}
|
||||
*/
|
||||
availableFragments(): { prev: boolean; next: boolean };
|
||||
|
||||
/**
|
||||
* Open or close help overlay window.
|
||||
*
|
||||
* @param override - Flag which overrides the
|
||||
* toggle logic and forcibly sets the desired state. True means
|
||||
* help is open, false means it's closed.
|
||||
*/
|
||||
toggleHelp(override?: boolean): void;
|
||||
|
||||
/**
|
||||
* Toggles the slide overview mode on and off.
|
||||
*
|
||||
* @param override - Flag which overrides the
|
||||
* toggle logic and forcibly sets the desired state. True means
|
||||
* overview is open, false means it's closed.
|
||||
*/
|
||||
toggleOverview(override?: boolean): void;
|
||||
|
||||
/**
|
||||
* Toggles the paused mode on and off.
|
||||
*
|
||||
* @param override - Flag which overrides the
|
||||
* toggle logic and forcibly sets the desired state.
|
||||
*/
|
||||
togglePause(override?: boolean): void;
|
||||
|
||||
/**
|
||||
* Toggles the auto slide mode on and off.
|
||||
*
|
||||
* @param override - Flag which sets the desired state.
|
||||
* True means autoplay starts, false means it stops.
|
||||
*/
|
||||
toggleAutoSlide(override?: boolean): void;
|
||||
|
||||
/**
|
||||
* @returns true if we're currently on the first slide in
|
||||
* the presentation.
|
||||
*/
|
||||
isFirstSlide(): boolean;
|
||||
|
||||
/**
|
||||
* @returns Returns true if we're currently on the last slide in
|
||||
* the presentation. If the last slide is a stack, we only
|
||||
* consider this the last slide if it's at the end of the
|
||||
* stack.
|
||||
*/
|
||||
isLastSlide(): boolean;
|
||||
|
||||
/**
|
||||
* @returns true if we're on the last slide in the current
|
||||
* vertical stack.
|
||||
*/
|
||||
isLastVerticalSlide(): boolean;
|
||||
|
||||
/**
|
||||
* Checks if the current or specified slide is vertical
|
||||
* (nested within another slide).
|
||||
*
|
||||
* @param slide - the slide to check orientation of. Defaults to the current slide.
|
||||
* @return true if the current or specified slide is vertical
|
||||
*/
|
||||
isVerticalSlide(slide?: HTMLElement): boolean;
|
||||
|
||||
/**
|
||||
* @returns true if we are currently in the paused mode.
|
||||
*/
|
||||
isPaused(): boolean;
|
||||
|
||||
/**
|
||||
* @returns true if the auto slide mode is currently on.
|
||||
*/
|
||||
isAutoSliding(): boolean;
|
||||
|
||||
/**
|
||||
* @returns true if this presentation is running inside of
|
||||
* the speaker notes window.
|
||||
*/
|
||||
isSpeakerNotes(): boolean;
|
||||
|
||||
/**
|
||||
* @returns true if the overview is active, false otherwise
|
||||
*/
|
||||
isOverview(): boolean;
|
||||
|
||||
/**
|
||||
* Checks if the presentation is focused
|
||||
*
|
||||
* @returns true if the it is focused, false otherwise
|
||||
*/
|
||||
isFocused(): boolean;
|
||||
|
||||
/**
|
||||
* Checks if this reveal.js instance is being used to print a PDF.
|
||||
*
|
||||
* @returns true if being used to print a PDF, false otherwise
|
||||
*/
|
||||
isPrintingPDF(): boolean;
|
||||
|
||||
/**
|
||||
* Checks if reveal.js has been loaded and is ready for use
|
||||
*
|
||||
* @returns true if reveal.js is ready for use, false otherwise
|
||||
*/
|
||||
isReady(): boolean;
|
||||
|
||||
/**
|
||||
* Called when the given slide is within the configured view
|
||||
* distance. Shows the slide element and loads any content
|
||||
* that is set to load lazily (data-src).
|
||||
*
|
||||
* @param slide - Slide to show
|
||||
*/
|
||||
loadSlide(slide: HTMLElement, options?: { excludeIframes?: boolean }): void;
|
||||
|
||||
/**
|
||||
* Unloads and hides the given slide. This is called when the
|
||||
* slide is moved outside of the configured view distance.
|
||||
*
|
||||
* @param slide
|
||||
*/
|
||||
unloadSlide(slide: HTMLElement): void;
|
||||
|
||||
/**
|
||||
* Opens a preview window for the target URL.
|
||||
*
|
||||
* @param url - url for preview iframe src
|
||||
*/
|
||||
showPreview(url: string): void;
|
||||
|
||||
/**
|
||||
* Closes any currently open overlay.
|
||||
*/
|
||||
hidePreview(): void;
|
||||
|
||||
/**
|
||||
* Binds all internal event listeners.
|
||||
*/
|
||||
addEventListeners(): void;
|
||||
|
||||
/**
|
||||
* Unbinds all internal event listeners.
|
||||
*/
|
||||
removeEventListeners(): void;
|
||||
|
||||
/**
|
||||
* Dispatches an event of the specified type from the
|
||||
* reveal DOM element.
|
||||
*/
|
||||
dispatchEvent({
|
||||
target,
|
||||
type,
|
||||
data,
|
||||
bubbles,
|
||||
}: {
|
||||
/** `revealElement` by default */
|
||||
target?: HTMLElement;
|
||||
type: string;
|
||||
data?: unknown;
|
||||
bubbles?: boolean;
|
||||
}): Event;
|
||||
|
||||
/**
|
||||
* Retrieves the current state of the presentation as
|
||||
* an object. This state can then be restored at any
|
||||
* time.
|
||||
*
|
||||
* @returns The current state - {indexh, indexv, indexf, paused, overview}
|
||||
*/
|
||||
getState(): RevealState;
|
||||
|
||||
/**
|
||||
* Restores the presentation to the given state.
|
||||
*
|
||||
* @param object - state as generated by getState()
|
||||
* @see {@link getState} generates the parameter `state`
|
||||
*/
|
||||
setState(object: RevealState): void;
|
||||
|
||||
/**
|
||||
* Returns a value ranging from 0-1 that represents
|
||||
* how far into the presentation we have navigated.
|
||||
*
|
||||
* @returns a value ranging from 0-1 that represents
|
||||
* how far into the presentation we have navigated.
|
||||
*/
|
||||
getProgress(): number;
|
||||
|
||||
/**
|
||||
* Retrieves the h/v location and fragment of the current,
|
||||
* or specified, slide.
|
||||
*
|
||||
* @param slide - if specified, the returned index will
|
||||
* be for this slide rather than the currently active one
|
||||
*
|
||||
* @return h/v location and fragment of the current,
|
||||
* or specified, slide. {h, v, f}
|
||||
*/
|
||||
getIndices(slide?: HTMLElement): { h: number; v: number; f: number };
|
||||
|
||||
/**
|
||||
* Returns an array of objects where each object represents the
|
||||
* attributes on its respective slide.
|
||||
*
|
||||
* @returns an array of objects where each object represents the
|
||||
* attributes on its respective slide.
|
||||
*/
|
||||
getSlidesAttributes(): Record<string, string>[];
|
||||
|
||||
/**
|
||||
* Returns the number of past slides. This can be used as a global
|
||||
* flattened index for slides.
|
||||
*
|
||||
* @param [slide] - The slide we're counting before, defaults to current slide
|
||||
*
|
||||
* @returns Past slide count
|
||||
*/
|
||||
getSlidePastCount(slide?: HTMLElement): number;
|
||||
|
||||
/**
|
||||
* Retrieves the total number of slides in this presentation.
|
||||
*
|
||||
* @returns the total number of slides in this presentation.
|
||||
*/
|
||||
getTotalSlides(): number;
|
||||
|
||||
/**
|
||||
* Returns the slide element matching the specified index.
|
||||
*
|
||||
* @param x - slide index
|
||||
* @param [y] - slide index
|
||||
*
|
||||
* @returns the slide element matching the specified index
|
||||
*/
|
||||
getSlide(x: number, y?: number): HTMLElement | undefined;
|
||||
|
||||
/**
|
||||
* Returns the previous slide element, may be null
|
||||
*
|
||||
* @returns the previous slide element, may be null
|
||||
*/
|
||||
getPreviousSlide(): HTMLElement | null;
|
||||
|
||||
/**
|
||||
* Returns the current slide element
|
||||
*
|
||||
* @returns the current slide element
|
||||
*/
|
||||
getCurrentSlide(): HTMLElement;
|
||||
|
||||
/**
|
||||
* Returns the background element for the given slide.
|
||||
* All slides, even the ones with no background properties
|
||||
* defined, have a background element so as long as the
|
||||
* index is valid an element will be returned.
|
||||
*
|
||||
* @param element A slide
|
||||
* @returns the background element for the given slide
|
||||
*/
|
||||
getSlideBackground(element: HTMLElement): HTMLElement | undefined;
|
||||
|
||||
/**
|
||||
* Returns the background element for the given slide.
|
||||
* All slides, even the ones with no background properties
|
||||
* defined, have a background element so as long as the
|
||||
* index is valid an element will be returned.
|
||||
*
|
||||
* @param x - Horizontal background index OR a slide
|
||||
* HTML element
|
||||
* @param [y] - Vertical background index
|
||||
* @returns the background element for the given slide
|
||||
*/
|
||||
getSlideBackground(x: number, y?: number): HTMLElement | undefined;
|
||||
|
||||
/**
|
||||
* Retrieves the speaker notes from a slide. Notes can be
|
||||
* defined in two ways:
|
||||
* 1. As a data-notes attribute on the slide <section>
|
||||
* 2. As an <aside class="notes"> inside of the slide
|
||||
*
|
||||
* @param [slide] - defaults to current slide
|
||||
* @returns the speaker notes from a slide
|
||||
*/
|
||||
getSlideNotes(slide?: HTMLElement): string | null;
|
||||
|
||||
/**
|
||||
* Retrieves all slides in this presentation.
|
||||
*
|
||||
* @returns all slides in this presentation
|
||||
*/
|
||||
getSlides(): HTMLElement[];
|
||||
|
||||
/**
|
||||
* Returns a list of all horizontal slides in the deck. Each
|
||||
* vertical stack is included as one horizontal slide in the
|
||||
* resulting array.
|
||||
*
|
||||
* @returns a list of all horizontal slides in the deck
|
||||
*/
|
||||
getHorizontalSlides(): HTMLElement[];
|
||||
|
||||
/**
|
||||
* Returns all vertical slides that exist within this deck.
|
||||
*
|
||||
* @returns all vertical slides that exist within this deck
|
||||
*/
|
||||
getVerticalSlides(): HTMLElement[];
|
||||
|
||||
/**
|
||||
* Returns true if there are at least two horizontal slides.
|
||||
*
|
||||
* @returns true if there are at least two horizontal slides
|
||||
*/
|
||||
hasHorizontalSlides(): boolean;
|
||||
|
||||
/**
|
||||
* Returns true if there are at least two vertical slides.
|
||||
*
|
||||
* @returns true if there are at least two vertical slides
|
||||
*/
|
||||
hasVerticalSlides(): boolean;
|
||||
|
||||
/**
|
||||
* Checks if the deck has navigated on either axis at least once
|
||||
*
|
||||
* @returns true if the deck has navigated on either horizontal axis
|
||||
* at least once
|
||||
*/
|
||||
hasNavigatedHorizontally(): boolean;
|
||||
|
||||
/**
|
||||
* Checks if the deck has navigated on either axis at least once
|
||||
*
|
||||
* @returns true if the deck has navigated on either vertically axis
|
||||
* at least once
|
||||
*/
|
||||
hasNavigatedVertically(): boolean;
|
||||
|
||||
/**
|
||||
* Add a custom key binding with optional description to
|
||||
* be added to the help screen.
|
||||
*
|
||||
* @param binding
|
||||
* @param callback
|
||||
*/
|
||||
addKeyBinding(
|
||||
keyCode: number | { keyCode: number; key: string; description: string },
|
||||
callback: string | ((event: KeyboardEvent) => void)
|
||||
): void;
|
||||
|
||||
/**
|
||||
* Removes the specified custom key binding.
|
||||
*
|
||||
* @param keyCode
|
||||
*/
|
||||
removeKeyBinding(keyCode: number): void;
|
||||
|
||||
/**
|
||||
* Programmatically triggers a keyboard event
|
||||
*
|
||||
* @param keyCode
|
||||
*/
|
||||
triggerKey(keyCode: number): void;
|
||||
|
||||
/**
|
||||
* Registers a new shortcut to include in the help overlay
|
||||
*
|
||||
* @param key
|
||||
* @param value
|
||||
*/
|
||||
registerKeyboardShortcut(key: string, value: string): void;
|
||||
|
||||
/**
|
||||
* Calculates the computed pixel size of our slides. These
|
||||
* values are based on the width and height configuration
|
||||
* options.
|
||||
*
|
||||
* @param [presentationWidth=dom.wrapper.offsetWidth]
|
||||
* @param [presentationHeight=dom.wrapper.offsetHeight]
|
||||
* @returns the computed pixel size of the slides
|
||||
*/
|
||||
getComputedSlideSize(
|
||||
presentationWidth?: number,
|
||||
presentationHeight?: number
|
||||
): ComputedSlideSize;
|
||||
|
||||
/**
|
||||
* Returns the current scale of the presentation content
|
||||
*
|
||||
* @returns the current scale of the presentation content
|
||||
*/
|
||||
getScale(): number;
|
||||
|
||||
/**
|
||||
* Returns the current configuration object
|
||||
*
|
||||
* @returns the current configuration object
|
||||
*/
|
||||
getConfig(): RevealConfig;
|
||||
|
||||
/**
|
||||
* Returns a key:value hash of all query params.
|
||||
*
|
||||
* @returns a key:value hash of all query params
|
||||
*/
|
||||
getQueryHash(): Record<string, string>;
|
||||
|
||||
/**
|
||||
* Return a hash URL that will resolve to the given slide location.
|
||||
*
|
||||
* @param slide - the slide to link to
|
||||
* @returns a hash URL that will resolve to the given slide location
|
||||
*/
|
||||
getSlidePath(slide?: HTMLElement): string;
|
||||
|
||||
/**
|
||||
* @returns reveal.js DOM element
|
||||
*/
|
||||
getRevealElement(): HTMLElement | null;
|
||||
|
||||
/**
|
||||
* @returns reveal.js DOM element
|
||||
*/
|
||||
getSlidesElement(): HTMLElement | null;
|
||||
|
||||
/**
|
||||
* @returns reveal.js DOM element
|
||||
*/
|
||||
getViewportElement(): HTMLElement | null;
|
||||
|
||||
/**
|
||||
* @returns reveal.js DOM element
|
||||
*/
|
||||
getBackgroundsElement(): HTMLDivElement | undefined;
|
||||
|
||||
/**
|
||||
* Registers a new plugin with this reveal.js instance.
|
||||
*
|
||||
* reveal.js waits for all registered plugins to initialize
|
||||
* before considering itself ready, as long as the plugin
|
||||
* is registered before calling `Reveal.initialize()`.
|
||||
*
|
||||
* @param plugin
|
||||
*/
|
||||
registerPlugin(plugin: RevealPlugin): void;
|
||||
|
||||
/**
|
||||
* Checks if a specific plugin has been registered.
|
||||
*
|
||||
* @param id - unique plugin identifier
|
||||
* @returns true if a specific plugin has been registered.
|
||||
*/
|
||||
hasPlugin(id: string): boolean;
|
||||
|
||||
/**
|
||||
* Returns the specific plugin instance, if a plugin
|
||||
* with the given ID has been registered.
|
||||
*
|
||||
* @param id - unique plugin identifier
|
||||
* @returns plugin instance
|
||||
*/
|
||||
getPlugin(id: string): RevealPlugin | undefined;
|
||||
|
||||
/**
|
||||
* @returns id:plugin hash of all plugins
|
||||
*/
|
||||
getPlugins(): Record<string, RevealPlugin>;
|
||||
}
|
||||
|
||||
/**
|
||||
* Options for navigation
|
||||
*/
|
||||
export interface NavigateParams {
|
||||
skipFragments?: boolean;
|
||||
}
|
||||
|
||||
export type NavigationFunction = (params?: NavigateParams) => void;
|
||||
|
||||
/**
|
||||
* Multiplex configuration
|
||||
*
|
||||
* @see {@link https://github.com/reveal/multiplex}
|
||||
*/
|
||||
export interface MultiplexConfig {
|
||||
// Obtained from the socket.io server. Gives this (the master) control of the presentation
|
||||
secret: string | null;
|
||||
// Obtained from the socket.io server
|
||||
id: string;
|
||||
// Location of socket.io server
|
||||
url: string;
|
||||
}
|
||||
|
||||
/**
|
||||
* Reveal Dependency
|
||||
*
|
||||
* @see {@link https://revealjs.com/plugins/#dependencies}
|
||||
*/
|
||||
export interface RevealDependency {
|
||||
src: string;
|
||||
async?: boolean;
|
||||
callback?: () => void;
|
||||
condition?: () => boolean;
|
||||
}
|
||||
|
||||
export interface ComputedSlideSize {
|
||||
width: number;
|
||||
height: number;
|
||||
presentationWidth: number;
|
||||
presentationHeight: number;
|
||||
}
|
||||
|
||||
export interface RevealState {
|
||||
indexh: number;
|
||||
indexv: number;
|
||||
indexf: number;
|
||||
paused: boolean;
|
||||
overview: boolean;
|
||||
|
||||
/**
|
||||
* URL of an iframe being previewed
|
||||
*/
|
||||
previewIframe?: string;
|
||||
|
||||
/**
|
||||
* URL of an image being previewed
|
||||
*/
|
||||
previewImage?: string;
|
||||
|
||||
/**
|
||||
* URL of a video being previewed
|
||||
*/
|
||||
previewVideo?: string;
|
||||
|
||||
/**
|
||||
* Fit mode of the previewed media
|
||||
*/
|
||||
previewFit?: 'none' | 'scale-down' | 'contain' | 'cover';
|
||||
}
|
||||
|
||||
export interface SlideSyncEvent extends Event {
|
||||
slide: HTMLElement;
|
||||
}
|
||||
|
||||
// NOTE: it is possible to extend type definitions depend on the plugin
|
||||
/**
|
||||
* Reveal Plugin
|
||||
*
|
||||
* @see {@link https://revealjs.com/creating-plugins/}
|
||||
*/
|
||||
export interface RevealPlugin {
|
||||
id: string;
|
||||
init?(reveal: RevealApi): void | Promise<void>;
|
||||
destroy?(): void;
|
||||
}
|
||||
|
||||
export type RevealPluginFactory = () => RevealPlugin;
|
||||
Vendored
-9
File diff suppressed because one or more lines are too long
-1
File diff suppressed because one or more lines are too long
Vendored
+35
-4
File diff suppressed because one or more lines are too long
Vendored
-1
File diff suppressed because one or more lines are too long
Vendored
+3580
File diff suppressed because it is too large
Load Diff
+1
-366
File diff suppressed because one or more lines are too long
+1
-362
File diff suppressed because one or more lines are too long
+1
-359
File diff suppressed because one or more lines are too long
+1
-392
File diff suppressed because one or more lines are too long
+1
-385
File diff suppressed because one or more lines are too long
@@ -1,10 +0,0 @@
|
||||
@font-face {
|
||||
font-family: 'League Gothic';
|
||||
src: url('./league-gothic.eot');
|
||||
src: url('./league-gothic.eot?#iefix') format('embedded-opentype'),
|
||||
url('./league-gothic.woff') format('woff'),
|
||||
url('./league-gothic.ttf') format('truetype');
|
||||
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}
|
||||
Binary file not shown.
Binary file not shown.
BIN
Binary file not shown.
BIN
Binary file not shown.
BIN
Binary file not shown.
BIN
Binary file not shown.
BIN
Binary file not shown.
BIN
Binary file not shown.
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user