blood.scss 2.1 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091
  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. // Default mixins and settings -----------------
  13. @import "../template/mixins";
  14. @import "../template/settings";
  15. // ---------------------------------------------
  16. // Include theme-specific fonts
  17. @import url(https://fonts.googleapis.com/css?family=Ubuntu:300,700,300italic,700italic);
  18. // Colors used in the theme
  19. $blood: #a23;
  20. $coal: #222;
  21. $codeBackground: #23241f;
  22. // Main text
  23. $mainFont: Ubuntu, 'sans-serif';
  24. $mainFontSize: 36px;
  25. $mainColor: #eee;
  26. // Headings
  27. $headingFont: Ubuntu, 'sans-serif';
  28. $headingTextShadow: 2px 2px 2px $coal;
  29. // h1 shadow, borrowed humbly from
  30. // (c) Default theme by Hakim El Hattab
  31. $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);
  32. // Links
  33. $linkColor: $blood;
  34. $linkColorHover: lighten( $linkColor, 20% );
  35. // Text selection
  36. $selectionBackgroundColor: $blood;
  37. $selectionColor: #fff;
  38. // Background generator
  39. @mixin bodyBackground() {
  40. @include radial-gradient( $coal, lighten( $coal, 25% ) );
  41. }
  42. // Theme template ------------------------------
  43. @import "../template/theme";
  44. // ---------------------------------------------
  45. // some overrides after theme template import
  46. .reveal p {
  47. font-weight: 300;
  48. text-shadow: 1px 1px $coal;
  49. }
  50. .reveal h1,
  51. .reveal h2,
  52. .reveal h3,
  53. .reveal h4,
  54. .reveal h5,
  55. .reveal h6 {
  56. font-weight: 700;
  57. }
  58. .reveal a:not(.image),
  59. .reveal a:not(.image):hover {
  60. text-shadow: 2px 2px 2px #000;
  61. }
  62. .reveal small a:not(.image),
  63. .reveal small a:not(.image):hover {
  64. text-shadow: 1px 1px 1px #000;
  65. }
  66. .reveal p code {
  67. background-color: $codeBackground;
  68. display: inline-block;
  69. border-radius: 7px;
  70. }
  71. .reveal small code {
  72. vertical-align: baseline;
  73. }