beenull/themes-wordpress
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions
themes-wordpress/spearhead/variables.css

118 lines
4 KiB
CSS
Raw Normal View History

Scaffolding.
2020-08-04 21:44:03 +00:00
:root {
/* Globals */
/* Font Family */
Add base color, typography, and header styles.
2020-08-10 18:02:22 +00:00
--global--font-primary: 'IBM Plex Mono', sans-serif;
--global--font-secondary: 'Libre Franklin', sans-serif;
Add styles for sticky posts
2020-10-09 12:43:52 +00:00
/* Colors */
Add base color, typography, and header styles.
2020-08-10 18:02:22 +00:00
--global--color-primary: #DB0042;
--global--color-primary-hover: #DB0042;
--global--color-secondary: #555555;
Scaffolding.
2020-08-04 21:44:03 +00:00
--global--color-secondary-hover: #333333;
--global--color-foreground: #000000;
--global--color-foreground-light: #333333;
Add base color, typography, and header styles.
2020-08-10 18:02:22 +00:00
--global--color-background: #fff;
Scaffolding.
2020-08-04 21:44:03 +00:00
--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;
Add base color, typography, and header styles.
2020-08-10 18:02:22 +00:00
--global--font-size-lg: 22px;
--global--font-size-xl: 48px;
/* Spacing */
--global--spacing-horizontal: 24px;
match the menu to the design
2020-10-06 16:31:58 +00:00
--global--spacing-vertical: 27px;
--global--content-width: 900px;
Scaffolding.
2020-08-04 21:44:03 +00:00
/* Line Height */
--global--line-height-base: 1;
Change line height.
2020-10-15 18:09:31 +00:00
--global--line-height-body: 1.8;
Scaffolding.
2020-08-04 21:44:03 +00:00
--global--line-height-heading: 1.3;
update CSS for navigation blocks
2020-10-16 10:06:26 +00:00
--global--link-font-weight: 500;
/* Headings*/
Add base color, typography, and header styles.
2020-08-10 18:02:22 +00:00
--heading--font-family: var(--global--font-secondary);
--heading--font-weight: bold;
Scaffolding.
2020-08-04 21:44:03 +00:00
--heading--font-size-h1: 48px;
Add base color, typography, and header styles.
2020-08-10 18:02:22 +00:00
--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;
Scaffolding.
2020-08-04 21:44:03 +00:00
--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;
update the primary-nav--padding to use a px variable so that the types match still
2020-09-30 16:38:14 +00:00
Entry header meta and home page styles.
2020-08-10 20:59:14 +00:00
--entry-header--font-size: var(--heading--font-size-h1);
#2538: Spearhead: Dark mode contrast
2020-10-08 13:23:07 +00:00
--entry-header--color: var(--global--color-foreground-light);
Scaffolding.
2020-08-04 21:44:03 +00:00
--button--border-radius: 0px;
--button--color-text: var(--global--color-background);
--button--color-background: var(--global--color-primary);
started styling all the possible combinations for search block
2020-10-15 14:31:37 +00:00
--button--font-weight: normal;
Scaffolding.
2020-08-04 21:44:03 +00:00
--button--font-family: var(--global--font-secondary);
--button--font-size: var(--global--font-size-sm);
Adjust button padding.
2020-10-14 13:48:42 +00:00
--button--border-radius: 3px;
started styling all the possible combinations for search block
2020-10-15 14:31:37 +00:00
--button--padding-vertical: 16px;
Adjust button padding.
2020-10-14 13:48:42 +00:00
--button--padding-horizontal: 32px;
Scaffolding.
2020-08-04 21:44:03 +00:00
--cover--color-foreground: var(--global--color-background);
--branding--title--font-size: var(--global--font-size-lg);
Mobile header and nav styles.
2020-08-13 15:41:46 +00:00
--branding--title--font-size-mobile: var(--global--font-size-root);
Scaffolding.
2020-08-04 21:44:03 +00:00
fix menu styles
2020-10-07 15:03:07 +00:00
--primary-nav--justify-content: flex-end;
Add base color, typography, and header styles.
2020-08-10 18:02:22 +00:00
--primary-nav--color-link: var(--global--color-secondary);
make the background of the menu look better
2020-10-09 09:21:07 +00:00
--primary-nav--color-background: var(--global--color-foreground);
update CSS for navigation blocks
2020-10-16 10:06:26 +00:00
--primary-nav--padding: 6px;
Mobile header and nav styles.
2020-08-13 15:41:46 +00:00
--primary-nav--font-family-mobile: var(--global--font-family-secondary);
--primary-nav--font-size-mobile: var(--global--font-size-sm);
get the submenu size right
2020-10-08 13:07:31 +00:00
--primary-nav--font-size-sub-menu-mobile: var( --primary-nav--font-size-mobile );
Fix menu type size.
2020-10-15 16:18:58 +00:00
--primary-nav--font-size: 17px;
Scaffolding.
2020-08-04 21:44:03 +00:00
fix menu styles
2020-10-07 15:03:07 +00:00
--social-nav--padding: var(--global--spacing-unit);
Scaffolding.
2020-08-04 21:44:03 +00:00
--pullquote--font-style: normal;
--pullquote--letter-spacing: 0;
--pullquote--line-height: 1.15;
--list--font-family: var(--global--font-secondary);
removed stuff that goes on a different PR, updated block pattern
2020-10-09 17:28:49 +00:00
Add styles for sticky posts
2020-10-09 12:43:52 +00:00
/* Sticky Posts */
Spearhead: Update dark mode colors
2020-10-15 15:03:47 +00:00
--sticky-posts--color-text: var(--global--color-foreground);
Add styles for sticky posts
2020-10-09 12:43:52 +00:00
--sticky-posts--color-background: #F9F9F9;
add larger fonts to sticky posts
2020-10-12 15:53:37 +00:00
--sticky-posts--entry-title-font-size: 24px;
--sticky-posts--entry-content-font-size: 20px;
switch the colors on dark mode
2020-10-16 10:37:24 +00:00
--sticky-posts--alt-color-background: var(--global--color-background);
styles for search form
2020-10-13 15:28:18 +00:00
/* Forms */
--form--border-color: var(--global--color-secondary);
--form--border-width: 1px;
styles for multiple options of search blocks
2020-10-13 10:23:29 +00:00
--form--spacing-unit: 6px;
started styling all the possible combinations for search block
2020-10-15 14:31:37 +00:00
--form--color-text: var(--global--color-secondary);
styles for multiple options of search blocks
2020-10-13 10:23:29 +00:00
update the primary-nav--padding to use a px variable so that the types match still
2020-09-30 16:38:14 +00:00
}
Add dark mode to spearhead
2020-10-05 09:54:13 +00:00
@media ( prefers-color-scheme: dark ) {
:root {
Spearhead: Update dark mode colors
2020-10-15 15:03:47 +00:00
--global--color-primary: #ff6a81;
Fix link color and hover states
2020-10-05 15:36:10 +00:00
--global--color-primary-hover: #ffffff;
Spearhead: Update dark mode colors
2020-10-15 15:03:47 +00:00
--global--color-secondary: #b2b2b2;
Add dark mode to spearhead
2020-10-05 09:54:13 +00:00
--global--color-secondary-hover: #cccccc;
#2538: Spearhead: Dark mode contrast
2020-10-08 13:23:07 +00:00
--global--color-foreground: #b2b2b2;
Add dark mode to spearhead
2020-10-05 09:54:13 +00:00
--global--color-foreground-light: #ffffff;
Spearhead: Update dark mode colors
2020-10-15 15:03:47 +00:00
--global--color-background: #1e1f21;
Add dark mode to spearhead
2020-10-05 09:54:13 +00:00
--global--color-text-selection: #000000;
make the background of the menu look better
2020-10-09 09:16:23 +00:00
--primary-nav--color-background: var(--global--color-foreground-light);
Fix menu type size and button padding regression.
2020-10-14 17:49:34 +00:00
--button--padding-vertical: 24px;
--button--padding-horizontal: 32px;
switch the colors on dark mode
2020-10-16 10:37:24 +00:00
--sticky-posts--color-background: var(--global--color-background);
Spearhead: Update dark mode colors
2020-10-15 15:03:47 +00:00
--sticky-posts--color-text: var(--global--color-foreground-light);
switch the colors on dark mode
2020-10-16 10:37:24 +00:00
--sticky-posts--alt-color-background: #2d3139;
Add dark mode to spearhead
2020-10-05 09:54:13 +00:00
}
}
Reference in a new issue Copy permalink