From 0b137700d586d77bfc5ce069f3e9cde6482b98f3 Mon Sep 17 00:00:00 2001 From: Hakim El Hattab Date: Thu, 28 Mar 2024 11:07:57 +0100 Subject: [PATCH 01/15] switch from gulp to vite to build, add types for reveal.js config --- css/reset.css | 30 + css/theme/{source => }/beige.scss | 17 +- css/theme/{source => }/black-contrast.scss | 16 +- css/theme/{source => }/black.scss | 18 +- css/theme/{source => }/blood.scss | 43 +- css/theme/{source => }/dracula.scss | 6 +- css/theme/{source => }/league.scss | 6 +- css/theme/{source => }/moon.scss | 39 +- css/theme/{source => }/night.scss | 14 +- css/theme/{source => }/serif.scss | 20 +- css/theme/{source => }/simple.scss | 17 +- css/theme/{source => }/sky.scss | 18 +- css/theme/{source => }/solarized.scss | 46 +- css/theme/{source => }/white-contrast.scss | 16 +- css/theme/{source => }/white.scss | 16 +- demo.html | 12 +- dist/config.d.ts | 84 + dist/index.d.ts | 12 + dist/plugin/highlight.js | 18 + dist/plugin/highlight.mjs | 47979 ++++++++++++++++ {plugin => dist/plugin}/highlight/monokai.css | 0 {plugin => dist/plugin}/highlight/zenburn.css | 0 dist/plugin/markdown.js | 54 + dist/plugin/markdown.mjs | 1738 + dist/plugin/math.js | 4 + dist/plugin/math.mjs | 119 + dist/plugin/notes.js | 944 + dist/plugin/notes.mjs | 2548 + dist/plugin/search.js | 7 + dist/plugin/search.mjs | 83 + dist/plugin/zoom.js | 9 + dist/plugin/zoom.mjs | 102 + dist/reset.css | 31 +- dist/reveal.css | 2142 +- dist/reveal.d.mts | 3 + dist/reveal.js | 4765 +- dist/reveal.mjs | 3494 ++ dist/theme/black.css | 18 +- ...hite_contrast_compact_verbatim_headers.css | 360 - index.html | 28 +- js/config.js | 330 - js/config.ts | 648 + js/{index.js => index.ts} | 11 +- js/reveal.js | 2 +- package-lock.json | 1350 +- package.json | 49 +- plugin/highlight/{plugin.js => index.js} | 0 plugin/highlight/vite.config.ts | 22 + plugin/markdown/{plugin.js => index.js} | 0 plugin/markdown/markdown.esm.js | 7 - plugin/markdown/markdown.js | 7 - plugin/markdown/vite.config.ts | 22 + plugin/math/{plugin.js => index.js} | 0 plugin/math/vite.config.ts | 22 + plugin/notes/{plugin.js => index.js} | 2 +- plugin/notes/notes.esm.js | 1 - plugin/notes/notes.js | 1 - plugin/notes/vite.config.ts | 22 + plugin/search/{plugin.js => index.js} | 0 plugin/search/vite.config.ts | 22 + plugin/zoom/{plugin.js => index.js} | 0 plugin/zoom/vite.config.ts | 22 + plugin/zoom/zoom.esm.js | 11 - plugin/zoom/zoom.js | 11 - public/plugin/highlight/monokai.css | 71 + public/plugin/highlight/zenburn.css | 80 + public/theme/fonts/league-gothic/LICENSE | 2 + .../fonts/league-gothic/league-gothic.css | 10 + .../fonts/league-gothic/league-gothic.eot | Bin 0 -> 25696 bytes .../fonts/league-gothic/league-gothic.ttf | Bin 0 -> 64256 bytes .../fonts/league-gothic/league-gothic.woff | Bin 0 -> 30764 bytes public/theme/fonts/source-sans-pro/LICENSE | 45 + .../source-sans-pro-italic.eot | Bin 0 -> 75720 bytes .../source-sans-pro-italic.ttf | Bin 0 -> 238084 bytes .../source-sans-pro-italic.woff | Bin 0 -> 98556 bytes .../source-sans-pro-regular.eot | Bin 0 -> 88070 bytes .../source-sans-pro-regular.ttf | Bin 0 -> 288008 bytes .../source-sans-pro-regular.woff | Bin 0 -> 114324 bytes .../source-sans-pro-semibold.eot | Bin 0 -> 89897 bytes .../source-sans-pro-semibold.ttf | Bin 0 -> 284640 bytes .../source-sans-pro-semibold.woff | Bin 0 -> 115648 bytes .../source-sans-pro-semibolditalic.eot | Bin 0 -> 75706 bytes .../source-sans-pro-semibolditalic.ttf | Bin 0 -> 240944 bytes .../source-sans-pro-semibolditalic.woff | Bin 0 -> 98816 bytes .../fonts/source-sans-pro/source-sans-pro.css | 39 + test/test-markdown.html | 6 +- test/test-multiple-instances.html | 4 +- tsconfig.json | 25 + tsconfig.node.json | 11 + vite.config.styles.ts | 20 + vite.config.ts | 42 + 91 files changed, 66794 insertions(+), 999 deletions(-) create mode 100644 css/reset.css rename css/theme/{source => }/beige.scss (73%) rename css/theme/{source => }/black-contrast.scss (79%) rename css/theme/{source => }/black.scss (72%) rename css/theme/{source => }/blood.scss (67%) rename css/theme/{source => }/dracula.scss (95%) rename css/theme/{source => }/league.scss (92%) rename css/theme/{source => }/moon.scss (67%) rename css/theme/{source => }/night.scss (78%) rename css/theme/{source => }/serif.scss (72%) rename css/theme/{source => }/simple.scss (82%) rename css/theme/{source => }/sky.scss (82%) rename css/theme/{source => }/solarized.scss (68%) rename css/theme/{source => }/white-contrast.scss (80%) rename css/theme/{source => }/white.scss (77%) create mode 100644 dist/config.d.ts create mode 100644 dist/index.d.ts create mode 100644 dist/plugin/highlight.js create mode 100644 dist/plugin/highlight.mjs rename {plugin => dist/plugin}/highlight/monokai.css (100%) rename {plugin => dist/plugin}/highlight/zenburn.css (100%) create mode 100644 dist/plugin/markdown.js create mode 100644 dist/plugin/markdown.mjs create mode 100644 dist/plugin/math.js create mode 100644 dist/plugin/math.mjs create mode 100644 dist/plugin/notes.js create mode 100644 dist/plugin/notes.mjs create mode 100644 dist/plugin/search.js create mode 100644 dist/plugin/search.mjs create mode 100644 dist/plugin/zoom.js create mode 100644 dist/plugin/zoom.mjs create mode 100644 dist/reveal.d.mts create mode 100644 dist/reveal.mjs delete mode 100644 dist/theme/white_contrast_compact_verbatim_headers.css delete mode 100644 js/config.js create mode 100644 js/config.ts rename js/{index.js => index.ts} (84%) rename plugin/highlight/{plugin.js => index.js} (100%) create mode 100644 plugin/highlight/vite.config.ts rename plugin/markdown/{plugin.js => index.js} (100%) delete mode 100644 plugin/markdown/markdown.esm.js delete mode 100644 plugin/markdown/markdown.js create mode 100644 plugin/markdown/vite.config.ts rename plugin/math/{plugin.js => index.js} (100%) create mode 100644 plugin/math/vite.config.ts rename plugin/notes/{plugin.js => index.js} (99%) delete mode 100644 plugin/notes/notes.esm.js delete mode 100644 plugin/notes/notes.js create mode 100644 plugin/notes/vite.config.ts rename plugin/search/{plugin.js => index.js} (100%) create mode 100644 plugin/search/vite.config.ts rename plugin/zoom/{plugin.js => index.js} (100%) create mode 100644 plugin/zoom/vite.config.ts delete mode 100644 plugin/zoom/zoom.esm.js delete mode 100644 plugin/zoom/zoom.js create mode 100644 public/plugin/highlight/monokai.css create mode 100644 public/plugin/highlight/zenburn.css create mode 100644 public/theme/fonts/league-gothic/LICENSE create mode 100644 public/theme/fonts/league-gothic/league-gothic.css create mode 100755 public/theme/fonts/league-gothic/league-gothic.eot create mode 100755 public/theme/fonts/league-gothic/league-gothic.ttf create mode 100755 public/theme/fonts/league-gothic/league-gothic.woff create mode 100644 public/theme/fonts/source-sans-pro/LICENSE create mode 100755 public/theme/fonts/source-sans-pro/source-sans-pro-italic.eot create mode 100755 public/theme/fonts/source-sans-pro/source-sans-pro-italic.ttf create mode 100755 public/theme/fonts/source-sans-pro/source-sans-pro-italic.woff create mode 100755 public/theme/fonts/source-sans-pro/source-sans-pro-regular.eot create mode 100755 public/theme/fonts/source-sans-pro/source-sans-pro-regular.ttf create mode 100755 public/theme/fonts/source-sans-pro/source-sans-pro-regular.woff create mode 100755 public/theme/fonts/source-sans-pro/source-sans-pro-semibold.eot create mode 100755 public/theme/fonts/source-sans-pro/source-sans-pro-semibold.ttf create mode 100755 public/theme/fonts/source-sans-pro/source-sans-pro-semibold.woff create mode 100755 public/theme/fonts/source-sans-pro/source-sans-pro-semibolditalic.eot create mode 100755 public/theme/fonts/source-sans-pro/source-sans-pro-semibolditalic.ttf create mode 100755 public/theme/fonts/source-sans-pro/source-sans-pro-semibolditalic.woff create mode 100644 public/theme/fonts/source-sans-pro/source-sans-pro.css create mode 100644 tsconfig.json create mode 100644 tsconfig.node.json create mode 100644 vite.config.styles.ts create mode 100644 vite.config.ts diff --git a/css/reset.css b/css/reset.css new file mode 100644 index 00000000000..e2385390fcf --- /dev/null +++ b/css/reset.css @@ -0,0 +1,30 @@ +/* http://meyerweb.com/eric/tools/css/reset/ + v4.0 | 20180602 + License: none (public domain) +*/ + +html, body, div, span, applet, object, iframe, +h1, h2, h3, h4, h5, h6, p, blockquote, pre, +a, abbr, acronym, address, big, cite, code, +del, dfn, em, img, ins, kbd, q, s, samp, +small, strike, strong, sub, sup, tt, var, +b, u, i, center, +dl, dt, dd, ol, ul, li, +fieldset, form, label, legend, +table, caption, tbody, tfoot, thead, tr, th, td, +article, aside, canvas, details, embed, +figure, figcaption, footer, header, hgroup, +main, menu, nav, output, ruby, section, summary, +time, mark, audio, video { + margin: 0; + padding: 0; + border: 0; + font-size: 100%; + font: inherit; + vertical-align: baseline; +} +/* HTML5 display-role reset for older browsers */ +article, aside, details, figcaption, figure, +footer, header, hgroup, main, menu, nav, section { + display: block; +} \ No newline at end of file diff --git a/css/theme/source/beige.scss b/css/theme/beige.scss similarity index 73% rename from css/theme/source/beige.scss rename to css/theme/beige.scss index ab3fd9256fc..2ce9c8dd9c4 100644 --- a/css/theme/source/beige.scss +++ b/css/theme/beige.scss @@ -4,42 +4,41 @@ * Copyright (C) 2011-2012 Hakim El Hattab, http://hakim.se */ - // Default mixins and settings ----------------- @use "sass:color"; @import "../template/mixins"; @import "../template/settings"; // --------------------------------------------- - - // Include theme-specific fonts @import url(./fonts/league-gothic/league-gothic.css); @import url(https://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic); - // Override theme settings (see ../template/settings.scss) $mainColor: #333; $headingColor: #333; $headingTextShadow: none; $backgroundColor: #f7f3de; $linkColor: #8b743d; -$linkColorHover: color.scale( $linkColor, $lightness: 20% ); +$linkColorHover: color.scale($linkColor, $lightness: 20%); $selectionBackgroundColor: rgba(79, 64, 28, 0.99); -$heading1TextShadow: 0 1px 0 #ccc, 0 2px 0 #c9c9c9, 0 3px 0 #bbb, 0 4px 0 #b9b9b9, 0 5px 0 #aaa, 0 6px 1px rgba(0,0,0,.1), 0 0 5px rgba(0,0,0,.1), 0 1px 3px rgba(0,0,0,.3), 0 3px 5px rgba(0,0,0,.2), 0 5px 10px rgba(0,0,0,.25), 0 20px 20px rgba(0,0,0,.15); +$heading1TextShadow: 0 1px 0 #ccc, 0 2px 0 #c9c9c9, 0 3px 0 #bbb, + 0 4px 0 #b9b9b9, 0 5px 0 #aaa, 0 6px 1px rgba(0, 0, 0, 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); $overlayElementBgColor: 0, 0, 0; $overlayElementFgColor: 240, 240, 240; // Background generator @mixin bodyBackground() { - @include radial-gradient( rgba(247,242,211,1), rgba(255,255,255,1) ); + @include radial-gradient(rgba(247, 242, 211, 1), rgba(255, 255, 255, 1)); } // Change text colors against dark slide backgrounds @include dark-bg-text-color(#fff); - // Theme template ------------------------------ -@import "../template/theme"; +@import "./template/theme"; // --------------------------------------------- diff --git a/css/theme/source/black-contrast.scss b/css/theme/black-contrast.scss similarity index 79% rename from css/theme/source/black-contrast.scss rename to css/theme/black-contrast.scss index 32c1d91faae..4593503dbb6 100644 --- a/css/theme/source/black-contrast.scss +++ b/css/theme/black-contrast.scss @@ -7,18 +7,15 @@ * - $mainFontSize controls code blocks, too (although under some ratio). */ - // Default mixins and settings ----------------- @use "sass:color"; @import "../template/mixins"; @import "../template/settings"; // --------------------------------------------- - // Include theme-specific fonts @import url(./fonts/source-sans-pro/source-sans-pro.css); - // Override theme settings (see ../template/settings.scss) $backgroundColor: #000000; @@ -26,25 +23,24 @@ $mainColor: #fff; $headingColor: #fff; $mainFontSize: 42px; -$mainFont: 'Source Sans Pro', Helvetica, sans-serif; -$headingFont: 'Source Sans Pro', Helvetica, sans-serif; +$mainFont: "Source Sans Pro", Helvetica, sans-serif; +$headingFont: "Source Sans Pro", Helvetica, sans-serif; $headingTextShadow: none; $headingLetterSpacing: normal; $headingTextTransform: uppercase; $headingFontWeight: 600; $linkColor: #42affa; -$linkColorHover: color.scale( $linkColor, $lightness: 15% ); -$selectionBackgroundColor: color.scale( $linkColor, $lightness: 25% ); +$linkColorHover: color.scale($linkColor, $lightness: 15%); +$selectionBackgroundColor: color.scale($linkColor, $lightness: 25%); $heading1Size: 2.5em; $heading2Size: 1.6em; $heading3Size: 1.3em; -$heading4Size: 1.0em; +$heading4Size: 1em; // Change text colors against light slide backgrounds @include light-bg-text-color(#000); - // Theme template ------------------------------ -@import "../template/theme"; +@import "./template/theme"; // --------------------------------------------- diff --git a/css/theme/source/black.scss b/css/theme/black.scss similarity index 72% rename from css/theme/source/black.scss rename to css/theme/black.scss index 124a755e2cb..a09e7f86c26 100644 --- a/css/theme/source/black.scss +++ b/css/theme/black.scss @@ -4,17 +4,14 @@ * By Hakim El Hattab, http://hakim.se */ - // Default mixins and settings ----------------- @use "sass:color"; @import "../template/mixins"; @import "../template/settings"; // --------------------------------------------- - // Include theme-specific fonts -@import url(./fonts/source-sans-pro/source-sans-pro.css); - +@import url("/theme/fonts/source-sans-pro/source-sans-pro.css"); // Override theme settings (see ../template/settings.scss) $backgroundColor: #191919; @@ -23,25 +20,24 @@ $mainColor: #fff; $headingColor: #fff; $mainFontSize: 42px; -$mainFont: 'Source Sans Pro', Helvetica, sans-serif; -$headingFont: 'Source Sans Pro', Helvetica, sans-serif; +$mainFont: "Source Sans Pro", Helvetica, sans-serif; +$headingFont: "Source Sans Pro", Helvetica, sans-serif; $headingTextShadow: none; $headingLetterSpacing: normal; $headingTextTransform: uppercase; $headingFontWeight: 600; $linkColor: #42affa; -$linkColorHover: color.scale( $linkColor, $lightness: 15% ); -$selectionBackgroundColor: rgba( $linkColor, 0.75 ); +$linkColorHover: color.scale($linkColor, $lightness: 15%); +$selectionBackgroundColor: rgba($linkColor, 0.75); $heading1Size: 2.5em; $heading2Size: 1.6em; $heading3Size: 1.3em; -$heading4Size: 1.0em; +$heading4Size: 1em; // Change text colors against light slide backgrounds @include light-bg-text-color(#222); - // Theme template ------------------------------ -@import "../template/theme"; +@import "./template/theme"; // --------------------------------------------- diff --git a/css/theme/source/blood.scss b/css/theme/blood.scss similarity index 67% rename from css/theme/source/blood.scss rename to css/theme/blood.scss index 75e5c2094fc..5d38655e017 100644 --- a/css/theme/source/blood.scss +++ b/css/theme/blood.scss @@ -28,20 +28,24 @@ $codeBackground: #23241f; $backgroundColor: $coal; // Main text -$mainFont: Ubuntu, 'sans-serif'; +$mainFont: Ubuntu, "sans-serif"; $mainColor: #eee; // Headings -$headingFont: Ubuntu, 'sans-serif'; +$headingFont: Ubuntu, "sans-serif"; $headingTextShadow: 2px 2px 2px $coal; -// h1 shadow, borrowed humbly from +// h1 shadow, borrowed humbly from // (c) Default theme by Hakim El Hattab -$heading1TextShadow: 0 1px 0 #ccc, 0 2px 0 #c9c9c9, 0 3px 0 #bbb, 0 4px 0 #b9b9b9, 0 5px 0 #aaa, 0 6px 1px rgba(0,0,0,.1), 0 0 5px rgba(0,0,0,.1), 0 1px 3px rgba(0,0,0,.3), 0 3px 5px rgba(0,0,0,.2), 0 5px 10px rgba(0,0,0,.25), 0 20px 20px rgba(0,0,0,.15); +$heading1TextShadow: 0 1px 0 #ccc, 0 2px 0 #c9c9c9, 0 3px 0 #bbb, + 0 4px 0 #b9b9b9, 0 5px 0 #aaa, 0 6px 1px rgba(0, 0, 0, 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); // Links $linkColor: $blood; -$linkColorHover: color.scale( $linkColor, $lightness: 20% ); +$linkColorHover: color.scale($linkColor, $lightness: 20%); // Text selection $selectionBackgroundColor: $blood; @@ -50,22 +54,25 @@ $selectionColor: #fff; // Change text colors against dark slide backgrounds @include light-bg-text-color(#222); - // Theme template ------------------------------ -@import "../template/theme"; +@import "./template/theme"; // --------------------------------------------- // some overrides after theme template import .reveal p { - font-weight: 300; - text-shadow: 1px 1px $coal; + font-weight: 300; + text-shadow: 1px 1px $coal; } section.has-light-background { - p, h1, h2, h3, h4 { - text-shadow: none; - } + p, + h1, + h2, + h3, + h4 { + text-shadow: none; + } } .reveal h1, @@ -74,15 +81,15 @@ section.has-light-background { .reveal h4, .reveal h5, .reveal h6 { - font-weight: 700; + font-weight: 700; } .reveal p code { - background-color: $codeBackground; - display: inline-block; - border-radius: 7px; + background-color: $codeBackground; + display: inline-block; + border-radius: 7px; } .reveal small code { - vertical-align: baseline; -} \ No newline at end of file + vertical-align: baseline; +} diff --git a/css/theme/source/dracula.scss b/css/theme/dracula.scss similarity index 95% rename from css/theme/source/dracula.scss rename to css/theme/dracula.scss index ae968b8c752..99402f86ccf 100644 --- a/css/theme/source/dracula.scss +++ b/css/theme/dracula.scss @@ -5,8 +5,8 @@ // Default mixins and settings ----------------- -@import "../template/mixins"; -@import "../template/settings"; +@import "./template/mixins"; +@import "./template/settings"; // --------------------------------------------- @@ -74,7 +74,7 @@ $codeFont: "Fira Code", $systemFontsMono; @include light-bg-text-color($background); // Theme template ------------------------------ -@import "../template/theme"; +@import "./template/theme"; // --------------------------------------------- // Define additional color effects based on Dracula spec diff --git a/css/theme/source/league.scss b/css/theme/league.scss similarity index 92% rename from css/theme/source/league.scss rename to css/theme/league.scss index ee012583990..8a5c43a6114 100644 --- a/css/theme/source/league.scss +++ b/css/theme/league.scss @@ -8,8 +8,8 @@ // Default mixins and settings ----------------- -@import "../template/mixins"; -@import "../template/settings"; +@import "./template/mixins"; +@import "./template/settings"; // --------------------------------------------- @@ -32,5 +32,5 @@ $heading1TextShadow: 0 1px 0 #ccc, 0 2px 0 #c9c9c9, 0 3px 0 #bbb, 0 4px 0 #b9b9b // Theme template ------------------------------ -@import "../template/theme"; +@import "./template/theme"; // --------------------------------------------- diff --git a/css/theme/source/moon.scss b/css/theme/moon.scss similarity index 67% rename from css/theme/source/moon.scss rename to css/theme/moon.scss index de7d92f15e2..cfd098d8d9d 100644 --- a/css/theme/source/moon.scss +++ b/css/theme/moon.scss @@ -3,15 +3,12 @@ * Author: Achim Staebler */ - // Default mixins and settings ----------------- @use "sass:color"; @import "../template/mixins"; @import "../template/settings"; // --------------------------------------------- - - // Include theme-specific fonts @import url(./fonts/league-gothic/league-gothic.css); @import url(https://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic); @@ -21,22 +18,22 @@ */ // Solarized colors -$base03: #002b36; -$base02: #073642; -$base01: #586e75; -$base00: #657b83; -$base0: #839496; -$base1: #93a1a1; -$base2: #eee8d5; -$base3: #fdf6e3; -$yellow: #b58900; -$orange: #cb4b16; -$red: #dc322f; -$magenta: #d33682; -$violet: #6c71c4; -$blue: #268bd2; -$cyan: #2aa198; -$green: #859900; +$base03: #002b36; +$base02: #073642; +$base01: #586e75; +$base00: #657b83; +$base0: #839496; +$base1: #93a1a1; +$base2: #eee8d5; +$base3: #fdf6e3; +$yellow: #b58900; +$orange: #cb4b16; +$red: #dc322f; +$magenta: #d33682; +$violet: #6c71c4; +$blue: #268bd2; +$cyan: #2aa198; +$green: #859900; // Override theme settings (see ../template/settings.scss) $mainColor: $base1; @@ -44,12 +41,12 @@ $headingColor: $base2; $headingTextShadow: none; $backgroundColor: $base03; $linkColor: $blue; -$linkColorHover: color.scale( $linkColor, $lightness: 20% ); +$linkColorHover: color.scale($linkColor, $lightness: 20%); $selectionBackgroundColor: $magenta; // Change text colors against light slide backgrounds @include light-bg-text-color(#222); // Theme template ------------------------------ -@import "../template/theme"; +@import "./template/theme"; // --------------------------------------------- diff --git a/css/theme/source/night.scss b/css/theme/night.scss similarity index 78% rename from css/theme/source/night.scss rename to css/theme/night.scss index 978cfc9e0ad..91cc7e16447 100644 --- a/css/theme/source/night.scss +++ b/css/theme/night.scss @@ -4,26 +4,23 @@ * Copyright (C) 2011-2012 Hakim El Hattab, http://hakim.se */ - // Default mixins and settings ----------------- @use "sass:color"; @import "../template/mixins"; @import "../template/settings"; // --------------------------------------------- - // Include theme-specific fonts @import url(https://fonts.googleapis.com/css?family=Montserrat:700); @import url(https://fonts.googleapis.com/css?family=Open+Sans:400,700,400italic,700italic); - // Override theme settings (see ../template/settings.scss) $backgroundColor: #111; -$mainFont: 'Open Sans', sans-serif; +$mainFont: "Open Sans", sans-serif; $linkColor: #e7ad52; -$linkColorHover: color.scale( $linkColor, $lightness: 20% ); -$headingFont: 'Montserrat', Impact, sans-serif; +$linkColorHover: color.scale($linkColor, $lightness: 20%); +$headingFont: "Montserrat", Impact, sans-serif; $headingTextShadow: none; $headingLetterSpacing: -0.03em; $headingTextTransform: none; @@ -32,7 +29,6 @@ $selectionBackgroundColor: #e7ad52; // Change text colors against light slide backgrounds @include light-bg-text-color(#222); - // Theme template ------------------------------ -@import "../template/theme"; -// --------------------------------------------- \ No newline at end of file +@import "./template/theme"; +// --------------------------------------------- diff --git a/css/theme/source/serif.scss b/css/theme/serif.scss similarity index 72% rename from css/theme/source/serif.scss rename to css/theme/serif.scss index bba4feb3b2a..30d0151484d 100644 --- a/css/theme/source/serif.scss +++ b/css/theme/serif.scss @@ -5,26 +5,23 @@ * This theme is Copyright (C) 2012-2013 Owen Versteeg, http://owenversteeg.com - it is MIT licensed. */ - // Default mixins and settings ----------------- @use "sass:color"; @import "../template/mixins"; @import "../template/settings"; // --------------------------------------------- - - // Override theme settings (see ../template/settings.scss) -$mainFont: 'Palatino Linotype', 'Book Antiqua', Palatino, FreeSerif, serif; +$mainFont: "Palatino Linotype", "Book Antiqua", Palatino, FreeSerif, serif; $mainColor: #000; -$headingFont: 'Palatino Linotype', 'Book Antiqua', Palatino, FreeSerif, serif; -$headingColor: #383D3D; +$headingFont: "Palatino Linotype", "Book Antiqua", Palatino, FreeSerif, serif; +$headingColor: #383d3d; $headingTextShadow: none; $headingTextTransform: none; -$backgroundColor: #F0F1EB; -$linkColor: #51483D; -$linkColorHover: color.scale( $linkColor, $lightness: 20% ); -$selectionBackgroundColor: #26351C; +$backgroundColor: #f0f1eb; +$linkColor: #51483d; +$linkColorHover: color.scale($linkColor, $lightness: 20%); +$selectionBackgroundColor: #26351c; $overlayElementBgColor: 0, 0, 0; $overlayElementFgColor: 240, 240, 240; @@ -36,7 +33,6 @@ $overlayElementFgColor: 240, 240, 240; // Change text colors against dark slide backgrounds @include dark-bg-text-color(#fff); - // Theme template ------------------------------ -@import "../template/theme"; +@import "./template/theme"; // --------------------------------------------- diff --git a/css/theme/source/simple.scss b/css/theme/simple.scss similarity index 82% rename from css/theme/source/simple.scss rename to css/theme/simple.scss index 7f2d625cae0..e4f2c897858 100644 --- a/css/theme/source/simple.scss +++ b/css/theme/simple.scss @@ -6,30 +6,26 @@ * reveal.js is Copyright (C) 2011-2012 Hakim El Hattab, http://hakim.se */ - // Default mixins and settings ----------------- @use "sass:color"; @import "../template/mixins"; @import "../template/settings"; // --------------------------------------------- - - // Include theme-specific fonts @import url(https://fonts.googleapis.com/css?family=News+Cycle:400,700); @import url(https://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic); - // Override theme settings (see ../template/settings.scss) -$mainFont: 'Lato', sans-serif; +$mainFont: "Lato", sans-serif; $mainColor: #000; -$headingFont: 'News Cycle', Impact, sans-serif; +$headingFont: "News Cycle", Impact, sans-serif; $headingColor: #000; $headingTextShadow: none; $headingTextTransform: none; $backgroundColor: #fff; -$linkColor: #00008B; -$linkColorHover: color.scale( $linkColor, $lightness: 20% ); +$linkColor: #00008b; +$linkColorHover: color.scale($linkColor, $lightness: 20%); $selectionBackgroundColor: rgba(0, 0, 0, 0.99); $overlayElementBgColor: 0, 0, 0; @@ -38,7 +34,6 @@ $overlayElementFgColor: 240, 240, 240; // Change text colors against dark slide backgrounds @include dark-bg-text-color(#fff); - // Theme template ------------------------------ -@import "../template/theme"; -// --------------------------------------------- \ No newline at end of file +@import "./template/theme"; +// --------------------------------------------- diff --git a/css/theme/source/sky.scss b/css/theme/sky.scss similarity index 82% rename from css/theme/source/sky.scss rename to css/theme/sky.scss index 2244c7e97ac..8e5b74dcc45 100644 --- a/css/theme/source/sky.scss +++ b/css/theme/sky.scss @@ -4,30 +4,26 @@ * Copyright (C) 2011-2012 Hakim El Hattab, http://hakim.se */ - // Default mixins and settings ----------------- @use "sass:color"; @import "../template/mixins"; @import "../template/settings"; // --------------------------------------------- - - // Include theme-specific fonts @import url(https://fonts.googleapis.com/css?family=Quicksand:400,700,400italic,700italic); @import url(https://fonts.googleapis.com/css?family=Open+Sans:400italic,700italic,400,700); - // Override theme settings (see ../template/settings.scss) -$mainFont: 'Open Sans', sans-serif; +$mainFont: "Open Sans", sans-serif; $mainColor: #333; -$headingFont: 'Quicksand', sans-serif; +$headingFont: "Quicksand", sans-serif; $headingColor: #333; $headingLetterSpacing: -0.08em; $headingTextShadow: none; $backgroundColor: #f7fbfc; $linkColor: #3b759e; -$linkColorHover: color.scale( $linkColor, $lightness: 20% ); +$linkColorHover: color.scale($linkColor, $lightness: 20%); $selectionBackgroundColor: #134674; $overlayElementBgColor: 0, 0, 0; @@ -35,19 +31,17 @@ $overlayElementFgColor: 240, 240, 240; // Fix links so they are not cut off .reveal a { - line-height: 1.3em; + line-height: 1.3em; } // Background generator @mixin bodyBackground() { - @include radial-gradient( #add9e4, #f7fbfc ); + @include radial-gradient(#add9e4, #f7fbfc); } // Change text colors against dark slide backgrounds @include dark-bg-text-color(#fff); - - // Theme template ------------------------------ -@import "../template/theme"; +@import "./template/theme"; // --------------------------------------------- diff --git a/css/theme/source/solarized.scss b/css/theme/solarized.scss similarity index 68% rename from css/theme/source/solarized.scss rename to css/theme/solarized.scss index c93c2a5ee8f..b85298d8057 100644 --- a/css/theme/source/solarized.scss +++ b/css/theme/solarized.scss @@ -3,45 +3,41 @@ * Author: Achim Staebler */ - // Default mixins and settings ----------------- @use "sass:color"; @import "../template/mixins"; @import "../template/settings"; // --------------------------------------------- - - // Include theme-specific fonts @import url(./fonts/league-gothic/league-gothic.css); @import url(https://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic); - /** * Solarized colors by Ethan Schoonover */ html * { - color-profile: sRGB; - rendering-intent: auto; + color-profile: sRGB; + rendering-intent: auto; } // Solarized colors -$base03: #002b36; -$base02: #073642; -$base01: #586e75; -$base00: #657b83; -$base0: #839496; -$base1: #93a1a1; -$base2: #eee8d5; -$base3: #fdf6e3; -$yellow: #b58900; -$orange: #cb4b16; -$red: #dc322f; -$magenta: #d33682; -$violet: #6c71c4; -$blue: #268bd2; -$cyan: #2aa198; -$green: #859900; +$base03: #002b36; +$base02: #073642; +$base01: #586e75; +$base00: #657b83; +$base0: #839496; +$base1: #93a1a1; +$base2: #eee8d5; +$base3: #fdf6e3; +$yellow: #b58900; +$orange: #cb4b16; +$red: #dc322f; +$magenta: #d33682; +$violet: #6c71c4; +$blue: #268bd2; +$cyan: #2aa198; +$green: #859900; // Override theme settings (see ../template/settings.scss) $mainColor: $base00; @@ -49,7 +45,7 @@ $headingColor: $base01; $headingTextShadow: none; $backgroundColor: $base3; $linkColor: $blue; -$linkColorHover: color.scale( $linkColor, $lightness: 20% ); +$linkColorHover: color.scale($linkColor, $lightness: 20%); $selectionBackgroundColor: $magenta; $overlayElementBgColor: 0, 0, 0; @@ -60,8 +56,6 @@ $overlayElementFgColor: 240, 240, 240; // @include radial-gradient( rgba($base3,1), rgba(lighten($base3, 20%),1) ); // } - - // Theme template ------------------------------ -@import "../template/theme"; +@import "./template/theme"; // --------------------------------------------- diff --git a/css/theme/source/white-contrast.scss b/css/theme/white-contrast.scss similarity index 80% rename from css/theme/source/white-contrast.scss rename to css/theme/white-contrast.scss index 29d6d94787c..c6bbe914bff 100644 --- a/css/theme/source/white-contrast.scss +++ b/css/theme/white-contrast.scss @@ -7,18 +7,15 @@ * - $mainFontSize controls code blocks, too (although under some ratio). */ - // Default mixins and settings ----------------- @use "sass:color"; @import "../template/mixins"; @import "../template/settings"; // --------------------------------------------- - // Include theme-specific fonts @import url(./fonts/source-sans-pro/source-sans-pro.css); - // Override theme settings (see ../template/settings.scss) $backgroundColor: #fff; @@ -26,20 +23,20 @@ $mainColor: #000; $headingColor: #000; $mainFontSize: 42px; -$mainFont: 'Source Sans Pro', Helvetica, sans-serif; -$headingFont: 'Source Sans Pro', Helvetica, sans-serif; +$mainFont: "Source Sans Pro", Helvetica, sans-serif; +$headingFont: "Source Sans Pro", Helvetica, sans-serif; $headingTextShadow: none; $headingLetterSpacing: normal; $headingTextTransform: uppercase; $headingFontWeight: 600; $linkColor: #2a76dd; -$linkColorHover: color.scale( $linkColor, $lightness: 15% ); -$selectionBackgroundColor: color.scale( $linkColor, $lightness: 25% ); +$linkColorHover: color.scale($linkColor, $lightness: 15%); +$selectionBackgroundColor: color.scale($linkColor, $lightness: 25%); $heading1Size: 2.5em; $heading2Size: 1.6em; $heading3Size: 1.3em; -$heading4Size: 1.0em; +$heading4Size: 1em; $overlayElementBgColor: 0, 0, 0; $overlayElementFgColor: 240, 240, 240; @@ -47,7 +44,6 @@ $overlayElementFgColor: 240, 240, 240; // Change text colors against dark slide backgrounds @include dark-bg-text-color(#fff); - // Theme template ------------------------------ -@import "../template/theme"; +@import "./template/theme"; // --------------------------------------------- diff --git a/css/theme/source/white.scss b/css/theme/white.scss similarity index 77% rename from css/theme/source/white.scss rename to css/theme/white.scss index d4be6536cd4..6e103cac00e 100644 --- a/css/theme/source/white.scss +++ b/css/theme/white.scss @@ -4,18 +4,15 @@ * By Hakim El Hattab, http://hakim.se */ - // Default mixins and settings ----------------- @use "sass:color"; @import "../template/mixins"; @import "../template/settings"; // --------------------------------------------- - // Include theme-specific fonts @import url(./fonts/source-sans-pro/source-sans-pro.css); - // Override theme settings (see ../template/settings.scss) $backgroundColor: #fff; @@ -23,20 +20,20 @@ $mainColor: #222; $headingColor: #222; $mainFontSize: 42px; -$mainFont: 'Source Sans Pro', Helvetica, sans-serif; -$headingFont: 'Source Sans Pro', Helvetica, sans-serif; +$mainFont: "Source Sans Pro", Helvetica, sans-serif; +$headingFont: "Source Sans Pro", Helvetica, sans-serif; $headingTextShadow: none; $headingLetterSpacing: normal; $headingTextTransform: uppercase; $headingFontWeight: 600; $linkColor: #2a76dd; -$linkColorHover: color.scale( $linkColor, $lightness: 15% ); -$selectionBackgroundColor: color.scale( $linkColor, $lightness: 25% ); +$linkColorHover: color.scale($linkColor, $lightness: 15%); +$selectionBackgroundColor: color.scale($linkColor, $lightness: 25%); $heading1Size: 2.5em; $heading2Size: 1.6em; $heading3Size: 1.3em; -$heading4Size: 1.0em; +$heading4Size: 1em; $overlayElementBgColor: 0, 0, 0; $overlayElementFgColor: 240, 240, 240; @@ -44,7 +41,6 @@ $overlayElementFgColor: 240, 240, 240; // Change text colors against dark slide backgrounds @include dark-bg-text-color(#fff); - // Theme template ------------------------------ -@import "../template/theme"; +@import "./template/theme"; // --------------------------------------------- diff --git a/demo.html b/demo.html index 36d830281c1..d80907f1c2a 100644 --- a/demo.html +++ b/demo.html @@ -455,13 +455,19 @@

