mirror of
https://github.com/hakimel/reveal.js.git
synced 2025-08-31 10:11:52 +02:00
91 lines
1.7 KiB
SCSS
91 lines
1.7 KiB
SCSS
/**
|
|
* Blood theme for reveal.js
|
|
* Author: Walther http://github.com/Walther
|
|
*
|
|
* Designed to be used with highlight.js theme
|
|
* "monokai_sublime.css" available from
|
|
* https://github.com/isagalaev/highlight.js/
|
|
*
|
|
* For other themes, change $codeBackground accordingly.
|
|
*
|
|
*/
|
|
|
|
// Load utils
|
|
@use 'sass:color';
|
|
@use 'template/mixins' as mixins;
|
|
|
|
$coal: #222;
|
|
$active-color: #a23;
|
|
$code-background-color: #23241f;
|
|
|
|
// Inject theme variables (with some overrides)
|
|
@use 'template/settings' with (
|
|
$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, 0.1),
|
|
0 0 5px rgba(0, 0, 0, 0.1),
|
|
0 1px 3px rgba(0, 0, 0, 0.3),
|
|
0 3px 5px rgba(0, 0, 0, 0.2),
|
|
0 5px 10px rgba(0, 0, 0, 0.25),
|
|
0 20px 20px rgba(0, 0, 0, 0.15)},
|
|
|
|
$link-color: $active-color,
|
|
$link-color-hover: color.scale($active-color, $lightness: 20%),
|
|
$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');
|
|
|
|
// Invert text color when the background is light
|
|
@include mixins.light-bg-text-color(#222);
|
|
|
|
.reveal p {
|
|
font-weight: 300;
|
|
text-shadow: 1px 1px $coal;
|
|
}
|
|
|
|
section.has-light-background {
|
|
p,
|
|
h1,
|
|
h2,
|
|
h3,
|
|
h4 {
|
|
text-shadow: none;
|
|
}
|
|
}
|
|
|
|
.reveal h1,
|
|
.reveal h2,
|
|
.reveal h3,
|
|
.reveal h4,
|
|
.reveal h5,
|
|
.reveal h6 {
|
|
font-weight: 700;
|
|
}
|
|
|
|
.reveal p code {
|
|
background-color: $code-background-color;
|
|
display: inline-block;
|
|
border-radius: 7px;
|
|
}
|
|
|
|
.reveal small code {
|
|
vertical-align: baseline;
|
|
}
|