variables.css 3.2 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192
  1. :root {
  2. /* Globals */
  3. /* Font Family */
  4. --global--font-primary: 'IBM Plex Mono', sans-serif;
  5. --global--font-secondary: 'Libre Franklin', sans-serif;
  6. --global--color-primary: #DB0042;
  7. --global--color-primary-hover: #DB0042;
  8. --global--color-secondary: #555555;
  9. --global--color-secondary-hover: #333333;
  10. --global--color-foreground: #000000;
  11. --global--color-foreground-light: #333333;
  12. --global--color-background: #fff;
  13. --global--color-border: var(--global--color-secondary);
  14. /* Font Size */
  15. --global--font-size-xs: 14px;
  16. --global--font-size-sm: 16px;
  17. --global--font-size-root: 18px;
  18. --global--font-size-md: 18px;
  19. --global--font-size-lg: 22px;
  20. --global--font-size-xl: 48px;
  21. /* Spacing */
  22. --global--spacing-horizontal: 24px;
  23. --global--spacing-vertical: 27px;
  24. --global--content-width: 900px;
  25. /* Line Height */
  26. --global--line-height-base: 1;
  27. --global--line-height-body: 1.7;
  28. --global--line-height-heading: 1.3;
  29. --heading--font-family: var(--global--font-secondary);
  30. --heading--font-weight: bold;
  31. --heading--font-size-h1: 48px;
  32. --heading--font-size-h2: 22px;
  33. --heading--font-size-h3: 18px;
  34. --heading--font-size-h4: 16px;
  35. --heading--font-size-h5: 14px;
  36. --heading--font-size-h6: 12px;
  37. --heading--line-height: 1.2;
  38. --heading--letter-spacing-h4: 0.1em;
  39. --heading--letter-spacing-h5: 0.1em;
  40. --heading--letter-spacing-h6: 0.1em;
  41. --heading--line-height-h1: 1.2;
  42. --heading--line-height-h2: 1.4;
  43. --heading--line-height-h3: 1.4;
  44. --entry-header--font-size: var(--heading--font-size-h1);
  45. --entry-header--color: var(--global--color-foreground-light);
  46. --button--border-radius: 0px;
  47. --button--color-text: var(--global--color-background);
  48. --button--color-background: var(--global--color-primary);
  49. --button--font-weight: bold;
  50. --button--font-family: var(--global--font-secondary);
  51. --button--font-size: var(--global--font-size-sm);
  52. --cover--color-foreground: var(--global--color-background);
  53. --branding--title--font-size: var(--global--font-size-lg);
  54. --branding--title--font-size-mobile: var(--global--font-size-root);
  55. --primary-nav--justify-content: flex-end;
  56. --primary-nav--color-link: var(--global--color-secondary);
  57. --primary-nav--color-background: var(--global--color-foreground);
  58. --primary-nav--padding: 0px;
  59. --primary-nav--font-family-mobile: var(--global--font-family-secondary);
  60. --primary-nav--font-size-mobile: var(--global--font-size-sm);
  61. --primary-nav--font-size-sub-menu-mobile: var( --primary-nav--font-size-mobile );
  62. --social-nav--padding: var(--global--spacing-unit);
  63. --pullquote--font-style: normal;
  64. --pullquote--letter-spacing: 0;
  65. --pullquote--line-height: 1.15;
  66. /* --latest-posts--title-font-family: var(--global--font-secondary); */
  67. --latest-posts--title-font-size: var(--global--font-size-lg);
  68. --list--font-family: var(--global--font-secondary);
  69. }
  70. @media ( prefers-color-scheme: dark ) {
  71. :root {
  72. --global--color-primary: #f00048;
  73. --global--color-primary-hover: #ffffff;
  74. --global--color-secondary: #c0c0c0;
  75. --global--color-secondary-hover: #cccccc;
  76. --global--color-foreground: #b2b2b2;
  77. --global--color-foreground-light: #ffffff;
  78. --global--color-background: #080b11;
  79. --global--color-text-selection: #000000;
  80. --primary-nav--color-background: var(--global--color-foreground-light);
  81. }
  82. }