1
0
mirror of https://github.com/hakimel/reveal.js.git synced 2025-08-17 20:11:19 +02:00

refactored all themes to latest sass syntax, fixes deprecation warnings

This commit is contained in:
Hakim El Hattab
2024-11-05 19:21:39 +01:00
parent 294d7c2486
commit 94a86f466d
36 changed files with 589 additions and 574 deletions

View File

@@ -4,18 +4,17 @@ Themes are written using Sass to keep things modular and reduce the need for rep
## Creating a Theme
To create your own theme, start by duplicating a ```.scss``` file in [/css/theme/source](https://github.com/hakimel/reveal.js/blob/master/css/theme/source). It will be automatically compiled from Sass to CSS (see the [gulpfile](https://github.com/hakimel/reveal.js/blob/master/gulpfile.js)) when you run `npm run build -- css-themes`.
To create your own theme, start by duplicating a ```.scss``` file in [/css/theme/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 does four things in the following order:
Each theme file follows the same structure:
1. **Include [/css/theme/template/mixins.scss](https://github.com/hakimel/reveal.js/blob/master/css/theme/template/mixins.scss)**
Shared utility functions.
2. **Include [/css/theme/template/settings.scss](https://github.com/hakimel/reveal.js/blob/master/css/theme/template/settings.scss)**
Declares a set of custom variables that the template file (step 4) expects. Can be overridden in step 3.
Declares a set of custom CSS variables that the template file (step 4) expects. Each of these variables can be overridden to customize the theme.
3. **Override**
This is where you override the default theme. Either by specifying variables (see [settings.scss](https://github.com/hakimel/reveal.js/blob/master/css/theme/template/settings.scss) for reference) or by adding any selectors and styles you please.
4. **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.
4. **Optionally add custom fonts and/or additional styles**

View File

@@ -4,41 +4,49 @@
* Copyright (C) 2011-2012 Hakim El Hattab, http://hakim.se
*/
// Default mixins and settings -----------------
// Load utils
@use "sass:color";
@import "../template/mixins";
@import "../template/settings";
// ---------------------------------------------
@use "template/mixins" as mixins;
$active-color: #8b743d;
// Inject theme variables (with some overrides)
@use "template/settings" with (
$background-color: #f7f3de,
$background: radial-gradient( rgba(255,255,255,1), rgba(247,242,211,1) ),
$main-font: #{'Source Sans Pro', Helvetica, sans-serif},
$main-font-size: 42px,
$main-color: #333,
$heading-color: #333,
$heading-font: #{'Source Sans Pro', Helvetica, sans-serif},
$heading-font-weight: 600,
$heading1-text-shadow: #{0 1px 0 #ccc, 0 2px 0 #c9c9c9, 0 3px 0 #bbb, 0 4px 0 #b9b9b9, 0 5px 0 #aaa, 0 6px 1px rgba(0,0,0,.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: 1.0em,
$link-color: $active-color,
$link-color-hover: color.scale( $active-color, $lightness: 20% ),
$selection-color: #333,
$selection-background-color: color.scale( $active-color, $lightness: 35% ),
$overlay-element-bg-color: #{0, 0, 0},
$overlay-element-fg-color: #{240, 240, 240}
);
// Inject the theme template
@use "template/theme";
// Include theme-specific fonts
@import url("./fonts/league-gothic/league-gothic.css");
@import url("https://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic");
// Override theme settings (see ../template/settings.scss)
$mainColor: #333;
$headingColor: #333;
$headingTextShadow: none;
$backgroundColor: #f7f3de;
$linkColor: #8b743d;
$linkColorHover: color.scale($linkColor, $lightness: 20%);
$selectionBackgroundColor: rgba(79, 64, 28, 0.99);
$heading1TextShadow: 0 1px 0 #ccc, 0 2px 0 #c9c9c9, 0 3px 0 #bbb,
0 4px 0 #b9b9b9, 0 5px 0 #aaa, 0 6px 1px rgba(0, 0, 0, 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));
}
// Change text colors against dark slide backgrounds
@include dark-bg-text-color(#fff);
// Theme template ------------------------------
@import "./template/theme";
// ---------------------------------------------
// Change text colors against light slide backgrounds
@include mixins.dark-bg-text-color(#fff);

View File

@@ -7,40 +7,41 @@
* - $mainFontSize controls code blocks, too (although under some ratio).
*/
// Default mixins and settings -----------------
// Load utils
@use "sass:color";
@import "../template/mixins";
@import "../template/settings";
// ---------------------------------------------
@use "template/mixins" as mixins;
$active-color: #42affa;
// Inject theme variables (with some overrides)
@use "template/settings" with (
$background-color: #000,
$main-font: #{'Source Sans Pro', Helvetica, sans-serif},
$main-font-size: 42px,
$main-color: #fff,
$heading-color: #fff,
$heading-font: #{'Source Sans Pro', Helvetica, sans-serif},
$heading-font-weight: 600,
$heading1-size: 2.5em,
$heading2-size: 1.6em,
$heading3-size: 1.3em,
$heading4-size: 1.0em,
$link-color: $active-color,
$link-color-hover: color.scale( $active-color, $lightness: 15% ),
$selection-color: #fff,
$selection-background-color: color.scale( $active-color, $lightness: -35% )
);
// Inject the theme template
@use "template/theme";
// Include theme-specific fonts
@import url("./fonts/source-sans-pro/source-sans-pro.css");
// Override theme settings (see ../template/settings.scss)
$backgroundColor: #000000;
$mainColor: #fff;
$headingColor: #fff;
$mainFontSize: 42px;
$mainFont: "Source Sans Pro", Helvetica, sans-serif;
$headingFont: "Source Sans Pro", Helvetica, sans-serif;
$headingTextShadow: none;
$headingLetterSpacing: normal;
$headingTextTransform: uppercase;
$headingFontWeight: 600;
$linkColor: #42affa;
$linkColorHover: color.scale($linkColor, $lightness: 15%);
$selectionBackgroundColor: color.scale($linkColor, $lightness: 25%);
$heading1Size: 2.5em;
$heading2Size: 1.6em;
$heading3Size: 1.3em;
$heading4Size: 1em;
// Change text colors against light slide backgrounds
@include light-bg-text-color(#000);
// Theme template ------------------------------
@import "./template/theme";
// ---------------------------------------------
@include mixins.light-bg-text-color(#000);

View File

@@ -4,40 +4,41 @@
* By Hakim El Hattab, http://hakim.se
*/
// Default mixins and settings -----------------
// Load utils
@use "sass:color";
@import "../template/mixins";
@import "../template/settings";
// ---------------------------------------------
@use "template/mixins" as mixins;
$active-color: #42affa;
// Inject theme variables (with some overrides)
@use "template/settings" with (
$background-color: #191919,
$main-font: #{'Source Sans Pro', Helvetica, sans-serif},
$main-font-size: 42px,
$main-color: #fff,
$heading-color: #fff,
$heading-font: #{'Source Sans Pro', Helvetica, sans-serif},
$heading-font-weight: 600,
$heading1-size: 2.5em,
$heading2-size: 1.6em,
$heading3-size: 1.3em,
$heading4-size: 1.0em,
$link-color: $active-color,
$link-color-hover: color.scale( $active-color, $lightness: 15% ),
$selection-color: #fff,
$selection-background-color: color.scale( $active-color, $lightness: -35% )
);
// Inject the theme template
@use "template/theme";
// Include theme-specific fonts
@import url("./fonts/source-sans-pro/source-sans-pro.css");
// Override theme settings (see ../template/settings.scss)
$backgroundColor: #191919;
$mainColor: #fff;
$headingColor: #fff;
$mainFontSize: 42px;
$mainFont: "Source Sans Pro", Helvetica, sans-serif;
$headingFont: "Source Sans Pro", Helvetica, sans-serif;
$headingTextShadow: none;
$headingLetterSpacing: normal;
$headingTextTransform: uppercase;
$headingFontWeight: 600;
$linkColor: #42affa;
$linkColorHover: color.scale($linkColor, $lightness: 15%);
$selectionBackgroundColor: rgba($linkColor, 0.75);
$heading1Size: 2.5em;
$heading2Size: 1.6em;
$heading3Size: 1.3em;
$heading4Size: 1em;
// Change text colors against light slide backgrounds
@include light-bg-text-color(#222);
// Theme template ------------------------------
@import "./template/theme";
// ---------------------------------------------
@include mixins.light-bg-text-color(#222);

View File

@@ -10,55 +10,41 @@
*
*/
// Default mixins and settings -----------------
// Load utils
@use "sass:color";
@import "../template/mixins";
@import "../template/settings";
// ---------------------------------------------
@use "template/mixins" as mixins;
// Include theme-specific fonts
$coal: #222;
$active-color: #a23;
$code-background-color: #23241f;
// Inject theme variables (with some overrides)
@use "template/settings" with (
$background-color: $coal,
$main-font: #{Ubuntu, 'sans-serif'},
$main-color: #eee,
$heading-font: #{Ubuntu, 'sans-serif'},
$heading-text-shadow: 2px 2px 2px $coal,
$heading1-text-shadow: #{0 1px 0 #ccc, 0 2px 0 #c9c9c9, 0 3px 0 #bbb, 0 4px 0 #b9b9b9, 0 5px 0 #aaa, 0 6px 1px rgba(0,0,0,.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)},
$link-color: $active-color,
$link-color-hover: color.scale( $active-color, $lightness: 20% ),
$selection-background-color: $active-color,
$selection-color: #fff
);
// Inject the theme template
@use "template/theme";
// Fonts
@import url("https://fonts.googleapis.com/css?family=Ubuntu:300,700,300italic,700italic");
// Colors used in the theme
$blood: #a23;
$coal: #222;
$codeBackground: #23241f;
$backgroundColor: $coal;
// Main text
$mainFont: Ubuntu, "sans-serif";
$mainColor: #eee;
// Headings
$headingFont: Ubuntu, "sans-serif";
$headingTextShadow: 2px 2px 2px $coal;
// h1 shadow, borrowed humbly from
// (c) Default theme by Hakim El Hattab
$heading1TextShadow: 0 1px 0 #ccc, 0 2px 0 #c9c9c9, 0 3px 0 #bbb,
0 4px 0 #b9b9b9, 0 5px 0 #aaa, 0 6px 1px rgba(0, 0, 0, 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%);
// Text selection
$selectionBackgroundColor: $blood;
$selectionColor: #fff;
// Change text colors against dark slide backgrounds
@include light-bg-text-color(#222);
// Theme template ------------------------------
@import "./template/theme";
// ---------------------------------------------
// some overrides after theme template import
// Invert text color when the background is light
@include mixins.light-bg-text-color(#222);
.reveal p {
font-weight: 300;
@@ -85,9 +71,9 @@ section.has-light-background {
}
.reveal p code {
background-color: $codeBackground;
display: inline-block;
border-radius: 7px;
background-color: $code-background-color;
display: inline-block;
border-radius: 7px;
}
.reveal small code {

View File

@@ -3,12 +3,9 @@
* Based on https://draculatheme.com
*/
// Default mixins and settings -----------------
// Load utils
@use "sass:color";
@import "./template/mixins";
@import "./template/settings";
// ---------------------------------------------
@use "template/mixins" as mixins;
// Include theme-specific fonts
@import url(./fonts/league-gothic/league-gothic.css);
@@ -34,15 +31,6 @@ $systemFontsMono: Menlo,
Lucida Console,
monospace;
/**
* Dracula colors by Zeno Rocha
* https://draculatheme.com/contribute
*/
html * {
color-profile: sRGB;
rendering-intent: auto;
}
$background: #282A36;
$foreground: #F8F8F2;
$selection: #44475A;
@@ -55,39 +43,59 @@ $purple: #BD93F9;
$cyan: #8BE9FD;
$pink: #FF79C6;
// Override theme settings (see ../template/settings.scss)
$mainColor: $foreground;
$headingColor: $purple;
$headingTextShadow: none;
$headingTextTransform: none;
$backgroundColor: $background;
$linkColor: $pink;
$linkColorHover: $cyan;
$selectionBackgroundColor: $selection;
$inlineCodeColor: $green;
$listBulletColor: $cyan;
$mainFont: $systemFontsSansSerif;
$codeFont: "Fira Code", $systemFontsMono;
// Change text colors against light slide backgrounds
@include light-bg-text-color($background);
// Inject theme variables (with some overrides)
@use "template/settings" with (
$background-color: #191919,
$main-font: $mainFont,
$main-font-size: 42px,
$main-color: $foreground,
$code-font: $codeFont,
$heading-color: $purple,
$heading-font: $mainFont,
$heading-font-weight: 600,
$heading-text-transform: none,
$heading1-size: 2.5em,
$heading2-size: 1.6em,
$heading3-size: 1.3em,
$heading4-size: 1.0em,
$link-color: $pink,
$link-color-hover: $cyan,
$selection-color: #fff,
$selection-background-color: $selection
);
// Inject the theme template
@use "template/theme";
// Include theme-specific fonts
@import url("./fonts/source-sans-pro/source-sans-pro.css");
// Change text colors against light slide backgrounds
@include mixins.light-bg-text-color($background);
// Theme template ------------------------------
@import "./template/theme";
// ---------------------------------------------
// Define additional color effects based on Dracula spec
// https://spec.draculatheme.com/
:root {
--r-bold-color: #{$orange};
--r-italic-color: #{$yellow};
--r-inline-code-color: #{$inlineCodeColor};
--r-list-bullet-color: #{$listBulletColor};
--r-inline-code-color: #{$green};
--r-list-bullet-color: #{$cyan};
}
/**
* Dracula colors by Zeno Rocha
* https://draculatheme.com/contribute
*/
.reveal {
strong, b {
color: var(--r-bold-color);

View File

@@ -6,32 +6,26 @@
* Copyright (C) 2011-2012 Hakim El Hattab, http://hakim.se
*/
// Default mixins and settings -----------------
// Load utils
@use "sass:color";
@import "./template/mixins";
@import "./template/settings";
// ---------------------------------------------
@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)},
);
// Inject the theme template
@use "template/theme";
// Include theme-specific fonts
@import url("./fonts/league-gothic/league-gothic.css");
@import url("https://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic");
// Override theme settings (see ../template/settings.scss)
$headingTextShadow: 0px 0px 6px rgba(0,0,0,0.2);
$heading1TextShadow: 0 1px 0 #ccc, 0 2px 0 #c9c9c9, 0 3px 0 #bbb, 0 4px 0 #b9b9b9, 0 5px 0 #aaa, 0 6px 1px rgba(0,0,0,.1), 0 0 5px rgba(0,0,0,.1), 0 1px 3px rgba(0,0,0,.3), 0 3px 5px rgba(0,0,0,.2), 0 5px 10px rgba(0,0,0,.25), 0 20px 20px rgba(0,0,0,.15);
// Background generator
@mixin bodyBackground() {
@include radial-gradient( rgba(28,30,32,1), rgba(85,90,95,1) );
}
// Change text colors against light slide backgrounds
@include light-bg-text-color(#222);
// Theme template ------------------------------
@import "./template/theme";
// ---------------------------------------------
@include mixins.light-bg-text-color(#222);

View File

@@ -3,50 +3,51 @@
* Author: Achim Staebler
*/
// Default mixins and settings -----------------
// Load utils
@use "sass:color";
@import "../template/mixins";
@import "../template/settings";
// ---------------------------------------------
@use "template/mixins" as mixins;
// Solarized colors by Ethan Schoonover
$base03: #002b36;
$base02: #073642;
$base01: #586e75;
$base00: #657b83;
$base0: #839496;
$base1: #93a1a1;
$base2: #eee8d5;
$base3: #fdf6e3;
$yellow: #b58900;
$orange: #cb4b16;
$red: #dc322f;
$magenta: #d33682;
$violet: #6c71c4;
$blue: #268bd2;
$cyan: #2aa198;
$green: #859900;;
$active-color: $blue;
// Inject theme variables (with some overrides)
@use "template/settings" with (
$background-color: $base03,
$main-color: $base1,
$heading-color: $base2,
$link-color: $active-color,
$link-color-hover: color.scale( $active-color, $lightness: 20% ),
$selection-color: #fff,
$selection-background-color: $magenta
);
// Inject the theme template
@use "template/theme";
// Include theme-specific fonts
// Include theme-specific fonts
@import url("./fonts/league-gothic/league-gothic.css");
@import url("https://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic");
/**
* Solarized colors by Ethan Schoonover
*/
// Solarized colors
$base03: #002b36;
$base02: #073642;
$base01: #586e75;
$base00: #657b83;
$base0: #839496;
$base1: #93a1a1;
$base2: #eee8d5;
$base3: #fdf6e3;
$yellow: #b58900;
$orange: #cb4b16;
$red: #dc322f;
$magenta: #d33682;
$violet: #6c71c4;
$blue: #268bd2;
$cyan: #2aa198;
$green: #859900;
// Override theme settings (see ../template/settings.scss)
$mainColor: $base1;
$headingColor: $base2;
$headingTextShadow: none;
$backgroundColor: $base03;
$linkColor: $blue;
$linkColorHover: color.scale($linkColor, $lightness: 20%);
$selectionBackgroundColor: $magenta;
// Change text colors against light slide backgrounds
@include light-bg-text-color(#222);
// Theme template ------------------------------
@import "./template/theme";
// ---------------------------------------------
@include mixins.light-bg-text-color(#222);

View File

@@ -4,31 +4,37 @@
* Copyright (C) 2011-2012 Hakim El Hattab, http://hakim.se
*/
// Default mixins and settings -----------------
// Load utils
@use "sass:color";
@import "../template/mixins";
@import "../template/settings";
// ---------------------------------------------
@use "template/mixins" as mixins;
$active-color: #e7ad52;
// Inject theme variables (with some overrides)
@use "template/settings" with (
$background-color: #111,
$main-font: #{'Open Sans', sans-serif},
$main-color: #fff,
$heading-color: #fff,
$heading-font: #{'Montserrat', Impact, sans-serif},
$heading-text-transform: none,
$heading-letter-spacing: -0.03em,
$link-color: $active-color,
$link-color-hover: color.scale( $active-color, $lightness: 20% ),
$selection-color: #111,
$selection-background-color: $active-color
);
// Inject the theme template
@use "template/theme";
// Include theme-specific fonts
@import url("https://fonts.googleapis.com/css?family=Montserrat:700");
@import url("https://fonts.googleapis.com/css?family=Open+Sans:400,700,400italic,700italic");
// Override theme settings (see ../template/settings.scss)
$backgroundColor: #111;
$mainFont: "Open Sans", sans-serif;
$linkColor: #e7ad52;
$linkColorHover: color.scale($linkColor, $lightness: 20%);
$headingFont: "Montserrat", Impact, sans-serif;
$headingTextShadow: none;
$headingLetterSpacing: -0.03em;
$headingTextTransform: none;
$selectionBackgroundColor: #e7ad52;
// Change text colors against light slide backgrounds
@include light-bg-text-color(#222);
// Theme template ------------------------------
@import "./template/theme";
// ---------------------------------------------
@include mixins.light-bg-text-color(#222);

View File

@@ -5,34 +5,44 @@
* This theme is Copyright (C) 2012-2013 Owen Versteeg, http://owenversteeg.com - it is MIT licensed.
*/
// Default mixins and settings -----------------
// Load utils
@use "sass:color";
@import "../template/mixins";
@import "../template/settings";
// ---------------------------------------------
@use "template/mixins" as mixins;
// Override theme settings (see ../template/settings.scss)
$mainFont: "Palatino Linotype", "Book Antiqua", Palatino, FreeSerif, serif;
$mainColor: #000;
$headingFont: "Palatino Linotype", "Book Antiqua", Palatino, FreeSerif, serif;
$headingColor: #383d3d;
$headingTextShadow: none;
$headingTextTransform: none;
$backgroundColor: #f0f1eb;
$linkColor: #51483d;
$linkColorHover: color.scale($linkColor, $lightness: 20%);
$selectionBackgroundColor: #26351c;
$active-color: #51483D;
$overlayElementBgColor: 0, 0, 0;
$overlayElementFgColor: 240, 240, 240;
// Inject theme variables (with some overrides)
@use "template/settings" with (
$background-color: #F0F1EB,
$main-font: #{'Palatino Linotype', 'Book Antiqua', Palatino, FreeSerif, serif},
$main-font-size: 42px,
$main-color: #000,
$heading-color: #383D3D,
$heading-font: #{'Palatino Linotype', 'Book Antiqua', Palatino, FreeSerif, serif},
$heading-font-weight: 600,
$heading-text-transform: none,
$link-color: $active-color,
$link-color-hover: color.scale( $active-color, $lightness: 25% ),
$selection-color: #fff,
$selection-background-color: $active-color,
$overlay-element-bg-color: #{0, 0, 0},
$overlay-element-fg-color: #{240, 240, 240}
);
// Inject the theme template
@use "template/theme";
// Include theme-specific fonts
@import url("./fonts/source-sans-pro/source-sans-pro.css");
// Change text colors against light slide backgrounds
@include mixins.dark-bg-text-color(#fff);
.reveal a {
line-height: 1.3em;
}
// Change text colors against dark slide backgrounds
@include dark-bg-text-color(#fff);
// Theme template ------------------------------
@import "./template/theme";
// ---------------------------------------------

View File

@@ -6,34 +6,44 @@
* reveal.js is Copyright (C) 2011-2012 Hakim El Hattab, http://hakim.se
*/
// Default mixins and settings -----------------
// Load utils
@use "sass:color";
@import "../template/mixins";
@import "../template/settings";
// ---------------------------------------------
@use "template/mixins" as mixins;
$active-color: #00008B;
// Inject theme variables (with some overrides)
@use "template/settings" with (
$background-color: #fff,
$main-color: #000,
$main-font: #{'Lato', sans-serif},
$heading-color: #000,
$heading-font: #{'News Cycle', Impact, sans-serif},
$heading-font-weight: 600,
$heading1-size: 2.5em,
$heading2-size: 1.6em,
$heading3-size: 1.3em,
$heading4-size: 1.0em,
$link-color: $active-color,
$link-color-hover: color.scale( $active-color, $lightness: 20% ),
$selection-color: #fff,
$selection-background-color: $active-color,
$overlay-element-bg-color: #{0, 0, 0},
$overlay-element-fg-color: #{240, 240, 240}
);
// Inject the theme template
@use "template/theme";
// Include theme-specific fonts
@import url("https://fonts.googleapis.com/css?family=News+Cycle:400,700");
@import url("https://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic");
// Override theme settings (see ../template/settings.scss)
$mainFont: "Lato", sans-serif;
$mainColor: #000;
$headingFont: "News Cycle", Impact, sans-serif;
$headingColor: #000;
$headingTextShadow: none;
$headingTextTransform: none;
$backgroundColor: #fff;
$linkColor: #00008b;
$linkColorHover: color.scale($linkColor, $lightness: 20%);
$selectionBackgroundColor: rgba(0, 0, 0, 0.99);
$overlayElementBgColor: 0, 0, 0;
$overlayElementFgColor: 240, 240, 240;
// Change text colors against dark slide backgrounds
@include dark-bg-text-color(#fff);
// Theme template ------------------------------
@import "./template/theme";
// ---------------------------------------------
// Change text when the background is inverted
@include mixins.dark-bg-text-color(#fff);

View File

@@ -4,44 +4,44 @@
* Copyright (C) 2011-2012 Hakim El Hattab, http://hakim.se
*/
// Default mixins and settings -----------------
// Load utils
@use "sass:color";
@import "../template/mixins";
@import "../template/settings";
// ---------------------------------------------
@use "template/mixins" as mixins;
$active-color: #2a76dd;
// Inject theme variables (with some overrides)
@use "template/settings" with (
$background: radial-gradient( #f7fbfc, #add9e4 ),
$background-color: #f7fbfc,
$main-color: #333,
$main-font: #{'Open Sans', sans-serif},
$heading-color: #333,
$heading-font: #{'Quicksand', sans-serif},
$heading-letter-spacing: -0.05em,
$link-color: $active-color,
$link-color-hover: color.scale( $active-color, $lightness: 15% ),
$selection-color: #fff,
$selection-background-color: $active-color,
$overlay-element-bg-color: #{0, 0, 0},
$overlay-element-fg-color: #{240, 240, 240}
);
// Inject the theme template
@use "template/theme";
// Include theme-specific fonts
@import url("https://fonts.googleapis.com/css?family=Quicksand:400,700,400italic,700italic");
@import url("https://fonts.googleapis.com/css?family=Open+Sans:400italic,700italic,400,700");
// Override theme settings (see ../template/settings.scss)
$mainFont: "Open Sans", sans-serif;
$mainColor: #333;
$headingFont: "Quicksand", sans-serif;
$headingColor: #333;
$headingLetterSpacing: -0.08em;
$headingTextShadow: none;
$backgroundColor: #f7fbfc;
$linkColor: #3b759e;
$linkColorHover: color.scale($linkColor, $lightness: 20%);
$selectionBackgroundColor: #134674;
// Change text when the background is inverted
@include mixins.dark-bg-text-color(#fff);
$overlayElementBgColor: 0, 0, 0;
$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);
}
// Change text colors against dark slide backgrounds
@include dark-bg-text-color(#fff);
// Theme template ------------------------------
@import "./template/theme";
// ---------------------------------------------

View File

@@ -3,59 +3,53 @@
* Author: Achim Staebler
*/
// Default mixins and settings -----------------
// Load utils
@use "sass:color";
@import "../template/mixins";
@import "../template/settings";
// ---------------------------------------------
@use "template/mixins" as mixins;
// Solarized colors by Ethan Schoonover
$base03: #002b36;
$base02: #073642;
$base01: #586e75;
$base00: #657b83;
$base0: #839496;
$base1: #93a1a1;
$base2: #eee8d5;
$base3: #fdf6e3;
$yellow: #b58900;
$orange: #cb4b16;
$red: #dc322f;
$magenta: #d33682;
$violet: #6c71c4;
$blue: #268bd2;
$cyan: #2aa198;
$green: #859900;
$active-color: $blue;
// Inject theme variables (with some overrides)
@use "template/settings" with (
$background-color: $base3,
$main-color: $base00,
$heading-color: $base01,
$link-color: $active-color,
$link-color-hover: color.scale( $active-color, $lightness: 20% ),
$selection-color: #fff,
$selection-background-color: $magenta,
$overlay-element-bg-color: #{0, 0, 0},
$overlay-element-fg-color: #{240, 240, 240}
);
// Inject the theme template
@use "template/theme";
// Include theme-specific fonts
@import url("./fonts/league-gothic/league-gothic.css");
@import url("https://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic");
/**
* Solarized colors by Ethan Schoonover
*/
html * {
color-profile: sRGB;
rendering-intent: auto;
}
// Solarized colors
$base03: #002b36;
$base02: #073642;
$base01: #586e75;
$base00: #657b83;
$base0: #839496;
$base1: #93a1a1;
$base2: #eee8d5;
$base3: #fdf6e3;
$yellow: #b58900;
$orange: #cb4b16;
$red: #dc322f;
$magenta: #d33682;
$violet: #6c71c4;
$blue: #268bd2;
$cyan: #2aa198;
$green: #859900;
// Override theme settings (see ../template/settings.scss)
$mainColor: $base00;
$headingColor: $base01;
$headingTextShadow: none;
$backgroundColor: $base3;
$linkColor: $blue;
$linkColorHover: color.scale($linkColor, $lightness: 20%);
$selectionBackgroundColor: $magenta;
$overlayElementBgColor: 0, 0, 0;
$overlayElementFgColor: 240, 240, 240;
// Background generator
// @mixin bodyBackground() {
// @include radial-gradient( rgba($base3,1), rgba(lighten($base3, 20%),1) );
// }
// Theme template ------------------------------
@import "./template/theme";
// ---------------------------------------------
// Change text when the background is inverted
@include mixins.dark-bg-text-color(#fff);

View File

@@ -1,32 +0,0 @@
// Exposes theme's variables for easy reuse in CSS for plugin authors
@use 'sass:color';
:root {
--r-background-color: #{$backgroundColor};
--r-main-font: #{$mainFont};
--r-main-font-size: #{$mainFontSize};
--r-main-color: #{$mainColor};
--r-block-margin: #{$blockMargin};
--r-heading-margin: #{$headingMargin};
--r-heading-font: #{$headingFont};
--r-heading-color: #{$headingColor};
--r-heading-line-height: #{$headingLineHeight};
--r-heading-letter-spacing: #{$headingLetterSpacing};
--r-heading-text-transform: #{$headingTextTransform};
--r-heading-text-shadow: #{$headingTextShadow};
--r-heading-font-weight: #{$headingFontWeight};
--r-heading1-text-shadow: #{$heading1TextShadow};
--r-heading1-size: #{$heading1Size};
--r-heading2-size: #{$heading2Size};
--r-heading3-size: #{$heading3Size};
--r-heading4-size: #{$heading4Size};
--r-code-font: #{$codeFont};
--r-link-color: #{$linkColor};
--r-link-color-dark: #{color.scale($linkColor, $lightness: -15%)};
--r-link-color-hover: #{$linkColorHover};
--r-selection-background-color: #{$selectionBackgroundColor};
--r-selection-color: #{$selectionColor};
--r-overlay-element-bg-color: #{$overlayElementBgColor};
--r-overlay-element-fg-color: #{$overlayElementFgColor};
}

View File

@@ -1,33 +1,3 @@
@mixin vertical-gradient( $top, $bottom ) {
background: $top;
background: -moz-linear-gradient( top, $top 0%, $bottom 100% );
background: -webkit-gradient( linear, left top, left bottom, color-stop(0%,$top), color-stop(100%,$bottom) );
background: -webkit-linear-gradient( top, $top 0%, $bottom 100% );
background: -o-linear-gradient( top, $top 0%, $bottom 100% );
background: -ms-linear-gradient( top, $top 0%, $bottom 100% );
background: linear-gradient( top, $top 0%, $bottom 100% );
}
@mixin horizontal-gradient( $top, $bottom ) {
background: $top;
background: -moz-linear-gradient( left, $top 0%, $bottom 100% );
background: -webkit-gradient( linear, left top, right top, color-stop(0%,$top), color-stop(100%,$bottom) );
background: -webkit-linear-gradient( left, $top 0%, $bottom 100% );
background: -o-linear-gradient( left, $top 0%, $bottom 100% );
background: -ms-linear-gradient( left, $top 0%, $bottom 100% );
background: linear-gradient( left, $top 0%, $bottom 100% );
}
@mixin radial-gradient( $outer, $inner, $type: circle ) {
background: $outer;
background: -moz-radial-gradient( center, $type cover, $inner 0%, $outer 100% );
background: -webkit-gradient( radial, center center, 0px, center center, 100%, color-stop(0%,$inner), color-stop(100%,$outer) );
background: -webkit-radial-gradient( center, $type cover, $inner 0%, $outer 100% );
background: -o-radial-gradient( center, $type cover, $inner 0%, $outer 100% );
background: -ms-radial-gradient( center, $type cover, $inner 0%, $outer 100% );
background: radial-gradient( center, $type cover, $inner 0%, $outer 100% );
}
@mixin light-bg-text-color( $color ) {
section.has-light-background {
&, h1, h2, h3, h4, h5, h6 {

View File

@@ -4,51 +4,95 @@
// overridden by the super-theme
@use 'sass:color';
@use 'sass:meta';
// Background of the presentation
$backgroundColor: #2b2b2b;
$background: #2b2b2b !default;
$background-color: #bbb !default;
// Primary/body text
$mainFont: 'Lato', sans-serif;
$mainFontSize: 40px;
$mainColor: #eee;
$main-font: 'Lato', sans-serif !default;
$main-font-size: 40px !default;
$main-color: #eee !default;
// Vertical spacing between blocks of text
$blockMargin: 20px;
$block-margin: 20px !default;
// Headings
$headingMargin: 0 0 $blockMargin 0;
$headingFont: 'League Gothic', Impact, sans-serif;
$headingColor: #eee;
$headingLineHeight: 1.2;
$headingLetterSpacing: normal;
$headingTextTransform: uppercase;
$headingTextShadow: none;
$headingFontWeight: normal;
$heading1TextShadow: $headingTextShadow;
$heading-margin: 0 0 20px 0 !default;
$heading-font: 'League Gothic', Impact, sans-serif !default;
$heading-color: #eee !default;
$heading-line-height: 1.2 !default;
$heading-letter-spacing: normal !default;
$heading-text-transform: uppercase !default;
$heading-text-shadow: none !default;
$heading-font-weight: normal !default;
$heading1-text-shadow: none !default;
$heading1Size: 3.77em;
$heading2Size: 2.11em;
$heading3Size: 1.55em;
$heading4Size: 1.00em;
$heading1-size: 3.77em !default;
$heading2-size: 2.11em !default;
$heading3-size: 1.55em !default;
$heading4-size: 1.00em !default;
$codeFont: monospace;
$code-font: monospace !default;
// Links and actions
$linkColor: #13DAEC;
$linkColorHover: color.scale( $linkColor, $lightness: 20% );
$link-color: #13DAEC !default;
$link-color-dark: color.scale($link-color, $lightness: -15%) !default;
$link-color-hover: color.scale($link-color, $lightness: 20%) !default;
// Text selection
$selectionBackgroundColor: #FF5E99;
$selectionColor: #fff;
$selection-background-color: #0fadbb !default;
$selection-color: #fff !default;
// Colors used for UI elements that are overlaid on top of
// the presentation
$overlayElementBgColor: 240, 240, 240;
$overlayElementFgColor: 0, 0, 0;
$overlay-element-bg-color: 240, 240, 240 !default;
$overlay-element-fg-color: 0, 0, 0 !default;
// Generates the presentation background, can be overridden
// to return a background image or gradient
@mixin bodyBackground() {
background: $backgroundColor;
}
// Expose all variables to the DOM
:root {
// Background of the presentation
--r-background: #{$background};
--r-background-color: #{$background-color};
// Primary/body text
--r-main-font: #{$main-font};
--r-main-font-size: #{$main-font-size};
--r-main-color: #{$main-color};
// Vertical spacing between blocks of text
--r-block-margin: #{$block-margin};
// Headings
--r-heading-margin: #{$heading-margin};
--r-heading-font: #{$heading-font};
--r-heading-color: #{$heading-color};
--r-heading-line-height: #{$heading-line-height};
--r-heading-letter-spacing: #{$heading-letter-spacing};
--r-heading-text-transform: #{$heading-text-transform};
--r-heading-text-shadow: #{$heading-text-shadow};
--r-heading-font-weight: #{$heading-font-weight};
--r-heading1-text-shadow: #{$heading1-text-shadow};
--r-heading1-size: #{$heading1-size};
--r-heading2-size: #{$heading2-size};
--r-heading3-size: #{$heading3-size};
--r-heading4-size: #{$heading4-size};
--r-code-font: #{$code-font};
// Links and actions
--r-link-color: #{$link-color};
--r-link-color-dark: #{$link-color-dark};
--r-link-color-hover: #{$link-color-hover};
// Text selection
--r-selection-background-color: #{$selection-background-color};
--r-selection-color: #{$selection-color};
// Colors used for UI elements that are overlaid on top of
// the presentation
--r-overlay-element-bg-color: #{$overlay-element-bg-color};
--r-overlay-element-fg-color: #{$overlay-element-fg-color};
}

View File

@@ -4,10 +4,8 @@
* GLOBAL STYLES
*********************************************/
@import "./exposer";
.reveal-viewport {
@include bodyBackground();
background: var(--r-background);
background-color: var(--r-background-color);
}

View File

@@ -7,43 +7,44 @@
* - $mainFontSize controls code blocks, too (although under some ratio).
*/
// Default mixins and settings -----------------
// Load utils
@use "sass:color";
@import "../template/mixins";
@import "../template/settings";
// ---------------------------------------------
@use "template/mixins" as mixins;
$active-color: #2a76dd;
// Inject theme variables (with some overrides)
@use "template/settings" with (
$background-color: #fff,
$main-font: "'Source Sans Pro', Helvetica, sans-serif",
$main-font-size: 42px,
$main-color: #000,
$heading-color: #000,
$heading-font: "'Source Sans Pro', Helvetica, sans-serif",
$heading-font-weight: 600,
$heading1-size: 2.5em,
$heading2-size: 1.6em,
$heading3-size: 1.3em,
$heading4-size: 1.0em,
$link-color: $active-color,
$link-color-hover: color.scale( $active-color, $lightness: 15% ),
$selection-color: #fff,
$selection-background-color: $active-color,
$overlay-element-bg-color: "0, 0, 0",
$overlay-element-fg-color: "240, 240, 240"
);
// Inject the theme template
@use "template/theme";
// Include theme-specific fonts
@import url("./fonts/source-sans-pro/source-sans-pro.css");
// Override theme settings (see ../template/settings.scss)
$backgroundColor: #fff;
$mainColor: #000;
$headingColor: #000;
$mainFontSize: 42px;
$mainFont: "Source Sans Pro", Helvetica, sans-serif;
$headingFont: "Source Sans Pro", Helvetica, sans-serif;
$headingTextShadow: none;
$headingLetterSpacing: normal;
$headingTextTransform: uppercase;
$headingFontWeight: 600;
$linkColor: #2a76dd;
$linkColorHover: color.scale($linkColor, $lightness: 15%);
$selectionBackgroundColor: color.scale($linkColor, $lightness: 25%);
$heading1Size: 2.5em;
$heading2Size: 1.6em;
$heading3Size: 1.3em;
$heading4Size: 1em;
$overlayElementBgColor: 0, 0, 0;
$overlayElementFgColor: 240, 240, 240;
// Change text colors against dark slide backgrounds
@include dark-bg-text-color(#fff);
// Theme template ------------------------------
@import "./template/theme";
// ---------------------------------------------
// Change text when the background is inverted
@include mixins.dark-bg-text-color(#fff);

View File

@@ -4,43 +4,44 @@
* By Hakim El Hattab, http://hakim.se
*/
// Default mixins and settings -----------------
// Load utils
@use "sass:color";
@import "../template/mixins";
@import "../template/settings";
// ---------------------------------------------
@use "template/mixins" as mixins;
$active-color: #2a76dd;
// Inject theme variables (with some overrides)
@use "template/settings" with (
$background-color: #fff,
$main-color: #222,
$main-font: #{'Source Sans Pro', Helvetica, sans-serif},
$main-font-size: 42px,
$heading-color: #222,
$heading-font: #{'Source Sans Pro', Helvetica, sans-serif},
$heading-font-weight: 600,
$heading1-size: 2.5em,
$heading2-size: 1.6em,
$heading3-size: 1.3em,
$heading4-size: 1.0em,
$link-color: $active-color,
$link-color-hover: color.scale( $active-color, $lightness: 15% ),
$selection-color: #fff,
$selection-background-color: $active-color,
$overlay-element-bg-color: #{0, 0, 0},
$overlay-element-fg-color: #{240, 240, 240}
);
// Inject the theme template
@use "template/theme";
// Include theme-specific fonts
@import url("./fonts/source-sans-pro/source-sans-pro.css");
// Override theme settings (see ../template/settings.scss)
$backgroundColor: #fff;
$mainColor: #222;
$headingColor: #222;
$mainFontSize: 42px;
$mainFont: "Source Sans Pro", Helvetica, sans-serif;
$headingFont: "Source Sans Pro", Helvetica, sans-serif;
$headingTextShadow: none;
$headingLetterSpacing: normal;
$headingTextTransform: uppercase;
$headingFontWeight: 600;
$linkColor: #2a76dd;
$linkColorHover: color.scale($linkColor, $lightness: 15%);
$selectionBackgroundColor: color.scale($linkColor, $lightness: 25%);
$heading1Size: 2.5em;
$heading2Size: 1.6em;
$heading3Size: 1.3em;
$heading4Size: 1em;
$overlayElementBgColor: 0, 0, 0;
$overlayElementFgColor: 240, 240, 240;
// Change text colors against dark slide backgrounds
@include dark-bg-text-color(#fff);
// Theme template ------------------------------
@import "./template/theme";
// ---------------------------------------------
// Change text when the background is inverted
@include mixins.dark-bg-text-color(#fff);

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

2
dist/theme/moon.css vendored

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

2
dist/theme/sky.css vendored

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@@ -53,6 +53,7 @@
"dev": "npm run start",
"start": "vite --port 8000",
"build:core": "tsc && vite build && 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",
"test": "node test.js"
},

View File

@@ -13,6 +13,13 @@ const themeEntries = themeFiles.reduce((acc, file) => {
export default defineConfig({
root: './',
css: {
preprocessorOptions: {
scss: {
api: 'modern-compiler'
}
}
},
build: {
emptyOutDir: false,
cssCodeSplit: true,

View File

@@ -36,4 +36,11 @@ export default defineConfig({
},
},
plugins: [dts({ insertTypesEntry: true, rollupTypes: true })],
css: {
preprocessorOptions: {
scss: {
api: 'modern-compiler'
}
}
},
});