Skip to content
Snippets Groups Projects
Commit 80a4dfc0 authored by Walther's avatar Walther
Browse files

add theme 'blood.'

parent 05931192
No related branches found
No related tags found
No related merge requests found
@import url(https://fonts.googleapis.com/css?family=Ubuntu:300,700,300italic,700italic);
/**
* 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.
*
*/
/*********************************************
* GLOBAL STYLES
*********************************************/
body {
background: #222222;
background: -moz-radial-gradient(center, circle cover, #626262 0%, #222222 100%);
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, #626262), color-stop(100%, #222222));
background: -webkit-radial-gradient(center, circle cover, #626262 0%, #222222 100%);
background: -o-radial-gradient(center, circle cover, #626262 0%, #222222 100%);
background: -ms-radial-gradient(center, circle cover, #626262 0%, #222222 100%);
background: radial-gradient(center, circle cover, #626262 0%, #222222 100%);
background-color: #2b2b2b; }
.reveal {
font-family: Ubuntu, "sans-serif";
font-size: 36px;
font-weight: 200;
letter-spacing: -0.02em;
color: #eeeeee; }
::selection {
color: white;
background: #aa2233;
text-shadow: none; }
/*********************************************
* HEADERS
*********************************************/
.reveal h1,
.reveal h2,
.reveal h3,
.reveal h4,
.reveal h5,
.reveal h6 {
margin: 0 0 20px 0;
color: #eeeeee;
font-family: Ubuntu, "sans-serif";
line-height: 0.9em;
letter-spacing: 0.02em;
text-transform: uppercase;
text-shadow: 2px 2px 2px #222222; }
.reveal h1 {
text-shadow: 0 1px 0 #cccccc, 0 2px 0 #c9c9c9, 0 3px 0 #bbbbbb, 0 4px 0 #b9b9b9, 0 5px 0 #aaaaaa, 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
*********************************************/
.reveal a:not(.image) {
color: #aa2233;
text-decoration: none;
-webkit-transition: color .15s ease;
-moz-transition: color .15s ease;
-ms-transition: color .15s ease;
-o-transition: color .15s ease;
transition: color .15s ease; }
.reveal a:not(.image):hover {
color: #dd5566;
text-shadow: none;
border: none; }
.reveal .roll span:after {
color: #fff;
background: #6a1520; }
/*********************************************
* IMAGES
*********************************************/
.reveal section img {
margin: 15px 0px;
background: rgba(255, 255, 255, 0.12);
border: 4px solid #eeeeee;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
-webkit-transition: all .2s linear;
-moz-transition: all .2s linear;
-ms-transition: all .2s linear;
-o-transition: all .2s linear;
transition: all .2s linear; }
.reveal a:hover img {
background: rgba(255, 255, 255, 0.2);
border-color: #aa2233;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.55); }
/*********************************************
* NAVIGATION CONTROLS
*********************************************/
.reveal .controls div.navigate-left,
.reveal .controls div.navigate-left.enabled {
border-right-color: #aa2233; }
.reveal .controls div.navigate-right,
.reveal .controls div.navigate-right.enabled {
border-left-color: #aa2233; }
.reveal .controls div.navigate-up,
.reveal .controls div.navigate-up.enabled {
border-bottom-color: #aa2233; }
.reveal .controls div.navigate-down,
.reveal .controls div.navigate-down.enabled {
border-top-color: #aa2233; }
.reveal .controls div.navigate-left.enabled:hover {
border-right-color: #dd5566; }
.reveal .controls div.navigate-right.enabled:hover {
border-left-color: #dd5566; }
.reveal .controls div.navigate-up.enabled:hover {
border-bottom-color: #dd5566; }
.reveal .controls div.navigate-down.enabled:hover {
border-top-color: #dd5566; }
/*********************************************
* PROGRESS BAR
*********************************************/
.reveal .progress {
background: rgba(0, 0, 0, 0.2); }
.reveal .progress span {
background: #aa2233;
-webkit-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985);
-moz-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985);
-ms-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985);
-o-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985);
transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); }
.reveal p {
font-weight: 300;
text-shadow: 1px 1px #222222; }
.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: #23241f;
display: inline-block;
border-radius: 7px; }
.reveal small code {
vertical-align: baseline; }
/**
* 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;
}
\ No newline at end of file
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment