beige.scss 1.6 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758
  1. /**
  2. * Beige theme for reveal.js.
  3. *
  4. * Copyright (C) 2011-2012 Hakim El Hattab, http://hakim.se
  5. */
  6. // Load utils
  7. @use 'sass:color';
  8. @use 'template/mixins' as mixins;
  9. $active-color: #8b743d;
  10. // Inject theme variables (with some overrides)
  11. @use 'template/settings' with (
  12. $background-color: #f7f3de,
  13. $background: radial-gradient(rgba(255, 255, 255, 1), rgba(247, 242, 211, 1)),
  14. $main-font: "'Source Sans Pro', Helvetica, sans-serif",
  15. $main-font-size: 42px,
  16. $main-color: #333,
  17. $heading-color: #333,
  18. $heading-font: "'Source Sans Pro', Helvetica, sans-serif",
  19. $heading-font-weight: 600,
  20. $heading1-text-shadow: #{0 1px 0 #ccc,
  21. 0 2px 0 #c9c9c9,
  22. 0 3px 0 #bbb,
  23. 0 4px 0 #b9b9b9,
  24. 0 5px 0 #aaa,
  25. 0 6px 1px rgba(0, 0, 0, 0.1),
  26. 0 0 5px rgba(0, 0, 0, 0.1),
  27. 0 1px 3px rgba(0, 0, 0, 0.3),
  28. 0 3px 5px rgba(0, 0, 0, 0.2),
  29. 0 5px 10px rgba(0, 0, 0, 0.25),
  30. 0 20px 20px rgba(0, 0, 0, 0.15)},
  31. $heading1-size: 2.5em,
  32. $heading2-size: 1.6em,
  33. $heading3-size: 1.3em,
  34. $heading4-size: 1em,
  35. $link-color: $active-color,
  36. $link-color-hover: color.scale($active-color, $lightness: 20%),
  37. $selection-color: #333,
  38. $selection-background-color: color.scale($active-color, $lightness: 35%),
  39. $overlay-element-bg-color: '0 0 0',
  40. $overlay-element-fg-color: '240 240 240'
  41. );
  42. // Inject the theme template
  43. @use 'template/theme';
  44. // Include theme-specific fonts
  45. @import url('./fonts/league-gothic/league-gothic.css');
  46. @import url('https://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic');
  47. // Change text colors against light slide backgrounds
  48. @include mixins.dark-bg-text-color(#fff);