THE END

- + + + - - - - - - + + + + + + + - diff --git a/index.html b/index.html index 45c63070b76..2cce5f56f3a 100644 --- a/index.html +++ b/index.html @@ -1,8 +1,11 @@ - + - - + + reveal.js @@ -45,7 +48,7 @@ hash: true, // Learn about plugins: https://revealjs.com/plugins/ - plugins: [ RevealMarkdown, RevealHighlight, RevealNotes ] + plugins: [RevealMarkdown, RevealHighlight, RevealNotes], }); From e614fd5b98a867d46054161b1ddf256c5012a662 Mon Sep 17 00:00:00 2001 From: Hakim El Hattab Date: Tue, 5 Nov 2024 20:03:29 +0100 Subject: [PATCH 13/15] fix and format examples decks --- examples/500-slides.html | 15 +- examples/auto-animate.html | 341 ++++++++++++++++++++++----- examples/backgrounds.html | 41 ++-- examples/barebones.html | 15 +- examples/layout-helpers.html | 63 +++-- examples/markdown.html | 254 ++++++++++---------- examples/math.html | 30 +-- examples/media.html | 37 +-- examples/multiple-presentations.html | 63 +++-- examples/scroll.html | 134 +++++++---- examples/transitions.html | 15 +- 11 files changed, 642 insertions(+), 366 deletions(-) diff --git a/examples/500-slides.html b/examples/500-slides.html index 2270c747912..995805d8b35 100644 --- a/examples/500-slides.html +++ b/examples/500-slides.html @@ -1,14 +1,17 @@ - + - + reveal.js - 500 slides - + - - + + @@ -519,7 +522,7 @@ diff --git a/examples/auto-animate.html b/examples/auto-animate.html index 199810e409a..bcc083a8169 100644 --- a/examples/auto-animate.html +++ b/examples/auto-animate.html @@ -1,27 +1,27 @@ - + - - + reveal.js - Auto Animate - + - - - + + + -
-

