META-INF.resources.js.revealjs.2.6.1.css.theme.source.blood.scss Maven / Gradle / Ivy

Go to download
Show more of this group Show more artifacts with this name
Show all versions of smarkdown-jsf Show documentation
The newest version!
/**
 * 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.
 *
 */

 // Default mixins and settings -----------------
@import "../template/mixins";
@import "../template/settings";
// ---------------------------------------------

// Include theme-specific 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;

// Main text
$mainFont: Ubuntu, 'sans-serif';
$mainFontSize: 36px;
$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,.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);

// Links
$linkColor: $blood;
$linkColorHover: lighten( $linkColor, 20% );

// Text selection
$selectionBackgroundColor: $blood;
$selectionColor: #fff;

// Background generator
@mixin bodyBackground() {
    @include radial-gradient( $coal, lighten( $coal, 25% ) );
}

// Theme template ------------------------------
@import "../template/theme";
// ---------------------------------------------

// some overrides after theme template import

.reveal p {
    font-weight: 300;
    text-shadow: 1px 1px $coal;
}

.reveal h1, 
.reveal h2,
.reveal h3,
.reveal h4,
.reveal h5,
.reveal h6 {
    font-weight: 700;
}

.reveal a:not(.image),
.reveal a:not(.image):hover {
    text-shadow: 2px 2px 2px #000;
}

.reveal small a:not(.image),
.reveal small a:not(.image):hover {
    text-shadow: 1px 1px 1px #000;
}

.reveal p code {
    background-color: $codeBackground;
    display: inline-block;
    border-radius: 7px;
}

.reveal small code {
    vertical-align: baseline;
}