variables.css 3.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104
  1. :root {
  2. /* Globals */
  3. /* Font Family */
  4. --global--font-primary: var(--font-headings,'IBM Plex Mono', sans-serif);
  5. --global--font-secondary: var(--font-base,'Libre Franklin', sans-serif);
  6. /* Colors */
  7. --global--color-primary: #DB0042;
  8. --global--color-primary-hover: #DB0042;
  9. --global--color-secondary: #555555;
  10. --global--color-secondary-hover: #333333;
  11. --global--color-foreground: #000000;
  12. --global--color-foreground-low-contrast: #333333;
  13. --global--color-background: #fff;
  14. --global--color-background-high-contrast: #F9F9F9;
  15. --global--color-border: var(--global--color-secondary);
  16. /* Font Weight */
  17. --global--font-weight: 500;
  18. /* Font Size */
  19. --global--font-size-xs: 14px;
  20. --global--font-size-sm: 16px;
  21. --global--font-size-root: 18px;
  22. --global--font-size-md: 18px;
  23. --global--font-size-lg: 22px;
  24. --global--font-size-xl: 48px;
  25. /* Spacing */
  26. --global--spacing-horizontal: 24px;
  27. --global--spacing-vertical: 27px;
  28. --global--content-width: 900px;
  29. /* Line Height */
  30. --global--line-height-base: 1;
  31. --global--line-height-body: 1.8;
  32. --global--line-height-heading: 1.4;
  33. --global--link-font-weight: 500;
  34. /* Headings*/
  35. --heading--font-family: var(--global--font-secondary);
  36. --heading--font-weight: bold;
  37. --heading--font-size-h1: 48px;
  38. --heading--font-size-h2: 22px;
  39. --heading--font-size-h3: 18px;
  40. --heading--font-size-h4: 16px;
  41. --heading--font-size-h5: 14px;
  42. --heading--font-size-h6: 12px;
  43. --heading--line-height: 1.2;
  44. --heading--letter-spacing-h4: 0.1em;
  45. --heading--letter-spacing-h5: 0.1em;
  46. --heading--letter-spacing-h6: 0.1em;
  47. --heading--line-height-h1: 1.2;
  48. --heading--line-height-h2: 1.4;
  49. --heading--line-height-h3: 1.4;
  50. --entry-header--font-size: var(--heading--font-size-h1);
  51. --entry-header--color: var(--global--color-foreground);
  52. --entry-header--color-link: var(--entry-header--color);
  53. --button--border-radius: 0px;
  54. --button--color-text: var(--global--color-background);
  55. --button--color-background: var(--global--color-primary);
  56. --button--font-weight: normal;
  57. --button--font-family: var(--global--font-secondary);
  58. --button--font-size: var(--global--font-size-sm);
  59. --button--border-radius: 3px;
  60. --button--padding-vertical: 16px;
  61. --button--padding-horizontal: 32px;
  62. --cover--color-foreground: var(--global--color-background);
  63. --branding--title--font-size: var(--global--font-size-lg);
  64. --branding--title--font-size-mobile: var(--global--font-size-root);
  65. --primary-nav--justify-content: flex-end;
  66. --primary-nav--color-link: var(--global--color-secondary);
  67. --primary-nav--color-link-hover: var(--global--color-primary);
  68. --primary-nav--color-border: transparent;
  69. --primary-nav--dropdown-color-link: var(--global--color-background);
  70. --primary-nav--color-background: var(--global--color-foreground);
  71. --primary-nav--padding: 6px;
  72. --primary-nav--font-family-mobile: var(--global--font-family-secondary);
  73. --primary-nav--font-size-mobile: var(--global--font-size-sm);
  74. --primary-nav--font-size-sub-menu-mobile: var( --primary-nav--font-size-mobile );
  75. --primary-nav--font-size: 17px;
  76. --social-nav--padding: var(--global--spacing-unit);
  77. --pullquote--font-style: normal;
  78. --pullquote--letter-spacing: 0;
  79. --pullquote--line-height: 1.15;
  80. --list--font-family: var(--global--font-secondary);
  81. /* Sticky Posts */
  82. --sticky-posts--color-background: var(--global--color-background-high-contrast);
  83. --sticky-posts--entry-title-font-size: 24px;
  84. --sticky-posts--entry-content-font-size: 20px;
  85. --sticky-posts--alt-color-background: var(--global--color-background);
  86. /* Forms */
  87. --form--border-color: var(--global--color-secondary);
  88. --form--border-width: 1px;
  89. --form--spacing-unit: 6px;
  90. --form--color-text: var(--global--color-secondary);
  91. }