| 1 | // Base settings for all themes that can optionally be |
| 2 | // overridden by the super-theme |
| 3 | |
| 4 | @use 'sass:color'; |
| 5 | @use 'sass:meta'; |
| 6 | |
| 7 | // Background of the presentation |
| 8 | $background: #2b2b2b !default; |
| 9 | $background-color: #bbb !default; |
| 10 | |
| 11 | // Primary/body text |
| 12 | $main-font: 'Lato', sans-serif !default; |
| 13 | $main-font-size: 40px !default; |
| 14 | $main-color: #eee !default; |
| 15 | |
| 16 | // Vertical spacing between blocks of text |
| 17 | $block-margin: 20px !default; |
| 18 | |
| 19 | // Headings |
| 20 | $heading-margin: 0 0 20px 0 !default; |
| 21 | $heading-font: 'League Gothic', Impact, sans-serif !default; |
| 22 | $heading-color: #eee !default; |
| 23 | $heading-line-height: 1.2 !default; |
| 24 | $heading-letter-spacing: normal !default; |
| 25 | $heading-text-transform: uppercase !default; |
| 26 | $heading-text-shadow: none !default; |
| 27 | $heading-font-weight: normal !default; |
| 28 | $heading1-text-shadow: none !default; |
| 29 | |
| 30 | $heading1-size: 3.77em !default; |
| 31 | $heading2-size: 2.11em !default; |
| 32 | $heading3-size: 1.55em !default; |
| 33 | $heading4-size: 1em !default; |
| 34 | |
| 35 | $code-font: monospace !default; |
| 36 | |
| 37 | // Links and actions |
| 38 | $link-color: #13daec !default; |
| 39 | $link-color-dark: color.scale($link-color, $lightness: -15%) !default; |
| 40 | $link-color-hover: color.scale($link-color, $lightness: 20%) !default; |
| 41 | |
| 42 | // Text selection |
| 43 | $selection-background-color: #0fadbb !default; |
| 44 | $selection-color: #fff !default; |
| 45 | |
| 46 | // Colors used for UI elements that are overlaid on top of |
| 47 | // the presentation |
| 48 | $overlay-element-bg-color: 240, 240, 240 !default; |
| 49 | $overlay-element-fg-color: 0, 0, 0 !default; |
| 50 | |
| 51 | // Expose all SCSS variables as CSS custom properties |
| 52 | :root { |
| 53 | // Background of the presentation |
| 54 | --r-background: #{$background}; |
| 55 | --r-background-color: #{$background-color}; |
| 56 | |
| 57 | // Primary/body text |
| 58 | --r-main-font: #{$main-font}; |
| 59 | --r-main-font-size: #{$main-font-size}; |
| 60 | --r-main-color: #{$main-color}; |
| 61 | |
| 62 | // Vertical spacing between blocks of text |
| 63 | --r-block-margin: #{$block-margin}; |
| 64 | |
| 65 | // Headings |
| 66 | --r-heading-margin: #{$heading-margin}; |
| 67 | --r-heading-font: #{$heading-font}; |
| 68 | --r-heading-color: #{$heading-color}; |
| 69 | --r-heading-line-height: #{$heading-line-height}; |
| 70 | --r-heading-letter-spacing: #{$heading-letter-spacing}; |
| 71 | --r-heading-text-transform: #{$heading-text-transform}; |
| 72 | --r-heading-text-shadow: #{$heading-text-shadow}; |
| 73 | --r-heading-font-weight: #{$heading-font-weight}; |
| 74 | --r-heading1-text-shadow: #{$heading1-text-shadow}; |
| 75 | |
| 76 | --r-heading1-size: #{$heading1-size}; |
| 77 | --r-heading2-size: #{$heading2-size}; |
| 78 | --r-heading3-size: #{$heading3-size}; |
| 79 | --r-heading4-size: #{$heading4-size}; |
| 80 | |
| 81 | --r-code-font: #{$code-font}; |
| 82 | |
| 83 | // Links and actions |
| 84 | --r-link-color: #{$link-color}; |
| 85 | --r-link-color-dark: #{$link-color-dark}; |
| 86 | --r-link-color-hover: #{$link-color-hover}; |
| 87 | |
| 88 | // Text selection |
| 89 | --r-selection-background-color: #{$selection-background-color}; |
| 90 | --r-selection-color: #{$selection-color}; |
| 91 | |
| 92 | // Colors used for UI elements that are overlaid on top of |
| 93 | // the presentation |
| 94 | --r-overlay-element-bg-color: #{$overlay-element-bg-color}; |
| 95 | --r-overlay-element-fg-color: #{$overlay-element-fg-color}; |
| 96 | } |
| 97 |