mirror of
https://github.com/hakimel/reveal.js.git
synced 2025-07-31 20:00:28 +02:00
prettier config, format files
This commit is contained in:
Hakim El Hattab
@@ -1,3 +1,6 @@
|
|||||||
**/*
|
**/*.html
|
||||||
|
|
||||||
js/**/*.js
|
js/**/*.js
|
||||||
plugin/**/*.js
|
plugin/**/*.js
|
||||||
|
test/**/*.md
|
||||||
|
examples/**/*.md
|
||||||
@@ -1,5 +1,5 @@
|
|||||||
{
|
{
|
||||||
"useTabs": false,
|
"useTabs": true,
|
||||||
"tabWidth": 2,
|
"tabWidth": 2,
|
||||||
"trailingComma": "es5",
|
"trailingComma": "es5",
|
||||||
"printWidth": 100,
|
"printWidth": 100,
|
||||||
|
|||||||
@@ -18,13 +18,15 @@ Want to create reveal.js presentation in a graphical editor? Try <https://slides
|
|||||||
---
|
---
|
||||||
|
|
||||||
### Getting started
|
### Getting started
|
||||||
|
|
||||||
- 🚀 [Install reveal.js](https://revealjs.com/installation)
|
- 🚀 [Install reveal.js](https://revealjs.com/installation)
|
||||||
- 👀 [View the demo presentation](https://revealjs.com/demo)
|
- 👀 [View the demo presentation](https://revealjs.com/demo)
|
||||||
- 📖 [Read the documentation](https://revealjs.com/markup/)
|
- 📖 [Read the documentation](https://revealjs.com/markup/)
|
||||||
- 🖌 [Try the visual editor for reveal.js at Slides.com](https://slides.com/)
|
- 🖌 [Try the visual editor for reveal.js at Slides.com](https://slides.com/)
|
||||||
- 🎬 [Watch the reveal.js video course (paid)](https://revealjs.com/course)
|
- 🎬 [Watch the reveal.js video course (paid)](https://revealjs.com/course)
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
<div align="center">
|
<div align="center">
|
||||||
MIT licensed | Copyright © 2011-2024 Hakim El Hattab, https://hakim.se
|
MIT licensed | Copyright © 2011-2024 Hakim El Hattab, https://hakim.se
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -38,7 +38,8 @@
|
|||||||
.reveal .r-hstack {
|
.reveal .r-hstack {
|
||||||
display: flex;
|
display: flex;
|
||||||
|
|
||||||
img, video {
|
img,
|
||||||
|
video {
|
||||||
min-width: 0;
|
min-width: 0;
|
||||||
min-height: 0;
|
min-height: 0;
|
||||||
object-fit: contain;
|
object-fit: contain;
|
||||||
@@ -58,13 +59,31 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
// Naming based on tailwindcss
|
// Naming based on tailwindcss
|
||||||
.reveal .items-stretch { align-items: stretch; }
|
.reveal .items-stretch {
|
||||||
.reveal .items-start { align-items: flex-start; }
|
align-items: stretch;
|
||||||
.reveal .items-center { align-items: center; }
|
}
|
||||||
.reveal .items-end { align-items: flex-end; }
|
.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-between {
|
||||||
.reveal .justify-around { justify-content: space-around; }
|
justify-content: space-between;
|
||||||
.reveal .justify-start { justify-content: flex-start; }
|
}
|
||||||
.reveal .justify-center { justify-content: center; }
|
.reveal .justify-around {
|
||||||
.reveal .justify-end { justify-content: flex-end; }
|
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 {
|
@media print {
|
||||||
html:not(.print-pdf) {
|
html:not(.print-pdf) {
|
||||||
overflow: visible;
|
overflow: visible;
|
||||||
@@ -24,25 +23,46 @@
|
|||||||
display: none !important;
|
display: none !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
p, td, li {
|
p,
|
||||||
font-size: 20pt!important;
|
td,
|
||||||
|
li {
|
||||||
|
font-size: 20pt !important;
|
||||||
color: #000;
|
color: #000;
|
||||||
}
|
}
|
||||||
|
|
||||||
h1,h2,h3,h4,h5,h6 {
|
h1,
|
||||||
color: #000!important;
|
h2,
|
||||||
|
h3,
|
||||||
|
h4,
|
||||||
|
h5,
|
||||||
|
h6 {
|
||||||
|
color: #000 !important;
|
||||||
height: auto;
|
height: auto;
|
||||||
line-height: normal;
|
line-height: normal;
|
||||||
text-align: left;
|
text-align: left;
|
||||||
letter-spacing: normal;
|
letter-spacing: normal;
|
||||||
}
|
}
|
||||||
|
|
||||||
h1 { font-size: 28pt !important; }
|
h1 {
|
||||||
h2 { font-size: 24pt !important; }
|
font-size: 28pt !important;
|
||||||
h3 { font-size: 22pt !important; }
|
}
|
||||||
h4 { font-size: 22pt !important; font-variant: small-caps; }
|
h2 {
|
||||||
h5 { font-size: 21pt !important; }
|
font-size: 24pt !important;
|
||||||
h6 { font-size: 20pt !important; font-style: italic; }
|
}
|
||||||
|
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:link,
|
||||||
a:visited {
|
a:visited {
|
||||||
@@ -51,7 +71,10 @@
|
|||||||
text-decoration: underline;
|
text-decoration: underline;
|
||||||
}
|
}
|
||||||
|
|
||||||
ul, ol, div, p {
|
ul,
|
||||||
|
ol,
|
||||||
|
div,
|
||||||
|
p {
|
||||||
visibility: visible;
|
visibility: visible;
|
||||||
position: static;
|
position: static;
|
||||||
width: auto;
|
width: auto;
|
||||||
@@ -137,7 +160,7 @@
|
|||||||
section img {
|
section img {
|
||||||
display: block;
|
display: block;
|
||||||
margin: 15px 0px;
|
margin: 15px 0px;
|
||||||
background: rgba(255,255,255,1);
|
background: rgba(255, 255, 255, 1);
|
||||||
border: 1px solid #666;
|
border: 1px solid #666;
|
||||||
box-shadow: none;
|
box-shadow: none;
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -135,7 +135,7 @@ html.reveal-print {
|
|||||||
}
|
}
|
||||||
|
|
||||||
/* Layout option which makes notes appear on a separate page */
|
/* 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;
|
position: relative;
|
||||||
color: inherit;
|
color: inherit;
|
||||||
background-color: transparent;
|
background-color: transparent;
|
||||||
|
|||||||
@@ -3,6 +3,7 @@
|
|||||||
License: none (public domain)
|
License: none (public domain)
|
||||||
*/
|
*/
|
||||||
|
|
||||||
|
/* prettier-ignore */
|
||||||
html, body, div, span, applet, object, iframe,
|
html, body, div, span, applet, object, iframe,
|
||||||
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
|
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
|
||||||
a, abbr, acronym, address, big, cite, code,
|
a, abbr, acronym, address, big, cite, code,
|
||||||
@@ -23,8 +24,8 @@ time, mark, audio, video {
|
|||||||
font: inherit;
|
font: inherit;
|
||||||
vertical-align: baseline;
|
vertical-align: baseline;
|
||||||
}
|
}
|
||||||
/* HTML5 display-role reset for older browsers */
|
/* prettier-ignore */
|
||||||
article, aside, details, figcaption, figure,
|
article, aside, details, figcaption, figure,
|
||||||
footer, header, hgroup, main, menu, nav, section {
|
footer, header, hgroup, main, menu, nav, section {
|
||||||
display: block;
|
display: block;
|
||||||
}
|
}
|
||||||
|
|||||||
757
css/reveal.scss
757
css/reveal.scss
File diff suppressed because it is too large
Load Diff
@@ -4,17 +4,17 @@ Themes are written using Sass to keep things modular and reduce the need for rep
|
|||||||
|
|
||||||
## Creating a Theme
|
## 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:styles`.
|
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:styles`.
|
||||||
|
|
||||||
Each theme file follows the same structure:
|
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)**
|
1. **Include [/css/theme/template/mixins.scss](https://github.com/hakimel/reveal.js/blob/master/css/theme/template/mixins.scss)**
|
||||||
Shared utility functions.
|
Shared utility functions.
|
||||||
|
|
||||||
2. **Include [/css/theme/template/settings.scss](https://github.com/hakimel/reveal.js/blob/master/css/theme/template/settings.scss)**
|
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.
|
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. **Include [/css/theme/template/theme.scss](https://github.com/hakimel/reveal.js/blob/master/css/theme/template/theme.scss)**
|
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.
|
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**
|
4. **Optionally add custom fonts and/or additional styles**
|
||||||
|
|||||||
@@ -4,49 +4,55 @@
|
|||||||
* Copyright (C) 2011-2012 Hakim El Hattab, http://hakim.se
|
* Copyright (C) 2011-2012 Hakim El Hattab, http://hakim.se
|
||||||
*/
|
*/
|
||||||
|
|
||||||
|
|
||||||
// Load utils
|
// Load utils
|
||||||
@use "sass:color";
|
@use 'sass:color';
|
||||||
@use "template/mixins" as mixins;
|
@use 'template/mixins' as mixins;
|
||||||
|
|
||||||
$active-color: #8b743d;
|
$active-color: #8b743d;
|
||||||
|
|
||||||
// Inject theme variables (with some overrides)
|
// Inject theme variables (with some overrides)
|
||||||
@use "template/settings" with (
|
@use 'template/settings' with (
|
||||||
$background-color: #f7f3de,
|
$background-color: #f7f3de,
|
||||||
$background: radial-gradient( rgba(255,255,255,1), rgba(247,242,211,1) ),
|
$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,
|
||||||
|
|
||||||
$main-font: #{'Source Sans Pro', Helvetica, sans-serif},
|
$heading-color: #333,
|
||||||
$main-font-size: 42px,
|
$heading-font: "'Source Sans Pro', Helvetica, sans-serif",
|
||||||
$main-color: #333,
|
$heading-font-weight: 600,
|
||||||
|
|
||||||
$heading-color: #333,
|
$heading1-text-shadow: #{0 1px 0 #ccc,
|
||||||
$heading-font: #{'Source Sans Pro', Helvetica, sans-serif},
|
0 2px 0 #c9c9c9,
|
||||||
$heading-font-weight: 600,
|
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-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,.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)},
|
$heading1-size: 2.5em,
|
||||||
|
$heading2-size: 1.6em,
|
||||||
|
$heading3-size: 1.3em,
|
||||||
|
$heading4-size: 1em,
|
||||||
|
|
||||||
$heading1-size: 2.5em,
|
$link-color: $active-color,
|
||||||
$heading2-size: 1.6em,
|
$link-color-hover: color.scale($active-color, $lightness: 20%),
|
||||||
$heading3-size: 1.3em,
|
$selection-color: #333,
|
||||||
$heading4-size: 1.0em,
|
$selection-background-color: color.scale($active-color, $lightness: 35%),
|
||||||
|
$overlay-element-bg-color: '0 0 0',
|
||||||
$link-color: $active-color,
|
$overlay-element-fg-color: '240 240 240'
|
||||||
$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
|
// Inject the theme template
|
||||||
@use "template/theme";
|
@use 'template/theme';
|
||||||
|
|
||||||
// Include theme-specific fonts
|
// Include theme-specific fonts
|
||||||
@import url("./fonts/league-gothic/league-gothic.css");
|
@import url('./fonts/league-gothic/league-gothic.css');
|
||||||
@import url("https://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic");
|
@import url('https://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic');
|
||||||
|
|
||||||
// Change text colors against light slide backgrounds
|
// Change text colors against light slide backgrounds
|
||||||
@include mixins.dark-bg-text-color(#fff);
|
@include mixins.dark-bg-text-color(#fff);
|
||||||
|
|||||||
@@ -8,40 +8,39 @@
|
|||||||
*/
|
*/
|
||||||
|
|
||||||
// Load utils
|
// Load utils
|
||||||
@use "sass:color";
|
@use 'sass:color';
|
||||||
@use "template/mixins" as mixins;
|
@use 'template/mixins' as mixins;
|
||||||
|
|
||||||
$active-color: #42affa;
|
$active-color: #42affa;
|
||||||
|
|
||||||
// Inject theme variables (with some overrides)
|
// Inject theme variables (with some overrides)
|
||||||
@use "template/settings" with (
|
@use 'template/settings' with (
|
||||||
$background-color: #000,
|
$background-color: #000,
|
||||||
|
|
||||||
$main-font: #{'Source Sans Pro', Helvetica, sans-serif},
|
$main-font: "'Source Sans Pro', Helvetica, sans-serif",
|
||||||
$main-font-size: 42px,
|
$main-font-size: 42px,
|
||||||
$main-color: #fff,
|
$main-color: #fff,
|
||||||
|
|
||||||
$heading-color: #fff,
|
$heading-color: #fff,
|
||||||
$heading-font: #{'Source Sans Pro', Helvetica, sans-serif},
|
$heading-font: "'Source Sans Pro', Helvetica, sans-serif",
|
||||||
$heading-font-weight: 600,
|
$heading-font-weight: 600,
|
||||||
|
|
||||||
$heading1-size: 2.5em,
|
$heading1-size: 2.5em,
|
||||||
$heading2-size: 1.6em,
|
$heading2-size: 1.6em,
|
||||||
$heading3-size: 1.3em,
|
$heading3-size: 1.3em,
|
||||||
$heading4-size: 1.0em,
|
$heading4-size: 1em,
|
||||||
|
|
||||||
$link-color: $active-color,
|
$link-color: $active-color,
|
||||||
$link-color-hover: color.scale( $active-color, $lightness: 15% ),
|
$link-color-hover: color.scale($active-color, $lightness: 15%),
|
||||||
|
$selection-color: #fff,
|
||||||
$selection-color: #fff,
|
$selection-background-color: color.scale($active-color, $lightness: -35%)
|
||||||
$selection-background-color: color.scale( $active-color, $lightness: -35% )
|
|
||||||
);
|
);
|
||||||
|
|
||||||
// Inject the theme template
|
// Inject the theme template
|
||||||
@use "template/theme";
|
@use 'template/theme';
|
||||||
|
|
||||||
// Include theme-specific fonts
|
// Include theme-specific fonts
|
||||||
@import url("./fonts/source-sans-pro/source-sans-pro.css");
|
@import url('./fonts/source-sans-pro/source-sans-pro.css');
|
||||||
|
|
||||||
// Change text colors against light slide backgrounds
|
// Change text colors against light slide backgrounds
|
||||||
@include mixins.light-bg-text-color(#000);
|
@include mixins.light-bg-text-color(#000);
|
||||||
|
|||||||
@@ -5,40 +5,39 @@
|
|||||||
*/
|
*/
|
||||||
|
|
||||||
// Load utils
|
// Load utils
|
||||||
@use "sass:color";
|
@use 'sass:color';
|
||||||
@use "template/mixins" as mixins;
|
@use 'template/mixins' as mixins;
|
||||||
|
|
||||||
$active-color: #42affa;
|
$active-color: #42affa;
|
||||||
|
|
||||||
// Inject theme variables (with some overrides)
|
// Inject theme variables (with some overrides)
|
||||||
@use "template/settings" with (
|
@use 'template/settings' with (
|
||||||
$background-color: #191919,
|
$background-color: #191919,
|
||||||
|
|
||||||
$main-font: #{'Source Sans Pro', Helvetica, sans-serif},
|
$main-font: "'Source Sans Pro', Helvetica, sans-serif",
|
||||||
$main-font-size: 42px,
|
$main-font-size: 42px,
|
||||||
$main-color: #fff,
|
$main-color: #fff,
|
||||||
|
|
||||||
$heading-color: #fff,
|
$heading-color: #fff,
|
||||||
$heading-font: #{'Source Sans Pro', Helvetica, sans-serif},
|
$heading-font: "'Source Sans Pro', Helvetica, sans-serif",
|
||||||
$heading-font-weight: 600,
|
$heading-font-weight: 600,
|
||||||
|
|
||||||
$heading1-size: 2.5em,
|
$heading1-size: 2.5em,
|
||||||
$heading2-size: 1.6em,
|
$heading2-size: 1.6em,
|
||||||
$heading3-size: 1.3em,
|
$heading3-size: 1.3em,
|
||||||
$heading4-size: 1.0em,
|
$heading4-size: 1em,
|
||||||
|
|
||||||
$link-color: $active-color,
|
$link-color: $active-color,
|
||||||
$link-color-hover: color.scale( $active-color, $lightness: 15% ),
|
$link-color-hover: color.scale($active-color, $lightness: 15%),
|
||||||
|
$selection-color: #fff,
|
||||||
$selection-color: #fff,
|
$selection-background-color: color.scale($active-color, $lightness: -35%)
|
||||||
$selection-background-color: color.scale( $active-color, $lightness: -35% )
|
|
||||||
);
|
);
|
||||||
|
|
||||||
// Inject the theme template
|
// Inject the theme template
|
||||||
@use "template/theme";
|
@use 'template/theme';
|
||||||
|
|
||||||
// Include theme-specific fonts
|
// Include theme-specific fonts
|
||||||
@import url("./fonts/source-sans-pro/source-sans-pro.css");
|
@import url('./fonts/source-sans-pro/source-sans-pro.css');
|
||||||
|
|
||||||
// Change text colors against light slide backgrounds
|
// Change text colors against light slide backgrounds
|
||||||
@include mixins.light-bg-text-color(#222);
|
@include mixins.light-bg-text-color(#222);
|
||||||
|
|||||||
@@ -11,54 +11,63 @@
|
|||||||
*/
|
*/
|
||||||
|
|
||||||
// Load utils
|
// Load utils
|
||||||
@use "sass:color";
|
@use 'sass:color';
|
||||||
@use "template/mixins" as mixins;
|
@use 'template/mixins' as mixins;
|
||||||
|
|
||||||
$coal: #222;
|
$coal: #222;
|
||||||
$active-color: #a23;
|
$active-color: #a23;
|
||||||
$code-background-color: #23241f;
|
$code-background-color: #23241f;
|
||||||
|
|
||||||
// Inject theme variables (with some overrides)
|
// Inject theme variables (with some overrides)
|
||||||
@use "template/settings" with (
|
@use 'template/variables' with (
|
||||||
$background-color: $coal,
|
$background-color: $coal,
|
||||||
|
|
||||||
$main-font: #{Ubuntu, 'sans-serif'},
|
$main-font: 'Ubuntu, sans-serif',
|
||||||
$main-color: #eee,
|
$main-color: #eee,
|
||||||
|
|
||||||
$heading-font: #{Ubuntu, 'sans-serif'},
|
$heading-font: 'Ubuntu, sans-serif',
|
||||||
$heading-text-shadow: 2px 2px 2px $coal,
|
$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,.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)},
|
$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: $active-color,
|
||||||
$link-color-hover: color.scale( $active-color, $lightness: 20% ),
|
$link-color-hover: color.scale($active-color, $lightness: 20%),
|
||||||
|
$selection-background-color: $active-color,
|
||||||
$selection-background-color: $active-color,
|
$selection-color: #fff
|
||||||
$selection-color: #fff
|
|
||||||
);
|
);
|
||||||
|
|
||||||
// Inject the theme template
|
// Inject the theme template
|
||||||
@use "template/theme";
|
@use 'template/theme';
|
||||||
|
|
||||||
// Fonts
|
// Fonts
|
||||||
@import url("https://fonts.googleapis.com/css?family=Ubuntu:300,700,300italic,700italic");
|
@import url('https://fonts.googleapis.com/css?family=Ubuntu:300,700,300italic,700italic');
|
||||||
|
|
||||||
// Invert text color when the background is light
|
// Invert text color when the background is light
|
||||||
@include mixins.light-bg-text-color(#222);
|
@include mixins.light-bg-text-color(#222);
|
||||||
|
|
||||||
.reveal p {
|
.reveal p {
|
||||||
font-weight: 300;
|
font-weight: 300;
|
||||||
text-shadow: 1px 1px $coal;
|
text-shadow: 1px 1px $coal;
|
||||||
}
|
}
|
||||||
|
|
||||||
section.has-light-background {
|
section.has-light-background {
|
||||||
p,
|
p,
|
||||||
h1,
|
h1,
|
||||||
h2,
|
h2,
|
||||||
h3,
|
h3,
|
||||||
h4 {
|
h4 {
|
||||||
text-shadow: none;
|
text-shadow: none;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.reveal h1,
|
.reveal h1,
|
||||||
@@ -67,15 +76,15 @@ section.has-light-background {
|
|||||||
.reveal h4,
|
.reveal h4,
|
||||||
.reveal h5,
|
.reveal h5,
|
||||||
.reveal h6 {
|
.reveal h6 {
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
}
|
}
|
||||||
|
|
||||||
.reveal p code {
|
.reveal p code {
|
||||||
background-color: $code-background-color;
|
background-color: $code-background-color;
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
border-radius: 7px;
|
border-radius: 7px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.reveal small code {
|
.reveal small code {
|
||||||
vertical-align: baseline;
|
vertical-align: baseline;
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -4,85 +4,65 @@
|
|||||||
*/
|
*/
|
||||||
|
|
||||||
// Load utils
|
// Load utils
|
||||||
@use "sass:color";
|
@use 'sass:color';
|
||||||
@use "template/mixins" as mixins;
|
@use 'template/mixins' as mixins;
|
||||||
|
|
||||||
// Include theme-specific fonts
|
// Include theme-specific fonts
|
||||||
@import url(./fonts/league-gothic/league-gothic.css);
|
$systemFontsSansSerif: -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui,
|
||||||
@import url(https://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic);
|
helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif;
|
||||||
|
$systemFontsMono: Menlo, Consolas, Monaco, Liberation Mono, Lucida Console, monospace;
|
||||||
|
|
||||||
$systemFontsSansSerif: -apple-system,
|
$background: #282a36;
|
||||||
BlinkMacSystemFont,
|
$foreground: #f8f8f2;
|
||||||
avenir next,
|
$selection: #44475a;
|
||||||
avenir,
|
$comment: #6272a4;
|
||||||
segoe ui,
|
$red: #ff5555;
|
||||||
helvetica neue,
|
$orange: #ffb86c;
|
||||||
helvetica,
|
$yellow: #f1fa8c;
|
||||||
Cantarell,
|
$green: #50fa7b;
|
||||||
Ubuntu,
|
$purple: #bd93f9;
|
||||||
roboto,
|
$cyan: #8be9fd;
|
||||||
noto,
|
$pink: #ff79c6;
|
||||||
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;
|
$mainFont: $systemFontsSansSerif;
|
||||||
$codeFont: "Fira Code", $systemFontsMono;
|
$codeFont: 'Fira Code', $systemFontsMono;
|
||||||
|
|
||||||
// Inject theme variables (with some overrides)
|
// Inject theme variables (with some overrides)
|
||||||
@use "template/settings" with (
|
@use 'template/settings' with (
|
||||||
$background-color: #191919,
|
$background-color: #191919,
|
||||||
|
|
||||||
$main-font: $mainFont,
|
$main-font: $mainFont,
|
||||||
$main-font-size: 42px,
|
$main-font-size: 42px,
|
||||||
$main-color: $foreground,
|
$main-color: $foreground,
|
||||||
|
|
||||||
$code-font: $codeFont,
|
$code-font: $codeFont,
|
||||||
|
|
||||||
$heading-color: $purple,
|
$heading-color: $purple,
|
||||||
$heading-font: $mainFont,
|
$heading-font: $mainFont,
|
||||||
$heading-font-weight: 600,
|
$heading-font-weight: 600,
|
||||||
$heading-text-transform: none,
|
$heading-text-transform: none,
|
||||||
|
|
||||||
$heading1-size: 2.5em,
|
$heading1-size: 2.5em,
|
||||||
$heading2-size: 1.6em,
|
$heading2-size: 1.6em,
|
||||||
$heading3-size: 1.3em,
|
$heading3-size: 1.3em,
|
||||||
$heading4-size: 1.0em,
|
$heading4-size: 1em,
|
||||||
|
|
||||||
$link-color: $pink,
|
$link-color: $pink,
|
||||||
$link-color-hover: $cyan,
|
$link-color-hover: $cyan,
|
||||||
|
|
||||||
$selection-color: #fff,
|
$selection-color: #fff,
|
||||||
$selection-background-color: $selection
|
$selection-background-color: $selection
|
||||||
);
|
);
|
||||||
|
|
||||||
// Inject the theme template
|
// Inject the theme template
|
||||||
@use "template/theme";
|
@use 'template/theme';
|
||||||
|
|
||||||
// Include theme-specific fonts
|
// Include theme-specific fonts
|
||||||
@import url("./fonts/source-sans-pro/source-sans-pro.css");
|
@import url('./fonts/source-sans-pro/source-sans-pro.css');
|
||||||
|
|
||||||
// Change text colors against light slide backgrounds
|
// Change text colors against light slide backgrounds
|
||||||
@include mixins.light-bg-text-color($background);
|
@include mixins.light-bg-text-color($background);
|
||||||
|
|
||||||
|
|
||||||
// Define additional color effects based on Dracula spec
|
// Define additional color effects based on Dracula spec
|
||||||
// https://spec.draculatheme.com/
|
// https://spec.draculatheme.com/
|
||||||
:root {
|
:root {
|
||||||
@@ -97,20 +77,23 @@ $codeFont: "Fira Code", $systemFontsMono;
|
|||||||
* https://draculatheme.com/contribute
|
* https://draculatheme.com/contribute
|
||||||
*/
|
*/
|
||||||
.reveal {
|
.reveal {
|
||||||
strong, b {
|
strong,
|
||||||
|
b {
|
||||||
color: var(--r-bold-color);
|
color: var(--r-bold-color);
|
||||||
}
|
}
|
||||||
em, i, blockquote {
|
em,
|
||||||
|
i,
|
||||||
|
blockquote {
|
||||||
color: var(--r-italic-color);
|
color: var(--r-italic-color);
|
||||||
}
|
}
|
||||||
code {
|
code {
|
||||||
color: var(--r-inline-code-color);
|
color: var(--r-inline-code-color);
|
||||||
}
|
}
|
||||||
// Dracula colored list bullets and numbers
|
// Dracula colored list bullets and numbers
|
||||||
ul, ol {
|
ul,
|
||||||
|
ol {
|
||||||
li::marker {
|
li::marker {
|
||||||
color: var(--r-list-bullet-color);
|
color: var(--r-list-bullet-color);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -7,25 +7,33 @@
|
|||||||
*/
|
*/
|
||||||
|
|
||||||
// Load utils
|
// Load utils
|
||||||
@use "sass:color";
|
@use 'sass:color';
|
||||||
@use "template/mixins" as mixins;
|
@use 'template/mixins' as mixins;
|
||||||
|
|
||||||
|
|
||||||
// Inject theme variables (with some overrides)
|
// Inject theme variables (with some overrides)
|
||||||
@use "template/settings" with (
|
@use 'template/settings' with (
|
||||||
$background: radial-gradient( rgba(85,90,95,1), rgba(28,30,32,1) ),
|
$background: radial-gradient(rgba(85, 90, 95, 1), rgba(28, 30, 32, 1)),
|
||||||
$background-color: rgba(28,30,32,1),
|
$background-color: rgba(28, 30, 32, 1),
|
||||||
|
$heading-text-shadow: #{0px 0px 6px rgba(0, 0, 0, 0.2)},
|
||||||
$heading-text-shadow: #{0px 0px 6px rgba(0,0,0,0.2)},
|
$heading1-text-shadow: #{0 1px 0 #ccc,
|
||||||
$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,.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)},
|
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
|
// Inject the theme template
|
||||||
@use "template/theme";
|
@use 'template/theme';
|
||||||
|
|
||||||
// Include theme-specific fonts
|
// Include theme-specific fonts
|
||||||
@import url("./fonts/league-gothic/league-gothic.css");
|
@import url('./fonts/league-gothic/league-gothic.css');
|
||||||
@import url("https://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic");
|
@import url('https://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic');
|
||||||
|
|
||||||
// Change text colors against light slide backgrounds
|
// Change text colors against light slide backgrounds
|
||||||
@include mixins.light-bg-text-color(#222);
|
@include mixins.light-bg-text-color(#222);
|
||||||
|
|||||||
@@ -4,50 +4,49 @@
|
|||||||
*/
|
*/
|
||||||
|
|
||||||
// Load utils
|
// Load utils
|
||||||
@use "sass:color";
|
@use 'sass:color';
|
||||||
@use "template/mixins" as mixins;
|
@use 'template/mixins' as mixins;
|
||||||
|
|
||||||
// Solarized colors by Ethan Schoonover
|
// Solarized colors by Ethan Schoonover
|
||||||
$base03: #002b36;
|
$base03: #002b36;
|
||||||
$base02: #073642;
|
$base02: #073642;
|
||||||
$base01: #586e75;
|
$base01: #586e75;
|
||||||
$base00: #657b83;
|
$base00: #657b83;
|
||||||
$base0: #839496;
|
$base0: #839496;
|
||||||
$base1: #93a1a1;
|
$base1: #93a1a1;
|
||||||
$base2: #eee8d5;
|
$base2: #eee8d5;
|
||||||
$base3: #fdf6e3;
|
$base3: #fdf6e3;
|
||||||
$yellow: #b58900;
|
$yellow: #b58900;
|
||||||
$orange: #cb4b16;
|
$orange: #cb4b16;
|
||||||
$red: #dc322f;
|
$red: #dc322f;
|
||||||
$magenta: #d33682;
|
$magenta: #d33682;
|
||||||
$violet: #6c71c4;
|
$violet: #6c71c4;
|
||||||
$blue: #268bd2;
|
$blue: #268bd2;
|
||||||
$cyan: #2aa198;
|
$cyan: #2aa198;
|
||||||
$green: #859900;;
|
$green: #859900;
|
||||||
|
|
||||||
$active-color: $blue;
|
$active-color: $blue;
|
||||||
|
|
||||||
// Inject theme variables (with some overrides)
|
// Inject theme variables (with some overrides)
|
||||||
@use "template/settings" with (
|
@use 'template/settings' with (
|
||||||
$background-color: $base03,
|
$background-color: $base03,
|
||||||
|
|
||||||
$main-color: $base1,
|
$main-color: $base1,
|
||||||
$heading-color: $base2,
|
$heading-color: $base2,
|
||||||
|
|
||||||
$link-color: $active-color,
|
$link-color: $active-color,
|
||||||
$link-color-hover: color.scale( $active-color, $lightness: 20% ),
|
$link-color-hover: color.scale($active-color, $lightness: 20%),
|
||||||
|
$selection-color: #fff,
|
||||||
$selection-color: #fff,
|
$selection-background-color: $magenta
|
||||||
$selection-background-color: $magenta
|
|
||||||
);
|
);
|
||||||
|
|
||||||
// Inject the theme template
|
// Inject the theme template
|
||||||
@use "template/theme";
|
@use 'template/theme';
|
||||||
|
|
||||||
// Include theme-specific fonts
|
// Include theme-specific fonts
|
||||||
// Include theme-specific fonts
|
// Include theme-specific fonts
|
||||||
@import url("./fonts/league-gothic/league-gothic.css");
|
@import url('./fonts/league-gothic/league-gothic.css');
|
||||||
@import url("https://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic");
|
@import url('https://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic');
|
||||||
|
|
||||||
// Change text colors against light slide backgrounds
|
// Change text colors against light slide backgrounds
|
||||||
@include mixins.light-bg-text-color(#222);
|
@include mixins.light-bg-text-color(#222);
|
||||||
|
|||||||
@@ -5,36 +5,35 @@
|
|||||||
*/
|
*/
|
||||||
|
|
||||||
// Load utils
|
// Load utils
|
||||||
@use "sass:color";
|
@use 'sass:color';
|
||||||
@use "template/mixins" as mixins;
|
@use 'template/mixins' as mixins;
|
||||||
|
|
||||||
$active-color: #e7ad52;
|
$active-color: #e7ad52;
|
||||||
|
|
||||||
// Inject theme variables (with some overrides)
|
// Inject theme variables (with some overrides)
|
||||||
@use "template/settings" with (
|
@use 'template/settings' with (
|
||||||
$background-color: #111,
|
$background-color: #111,
|
||||||
|
|
||||||
$main-font: #{'Open Sans', sans-serif},
|
$main-font: "'Open Sans', sans-serif",
|
||||||
$main-color: #fff,
|
$main-color: #fff,
|
||||||
|
|
||||||
$heading-color: #fff,
|
$heading-color: #fff,
|
||||||
$heading-font: #{'Montserrat', Impact, sans-serif},
|
$heading-font: "'Montserrat', Impact, sans-serif",
|
||||||
$heading-text-transform: none,
|
$heading-text-transform: none,
|
||||||
$heading-letter-spacing: -0.03em,
|
$heading-letter-spacing: -0.03em,
|
||||||
|
|
||||||
$link-color: $active-color,
|
$link-color: $active-color,
|
||||||
$link-color-hover: color.scale( $active-color, $lightness: 20% ),
|
$link-color-hover: color.scale($active-color, $lightness: 20%),
|
||||||
|
$selection-color: #111,
|
||||||
$selection-color: #111,
|
$selection-background-color: $active-color
|
||||||
$selection-background-color: $active-color
|
|
||||||
);
|
);
|
||||||
|
|
||||||
// Inject the theme template
|
// Inject the theme template
|
||||||
@use "template/theme";
|
@use 'template/theme';
|
||||||
|
|
||||||
// Include theme-specific fonts
|
// Include theme-specific fonts
|
||||||
@import url("https://fonts.googleapis.com/css?family=Montserrat:700");
|
@import url('https://fonts.googleapis.com/css?family=Montserrat:700');
|
||||||
@import url("https://fonts.googleapis.com/css?family=Open+Sans:400,700,400italic,700italic");
|
@import url('https://fonts.googleapis.com/css?family=Open+Sans:400,700,400italic,700italic');
|
||||||
|
|
||||||
// Change text colors against light slide backgrounds
|
// Change text colors against light slide backgrounds
|
||||||
@include mixins.light-bg-text-color(#222);
|
@include mixins.light-bg-text-color(#222);
|
||||||
|
|||||||
@@ -6,43 +6,42 @@
|
|||||||
*/
|
*/
|
||||||
|
|
||||||
// Load utils
|
// Load utils
|
||||||
@use "sass:color";
|
@use 'sass:color';
|
||||||
@use "template/mixins" as mixins;
|
@use 'template/mixins' as mixins;
|
||||||
|
|
||||||
$active-color: #51483D;
|
$active-color: #51483d;
|
||||||
|
|
||||||
// Inject theme variables (with some overrides)
|
// Inject theme variables (with some overrides)
|
||||||
@use "template/settings" with (
|
@use 'template/settings' with (
|
||||||
$background-color: #F0F1EB,
|
$background-color: #f0f1eb,
|
||||||
|
|
||||||
$main-font: #{'Palatino Linotype', 'Book Antiqua', Palatino, FreeSerif, serif},
|
$main-font: "'Palatino Linotype', 'Book Antiqua', Palatino, FreeSerif, serif",
|
||||||
$main-font-size: 42px,
|
$main-font-size: 42px,
|
||||||
$main-color: #000,
|
$main-color: #000,
|
||||||
|
|
||||||
$heading-color: #383D3D,
|
$heading-color: #383d3d,
|
||||||
$heading-font: #{'Palatino Linotype', 'Book Antiqua', Palatino, FreeSerif, serif},
|
$heading-font: "'Palatino Linotype', 'Book Antiqua', Palatino, FreeSerif, serif",
|
||||||
$heading-font-weight: 600,
|
$heading-font-weight: 600,
|
||||||
$heading-text-transform: none,
|
$heading-text-transform: none,
|
||||||
|
|
||||||
$link-color: $active-color,
|
$link-color: $active-color,
|
||||||
$link-color-hover: color.scale( $active-color, $lightness: 25% ),
|
$link-color-hover: color.scale($active-color, $lightness: 25%),
|
||||||
|
$selection-color: #fff,
|
||||||
|
$selection-background-color: $active-color,
|
||||||
|
|
||||||
$selection-color: #fff,
|
$overlay-element-bg-color: '0 0 0',
|
||||||
$selection-background-color: $active-color,
|
$overlay-element-fg-color: '240 240 240'
|
||||||
|
|
||||||
$overlay-element-bg-color: #{0, 0, 0},
|
|
||||||
$overlay-element-fg-color: #{240, 240, 240}
|
|
||||||
);
|
);
|
||||||
|
|
||||||
// Inject the theme template
|
// Inject the theme template
|
||||||
@use "template/theme";
|
@use 'template/theme';
|
||||||
|
|
||||||
// Include theme-specific fonts
|
// Include theme-specific fonts
|
||||||
@import url("./fonts/source-sans-pro/source-sans-pro.css");
|
@import url('./fonts/source-sans-pro/source-sans-pro.css');
|
||||||
|
|
||||||
// Change text colors against light slide backgrounds
|
// Change text colors against light slide backgrounds
|
||||||
@include mixins.dark-bg-text-color(#fff);
|
@include mixins.dark-bg-text-color(#fff);
|
||||||
|
|
||||||
.reveal a {
|
.reveal a {
|
||||||
line-height: 1.3em;
|
line-height: 1.3em;
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -7,43 +7,42 @@
|
|||||||
*/
|
*/
|
||||||
|
|
||||||
// Load utils
|
// Load utils
|
||||||
@use "sass:color";
|
@use 'sass:color';
|
||||||
@use "template/mixins" as mixins;
|
@use 'template/mixins' as mixins;
|
||||||
|
|
||||||
$active-color: #00008B;
|
$active-color: #00008b;
|
||||||
|
|
||||||
// Inject theme variables (with some overrides)
|
// Inject theme variables (with some overrides)
|
||||||
@use "template/settings" with (
|
@use 'template/settings' with (
|
||||||
$background-color: #fff,
|
$background-color: #fff,
|
||||||
|
|
||||||
$main-color: #000,
|
$main-color: #000,
|
||||||
$main-font: #{'Lato', sans-serif},
|
$main-font: "'Lato', sans-serif",
|
||||||
|
|
||||||
$heading-color: #000,
|
$heading-color: #000,
|
||||||
$heading-font: #{'News Cycle', Impact, sans-serif},
|
$heading-font: "'News Cycle', Impact, sans-serif",
|
||||||
$heading-font-weight: 600,
|
$heading-font-weight: 600,
|
||||||
|
|
||||||
$heading1-size: 2.5em,
|
$heading1-size: 2.5em,
|
||||||
$heading2-size: 1.6em,
|
$heading2-size: 1.6em,
|
||||||
$heading3-size: 1.3em,
|
$heading3-size: 1.3em,
|
||||||
$heading4-size: 1.0em,
|
$heading4-size: 1em,
|
||||||
|
|
||||||
$link-color: $active-color,
|
$link-color: $active-color,
|
||||||
$link-color-hover: color.scale( $active-color, $lightness: 20% ),
|
$link-color-hover: color.scale($active-color, $lightness: 20%),
|
||||||
|
$selection-color: #fff,
|
||||||
|
$selection-background-color: $active-color,
|
||||||
|
|
||||||
$selection-color: #fff,
|
$overlay-element-bg-color: '0, 0, 0',
|
||||||
$selection-background-color: $active-color,
|
$overlay-element-fg-color: '240, 240, 240'
|
||||||
|
|
||||||
$overlay-element-bg-color: #{0, 0, 0},
|
|
||||||
$overlay-element-fg-color: #{240, 240, 240}
|
|
||||||
);
|
);
|
||||||
|
|
||||||
// Inject the theme template
|
// Inject the theme template
|
||||||
@use "template/theme";
|
@use 'template/theme';
|
||||||
|
|
||||||
// Include theme-specific fonts
|
// Include theme-specific fonts
|
||||||
@import url("https://fonts.googleapis.com/css?family=News+Cycle:400,700");
|
@import url('https://fonts.googleapis.com/css?family=News+Cycle:400,700');
|
||||||
@import url("https://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic");
|
@import url('https://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic');
|
||||||
|
|
||||||
// Change text when the background is inverted
|
// Change text when the background is inverted
|
||||||
@include mixins.dark-bg-text-color(#fff);
|
@include mixins.dark-bg-text-color(#fff);
|
||||||
|
|||||||
@@ -5,39 +5,38 @@
|
|||||||
*/
|
*/
|
||||||
|
|
||||||
// Load utils
|
// Load utils
|
||||||
@use "sass:color";
|
@use 'sass:color';
|
||||||
@use "template/mixins" as mixins;
|
@use 'template/mixins' as mixins;
|
||||||
|
|
||||||
$active-color: #2a76dd;
|
$active-color: #2a76dd;
|
||||||
|
|
||||||
// Inject theme variables (with some overrides)
|
// Inject theme variables (with some overrides)
|
||||||
@use "template/settings" with (
|
@use 'template/settings' with (
|
||||||
$background: radial-gradient( #f7fbfc, #add9e4 ),
|
$background: radial-gradient(#f7fbfc, #add9e4),
|
||||||
$background-color: #f7fbfc,
|
$background-color: #f7fbfc,
|
||||||
|
|
||||||
$main-color: #333,
|
$main-color: #333,
|
||||||
$main-font: #{'Open Sans', sans-serif},
|
$main-font: "'Open Sans', sans-serif",
|
||||||
|
|
||||||
$heading-color: #333,
|
$heading-color: #333,
|
||||||
$heading-font: #{'Quicksand', sans-serif},
|
$heading-font: "'Quicksand', sans-serif",
|
||||||
$heading-letter-spacing: -0.05em,
|
$heading-letter-spacing: -0.05em,
|
||||||
|
|
||||||
$link-color: $active-color,
|
$link-color: $active-color,
|
||||||
$link-color-hover: color.scale( $active-color, $lightness: 15% ),
|
$link-color-hover: color.scale($active-color, $lightness: 15%),
|
||||||
|
$selection-color: #fff,
|
||||||
|
$selection-background-color: $active-color,
|
||||||
|
|
||||||
$selection-color: #fff,
|
$overlay-element-bg-color: '0 0 0',
|
||||||
$selection-background-color: $active-color,
|
$overlay-element-fg-color: '240 240 240'
|
||||||
|
|
||||||
$overlay-element-bg-color: #{0, 0, 0},
|
|
||||||
$overlay-element-fg-color: #{240, 240, 240}
|
|
||||||
);
|
);
|
||||||
|
|
||||||
// Inject the theme template
|
// Inject the theme template
|
||||||
@use "template/theme";
|
@use 'template/theme';
|
||||||
|
|
||||||
// Include theme-specific fonts
|
// 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=Quicksand:400,700,400italic,700italic');
|
||||||
@import url("https://fonts.googleapis.com/css?family=Open+Sans:400italic,700italic,400,700");
|
@import url('https://fonts.googleapis.com/css?family=Open+Sans:400italic,700italic,400,700');
|
||||||
|
|
||||||
// Change text when the background is inverted
|
// Change text when the background is inverted
|
||||||
@include mixins.dark-bg-text-color(#fff);
|
@include mixins.dark-bg-text-color(#fff);
|
||||||
|
|||||||
@@ -4,52 +4,51 @@
|
|||||||
*/
|
*/
|
||||||
|
|
||||||
// Load utils
|
// Load utils
|
||||||
@use "sass:color";
|
@use 'sass:color';
|
||||||
@use "template/mixins" as mixins;
|
@use 'template/mixins' as mixins;
|
||||||
|
|
||||||
// Solarized colors by Ethan Schoonover
|
// Solarized colors by Ethan Schoonover
|
||||||
$base03: #002b36;
|
$base03: #002b36;
|
||||||
$base02: #073642;
|
$base02: #073642;
|
||||||
$base01: #586e75;
|
$base01: #586e75;
|
||||||
$base00: #657b83;
|
$base00: #657b83;
|
||||||
$base0: #839496;
|
$base0: #839496;
|
||||||
$base1: #93a1a1;
|
$base1: #93a1a1;
|
||||||
$base2: #eee8d5;
|
$base2: #eee8d5;
|
||||||
$base3: #fdf6e3;
|
$base3: #fdf6e3;
|
||||||
$yellow: #b58900;
|
$yellow: #b58900;
|
||||||
$orange: #cb4b16;
|
$orange: #cb4b16;
|
||||||
$red: #dc322f;
|
$red: #dc322f;
|
||||||
$magenta: #d33682;
|
$magenta: #d33682;
|
||||||
$violet: #6c71c4;
|
$violet: #6c71c4;
|
||||||
$blue: #268bd2;
|
$blue: #268bd2;
|
||||||
$cyan: #2aa198;
|
$cyan: #2aa198;
|
||||||
$green: #859900;
|
$green: #859900;
|
||||||
|
|
||||||
$active-color: $blue;
|
$active-color: $blue;
|
||||||
|
|
||||||
// Inject theme variables (with some overrides)
|
// Inject theme variables (with some overrides)
|
||||||
@use "template/settings" with (
|
@use 'template/settings' with (
|
||||||
$background-color: $base3,
|
$background-color: $base3,
|
||||||
|
|
||||||
$main-color: $base00,
|
$main-color: $base00,
|
||||||
$heading-color: $base01,
|
$heading-color: $base01,
|
||||||
|
|
||||||
$link-color: $active-color,
|
$link-color: $active-color,
|
||||||
$link-color-hover: color.scale( $active-color, $lightness: 20% ),
|
$link-color-hover: color.scale($active-color, $lightness: 20%),
|
||||||
|
$selection-color: #fff,
|
||||||
|
$selection-background-color: $magenta,
|
||||||
|
|
||||||
$selection-color: #fff,
|
$overlay-element-bg-color: '0 0 0',
|
||||||
$selection-background-color: $magenta,
|
$overlay-element-fg-color: '240 240 240'
|
||||||
|
|
||||||
$overlay-element-bg-color: #{0, 0, 0},
|
|
||||||
$overlay-element-fg-color: #{240, 240, 240}
|
|
||||||
);
|
);
|
||||||
|
|
||||||
// Inject the theme template
|
// Inject the theme template
|
||||||
@use "template/theme";
|
@use 'template/theme';
|
||||||
|
|
||||||
// Include theme-specific fonts
|
// Include theme-specific fonts
|
||||||
@import url("./fonts/league-gothic/league-gothic.css");
|
@import url('./fonts/league-gothic/league-gothic.css');
|
||||||
@import url("https://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic");
|
@import url('https://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic');
|
||||||
|
|
||||||
// Change text when the background is inverted
|
// Change text when the background is inverted
|
||||||
@include mixins.dark-bg-text-color(#fff);
|
@include mixins.dark-bg-text-color(#fff);
|
||||||
|
|||||||
@@ -1,15 +1,27 @@
|
|||||||
@mixin light-bg-text-color( $color ) {
|
@mixin light-bg-text-color($color) {
|
||||||
section.has-light-background {
|
section.has-light-background {
|
||||||
&, h1, h2, h3, h4, h5, h6 {
|
&,
|
||||||
|
h1,
|
||||||
|
h2,
|
||||||
|
h3,
|
||||||
|
h4,
|
||||||
|
h5,
|
||||||
|
h6 {
|
||||||
color: $color;
|
color: $color;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@mixin dark-bg-text-color( $color ) {
|
@mixin dark-bg-text-color($color) {
|
||||||
section.has-dark-background {
|
section.has-dark-background {
|
||||||
&, h1, h2, h3, h4, h5, h6 {
|
&,
|
||||||
|
h1,
|
||||||
|
h2,
|
||||||
|
h3,
|
||||||
|
h4,
|
||||||
|
h5,
|
||||||
|
h6 {
|
||||||
color: $color;
|
color: $color;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -32,12 +32,12 @@ $heading1-text-shadow: none !default;
|
|||||||
$heading1-size: 3.77em !default;
|
$heading1-size: 3.77em !default;
|
||||||
$heading2-size: 2.11em !default;
|
$heading2-size: 2.11em !default;
|
||||||
$heading3-size: 1.55em !default;
|
$heading3-size: 1.55em !default;
|
||||||
$heading4-size: 1.00em !default;
|
$heading4-size: 1em !default;
|
||||||
|
|
||||||
$code-font: monospace !default;
|
$code-font: monospace !default;
|
||||||
|
|
||||||
// Links and actions
|
// Links and actions
|
||||||
$link-color: #13DAEC !default;
|
$link-color: #13daec !default;
|
||||||
$link-color-dark: color.scale($link-color, $lightness: -15%) !default;
|
$link-color-dark: color.scale($link-color, $lightness: -15%) !default;
|
||||||
$link-color-hover: color.scale($link-color, $lightness: 20%) !default;
|
$link-color-hover: color.scale($link-color, $lightness: 20%) !default;
|
||||||
|
|
||||||
@@ -52,47 +52,47 @@ $overlay-element-fg-color: 0, 0, 0 !default;
|
|||||||
|
|
||||||
// Expose all variables to the DOM
|
// Expose all variables to the DOM
|
||||||
:root {
|
:root {
|
||||||
// Background of the presentation
|
// Background of the presentation
|
||||||
--r-background: #{$background};
|
--r-background: #{$background};
|
||||||
--r-background-color: #{$background-color};
|
--r-background-color: #{$background-color};
|
||||||
|
|
||||||
// Primary/body text
|
// Primary/body text
|
||||||
--r-main-font: #{$main-font};
|
--r-main-font: #{$main-font};
|
||||||
--r-main-font-size: #{$main-font-size};
|
--r-main-font-size: #{$main-font-size};
|
||||||
--r-main-color: #{$main-color};
|
--r-main-color: #{$main-color};
|
||||||
|
|
||||||
// Vertical spacing between blocks of text
|
// Vertical spacing between blocks of text
|
||||||
--r-block-margin: #{$block-margin};
|
--r-block-margin: #{$block-margin};
|
||||||
|
|
||||||
// Headings
|
// Headings
|
||||||
--r-heading-margin: #{$heading-margin};
|
--r-heading-margin: #{$heading-margin};
|
||||||
--r-heading-font: #{$heading-font};
|
--r-heading-font: #{$heading-font};
|
||||||
--r-heading-color: #{$heading-color};
|
--r-heading-color: #{$heading-color};
|
||||||
--r-heading-line-height: #{$heading-line-height};
|
--r-heading-line-height: #{$heading-line-height};
|
||||||
--r-heading-letter-spacing: #{$heading-letter-spacing};
|
--r-heading-letter-spacing: #{$heading-letter-spacing};
|
||||||
--r-heading-text-transform: #{$heading-text-transform};
|
--r-heading-text-transform: #{$heading-text-transform};
|
||||||
--r-heading-text-shadow: #{$heading-text-shadow};
|
--r-heading-text-shadow: #{$heading-text-shadow};
|
||||||
--r-heading-font-weight: #{$heading-font-weight};
|
--r-heading-font-weight: #{$heading-font-weight};
|
||||||
--r-heading1-text-shadow: #{$heading1-text-shadow};
|
--r-heading1-text-shadow: #{$heading1-text-shadow};
|
||||||
|
|
||||||
--r-heading1-size: #{$heading1-size};
|
--r-heading1-size: #{$heading1-size};
|
||||||
--r-heading2-size: #{$heading2-size};
|
--r-heading2-size: #{$heading2-size};
|
||||||
--r-heading3-size: #{$heading3-size};
|
--r-heading3-size: #{$heading3-size};
|
||||||
--r-heading4-size: #{$heading4-size};
|
--r-heading4-size: #{$heading4-size};
|
||||||
|
|
||||||
--r-code-font: #{$code-font};
|
--r-code-font: #{$code-font};
|
||||||
|
|
||||||
// Links and actions
|
// Links and actions
|
||||||
--r-link-color: #{$link-color};
|
--r-link-color: #{$link-color};
|
||||||
--r-link-color-dark: #{$link-color-dark};
|
--r-link-color-dark: #{$link-color-dark};
|
||||||
--r-link-color-hover: #{$link-color-hover};
|
--r-link-color-hover: #{$link-color-hover};
|
||||||
|
|
||||||
// Text selection
|
// Text selection
|
||||||
--r-selection-background-color: #{$selection-background-color};
|
--r-selection-background-color: #{$selection-background-color};
|
||||||
--r-selection-color: #{$selection-color};
|
--r-selection-color: #{$selection-color};
|
||||||
|
|
||||||
// Colors used for UI elements that are overlaid on top of
|
// Colors used for UI elements that are overlaid on top of
|
||||||
// the presentation
|
// the presentation
|
||||||
--r-overlay-element-bg-color: #{$overlay-element-bg-color};
|
--r-overlay-element-bg-color: #{$overlay-element-bg-color};
|
||||||
--r-overlay-element-fg-color: #{$overlay-element-fg-color};
|
--r-overlay-element-fg-color: #{$overlay-element-fg-color};
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -29,7 +29,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.reveal .slides section,
|
.reveal .slides section,
|
||||||
.reveal .slides section>section {
|
.reveal .slides section > section {
|
||||||
line-height: 1.3;
|
line-height: 1.3;
|
||||||
font-weight: inherit;
|
font-weight: inherit;
|
||||||
}
|
}
|
||||||
@@ -58,16 +58,23 @@
|
|||||||
word-wrap: break-word;
|
word-wrap: break-word;
|
||||||
}
|
}
|
||||||
|
|
||||||
.reveal h1 {font-size: var(--r-heading1-size); }
|
.reveal h1 {
|
||||||
.reveal h2 {font-size: var(--r-heading2-size); }
|
font-size: var(--r-heading1-size);
|
||||||
.reveal h3 {font-size: var(--r-heading3-size); }
|
}
|
||||||
.reveal h4 {font-size: var(--r-heading4-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 {
|
.reveal h1 {
|
||||||
text-shadow: var(--r-heading1-text-shadow);
|
text-shadow: var(--r-heading1-text-shadow);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
/*********************************************
|
/*********************************************
|
||||||
* OTHER
|
* OTHER
|
||||||
*********************************************/
|
*********************************************/
|
||||||
@@ -153,12 +160,12 @@
|
|||||||
|
|
||||||
font-style: italic;
|
font-style: italic;
|
||||||
background: rgba(255, 255, 255, 0.05);
|
background: rgba(255, 255, 255, 0.05);
|
||||||
box-shadow: 0px 0px 2px rgba(0,0,0,0.2);
|
box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.2);
|
||||||
|
}
|
||||||
|
.reveal blockquote p:first-child,
|
||||||
|
.reveal blockquote p:last-child {
|
||||||
|
display: inline-block;
|
||||||
}
|
}
|
||||||
.reveal blockquote p:first-child,
|
|
||||||
.reveal blockquote p:last-child {
|
|
||||||
display: inline-block;
|
|
||||||
}
|
|
||||||
|
|
||||||
.reveal q {
|
.reveal q {
|
||||||
font-style: italic;
|
font-style: italic;
|
||||||
@@ -219,13 +226,13 @@
|
|||||||
border-bottom: 1px solid;
|
border-bottom: 1px solid;
|
||||||
}
|
}
|
||||||
|
|
||||||
.reveal table th[align="center"],
|
.reveal table th[align='center'],
|
||||||
.reveal table td[align="center"] {
|
.reveal table td[align='center'] {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
.reveal table th[align="right"],
|
.reveal table th[align='right'],
|
||||||
.reveal table td[align="right"] {
|
.reveal table td[align='right'] {
|
||||||
text-align: right;
|
text-align: right;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -258,7 +265,6 @@
|
|||||||
margin: var(--r-block-margin) 0;
|
margin: var(--r-block-margin) 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
/*********************************************
|
/*********************************************
|
||||||
* LINKS
|
* LINKS
|
||||||
*********************************************/
|
*********************************************/
|
||||||
@@ -266,21 +272,20 @@
|
|||||||
.reveal a {
|
.reveal a {
|
||||||
color: var(--r-link-color);
|
color: var(--r-link-color);
|
||||||
text-decoration: none;
|
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 {
|
.reveal .roll span:after {
|
||||||
color: #fff;
|
color: #fff;
|
||||||
|
// background: darken( var(--r-link-color), 15% );
|
||||||
background: var(--r-link-color-dark);
|
background: var(--r-link-color-dark);
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
/*********************************************
|
/*********************************************
|
||||||
* Frame helper
|
* Frame helper
|
||||||
*********************************************/
|
*********************************************/
|
||||||
@@ -291,7 +296,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.reveal a .r-frame {
|
.reveal a .r-frame {
|
||||||
transition: all .15s linear;
|
transition: all 0.15s linear;
|
||||||
}
|
}
|
||||||
|
|
||||||
.reveal a:hover .r-frame {
|
.reveal a:hover .r-frame {
|
||||||
@@ -299,7 +304,6 @@
|
|||||||
box-shadow: 0 0 20px rgba(0, 0, 0, 0.55);
|
box-shadow: 0 0 20px rgba(0, 0, 0, 0.55);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
/*********************************************
|
/*********************************************
|
||||||
* NAVIGATION CONTROLS
|
* NAVIGATION CONTROLS
|
||||||
*********************************************/
|
*********************************************/
|
||||||
@@ -308,21 +312,20 @@
|
|||||||
color: var(--r-link-color);
|
color: var(--r-link-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
/*********************************************
|
/*********************************************
|
||||||
* PROGRESS BAR
|
* PROGRESS BAR
|
||||||
*********************************************/
|
*********************************************/
|
||||||
|
|
||||||
.reveal .progress {
|
.reveal .progress {
|
||||||
background: rgba(0,0,0,0.2);
|
background: rgba(0, 0, 0, 0.2);
|
||||||
color: var(--r-link-color);
|
color: var(--r-link-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
/*********************************************
|
/*********************************************
|
||||||
* PRINT BACKGROUND
|
* PRINT BACKGROUND
|
||||||
*********************************************/
|
*********************************************/
|
||||||
@media print {
|
@media print {
|
||||||
.backgrounds {
|
.backgrounds {
|
||||||
background-color: var(--r-background-color);
|
background-color: var(--r-background-color);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -8,43 +8,42 @@
|
|||||||
*/
|
*/
|
||||||
|
|
||||||
// Load utils
|
// Load utils
|
||||||
@use "sass:color";
|
@use 'sass:color';
|
||||||
@use "template/mixins" as mixins;
|
@use 'template/mixins' as mixins;
|
||||||
|
|
||||||
$active-color: #2a76dd;
|
$active-color: #2a76dd;
|
||||||
|
|
||||||
// Inject theme variables (with some overrides)
|
// Inject theme variables (with some overrides)
|
||||||
@use "template/settings" with (
|
@use 'template/settings' with (
|
||||||
$background-color: #fff,
|
$background-color: #fff,
|
||||||
|
|
||||||
$main-font: "'Source Sans Pro', Helvetica, sans-serif",
|
$main-font: "'Source Sans Pro', Helvetica, sans-serif",
|
||||||
$main-font-size: 42px,
|
$main-font-size: 42px,
|
||||||
$main-color: #000,
|
$main-color: #000,
|
||||||
|
|
||||||
$heading-color: #000,
|
$heading-color: #000,
|
||||||
$heading-font: "'Source Sans Pro', Helvetica, sans-serif",
|
$heading-font: "'Source Sans Pro', Helvetica, sans-serif",
|
||||||
$heading-font-weight: 600,
|
$heading-font-weight: 600,
|
||||||
|
|
||||||
$heading1-size: 2.5em,
|
$heading1-size: 2.5em,
|
||||||
$heading2-size: 1.6em,
|
$heading2-size: 1.6em,
|
||||||
$heading3-size: 1.3em,
|
$heading3-size: 1.3em,
|
||||||
$heading4-size: 1.0em,
|
$heading4-size: 1em,
|
||||||
|
|
||||||
$link-color: $active-color,
|
$link-color: $active-color,
|
||||||
$link-color-hover: color.scale( $active-color, $lightness: 15% ),
|
$link-color-hover: color.scale($active-color, $lightness: 15%),
|
||||||
|
$selection-color: #fff,
|
||||||
|
$selection-background-color: $active-color,
|
||||||
|
|
||||||
$selection-color: #fff,
|
$overlay-element-bg-color: '0, 0, 0',
|
||||||
$selection-background-color: $active-color,
|
$overlay-element-fg-color: '240, 240, 240'
|
||||||
|
|
||||||
$overlay-element-bg-color: "0, 0, 0",
|
|
||||||
$overlay-element-fg-color: "240, 240, 240"
|
|
||||||
);
|
);
|
||||||
|
|
||||||
// Inject the theme template
|
// Inject the theme template
|
||||||
@use "template/theme";
|
@use 'template/theme';
|
||||||
|
|
||||||
// Include theme-specific fonts
|
// Include theme-specific fonts
|
||||||
@import url("./fonts/source-sans-pro/source-sans-pro.css");
|
@import url('./fonts/source-sans-pro/source-sans-pro.css');
|
||||||
|
|
||||||
// Change text when the background is inverted
|
// Change text when the background is inverted
|
||||||
@include mixins.dark-bg-text-color(#fff);
|
@include mixins.dark-bg-text-color(#fff);
|
||||||
|
|||||||
@@ -5,43 +5,42 @@
|
|||||||
*/
|
*/
|
||||||
|
|
||||||
// Load utils
|
// Load utils
|
||||||
@use "sass:color";
|
@use 'sass:color';
|
||||||
@use "template/mixins" as mixins;
|
@use 'template/mixins' as mixins;
|
||||||
|
|
||||||
$active-color: #2a76dd;
|
$active-color: #2a76dd;
|
||||||
|
|
||||||
// Inject theme variables (with some overrides)
|
// Inject theme variables (with some overrides)
|
||||||
@use "template/settings" with (
|
@use 'template/settings' with (
|
||||||
$background-color: #fff,
|
$background-color: #fff,
|
||||||
|
|
||||||
$main-color: #222,
|
$main-color: #222,
|
||||||
$main-font: #{'Source Sans Pro', Helvetica, sans-serif},
|
$main-font: "'Source Sans Pro', Helvetica, sans-serif",
|
||||||
$main-font-size: 42px,
|
$main-font-size: 42px,
|
||||||
|
|
||||||
$heading-color: #222,
|
$heading-color: #222,
|
||||||
$heading-font: #{'Source Sans Pro', Helvetica, sans-serif},
|
$heading-font: "'Source Sans Pro', Helvetica, sans-serif",
|
||||||
$heading-font-weight: 600,
|
$heading-font-weight: 600,
|
||||||
|
|
||||||
$heading1-size: 2.5em,
|
$heading1-size: 2.5em,
|
||||||
$heading2-size: 1.6em,
|
$heading2-size: 1.6em,
|
||||||
$heading3-size: 1.3em,
|
$heading3-size: 1.3em,
|
||||||
$heading4-size: 1.0em,
|
$heading4-size: 1em,
|
||||||
|
|
||||||
$link-color: $active-color,
|
$link-color: $active-color,
|
||||||
$link-color-hover: color.scale( $active-color, $lightness: 15% ),
|
$link-color-hover: color.scale($active-color, $lightness: 15%),
|
||||||
|
$selection-color: #fff,
|
||||||
|
$selection-background-color: $active-color,
|
||||||
|
|
||||||
$selection-color: #fff,
|
$overlay-element-bg-color: '0 0 0',
|
||||||
$selection-background-color: $active-color,
|
$overlay-element-fg-color: '240 240 240'
|
||||||
|
|
||||||
$overlay-element-bg-color: #{0, 0, 0},
|
|
||||||
$overlay-element-fg-color: #{240, 240, 240}
|
|
||||||
);
|
);
|
||||||
|
|
||||||
// Inject the theme template
|
// Inject the theme template
|
||||||
@use "template/theme";
|
@use 'template/theme';
|
||||||
|
|
||||||
// Include theme-specific fonts
|
// Include theme-specific fonts
|
||||||
@import url("./fonts/source-sans-pro/source-sans-pro.css");
|
@import url('./fonts/source-sans-pro/source-sans-pro.css');
|
||||||
|
|
||||||
// Change text when the background is inverted
|
// Change text when the background is inverted
|
||||||
@include mixins.dark-bg-text-color(#fff);
|
@include mixins.dark-bg-text-color(#fff);
|
||||||
|
|||||||
1442
js/config.ts
1442
js/config.ts
File diff suppressed because it is too large
Load Diff
24
js/index.ts
24
js/index.ts
@@ -14,8 +14,8 @@ import Deck, { VERSION } from './reveal.js';
|
|||||||
* });
|
* });
|
||||||
*/
|
*/
|
||||||
let Reveal: {
|
let Reveal: {
|
||||||
initialize: (options?: Config) => Promise<void>;
|
initialize: (options?: Config) => Promise<void>;
|
||||||
[key: string]: any;
|
[key: string]: any;
|
||||||
} = Deck;
|
} = Deck;
|
||||||
|
|
||||||
/**
|
/**
|
||||||
@@ -35,13 +35,13 @@ type RevealApiFunction = (...args: any[]) => any;
|
|||||||
let enqueuedAPICalls: RevealApiFunction[] = [];
|
let enqueuedAPICalls: RevealApiFunction[] = [];
|
||||||
|
|
||||||
Reveal.initialize = (options?: Config) => {
|
Reveal.initialize = (options?: Config) => {
|
||||||
// Create our singleton reveal.js instance
|
// Create our singleton reveal.js instance
|
||||||
Object.assign(Reveal, new Deck(document.querySelector('.reveal'), options));
|
Object.assign(Reveal, new Deck(document.querySelector('.reveal'), options));
|
||||||
|
|
||||||
// Invoke any enqueued API calls
|
// Invoke any enqueued API calls
|
||||||
enqueuedAPICalls.map((method) => method(Reveal));
|
enqueuedAPICalls.map((method) => method(Reveal));
|
||||||
|
|
||||||
return Reveal.initialize();
|
return Reveal.initialize();
|
||||||
};
|
};
|
||||||
|
|
||||||
/**
|
/**
|
||||||
@@ -51,11 +51,11 @@ Reveal.initialize = (options?: Config) => {
|
|||||||
* of them when Reveal.initialize is called.
|
* of them when Reveal.initialize is called.
|
||||||
*/
|
*/
|
||||||
['configure', 'on', 'off', 'addEventListener', 'removeEventListener', 'registerPlugin'].forEach(
|
['configure', 'on', 'off', 'addEventListener', 'removeEventListener', 'registerPlugin'].forEach(
|
||||||
(method) => {
|
(method) => {
|
||||||
Reveal[method] = (...args: any) => {
|
Reveal[method] = (...args: any) => {
|
||||||
enqueuedAPICalls.push((deck) => deck[method].call(null, ...args));
|
enqueuedAPICalls.push((deck) => deck[method].call(null, ...args));
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
);
|
);
|
||||||
|
|
||||||
Reveal.isReady = () => false;
|
Reveal.isReady = () => false;
|
||||||
|
|||||||
252
package.json
252
package.json
@@ -1,128 +1,128 @@
|
|||||||
{
|
{
|
||||||
"name": "reveal.js",
|
"name": "reveal.js",
|
||||||
"version": "5.2.1",
|
"version": "5.0.5",
|
||||||
"description": "The HTML Presentation Framework",
|
"description": "The HTML Presentation Framework",
|
||||||
"homepage": "https://revealjs.com",
|
"homepage": "https://revealjs.com",
|
||||||
"subdomain": "revealjs",
|
"subdomain": "revealjs",
|
||||||
"license": "MIT",
|
"license": "MIT",
|
||||||
"main": "dist/reveal.js",
|
"main": "dist/reveal.js",
|
||||||
"module": "dist/reveal.mjs",
|
"module": "dist/reveal.mjs",
|
||||||
"types": "dist/reveal.d.ts",
|
"types": "dist/reveal.d.ts",
|
||||||
"type": "module",
|
"type": "module",
|
||||||
"exports": {
|
"exports": {
|
||||||
".": {
|
".": {
|
||||||
"import": "./dist/reveal.mjs",
|
"import": "./dist/reveal.mjs",
|
||||||
"require": "./dist/reveal.js",
|
"require": "./dist/reveal.js",
|
||||||
"default": "./dist/reveal.js"
|
"default": "./dist/reveal.js"
|
||||||
},
|
},
|
||||||
"./reveal.css": "./dist/reveal.css",
|
"./reveal.css": "./dist/reveal.css",
|
||||||
"./reset.css": "./dist/reset.css",
|
"./reset.css": "./dist/reset.css",
|
||||||
"./theme/*": "./dist/theme/*",
|
"./theme/*": "./dist/theme/*",
|
||||||
"./plugin/highlight": {
|
"./plugin/highlight": {
|
||||||
"import": "./dist/plugin/highlight.mjs",
|
"import": "./dist/plugin/highlight.mjs",
|
||||||
"require": "./dist/plugin/highlight.js",
|
"require": "./dist/plugin/highlight.js",
|
||||||
"default": "./dist/plugin/highlight.js"
|
"default": "./dist/plugin/highlight.js"
|
||||||
},
|
},
|
||||||
"./plugin/markdown": {
|
"./plugin/markdown": {
|
||||||
"import": "./dist/plugin/markdown.mjs",
|
"import": "./dist/plugin/markdown.mjs",
|
||||||
"require": "./dist/plugin/markdown.js",
|
"require": "./dist/plugin/markdown.js",
|
||||||
"default": "./dist/plugin/markdown.js"
|
"default": "./dist/plugin/markdown.js"
|
||||||
},
|
},
|
||||||
"./plugin/math": {
|
"./plugin/math": {
|
||||||
"import": "./dist/plugin/math.mjs",
|
"import": "./dist/plugin/math.mjs",
|
||||||
"require": "./dist/plugin/math.js",
|
"require": "./dist/plugin/math.js",
|
||||||
"default": "./dist/plugin/math.js"
|
"default": "./dist/plugin/math.js"
|
||||||
},
|
},
|
||||||
"./plugin/notes": {
|
"./plugin/notes": {
|
||||||
"import": "./dist/plugin/notes.mjs",
|
"import": "./dist/plugin/notes.mjs",
|
||||||
"require": "./dist/plugin/notes.js",
|
"require": "./dist/plugin/notes.js",
|
||||||
"default": "./dist/plugin/notes.js"
|
"default": "./dist/plugin/notes.js"
|
||||||
},
|
},
|
||||||
"./plugin/search": {
|
"./plugin/search": {
|
||||||
"import": "./dist/plugin/search.mjs",
|
"import": "./dist/plugin/search.mjs",
|
||||||
"require": "./dist/plugin/search.js",
|
"require": "./dist/plugin/search.js",
|
||||||
"default": "./dist/plugin/search.js"
|
"default": "./dist/plugin/search.js"
|
||||||
},
|
},
|
||||||
"./plugin/zoom": {
|
"./plugin/zoom": {
|
||||||
"import": "./dist/plugin/zoom.mjs",
|
"import": "./dist/plugin/zoom.mjs",
|
||||||
"require": "./dist/plugin/zoom.js",
|
"require": "./dist/plugin/zoom.js",
|
||||||
"default": "./dist/plugin/zoom.js"
|
"default": "./dist/plugin/zoom.js"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"scripts": {
|
"scripts": {
|
||||||
"dev": "npm run start",
|
"dev": "npm run start",
|
||||||
"start": "vite --port 8000",
|
"start": "vite --port 8000",
|
||||||
"build:core": "tsc && vite build && vite build -c vite.config.styles.ts",
|
"build:core": "tsc && vite build && vite build -c vite.config.styles.ts",
|
||||||
"build:styles": "vite build -c vite.config.styles.ts",
|
"build:styles": "vite build -c vite.config.styles.ts",
|
||||||
"build": "tsc && vite build && vite build -c vite.config.styles.ts && vite build -c plugin/highlight/vite.config.ts && vite build -c plugin/markdown/vite.config.ts && vite build -c plugin/math/vite.config.ts && vite build -c plugin/notes/vite.config.ts && vite build -c plugin/search/vite.config.ts && vite build -c plugin/zoom/vite.config.ts",
|
"build": "tsc && vite build && vite build -c vite.config.styles.ts && vite build -c plugin/highlight/vite.config.ts && vite build -c plugin/markdown/vite.config.ts && vite build -c plugin/math/vite.config.ts && vite build -c plugin/notes/vite.config.ts && vite build -c plugin/search/vite.config.ts && vite build -c plugin/zoom/vite.config.ts",
|
||||||
"test": "node test.js"
|
"test": "node test.js"
|
||||||
},
|
},
|
||||||
"author": {
|
"author": {
|
||||||
"name": "Hakim El Hattab",
|
"name": "Hakim El Hattab",
|
||||||
"email": "hakim.elhattab@gmail.com",
|
"email": "hakim.elhattab@gmail.com",
|
||||||
"web": "https://hakim.se"
|
"web": "https://hakim.se"
|
||||||
},
|
},
|
||||||
"repository": {
|
"repository": {
|
||||||
"type": "git",
|
"type": "git",
|
||||||
"url": "git://github.com/hakimel/reveal.js.git"
|
"url": "git://github.com/hakimel/reveal.js.git"
|
||||||
},
|
},
|
||||||
"engines": {
|
"engines": {
|
||||||
"node": ">=18.0.0"
|
"node": ">=18.0.0"
|
||||||
},
|
},
|
||||||
"keywords": [
|
"keywords": [
|
||||||
"reveal",
|
"reveal",
|
||||||
"slides",
|
"slides",
|
||||||
"presentation"
|
"presentation"
|
||||||
],
|
],
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"fitty": "^2.4.2",
|
"fitty": "^2.4.2",
|
||||||
"glob": "^10.3.10",
|
"glob": "^10.3.10",
|
||||||
"highlight.js": "^11.10.0",
|
"highlight.js": "^11.10.0",
|
||||||
"marked": "^4.3.0",
|
"marked": "^4.3.0",
|
||||||
"node-qunit-puppeteer": "^2.2.0",
|
"node-qunit-puppeteer": "^2.2.0",
|
||||||
"qunit": "^2.22.0",
|
"qunit": "^2.22.0",
|
||||||
"sass": "^1.80.2",
|
"sass": "^1.80.2",
|
||||||
"typescript": "^5.2.2",
|
"typescript": "^5.2.2",
|
||||||
"vite": "^5.4.9",
|
"vite": "^5.4.9",
|
||||||
"vite-plugin-dts": "^4.2.4"
|
"vite-plugin-dts": "^4.2.4"
|
||||||
},
|
},
|
||||||
"browserslist": "> 2%, not dead",
|
"browserslist": "> 2%, not dead",
|
||||||
"eslintConfig": {
|
"eslintConfig": {
|
||||||
"env": {
|
"env": {
|
||||||
"browser": true,
|
"browser": true,
|
||||||
"es6": true
|
"es6": true
|
||||||
},
|
},
|
||||||
"parser": "@babel/eslint-parser",
|
"parser": "@babel/eslint-parser",
|
||||||
"parserOptions": {
|
"parserOptions": {
|
||||||
"sourceType": "module",
|
"sourceType": "module",
|
||||||
"allowImportExportEverywhere": true,
|
"allowImportExportEverywhere": true,
|
||||||
"requireConfigFile": false
|
"requireConfigFile": false
|
||||||
},
|
},
|
||||||
"globals": {
|
"globals": {
|
||||||
"module": false,
|
"module": false,
|
||||||
"console": false,
|
"console": false,
|
||||||
"unescape": false,
|
"unescape": false,
|
||||||
"define": false,
|
"define": false,
|
||||||
"exports": false
|
"exports": false
|
||||||
},
|
},
|
||||||
"rules": {
|
"rules": {
|
||||||
"curly": 0,
|
"curly": 0,
|
||||||
"eqeqeq": 2,
|
"eqeqeq": 2,
|
||||||
"wrap-iife": [
|
"wrap-iife": [
|
||||||
2,
|
2,
|
||||||
"any"
|
"any"
|
||||||
],
|
],
|
||||||
"no-use-before-define": [
|
"no-use-before-define": [
|
||||||
2,
|
2,
|
||||||
{
|
{
|
||||||
"functions": false
|
"functions": false
|
||||||
}
|
}
|
||||||
],
|
],
|
||||||
"new-cap": 2,
|
"new-cap": 2,
|
||||||
"no-caller": 2,
|
"no-caller": 2,
|
||||||
"dot-notation": 0,
|
"dot-notation": 0,
|
||||||
"no-eq-null": 2,
|
"no-eq-null": 2,
|
||||||
"no-unused-expressions": 0
|
"no-unused-expressions": 0
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,5 +1,5 @@
|
|||||||
import { resolve } from 'path';
|
import { resolve } from 'path';
|
||||||
import { defineConfig } from 'vite'
|
import { defineConfig } from 'vite';
|
||||||
import { appendExtension } from '../../vite.config.ts';
|
import { appendExtension } from '../../vite.config.ts';
|
||||||
|
|
||||||
// Once Vite supports multiple entries for plugins, this build can
|
// Once Vite supports multiple entries for plugins, this build can
|
||||||
@@ -15,8 +15,8 @@ export default defineConfig({
|
|||||||
'plugin/markdown': resolve(__dirname, 'index.js'),
|
'plugin/markdown': resolve(__dirname, 'index.js'),
|
||||||
},
|
},
|
||||||
name: 'RevealMarkdown',
|
name: 'RevealMarkdown',
|
||||||
fileName: appendExtension
|
fileName: appendExtension,
|
||||||
}
|
},
|
||||||
},
|
},
|
||||||
plugins: [],
|
plugins: [],
|
||||||
})
|
});
|
||||||
|
|||||||
@@ -1,5 +1,5 @@
|
|||||||
import { resolve } from 'path';
|
import { resolve } from 'path';
|
||||||
import { defineConfig } from 'vite'
|
import { defineConfig } from 'vite';
|
||||||
import { appendExtension } from '../../vite.config.ts';
|
import { appendExtension } from '../../vite.config.ts';
|
||||||
|
|
||||||
// Once Vite supports multiple entries for plugins, this build can
|
// Once Vite supports multiple entries for plugins, this build can
|
||||||
@@ -15,8 +15,8 @@ export default defineConfig({
|
|||||||
'plugin/math': resolve(__dirname, 'index.js'),
|
'plugin/math': resolve(__dirname, 'index.js'),
|
||||||
},
|
},
|
||||||
name: 'RevealMath',
|
name: 'RevealMath',
|
||||||
fileName: appendExtension
|
fileName: appendExtension,
|
||||||
}
|
},
|
||||||
},
|
},
|
||||||
plugins: [],
|
plugins: [],
|
||||||
})
|
});
|
||||||
|
|||||||
@@ -70,7 +70,6 @@ based on dark.css by Ivan Sagalaev
|
|||||||
color: #7f9f7f;
|
color: #7f9f7f;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
.hljs-emphasis {
|
.hljs-emphasis {
|
||||||
font-style: italic;
|
font-style: italic;
|
||||||
}
|
}
|
||||||
|
|||||||
108
test.js
108
test.js
@@ -13,70 +13,70 @@ const combinedResults = { passed: 0, failed: 0, total: 0, runtime: 0 };
|
|||||||
|
|
||||||
// Create and start Vite server
|
// Create and start Vite server
|
||||||
const startServer = async () => {
|
const startServer = async () => {
|
||||||
const server = await createServer({
|
const server = await createServer({
|
||||||
root: __dirname,
|
root: __dirname,
|
||||||
server: {
|
server: {
|
||||||
port: 8009,
|
port: 8009,
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
await server.listen();
|
await server.listen();
|
||||||
return server;
|
return server;
|
||||||
};
|
};
|
||||||
|
|
||||||
// Run tests
|
// Run tests
|
||||||
const runTests = async (server) => {
|
const runTests = async (server) => {
|
||||||
await Promise.all(
|
await Promise.all(
|
||||||
testFiles.map(async (file) => {
|
testFiles.map(async (file) => {
|
||||||
const qunitArgs = {
|
const qunitArgs = {
|
||||||
targetUrl: `http://localhost:8009/${file}`,
|
targetUrl: `http://localhost:8009/${file}`,
|
||||||
timeout: 30000,
|
timeout: 30000,
|
||||||
redirectConsole: false,
|
redirectConsole: false,
|
||||||
puppeteerArgs: ['--allow-file-access-from-files'],
|
puppeteerArgs: ['--allow-file-access-from-files'],
|
||||||
};
|
};
|
||||||
|
|
||||||
try {
|
try {
|
||||||
const result = await runQunitPuppeteer(qunitArgs);
|
const result = await runQunitPuppeteer(qunitArgs);
|
||||||
combinedResults.passed += result.stats.passed;
|
combinedResults.passed += result.stats.passed;
|
||||||
combinedResults.failed += result.stats.failed;
|
combinedResults.failed += result.stats.failed;
|
||||||
combinedResults.total += result.stats.total;
|
combinedResults.total += result.stats.total;
|
||||||
combinedResults.runtime += result.stats.runtime;
|
combinedResults.runtime += result.stats.runtime;
|
||||||
|
|
||||||
if (result.stats.failed > 0) {
|
if (result.stats.failed > 0) {
|
||||||
console.log(
|
console.log(
|
||||||
`${'!'} ${file} [${result.stats.passed}/${result.stats.total}] in ${
|
`${'!'} ${file} [${result.stats.passed}/${result.stats.total}] in ${
|
||||||
result.stats.runtime
|
result.stats.runtime
|
||||||
}ms`.red
|
}ms`.red
|
||||||
);
|
);
|
||||||
printFailedTests(result, console);
|
printFailedTests(result, console);
|
||||||
} else {
|
} else {
|
||||||
console.log(
|
console.log(
|
||||||
`${'✔'} ${file} [${result.stats.passed}/${result.stats.total}] in ${
|
`${'✔'} ${file} [${result.stats.passed}/${result.stats.total}] in ${
|
||||||
result.stats.runtime
|
result.stats.runtime
|
||||||
}ms`.green
|
}ms`.green
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
console.error(`Error running tests for ${file}:`, error);
|
console.error(`Error running tests for ${file}:`, error);
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
);
|
);
|
||||||
|
|
||||||
console.log(
|
console.log(
|
||||||
`\n${combinedResults.passed}/${combinedResults.total} tests passed, ${combinedResults.failed} failed, ${combinedResults.runtime}ms runtime`
|
`\n${combinedResults.passed}/${combinedResults.total} tests passed, ${combinedResults.failed} failed, ${combinedResults.runtime}ms runtime`
|
||||||
);
|
);
|
||||||
|
|
||||||
// Exit with status code 1 if any tests failed, otherwise exit with 0
|
// Exit with status code 1 if any tests failed, otherwise exit with 0
|
||||||
process.exit(combinedResults.failed > 0 ? 1 : 0);
|
process.exit(combinedResults.failed > 0 ? 1 : 0);
|
||||||
};
|
};
|
||||||
|
|
||||||
// Main execution
|
// Main execution
|
||||||
(async () => {
|
(async () => {
|
||||||
try {
|
try {
|
||||||
const server = await startServer();
|
const server = await startServer();
|
||||||
await runTests(server);
|
await runTests(server);
|
||||||
await server.close();
|
await server.close();
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
console.error('An error occurred:', error);
|
console.error('An error occurred:', error);
|
||||||
process.exit(1);
|
process.exit(1);
|
||||||
}
|
}
|
||||||
})();
|
})();
|
||||||
|
|||||||
@@ -1,25 +1,25 @@
|
|||||||
{
|
{
|
||||||
"compilerOptions": {
|
"compilerOptions": {
|
||||||
"target": "ES2020",
|
"target": "ES2020",
|
||||||
"useDefineForClassFields": true,
|
"useDefineForClassFields": true,
|
||||||
"lib": ["ES2020", "DOM", "DOM.Iterable"],
|
"lib": ["ES2020", "DOM", "DOM.Iterable"],
|
||||||
"module": "ESNext",
|
"module": "ESNext",
|
||||||
"skipLibCheck": true,
|
"skipLibCheck": true,
|
||||||
|
|
||||||
/* Bundler mode */
|
/* Bundler mode */
|
||||||
"moduleResolution": "bundler",
|
"moduleResolution": "bundler",
|
||||||
"allowImportingTsExtensions": true,
|
"allowImportingTsExtensions": true,
|
||||||
"resolveJsonModule": true,
|
"resolveJsonModule": true,
|
||||||
"isolatedModules": true,
|
"isolatedModules": true,
|
||||||
"noEmit": true,
|
"noEmit": true,
|
||||||
"jsx": "react-jsx",
|
"jsx": "react-jsx",
|
||||||
|
|
||||||
/* Linting */
|
/* Linting */
|
||||||
"strict": true,
|
"strict": true,
|
||||||
"noUnusedLocals": true,
|
"noUnusedLocals": true,
|
||||||
"noUnusedParameters": true,
|
"noUnusedParameters": true,
|
||||||
"noFallthroughCasesInSwitch": true
|
"noFallthroughCasesInSwitch": true
|
||||||
},
|
},
|
||||||
"include": ["js"],
|
"include": ["js"],
|
||||||
"references": [{ "path": "./tsconfig.node.json" }]
|
"references": [{ "path": "./tsconfig.node.json" }]
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,11 +1,11 @@
|
|||||||
{
|
{
|
||||||
"compilerOptions": {
|
"compilerOptions": {
|
||||||
"composite": true,
|
"composite": true,
|
||||||
"skipLibCheck": true,
|
"skipLibCheck": true,
|
||||||
"module": "ESNext",
|
"module": "ESNext",
|
||||||
"moduleResolution": "bundler",
|
"moduleResolution": "bundler",
|
||||||
"allowSyntheticDefaultImports": true,
|
"allowSyntheticDefaultImports": true,
|
||||||
"strict": true
|
"strict": true
|
||||||
},
|
},
|
||||||
"include": ["vite.config.ts"]
|
"include": ["vite.config.ts"]
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -4,34 +4,34 @@ import fs from 'fs';
|
|||||||
|
|
||||||
// List all theme files in the css/theme directory
|
// List all theme files in the css/theme directory
|
||||||
const themeFiles = fs
|
const themeFiles = fs
|
||||||
.readdirSync(resolve(__dirname, 'css/theme'))
|
.readdirSync(resolve(__dirname, 'css/theme'))
|
||||||
.filter((file) => file.endsWith('.scss'));
|
.filter((file) => file.endsWith('.scss'));
|
||||||
const themeEntries = themeFiles.reduce((acc, file) => {
|
const themeEntries = themeFiles.reduce((acc, file) => {
|
||||||
acc[`theme/${file.replace('.scss', '')}`] = resolve(__dirname, `css/theme/${file}`);
|
acc[`theme/${file.replace('.scss', '')}`] = resolve(__dirname, `css/theme/${file}`);
|
||||||
return acc;
|
return acc;
|
||||||
}, {});
|
}, {});
|
||||||
|
|
||||||
export default defineConfig({
|
export default defineConfig({
|
||||||
root: './',
|
root: './',
|
||||||
css: {
|
css: {
|
||||||
preprocessorOptions: {
|
preprocessorOptions: {
|
||||||
scss: {
|
scss: {
|
||||||
api: 'modern-compiler'
|
api: 'modern-compiler',
|
||||||
}
|
},
|
||||||
}
|
},
|
||||||
},
|
},
|
||||||
build: {
|
build: {
|
||||||
emptyOutDir: false,
|
emptyOutDir: false,
|
||||||
cssCodeSplit: true,
|
cssCodeSplit: true,
|
||||||
lib: {
|
lib: {
|
||||||
formats: ['es'],
|
formats: ['es'],
|
||||||
entry: {
|
entry: {
|
||||||
reveal: resolve(__dirname, 'css/reveal.scss'),
|
reveal: resolve(__dirname, 'css/reveal.scss'),
|
||||||
reset: resolve(__dirname, 'css/reset.css'),
|
reset: resolve(__dirname, 'css/reset.css'),
|
||||||
|
|
||||||
...themeEntries,
|
...themeEntries,
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
plugins: [],
|
plugins: [],
|
||||||
});
|
});
|
||||||
|
|||||||
@@ -4,43 +4,43 @@ import { defineConfig } from 'vite';
|
|||||||
import dts from 'vite-plugin-dts';
|
import dts from 'vite-plugin-dts';
|
||||||
|
|
||||||
export const appendExtension = (format: ModuleFormat, name: String): string => {
|
export const appendExtension = (format: ModuleFormat, name: String): string => {
|
||||||
if (format === 'es') {
|
if (format === 'es') {
|
||||||
return `${name}.mjs`;
|
return `${name}.mjs`;
|
||||||
} else {
|
} else {
|
||||||
return `${name}.js`;
|
return `${name}.js`;
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
export default defineConfig({
|
export default defineConfig({
|
||||||
build: {
|
build: {
|
||||||
emptyOutDir: true,
|
emptyOutDir: true,
|
||||||
lib: {
|
lib: {
|
||||||
formats: ['es', 'umd'],
|
formats: ['es', 'umd'],
|
||||||
entry: resolve(__dirname, 'js/index.ts'),
|
entry: resolve(__dirname, 'js/index.ts'),
|
||||||
name: 'Reveal',
|
name: 'Reveal',
|
||||||
fileName: (format, entryName) => {
|
fileName: (format, entryName) => {
|
||||||
return appendExtension(format, 'reveal');
|
return appendExtension(format, 'reveal');
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
rollupOptions: {
|
rollupOptions: {
|
||||||
output: {
|
output: {
|
||||||
assetFileNames: 'reveal.[ext]',
|
assetFileNames: 'reveal.[ext]',
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
resolve: {
|
resolve: {
|
||||||
alias: {
|
alias: {
|
||||||
// Matches the exported paths in package.json
|
// Matches the exported paths in package.json
|
||||||
'reveal.js/plugin': './plugin',
|
'reveal.js/plugin': './plugin',
|
||||||
'reveal.js': '/js',
|
'reveal.js': '/js',
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
plugins: [dts({ insertTypesEntry: true, rollupTypes: true })],
|
plugins: [dts({ insertTypesEntry: true, rollupTypes: true })],
|
||||||
css: {
|
css: {
|
||||||
preprocessorOptions: {
|
preprocessorOptions: {
|
||||||
scss: {
|
scss: {
|
||||||
api: 'modern-compiler'
|
api: 'modern-compiler',
|
||||||
}
|
},
|
||||||
}
|
},
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
|
|||||||
Reference in New Issue
Block a user