simple.scss 1.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748
  1. /**
  2. * A simple theme for reveal.js presentations, similar
  3. * to the default theme. The accent color is darkblue.
  4. *
  5. * This theme is Copyright (C) 2012 Owen Versteeg, https://github.com/StereotypicalApps. It is MIT licensed.
  6. * reveal.js is Copyright (C) 2011-2012 Hakim El Hattab, http://hakim.se
  7. */
  8. // Load utils
  9. @use 'sass:color';
  10. @use 'template/mixins' as mixins;
  11. $active-color: #00008b;
  12. // Inject theme variables (with some overrides)
  13. @use 'template/settings' with (
  14. $background-color: #fff,
  15. $main-color: #000,
  16. $main-font: "'Lato', sans-serif",
  17. $heading-color: #000,
  18. $heading-font: "'News Cycle', Impact, sans-serif",
  19. $heading-font-weight: 600,
  20. $heading1-size: 2.5em,
  21. $heading2-size: 1.6em,
  22. $heading3-size: 1.3em,
  23. $heading4-size: 1em,
  24. $link-color: $active-color,
  25. $link-color-hover: color.scale($active-color, $lightness: 20%),
  26. $selection-color: #fff,
  27. $selection-background-color: $active-color,
  28. $overlay-element-bg-color: '0, 0, 0',
  29. $overlay-element-fg-color: '240, 240, 240'
  30. );
  31. // Inject the theme template
  32. @use 'template/theme';
  33. // Include theme-specific fonts
  34. @import url('https://fonts.googleapis.com/css?family=News+Cycle:400,700');
  35. @import url('https://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic');
  36. // Change text when the background is inverted
  37. @include mixins.dark-bg-text-color(#fff);