| Dir : /home/trave494/mytube.pm/wp-content/themes/twentytwentyone/assets/sass/01-settings/ |
| Server: Linux ngx353.inmotionhosting.com 4.18.0-553.22.1.lve.1.el8.x86_64 #1 SMP Tue Oct 8 15:52:54 UTC 2024 x86_64 IP: 209.182.202.254 |
| Dir : //home/trave494/mytube.pm/wp-content/themes/twentytwentyone/assets/sass/01-settings/global.scss |
/* Variables */
// Vertical Rhythm Multiplier
$baseline-unit: 10px;
:root {
/* Font Family */
--global--font-primary: var(--font-headings, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif);
--global--font-secondary: var(--font-base, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif);
/* Font Size */
--global--font-size-base: 1.25rem; // 20px / 16px
--global--font-size-xs: 1rem; // 16px / 16px
--global--font-size-sm: 1.125rem; // 18px / 16px
--global--font-size-md: 1.25rem; // 20px / 16px
--global--font-size-lg: 1.5rem; // 24px / 16px
--global--font-size-xl: 2.25rem; // 36px / 16px
--global--font-size-xxl: 4rem; // 64px / 16px
--global--font-size-xxxl: 5rem; // 80px / 16px
--global--font-size-page-title: var(--global--font-size-xxl);
--global--letter-spacing: normal;
/* Line Height */
--global--line-height-body: 1.7;
--global--line-height-heading: 1.3;
--global--line-height-page-title: 1.1;
/* Headings */
--heading--font-family: var(--global--font-primary);
--heading--font-size-h6: var(--global--font-size-xs);
--heading--font-size-h5: var(--global--font-size-sm);
--heading--font-size-h4: var(--global--font-size-lg);
--heading--font-size-h3: calc(1.25 * var(--global--font-size-lg));
--heading--font-size-h2: var(--global--font-size-xl);
--heading--font-size-h1: var(--global--font-size-page-title);
--heading--letter-spacing-h6: 0.05em;
--heading--letter-spacing-h5: 0.05em;
--heading--letter-spacing-h4: var(--global--letter-spacing);
--heading--letter-spacing-h3: var(--global--letter-spacing);
--heading--letter-spacing-h2: var(--global--letter-spacing);
--heading--letter-spacing-h1: var(--global--letter-spacing);
--heading--line-height-h6: var(--global--line-height-heading);
--heading--line-height-h5: var(--global--line-height-heading);
--heading--line-height-h4: var(--global--line-height-heading);
--heading--line-height-h3: var(--global--line-height-heading);
--heading--line-height-h2: var(--global--line-height-heading);
--heading--line-height-h1: var(--global--line-height-page-title);
--heading--font-weight: normal;
--heading--font-weight-page-title: 300;
--heading--font-weight-strong: 600;
/* Block: Latest posts */
--latest-posts--title-font-family: var(--heading--font-family);
--latest-posts--title-font-size: var(--heading--font-size-h3);
--latest-posts--description-font-family: var(--global--font-secondary);
--latest-posts--description-font-size: var(--global--font-size-sm);
--list--font-family: var(--global--font-secondary);
--definition-term--font-family: var(--global--font-primary);
/* Colors */
--global--color-black: #000;
--global--color-dark-gray: #28303d;
--global--color-gray: #39414d;
--global--color-light-gray: #f0f0f0;
--global--color-green: #d1e4dd;
--global--color-blue: #d1dfe4;
--global--color-purple: #d1d1e4;
--global--color-red: #e4d1d1;
--global--color-orange: #e4dad1;
--global--color-yellow: #eeeadd;
--global--color-white: #fff;
--global--color-white-50: rgba(255, 255, 255, 0.5); // Used for disabled buttons
--global--color-white-90: rgba(255, 255, 255, 0.9); // Used in form fields.
--global--color-primary: var(--global--color-dark-gray); /* Body text color, site title, footer text color. */
--global--color-secondary: var(--global--color-gray); /* Headings */
--global--color-primary-hover: var(--global--color-primary);
--global--color-background: var(--global--color-green); /* Mint, default body background */
--global--color-border: var(--global--color-primary); /* Used for borders (separators) */
/* Spacing */
--global--spacing-unit: #{2 * $baseline-unit}; // 20px
--global--spacing-measure: unset; // Use ch units here. ie: 60ch = 60 character max-width
--global--spacing-horizontal: #{2.5 * $baseline-unit}; // 25px
--global--spacing-vertical: #{3 * $baseline-unit}; // 30px.
/* Elevation */
--global--elevation: 1px 1px 3px 0 rgba(0, 0, 0, 0.2);
/* Forms */
--form--font-family: var(--global--font-secondary);
--form--font-size: var(--global--font-size-sm);
--form--line-height: var(--global--line-height-body);
--form--color-text: var(--global--color-dark-gray); // Text color in input fields is always dark over light background.
--form--color-ranged: var(--global--color-secondary);
--form--label-weight: 500;
--form--border-color: var(--global--color-secondary);
--form--border-width: 3px;
--form--border-radius: 0;
--form--spacing-unit: calc(0.5 * var(--global--spacing-unit));
/* Cover block */
--cover--height: calc(15 * var(--global--spacing-vertical));
--cover--color-foreground: var(--global--color-white);
--cover--color-background: var(--global--color-black);
/* Buttons */
// Colors
--button--color-text: var(--global--color-background);
--button--color-text-hover: var(--global--color-secondary);
--button--color-text-active: var(--global--color-secondary);
--button--color-background: var(--global--color-secondary);
--button--color-background-active: var(--global--color-background);
// Fonts
--button--font-family: var(--global--font-primary);
--button--font-size: var(--global--font-size-base);
--button--font-weight: 500;
--button--line-height: 1.5;
// Borders
--button--border-width: 3px;
--button--border-radius: 0;
// Spacing
--button--padding-vertical: 15px;
--button--padding-horizontal: calc(2 * var(--button--padding-vertical));
/* entry */
--entry-header--color: var(--global--color-primary);
--entry-header--color-link: currentColor;
--entry-header--color-hover: var(--global--color-primary-hover);
--entry-header--color-focus: var(--global--color-secondary);
--entry-header--font-size: var(--heading--font-size-h2);
--entry-content--font-family: var(--global--font-secondary);
--entry-author-bio--font-family: var(--heading--font-family);
--entry-author-bio--font-size: var(--heading--font-size-h4);
/* Header */
--branding--color-text: var(--global--color-primary);
--branding--color-link: var(--global--color-primary);
--branding--color-link-hover: var(--global--color-secondary);
--branding--title--font-family: var(--global--font-primary);
--branding--title--font-size: var(--global--font-size-lg);
--branding--title--font-size-mobile: var(--heading--font-size-h4);
--branding--title--font-weight: normal;
--branding--title--text-transform: uppercase;
--branding--description--font-family: var(--global--font-secondary);
--branding--description--font-size: var(--global--font-size-sm);
--branding--description--font-family: var(--global--font-secondary);
--branding--logo--max-width: 300px;
--branding--logo--max-height: 100px;
--branding--logo--max-width-mobile: 96px;
--branding--logo--max-height-mobile: 96px;
/* Main navigation */
--primary-nav--font-family: var(--global--font-secondary);
--primary-nav--font-family-mobile: var(--global--font-primary);
--primary-nav--font-size: var(--global--font-size-md);
--primary-nav--font-size-sub-menu: var(--global--font-size-xs);
--primary-nav--font-size-mobile: var(--global--font-size-sm);
--primary-nav--font-size-sub-menu-mobile: var(--global--font-size-sm);
--primary-nav--font-size-button: var(--global--font-size-xs);
--primary-nav--font-style: normal;
--primary-nav--font-style-sub-menu-mobile: normal;
--primary-nav--font-weight: normal;
--primary-nav--font-weight-button: 500;
--primary-nav--color-link: var(--global--color-primary);
--primary-nav--color-link-hover: var(--global--color-primary-hover);
--primary-nav--color-text: var(--global--color-primary);
--primary-nav--padding: calc(0.66 * var(--global--spacing-unit));
--primary-nav--border-color: var(--global--color-primary);
/* Pagination */
--pagination--color-text: var(--global--color-primary);
--pagination--color-link-hover: var(--global--color-primary-hover);
--pagination--font-family: var(--global--font-secondary);
--pagination--font-size: var(--global--font-size-lg);
--pagination--font-weight: normal;
--pagination--font-weight-strong: 600;
/* Footer */
--footer--color-text: var(--global--color-primary);
--footer--color-link: var(--global--color-primary);
--footer--color-link-hover: var(--global--color-primary-hover);
--footer--font-family: var(--global--font-primary);
--footer--font-size: var(--global--font-size-sm);
/* Block: Pull quote */
--pullquote--font-family: var(--global--font-primary);
--pullquote--font-size: var(--heading--font-size-h3);
--pullquote--font-style: normal;
--pullquote--letter-spacing: var(--heading--letter-spacing-h4);
--pullquote--line-height: var(--global--line-height-heading);
--pullquote--border-width: 3px;
--pullquote--border-color: var(--global--color-primary);
--pullquote--color-foreground: var(--global--color-primary);
--pullquote--color-background: var(--global--color-background);
--quote--font-family: var(--global--font-secondary);
--quote--font-size: var(--global--font-size-md);
--quote--font-size-large: var(--global--font-size-xl);
--quote--font-style: normal;
--quote--font-weight: 700;
--quote--font-weight-strong: bolder;
--quote--font-style-large: normal;
--quote--font-style-cite: normal;
--quote--line-height: var(--global--line-height-body);
--quote--line-height-large: 1.35;
--separator--border-color: var(--global--color-border);
--separator--height: 1px;
/* Block: Table */
--table--stripes-border-color: var(--global--color-light-gray);
--table--stripes-background-color: var(--global--color-light-gray);
--table--has-background-text-color: var(--global--color-dark-gray);
/* Widgets */
--widget--line-height-list: 1.9;
--widget--line-height-title: 1.4;
--widget--font-weight-title: 700;
--widget--spacing-menu: calc(0.66 * var(--global--spacing-unit));
/* Admin-bar height */
--global--admin-bar--height: 0px;
}
.admin-bar {
--global--admin-bar--height: 32px;
@media only screen and (max-width: 782px) {
--global--admin-bar--height: 46px;
}
}
@media only screen and (min-width: 652px) { // Not using the mixin because it's compiled after this file
:root {
--global--font-size-xl: 2.5rem; // 40px / 16px
--global--font-size-xxl: 6rem; // 96px / 16px
--global--font-size-xxxl: 9rem; // 144px / 16px
--heading--font-size-h3: 2rem; // 32px / 16px
--heading--font-size-h2: 3rem; // 48px / 16px
}
}