mirror of
https://github.com/hakimel/reveal.js.git
synced 2025-08-20 13:31:55 +02:00
refactored all themes to latest sass syntax, fixes deprecation warnings
This commit is contained in:
Hakim El Hattab
@@ -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**
|
||||
@@ -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);
|
||||
|
||||
@@ -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);
|
||||
|
||||
@@ -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);
|
||||
|
||||
@@ -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 {
|
||||
|
||||
@@ -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);
|
||||
|
||||
@@ -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);
|
||||
@@ -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);
|
||||
|
||||
@@ -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);
|
||||
|
||||
@@ -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";
|
||||
// ---------------------------------------------
|
||||
|
||||
@@ -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);
|
||||
|
||||
@@ -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";
|
||||
// ---------------------------------------------
|
||||
|
||||
@@ -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);
|
||||
|
||||
@@ -1,32 +0,0 @@
|
||||
// Exposes theme's variables for easy reuse in CSS for plugin authors
|
||||
|
||||
@use 'sass:color';
|
||||
|
||||
:root {
|
||||
--r-background-color: #{$backgroundColor};
|
||||
--r-main-font: #{$mainFont};
|
||||
--r-main-font-size: #{$mainFontSize};
|
||||
--r-main-color: #{$mainColor};
|
||||
--r-block-margin: #{$blockMargin};
|
||||
--r-heading-margin: #{$headingMargin};
|
||||
--r-heading-font: #{$headingFont};
|
||||
--r-heading-color: #{$headingColor};
|
||||
--r-heading-line-height: #{$headingLineHeight};
|
||||
--r-heading-letter-spacing: #{$headingLetterSpacing};
|
||||
--r-heading-text-transform: #{$headingTextTransform};
|
||||
--r-heading-text-shadow: #{$headingTextShadow};
|
||||
--r-heading-font-weight: #{$headingFontWeight};
|
||||
--r-heading1-text-shadow: #{$heading1TextShadow};
|
||||
--r-heading1-size: #{$heading1Size};
|
||||
--r-heading2-size: #{$heading2Size};
|
||||
--r-heading3-size: #{$heading3Size};
|
||||
--r-heading4-size: #{$heading4Size};
|
||||
--r-code-font: #{$codeFont};
|
||||
--r-link-color: #{$linkColor};
|
||||
--r-link-color-dark: #{color.scale($linkColor, $lightness: -15%)};
|
||||
--r-link-color-hover: #{$linkColorHover};
|
||||
--r-selection-background-color: #{$selectionBackgroundColor};
|
||||
--r-selection-color: #{$selectionColor};
|
||||
--r-overlay-element-bg-color: #{$overlayElementBgColor};
|
||||
--r-overlay-element-fg-color: #{$overlayElementFgColor};
|
||||
}
|
||||
@@ -1,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 {
|
||||
|
||||
@@ -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};
|
||||
}
|
||||
@@ -4,10 +4,8 @@
|
||||
* GLOBAL STYLES
|
||||
*********************************************/
|
||||
|
||||
@import "./exposer";
|
||||
|
||||
.reveal-viewport {
|
||||
@include bodyBackground();
|
||||
background: var(--r-background);
|
||||
background-color: var(--r-background-color);
|
||||
}
|
||||
|
||||
|
||||
@@ -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);
|
||||
|
||||
@@ -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);
|
||||
|
||||
Reference in New Issue
Block a user