_config.scss 1.9 KB

12345678910111213141516171819202122232425262728293031323334353637383940
  1. @mixin header-variables() {
  2. --branding--color-text: var(--global--color-foreground);
  3. --branding--color-link: var(--global--color-primary);
  4. --branding--color-link-hover: var(--global--color-primary-hover);
  5. --branding--title--font-family: var(--global--font-primary);
  6. --branding--title--font-size: calc( 1.25 * var(--heading--font-size-h1) ); // This is a one-off calculation.
  7. --branding--title--font-size-mobile: var(--heading--font-size-h1);
  8. --branding--title--font-weight: 700;
  9. --branding--description--font-family: var(--global--font-secondary);
  10. --branding--description--font-size: var(--global--font-size-sm);
  11. --branding--description--font-family: var(--global--font-secondary);
  12. --branding--logo--max-width: 120px;
  13. --branding--logo--max-height: 120px;
  14. --branding--logo--max-width-mobile: 96px;
  15. --branding--logo--max-height-mobile: 96px;
  16. --primary-nav--font-family: var(--global--font-secondary);
  17. --primary-nav--font-family-mobile: var(--global--font-primary);
  18. --primary-nav--font-size: var(--global--font-size-sm);
  19. --primary-nav--font-size-mobile: var(--global--font-size-xxl);
  20. --primary-nav--font-size-sub-menu-mobile: var(--global--font-size-lg);
  21. --primary-nav--font-style: normal;
  22. --primary-nav--font-style-sub-menu-mobile: italic;
  23. --primary-nav--font-weight: normal;
  24. --primary-nav--line-height: var(--global--line-height-body);
  25. --primary-nav--color-border: var(--global--color-secondary);
  26. --primary-nav--color-link: var(--global--color-primary);
  27. --primary-nav--color-link-hover: var(--global--color-primary-hover);
  28. --primary-nav--color-text: var(--global--color-foreground);
  29. --primary-nav--padding: calc(0.66 * var(--global--spacing-unit) );
  30. --primary-nav--justify-content: center;
  31. --social-nav--color-link: var(--global--color-foreground);
  32. --social-nav--color-link-hover: var(--global--color-primary-hover);
  33. --social-nav--padding: calc( 0.5 * var(--primary-nav--padding) );
  34. --wpcom-marketing-bar--height: 45px;
  35. --wpadmin-bar--height: 46px;
  36. }