variables.css 2.8 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788
  1. :root {
  2. /* Globals */
  3. /* Font Family */
  4. --global--font-primary: 'Red Hat Display', sans-serif;
  5. --global--font-secondary: 'Red Hat Text', sans-serif;
  6. --global--color-primary: #000000;
  7. --global--color-primary-hover: #333333;
  8. --global--color-secondary: #000000;
  9. --global--color-secondary-hover: #333333;
  10. --global--color-foreground: #000000;
  11. --global--color-foreground-light: #333333;
  12. --global--color-background: #BFF5A5;
  13. --global--color-background-dark: #BFF5A5;
  14. --global--color-border: var(--global--color-secondary);
  15. /* Font Size */
  16. --global--font-size-xs: 14px;
  17. --global--font-size-sm: 16px;
  18. --global--font-size-root: 18px;
  19. --global--font-size-md: 18px;
  20. --global--font-size-lg: 20px;
  21. --global--font-size-xl: 24px;
  22. --global--font-size-xxl: 36px;
  23. /* Line Height */
  24. --global--line-height-base: 1;
  25. --global--line-height-body: 1.7;
  26. --global--line-height-heading: 1.3;
  27. --heading--font-family: var(--global--font-primary);
  28. --heading--font-size-h1: 48px;
  29. --heading--font-size-h2: 36px;
  30. --heading--font-size-h3: 30px;
  31. --heading--font-size-h4: 20px;
  32. --heading--font-size-h5: 16px;
  33. --heading--font-size-h6: 14px;
  34. --heading--line-height: 1.2;
  35. --heading--letter-spacing-h4: 0.1em;
  36. --heading--letter-spacing-h5: 0.1em;
  37. --heading--letter-spacing-h6: 0.1em;
  38. --heading--line-height-h1: 1.2;
  39. --heading--line-height-h2: 1.4;
  40. --heading--line-height-h3: 1.4;
  41. --entry-header--font-size: var(--heading--font-size-h1);
  42. --button--border-radius: 0px;
  43. --button--color-text: var(--global--color-background);
  44. --button--color-background: var(--global--color-primary);
  45. --button--font-weight: bold;
  46. --button--font-family: var(--global--font-secondary);
  47. --button--font-size: var(--global--font-size-sm);
  48. --cover--color-foreground: var(--global--color-background);
  49. --branding--title--font-size: var(--global--font-size-lg);
  50. --primary-nav--justify-content: space-between;
  51. --primary-nav--font-family: var(--global--font-primary);
  52. --primary-nav--font-weight: bold;
  53. --primary-nav--padding: 0 0 6px 0;
  54. --social-nav--padding: calc( .67 * var(--global--spacing-unit) );
  55. --pullquote--font-style: normal;
  56. --pullquote--letter-spacing: 0;
  57. --pullquote--line-height: 1.15;
  58. --latest-posts--title-font-family: var(--global--font-primary);
  59. --latest-posts--title-font-size: var(--global--font-size-md);
  60. --latest-posts--description-font-family: var(--global--font-secondary);
  61. --list--font-family: var(--global--font-secondary);
  62. }
  63. @media ( min-width: 482px ){
  64. :root {
  65. /* Font Size */
  66. --global--font-size-root: 20px;
  67. --global--font-size-md: 20px;
  68. --global--font-size-lg: 24px;
  69. --global--font-size-xl: 36px;
  70. --global--font-size-xxl: 48px;
  71. /* Line Height */
  72. --heading--font-size-h1: 72px;
  73. --heading--font-size-h2: 64px;
  74. --heading--font-size-h3: 48px;
  75. --heading--line-height-h1: 1.2;
  76. --heading--line-height-h2: 1.2;
  77. --heading--line-height-h3: 1.4;
  78. }
  79. }