vars.css 2.0 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374
  1. /** Base Styles */
  2. :root {
  3. /**
  4. * Colors
  5. * --------------------------------------------------------------------- */
  6. --c-white: #ffffff;
  7. --c-white-dark: #f8f8f8;
  8. --c-black: #000000;
  9. --c-divider-light: rgba(60, 60, 67, 0.12);
  10. --c-divider-dark: rgba(84, 84, 88, 0.48);
  11. --c-text-light-1: #2c3e50;
  12. --c-text-light-2: #476582;
  13. --c-text-light-3: #90a4b7;
  14. --c-brand: #3eaf7c;
  15. --c-brand-light: #4abf8a;
  16. /**
  17. * Typography
  18. * --------------------------------------------------------------------- */
  19. --font-family-base: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
  20. Oxygen, Ubuntu, Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
  21. sans-serif;
  22. --font-family-mono: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
  23. monospace;
  24. /**
  25. * Z Indexes
  26. *
  27. * Algolia SearchBox has a z-index of 200, so make sure not to go above
  28. * that value.
  29. * --------------------------------------------------------------------- */
  30. --z-index-navbar: 10;
  31. --z-index-sidebar: 6;
  32. /**
  33. * Shadows
  34. * --------------------------------------------------------------------- */
  35. --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.04), 0 1px 2px rgba(0, 0, 0, 0.06);
  36. --shadow-2: 0 3px 12px rgba(0, 0, 0, 0.07), 0 1px 4px rgba(0, 0, 0, 0.07);
  37. --shadow-3: 0 12px 32px rgba(0, 0, 0, 0.1), 0 2px 6px rgba(0, 0, 0, 0.08);
  38. --shadow-4: 0 14px 44px rgba(0, 0, 0, 0.12), 0 3px 9px rgba(0, 0, 0, 0.12);
  39. --shadow-5: 0 18px 56px rgba(0, 0, 0, 0.16), 0 4px 12px rgba(0, 0, 0, 0.16);
  40. /**
  41. * Sizes
  42. * --------------------------------------------------------------------- */
  43. --header-height: 3.6rem;
  44. }
  45. /** Fallback Styles */
  46. :root {
  47. --c-divider: var(--c-divider-light);
  48. --c-text: var(--c-text-light-1);
  49. --c-text-light: var(--c-text-light-2);
  50. --c-text-lighter: var(--c-text-light-3);
  51. --c-bg: var(--c-white);
  52. --c-bg-accent: var(--c-white-dark);
  53. --code-line-height: 24px;
  54. --code-font-family: var(--font-family-mono);
  55. --code-font-size: 14px;
  56. --code-inline-bg-color: rgba(27, 31, 35, 0.05);
  57. --code-bg-color: #282c34;
  58. }