initialize.scss 1.6 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950
  1. @charset "utf-8";
  2. // Define defaults for each variable.
  3. $base-font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", "Segoe UI Emoji", "Segoe UI Symbol", "Apple Color Emoji", Roboto, Helvetica, Arial, sans-serif !default;
  4. $code-font-family: "Menlo", "Inconsolata", "Consolas", "Roboto Mono", "Ubuntu Mono", "Liberation Mono", "Courier New", monospace;
  5. $base-font-size: 16px !default;
  6. $base-font-weight: 400 !default;
  7. $small-font-size: $base-font-size * 0.875 !default;
  8. $base-line-height: 1.5 !default;
  9. $spacing-unit: 30px !default;
  10. $table-text-align: left !default;
  11. // Width of the content area
  12. $content-width: 800px !default;
  13. $on-palm: 600px !default;
  14. $on-laptop: 800px !default;
  15. $on-medium: $on-palm !default;
  16. $on-large: $on-laptop !default;
  17. // Use media queries like this:
  18. // @include media-query($on-palm) {
  19. // .wrapper {
  20. // padding-right: $spacing-unit / 2;
  21. // padding-left: $spacing-unit / 2;
  22. // }
  23. // }
  24. // Notice the following mixin uses max-width, in a deprecated, desktop-first
  25. // approach, whereas media queries used elsewhere now use min-width.
  26. @mixin media-query($device) {
  27. @media screen and (max-width: $device) {
  28. @content;
  29. }
  30. }
  31. @mixin relative-font-size($ratio) {
  32. font-size: #{$ratio}rem;
  33. }
  34. // Import pre-styling-overrides hook and style-partials.
  35. @import
  36. "minima/custom-variables", // Hook to override predefined variables.
  37. "minima/base", // Defines element resets.
  38. "minima/layout", // Defines structure and style based on CSS selectors.
  39. "minima/custom-styles" // Hook to override existing styles.
  40. ;