1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192 |
- :root {
- /* Globals */
- /* Font Family */
- --global--font-primary: 'IBM Plex Mono', sans-serif;
- --global--font-secondary: 'Libre Franklin', sans-serif;
- --global--color-primary: #DB0042;
- --global--color-primary-hover: #DB0042;
- --global--color-secondary: #555555;
- --global--color-secondary-hover: #333333;
- --global--color-foreground: #000000;
- --global--color-foreground-light: #333333;
- --global--color-background: #fff;
- --global--color-border: var(--global--color-secondary);
- /* Font Size */
- --global--font-size-xs: 14px;
- --global--font-size-sm: 16px;
- --global--font-size-root: 18px;
- --global--font-size-md: 18px;
- --global--font-size-lg: 22px;
- --global--font-size-xl: 48px;
- /* Spacing */
- --global--spacing-horizontal: 24px;
- --global--spacing-vertical: 27px;
- --global--content-width: 900px;
- /* Line Height */
- --global--line-height-base: 1;
- --global--line-height-body: 1.7;
- --global--line-height-heading: 1.3;
- --heading--font-family: var(--global--font-secondary);
- --heading--font-weight: bold;
- --heading--font-size-h1: 48px;
- --heading--font-size-h2: 22px;
- --heading--font-size-h3: 18px;
- --heading--font-size-h4: 16px;
- --heading--font-size-h5: 14px;
- --heading--font-size-h6: 12px;
- --heading--line-height: 1.2;
- --heading--letter-spacing-h4: 0.1em;
- --heading--letter-spacing-h5: 0.1em;
- --heading--letter-spacing-h6: 0.1em;
- --heading--line-height-h1: 1.2;
- --heading--line-height-h2: 1.4;
- --heading--line-height-h3: 1.4;
- --entry-header--font-size: var(--heading--font-size-h1);
- --entry-header--color: var(--global--color-foreground-light);
- --button--border-radius: 0px;
- --button--color-text: var(--global--color-background);
- --button--color-background: var(--global--color-primary);
- --button--font-weight: bold;
- --button--font-family: var(--global--font-secondary);
- --button--font-size: var(--global--font-size-sm);
- --cover--color-foreground: var(--global--color-background);
- --branding--title--font-size: var(--global--font-size-lg);
- --branding--title--font-size-mobile: var(--global--font-size-root);
- --primary-nav--justify-content: flex-end;
- --primary-nav--color-link: var(--global--color-secondary);
- --primary-nav--color-background: var(--global--color-foreground);
- --primary-nav--padding: 0px;
- --primary-nav--font-family-mobile: var(--global--font-family-secondary);
- --primary-nav--font-size-mobile: var(--global--font-size-sm);
- --primary-nav--font-size-sub-menu-mobile: var( --primary-nav--font-size-mobile );
- --social-nav--padding: var(--global--spacing-unit);
- --pullquote--font-style: normal;
- --pullquote--letter-spacing: 0;
- --pullquote--line-height: 1.15;
- /* --latest-posts--title-font-family: var(--global--font-secondary); */
- --latest-posts--title-font-size: var(--global--font-size-lg);
- --list--font-family: var(--global--font-secondary);
- }
- @media ( prefers-color-scheme: dark ) {
- :root {
- --global--color-primary: #f00048;
- --global--color-primary-hover: #ffffff;
- --global--color-secondary: #c0c0c0;
- --global--color-secondary-hover: #cccccc;
- --global--color-foreground: #b2b2b2;
- --global--color-foreground-light: #ffffff;
- --global--color-background: #080b11;
- --global--color-text-selection: #000000;
- --primary-nav--color-background: var(--global--color-foreground-light);
- }
- }
|