278de67822
This change refactors all of the 'dark mode' settings into a single CSS file (that can be optionally loaded) This was mostly from the variables.css file, but there were also a few small customizations in other files that were also included.
104 lines
3.6 KiB
CSS
104 lines
3.6 KiB
CSS
:root {
|
|
/* Globals */
|
|
/* Font Family */
|
|
--global--font-primary: var(--font-headings,'IBM Plex Mono', sans-serif);
|
|
--global--font-secondary: var(--font-base,'Libre Franklin', sans-serif);
|
|
/* Colors */
|
|
--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-low-contrast: #333333;
|
|
--global--color-background: #fff;
|
|
--global--color-background-high-contrast: #F9F9F9;
|
|
--global--color-border: var(--global--color-secondary);
|
|
/* Font Weight */
|
|
--global--font-weight: 500;
|
|
/* 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.8;
|
|
--global--line-height-heading: 1.4;
|
|
|
|
--global--link-font-weight: 500;
|
|
|
|
/* Headings*/
|
|
--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);
|
|
--entry-header--color-link: var(--entry-header--color);
|
|
|
|
--button--border-radius: 0px;
|
|
--button--color-text: var(--global--color-background);
|
|
--button--color-background: var(--global--color-primary);
|
|
--button--font-weight: normal;
|
|
--button--font-family: var(--global--font-secondary);
|
|
--button--font-size: var(--global--font-size-sm);
|
|
--button--border-radius: 3px;
|
|
--button--padding-vertical: 16px;
|
|
--button--padding-horizontal: 32px;
|
|
|
|
--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-link-hover: var(--global--color-primary);
|
|
--primary-nav--color-border: transparent;
|
|
--primary-nav--dropdown-color-link: var(--global--color-background);
|
|
--primary-nav--color-background: var(--global--color-foreground);
|
|
--primary-nav--padding: 6px;
|
|
--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 );
|
|
--primary-nav--font-size: 17px;
|
|
|
|
--social-nav--padding: var(--global--spacing-unit);
|
|
|
|
--pullquote--font-style: normal;
|
|
--pullquote--letter-spacing: 0;
|
|
--pullquote--line-height: 1.15;
|
|
|
|
--list--font-family: var(--global--font-secondary);
|
|
|
|
/* Sticky Posts */
|
|
--sticky-posts--color-background: var(--global--color-background-high-contrast);
|
|
--sticky-posts--entry-title-font-size: 24px;
|
|
--sticky-posts--entry-content-font-size: 20px;
|
|
--sticky-posts--alt-color-background: var(--global--color-background);
|
|
|
|
/* Forms */
|
|
--form--border-color: var(--global--color-secondary);
|
|
--form--border-width: 1px;
|
|
--form--spacing-unit: 6px;
|
|
--form--color-text: var(--global--color-secondary);
|
|
|
|
}
|