variables.css 4.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119
  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-border: var(--global--color-secondary);
  15. /* Font Weight */
  16. --global--font-weight: 500;
  17. /* Font Size */
  18. --global--font-size-xs: 14px;
  19. --global--font-size-sm: 16px;
  20. --global--font-size-root: 18px;
  21. --global--font-size-md: 18px;
  22. --global--font-size-lg: 22px;
  23. --global--font-size-xl: 48px;
  24. /* Spacing */
  25. --global--spacing-horizontal: 24px;
  26. --global--spacing-vertical: 27px;
  27. --global--content-width: 900px;
  28. /* Line Height */
  29. --global--line-height-base: 1;
  30. --global--line-height-body: 1.8;
  31. --global--line-height-heading: 1.4;
  32. --global--link-font-weight: 500;
  33. /* Headings*/
  34. --heading--font-family: var(--global--font-secondary);
  35. --heading--font-weight: bold;
  36. --heading--font-size-h1: 48px;
  37. --heading--font-size-h2: 22px;
  38. --heading--font-size-h3: 18px;
  39. --heading--font-size-h4: 16px;
  40. --heading--font-size-h5: 14px;
  41. --heading--font-size-h6: 12px;
  42. --heading--line-height: 1.2;
  43. --heading--letter-spacing-h4: 0.1em;
  44. --heading--letter-spacing-h5: 0.1em;
  45. --heading--letter-spacing-h6: 0.1em;
  46. --heading--line-height-h1: 1.2;
  47. --heading--line-height-h2: 1.4;
  48. --heading--line-height-h3: 1.4;
  49. --entry-header--font-size: var(--heading--font-size-h1);
  50. --entry-header--color: var(--global--color-foreground);
  51. --button--border-radius: 0px;
  52. --button--color-text: var(--global--color-background);
  53. --button--color-background: var(--global--color-primary);
  54. --button--font-weight: normal;
  55. --button--font-family: var(--global--font-secondary);
  56. --button--font-size: var(--global--font-size-sm);
  57. --button--border-radius: 3px;
  58. --button--padding-vertical: 16px;
  59. --button--padding-horizontal: 32px;
  60. --cover--color-foreground: var(--global--color-background);
  61. --branding--title--font-size: var(--global--font-size-lg);
  62. --branding--title--font-size-mobile: var(--global--font-size-root);
  63. --primary-nav--justify-content: flex-end;
  64. --primary-nav--color-link: var(--global--color-secondary);
  65. --primary-nav--color-link-hover: var(--global--color-primary);
  66. --primary-nav--color-border: transparent;
  67. --primary-nav--dropdown-color-link: var(--global--color-background);
  68. --primary-nav--color-background: var(--global--color-foreground);
  69. --primary-nav--padding: 6px;
  70. --primary-nav--font-family-mobile: var(--global--font-family-secondary);
  71. --primary-nav--font-size-mobile: var(--global--font-size-sm);
  72. --primary-nav--font-size-sub-menu-mobile: var( --primary-nav--font-size-mobile );
  73. --primary-nav--font-size: 17px;
  74. --social-nav--padding: var(--global--spacing-unit);
  75. --pullquote--font-style: normal;
  76. --pullquote--letter-spacing: 0;
  77. --pullquote--line-height: 1.15;
  78. --list--font-family: var(--global--font-secondary);
  79. /* Sticky Posts */
  80. --sticky-posts--color-background: #F9F9F9;
  81. --sticky-posts--entry-title-font-size: 24px;
  82. --sticky-posts--entry-content-font-size: 20px;
  83. --sticky-posts--alt-color-background: var(--global--color-background);
  84. /* Forms */
  85. --form--border-color: var(--global--color-secondary);
  86. --form--border-width: 1px;
  87. --form--spacing-unit: 6px;
  88. --form--color-text: var(--global--color-secondary);
  89. }
  90. @media ( prefers-color-scheme: dark ) {
  91. :root {
  92. --global--color-primary: #ff6a81;
  93. --global--color-primary-hover: #ffffff;
  94. --global--color-secondary: #b2b2b2;
  95. --global--color-secondary-hover: #cccccc;
  96. --global--color-foreground: #ffffff;
  97. --global--color-foreground-low-contrast: #b2b2b2;
  98. --global--color-background: #1e1f21;
  99. --global--color-text-selection: #000000;
  100. --sticky-posts--color-background: var(--global--color-background);
  101. --sticky-posts--alt-color-background: #2d3139;
  102. --primary-nav--color-background: var(--sticky-posts--alt-color-background);
  103. --primary-nav--dropdown-color-link: var(--global--color-foreground);
  104. }
  105. }