Auto-Animate Example

This will fade out

- + 

 						function Example() {
 						  const [count, setCount] = useState(0);
@@ -30,9 +30,9 @@ 
Auto-Animate Example

Auto-Animate Example

-

This will fade out

+

This will fade out

This element is unmatched

- + 

 						function Example() {
 						  New line!
@@ -42,10 +42,14 @@ 
Auto-Animate Example
-

Line Height & Letter Spacing

+

+ Line Height & Letter Spacing +

-

Line Height & Letter Spacing

+

+ Line Height & Letter Spacing +

@@ -125,36 +129,204 @@

Swapping list items

-

SLIDE 1

-

Animate Anything

-
-
-
-
+

SLIDE 1

+

Animate Anything

+
+
+
+
-

SLIDE 2

+

SLIDE 2

With Auto Animate

-
-
-
-
+
+
+
+
-

SLIDE 3

-

With Auto Animate

-
-
-
-
+

SLIDE 3

+

With Auto Animate

+
+
+
+
-

SLIDE 3

-

With Auto Animate

-
-
-
-
+

SLIDE 3

+

With Auto Animate

+
+
+
+
@@ -178,48 +350,93 @@

B2

- Slide 1
- Slide 2
- Slide 3
- Slide 4
-
A
+ Slide 1
+ Slide 2
+ Slide 3
+ Slide 4
+
+ A +
- Slide 1
- Slide 2
- Slide 3
- Slide 4
-
A
+ Slide 1
+ Slide 2
+ Slide 3
+ Slide 4
+
+ A +
- Slide 1
- Slide 2
- Slide 3
- Slide 4
-
A
+ Slide 1
+ Slide 2
+ Slide 3
+ Slide 4
+
+ A +
- Slide 1
- Slide 2
- Slide 3
- Slide 4
-
A
+ Slide 1
+ Slide 2
+ Slide 3
+ Slide 4
+
+ A +
-
-
- + - diff --git a/examples/backgrounds.html b/examples/backgrounds.html index 19d40c3463e..a971e7d9b9c 100644 --- a/examples/backgrounds.html +++ b/examples/backgrounds.html @@ -1,15 +1,17 @@ - + - - + reveal.js - Slide Backgrounds - + - - + + - - - + + + - diff --git a/examples/scroll.html b/examples/scroll.html index afe7d5a0833..92199105b81 100644 --- a/examples/scroll.html +++ b/examples/scroll.html @@ -1,25 +1,24 @@ - + - - + reveal.js - Scroll View - + - - - - + + + + -
-
-

Scroll View

Scroll triggered fragments

@@ -29,35 +28,81 @@

Scroll triggered fragments

  • Step three
    • -

    Scrollbar inverts
    based on slide bg

    -
    +
    +

    Scrollbar inverts
    based on slide bg

    +
    +

    Auto-Animate

    Scroll triggered auto-animations 😍

    -
    -
    -
    +
    +
    +
    -
    +
    -
    -
    -
    +
    +
    +
    -

    Auto-Animate

    +

    Auto-Animate

    -
    +
    -
    -
    -
    +
    +
    +
    -

    Auto-Animate

    +

    Auto-Animate

    -
    +

    Code highlights,
    meet scroll triggers

    -
    -
    -

    Image Backgrounds

    -
    -
    -
    -

    Video background

    -
    -
    -
    +
    +

    Image Backgrounds

    +
    +
    +

    Video background

    +
    +

    The end

    -
    -
    - - - + + + - diff --git a/examples/transitions.html b/examples/transitions.html index adbfd150e72..aa2e2727431 100644 --- a/examples/transitions.html +++ b/examples/transitions.html @@ -1,13 +1,12 @@ - + - - + reveal.js - Slide Transitions - - + +