docs/com/css/theme/source/blood.scss

   1 /**
   2  * Blood theme for reveal.js
   3  * Author: Walther http://github.com/Walther
   4  *
   5  * Designed to be used with highlight.js theme
   6  * "monokai_sublime.css" available from
   7  * https://github.com/isagalaev/highlight.js/
   8  *
   9  * For other themes, change $codeBackground accordingly.
  10  *
  11  */
  12
  13  // Default mixins and settings -----------------
  14 @import "../template/mixins";
  15 @import "../template/settings";
  16 // ---------------------------------------------
  17
  18 // Include theme-specific fonts
  19
  20 @import url(https://fonts.googleapis.com/css?family=Ubuntu:300,700,300italic,700italic);
  21
  22 // Colors used in the theme
  23 $blood: #a23;
  24 $coal: #222;
  25 $codeBackground: #23241f;
  26
  27 $backgroundColor: $coal;
  28
  29 // Main text
  30 $mainFont: Ubuntu, 'sans-serif';
  31 $mainFontSize: 36px;
  32 $mainColor: #eee;
  33
  34 // Headings
  35 $headingFont: Ubuntu, 'sans-serif';
  36 $headingTextShadow: 2px 2px 2px $coal;
  37
  38 // h1 shadow, borrowed humbly from
  39 // (c) Default theme by Hakim El Hattab
  40 $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);
  41
  42 // Links
  43 $linkColor: $blood;
  44 $linkColorHover: lighten( $linkColor, 20% );
  45
  46 // Text selection
  47 $selectionBackgroundColor: $blood;
  48 $selectionColor: #fff;
  49
  50
  51 // Theme template ------------------------------
  52 @import "../template/theme";
  53 // ---------------------------------------------
  54
  55 // some overrides after theme template import
  56
  57 .reveal p {
  58     font-weight: 300;
  59     text-shadow: 1px 1px $coal;
  60 }
  61
  62 .reveal h1,
  63 .reveal h2,
  64 .reveal h3,
  65 .reveal h4,
  66 .reveal h5,
  67 .reveal h6 {
  68     font-weight: 700;
  69 }
  70
  71 .reveal p code {
  72     background-color: $codeBackground;
  73     display: inline-block;
  74     border-radius: 7px;
  75 }
  76
  77 .reveal small code {
  78     vertical-align: baseline;
  79 }