1
0
mirror of https://github.com/hakimel/reveal.js.git synced 2025-08-06 14:47:04 +02:00

prettier config, format files

This commit is contained in:
Hakim El Hattab
2024-11-05 19:52:41 +01:00
parent 94a86f466d
commit faf8fb9c58
37 changed files with 1965 additions and 1836 deletions

View File

@@ -1,3 +1,6 @@
**/*
**/*.html
js/**/*.js
plugin/**/*.js
test/**/*.md
examples/**/*.md

View File

@@ -1,5 +1,5 @@
{
"useTabs": false,
"useTabs": true,
"tabWidth": 2,
"trailingComma": "es5",
"printWidth": 100,

View File

@@ -18,6 +18,7 @@ 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/)
@@ -25,6 +26,7 @@ Want to create reveal.js presentation in a graphical editor? Try <https://slides
- 🎬 [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
</div>

View File

@@ -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;
}

View File

@@ -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;
}

View File

@@ -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;

View File

@@ -3,6 +3,7 @@
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,
@@ -23,7 +24,7 @@ time, mark, audio, video {
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
/* prettier-ignore */
article, aside, details, figcaption, figure,
footer, header, hgroup, main, menu, nav, section {
display: block;

File diff suppressed because it is too large Load Diff

View File

@@ -4,17 +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: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:
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)**
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)**
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**

View File

@@ -4,49 +4,55 @@
* Copyright (C) 2011-2012 Hakim El Hattab, http://hakim.se
*/
// Load utils
@use "sass:color";
@use "template/mixins" as mixins;
@use 'sass:color';
@use 'template/mixins' as mixins;
$active-color: #8b743d;
// Inject theme variables (with some overrides)
@use "template/settings" with (
@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},
$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: "'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,.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)},
$heading1-size: 2.5em,
$heading2-size: 1.6em,
$heading3-size: 1.3em,
$heading4-size: 1.0em,
$heading4-size: 1em,
$link-color: $active-color,
$link-color-hover: color.scale( $active-color, $lightness: 20% ),
$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}
$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";
@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");
@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);

View File

@@ -8,40 +8,39 @@
*/
// Load utils
@use "sass:color";
@use "template/mixins" as mixins;
@use 'sass:color';
@use 'template/mixins' as mixins;
$active-color: #42affa;
// Inject theme variables (with some overrides)
@use "template/settings" with (
@use 'template/settings' with (
$background-color: #000,
$main-font: #{'Source Sans Pro', Helvetica, sans-serif},
$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: "'Source Sans Pro', Helvetica, sans-serif",
$heading-font-weight: 600,
$heading1-size: 2.5em,
$heading2-size: 1.6em,
$heading3-size: 1.3em,
$heading4-size: 1.0em,
$heading4-size: 1em,
$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: color.scale( $active-color, $lightness: -35% )
$selection-background-color: color.scale($active-color, $lightness: -35%)
);
// Inject the theme template
@use "template/theme";
@use 'template/theme';
// 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
@include mixins.light-bg-text-color(#000);

View File

@@ -5,40 +5,39 @@
*/
// Load utils
@use "sass:color";
@use "template/mixins" as mixins;
@use 'sass:color';
@use 'template/mixins' as mixins;
$active-color: #42affa;
// Inject theme variables (with some overrides)
@use "template/settings" with (
@use 'template/settings' with (
$background-color: #191919,
$main-font: #{'Source Sans Pro', Helvetica, sans-serif},
$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: "'Source Sans Pro', Helvetica, sans-serif",
$heading-font-weight: 600,
$heading1-size: 2.5em,
$heading2-size: 1.6em,
$heading3-size: 1.3em,
$heading4-size: 1.0em,
$heading4-size: 1em,
$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: color.scale( $active-color, $lightness: -35% )
$selection-background-color: color.scale($active-color, $lightness: -35%)
);
// Inject the theme template
@use "template/theme";
@use 'template/theme';
// 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
@include mixins.light-bg-text-color(#222);

View File

@@ -11,37 +11,46 @@
*/
// Load utils
@use "sass:color";
@use "template/mixins" as mixins;
@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 (
@use 'template/variables' with (
$background-color: $coal,
$main-font: #{Ubuntu, 'sans-serif'},
$main-font: 'Ubuntu, sans-serif',
$main-color: #eee,
$heading-font: #{Ubuntu, 'sans-serif'},
$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,.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-hover: color.scale( $active-color, $lightness: 20% ),
$link-color-hover: color.scale($active-color, $lightness: 20%),
$selection-background-color: $active-color,
$selection-color: #fff
);
// Inject the theme template
@use "template/theme";
@use 'template/theme';
// 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
@include mixins.light-bg-text-color(#222);

View File

@@ -4,50 +4,31 @@
*/
// Load utils
@use "sass:color";
@use "template/mixins" as mixins;
@use 'sass:color';
@use 'template/mixins' as mixins;
// 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);
$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;
$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;
$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;
$codeFont: 'Fira Code', $systemFontsMono;
// Inject theme variables (with some overrides)
@use "template/settings" with (
@use 'template/settings' with (
$background-color: #191919,
$main-font: $mainFont,
@@ -64,7 +45,7 @@ $codeFont: "Fira Code", $systemFontsMono;
$heading1-size: 2.5em,
$heading2-size: 1.6em,
$heading3-size: 1.3em,
$heading4-size: 1.0em,
$heading4-size: 1em,
$link-color: $pink,
$link-color-hover: $cyan,
@@ -74,15 +55,14 @@ $codeFont: "Fira Code", $systemFontsMono;
);
// Inject the theme template
@use "template/theme";
@use 'template/theme';
// 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
@include mixins.light-bg-text-color($background);
// Define additional color effects based on Dracula spec
// https://spec.draculatheme.com/
:root {
@@ -97,20 +77,23 @@ $codeFont: "Fira Code", $systemFontsMono;
* https://draculatheme.com/contribute
*/
.reveal {
strong, b {
strong,
b {
color: var(--r-bold-color);
}
em, i, blockquote {
em,
i,
blockquote {
color: var(--r-italic-color);
}
code {
color: var(--r-inline-code-color);
}
// Dracula colored list bullets and numbers
ul, ol {
ul,
ol {
li::marker {
color: var(--r-list-bullet-color);
}
}
}

View File

@@ -7,25 +7,33 @@
*/
// Load utils
@use "sass:color";
@use "template/mixins" as mixins;
@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,.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)},
@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";
@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");
@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);

View File

@@ -4,8 +4,8 @@
*/
// Load utils
@use "sass:color";
@use "template/mixins" as mixins;
@use 'sass:color';
@use 'template/mixins' as mixins;
// Solarized colors by Ethan Schoonover
$base03: #002b36;
@@ -23,31 +23,30 @@ $magenta: #d33682;
$violet: #6c71c4;
$blue: #268bd2;
$cyan: #2aa198;
$green: #859900;;
$green: #859900;
$active-color: $blue;
// Inject theme variables (with some overrides)
@use "template/settings" with (
@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% ),
$link-color-hover: color.scale($active-color, $lightness: 20%),
$selection-color: #fff,
$selection-background-color: $magenta
);
// 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("https://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic");
@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);

View File

@@ -5,36 +5,35 @@
*/
// Load utils
@use "sass:color";
@use "template/mixins" as mixins;
@use 'sass:color';
@use 'template/mixins' as mixins;
$active-color: #e7ad52;
// Inject theme variables (with some overrides)
@use "template/settings" with (
@use 'template/settings' with (
$background-color: #111,
$main-font: #{'Open Sans', sans-serif},
$main-font: "'Open Sans', sans-serif",
$main-color: #fff,
$heading-color: #fff,
$heading-font: #{'Montserrat', Impact, sans-serif},
$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% ),
$link-color-hover: color.scale($active-color, $lightness: 20%),
$selection-color: #111,
$selection-background-color: $active-color
);
// Inject the theme template
@use "template/theme";
@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");
@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);

View File

@@ -6,39 +6,38 @@
*/
// Load utils
@use "sass:color";
@use "template/mixins" as mixins;
@use 'sass:color';
@use 'template/mixins' as mixins;
$active-color: #51483D;
$active-color: #51483d;
// Inject theme variables (with some overrides)
@use "template/settings" with (
$background-color: #F0F1EB,
@use 'template/settings' with (
$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-color: #000,
$heading-color: #383D3D,
$heading-font: #{'Palatino Linotype', 'Book Antiqua', Palatino, FreeSerif, serif},
$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% ),
$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}
$overlay-element-bg-color: '0 0 0',
$overlay-element-fg-color: '240 240 240'
);
// Inject the theme template
@use "template/theme";
@use 'template/theme';
// 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
@include mixins.dark-bg-text-color(#fff);

View File

@@ -7,43 +7,42 @@
*/
// Load utils
@use "sass:color";
@use "template/mixins" as mixins;
@use 'sass:color';
@use 'template/mixins' as mixins;
$active-color: #00008B;
$active-color: #00008b;
// Inject theme variables (with some overrides)
@use "template/settings" with (
@use 'template/settings' with (
$background-color: #fff,
$main-color: #000,
$main-font: #{'Lato', sans-serif},
$main-font: "'Lato', sans-serif",
$heading-color: #000,
$heading-font: #{'News Cycle', Impact, sans-serif},
$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: 1.0em,
$heading4-size: 1em,
$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,
$overlay-element-bg-color: #{0, 0, 0},
$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
@use "template/theme";
@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");
@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);

View File

@@ -5,39 +5,38 @@
*/
// Load utils
@use "sass:color";
@use "template/mixins" as mixins;
@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 ),
@use 'template/settings' with (
$background: radial-gradient(#f7fbfc, #add9e4),
$background-color: #f7fbfc,
$main-color: #333,
$main-font: #{'Open Sans', sans-serif},
$main-font: "'Open Sans', sans-serif",
$heading-color: #333,
$heading-font: #{'Quicksand', sans-serif},
$heading-font: "'Quicksand', sans-serif",
$heading-letter-spacing: -0.05em,
$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,
$overlay-element-bg-color: #{0, 0, 0},
$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
@use "template/theme";
@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");
@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);

View File

@@ -4,8 +4,8 @@
*/
// Load utils
@use "sass:color";
@use "template/mixins" as mixins;
@use 'sass:color';
@use 'template/mixins' as mixins;
// Solarized colors by Ethan Schoonover
$base03: #002b36;
@@ -28,28 +28,27 @@ $green: #859900;
$active-color: $blue;
// Inject theme variables (with some overrides)
@use "template/settings" with (
@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% ),
$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}
$overlay-element-bg-color: '0 0 0',
$overlay-element-fg-color: '240 240 240'
);
// Inject the theme template
@use "template/theme";
@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");
@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);

View File

@@ -1,14 +1,26 @@
@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;
}
}

View File

@@ -32,12 +32,12 @@ $heading1-text-shadow: none !default;
$heading1-size: 3.77em !default;
$heading2-size: 2.11em !default;
$heading3-size: 1.55em !default;
$heading4-size: 1.00em !default;
$heading4-size: 1em !default;
$code-font: monospace !default;
// Links and actions
$link-color: #13DAEC !default;
$link-color: #13daec !default;
$link-color-dark: color.scale($link-color, $lightness: -15%) !default;
$link-color-hover: color.scale($link-color, $lightness: 20%) !default;

View File

@@ -29,7 +29,7 @@
}
.reveal .slides section,
.reveal .slides section>section {
.reveal .slides section > section {
line-height: 1.3;
font-weight: inherit;
}
@@ -58,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
*********************************************/
@@ -153,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 {
.reveal blockquote p:first-child,
.reveal blockquote p:last-child {
display: inline-block;
}
}
.reveal q {
font-style: italic;
@@ -219,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;
}
@@ -258,7 +265,6 @@
margin: var(--r-block-margin) 0;
}
/*********************************************
* LINKS
*********************************************/
@@ -266,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 {
.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
*********************************************/
@@ -291,7 +296,7 @@
}
.reveal a .r-frame {
transition: all .15s linear;
transition: all 0.15s linear;
}
.reveal a:hover .r-frame {
@@ -299,7 +304,6 @@
box-shadow: 0 0 20px rgba(0, 0, 0, 0.55);
}
/*********************************************
* NAVIGATION CONTROLS
*********************************************/
@@ -308,20 +312,19 @@
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 {
@media print {
.backgrounds {
background-color: var(--r-background-color);
}

View File

@@ -8,13 +8,13 @@
*/
// Load utils
@use "sass:color";
@use "template/mixins" as mixins;
@use 'sass:color';
@use 'template/mixins' as mixins;
$active-color: #2a76dd;
// Inject theme variables (with some overrides)
@use "template/settings" with (
@use 'template/settings' with (
$background-color: #fff,
$main-font: "'Source Sans Pro', Helvetica, sans-serif",
@@ -28,23 +28,22 @@ $active-color: #2a76dd;
$heading1-size: 2.5em,
$heading2-size: 1.6em,
$heading3-size: 1.3em,
$heading4-size: 1.0em,
$heading4-size: 1em,
$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,
$overlay-element-bg-color: "0, 0, 0",
$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
@use "template/theme";
@use 'template/theme';
// 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
@include mixins.dark-bg-text-color(#fff);

View File

@@ -5,43 +5,42 @@
*/
// Load utils
@use "sass:color";
@use "template/mixins" as mixins;
@use 'sass:color';
@use 'template/mixins' as mixins;
$active-color: #2a76dd;
// Inject theme variables (with some overrides)
@use "template/settings" with (
@use 'template/settings' with (
$background-color: #fff,
$main-color: #222,
$main-font: #{'Source Sans Pro', Helvetica, sans-serif},
$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: "'Source Sans Pro', Helvetica, sans-serif",
$heading-font-weight: 600,
$heading1-size: 2.5em,
$heading2-size: 1.6em,
$heading3-size: 1.3em,
$heading4-size: 1.0em,
$heading4-size: 1em,
$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,
$overlay-element-bg-color: #{0, 0, 0},
$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
@use "template/theme";
@use 'template/theme';
// 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
@include mixins.dark-bg-text-color(#fff);

View File

@@ -37,9 +37,9 @@ interface Config {
/**
* Display presentation control arrows
* - true: Display controls on all screens
* - false: Hide controls on all screens
* - "speaker-only": Only display controls in the speaker view
* - true: Display controls in all views
* - false: Hide controls in all views
* - 'speaker-only': Display controls only in the speaker view
*
* @defaultValue true
*/
@@ -630,7 +630,7 @@ interface Config {
* @defaultValue []
*/
plugins?: any[];
};
}
/**
* The default reveal.js config object.

View File

@@ -1,6 +1,6 @@
{
"name": "reveal.js",
"version": "5.2.1",
"version": "5.0.5",
"description": "The HTML Presentation Framework",
"homepage": "https://revealjs.com",
"subdomain": "revealjs",

View File

@@ -1,5 +1,5 @@
import { resolve } from 'path';
import { defineConfig } from 'vite'
import { defineConfig } from 'vite';
import { appendExtension } from '../../vite.config.ts';
// Once Vite supports multiple entries for plugins, this build can
@@ -15,8 +15,8 @@ export default defineConfig({
'plugin/markdown': resolve(__dirname, 'index.js'),
},
name: 'RevealMarkdown',
fileName: appendExtension
}
fileName: appendExtension,
},
},
plugins: [],
})
});

View File

@@ -1,5 +1,5 @@
import { resolve } from 'path';
import { defineConfig } from 'vite'
import { defineConfig } from 'vite';
import { appendExtension } from '../../vite.config.ts';
// Once Vite supports multiple entries for plugins, this build can
@@ -15,8 +15,8 @@ export default defineConfig({
'plugin/math': resolve(__dirname, 'index.js'),
},
name: 'RevealMath',
fileName: appendExtension
}
fileName: appendExtension,
},
},
plugins: [],
})
});

View File

@@ -70,7 +70,6 @@ based on dark.css by Ivan Sagalaev
color: #7f9f7f;
}
.hljs-emphasis {
font-style: italic;
}

View File

@@ -16,9 +16,9 @@ export default defineConfig({
css: {
preprocessorOptions: {
scss: {
api: 'modern-compiler'
}
}
api: 'modern-compiler',
},
},
},
build: {
emptyOutDir: false,

View File

@@ -39,8 +39,8 @@ export default defineConfig({
css: {
preprocessorOptions: {
scss: {
api: 'modern-compiler'
}
}
api: 'modern-compiler',
},
},
},
});