godaddy-wordpress/go

View on GitHub
.dev/assets/design-styles/trendy/settings.scss

Summary

Maintainability
Test Coverage
:root {

    // Content width
    --go--max-width: 38rem;
    --go--max-width--alignwide: 80rem;

    // Spacing
    --go--viewport-basis: 850;
    --go--spacing--header: 27;
    --go--spacing--horizontal: 55;
    --go--spacing--paragraph: 15;

    // Typography
    --go--color--text: hsl(0, 0%, 0%);
    --go--font-family: "Noto Sans", sans-serif;
    --go--font-size--small: 82.5%;
    --go--font-size--smallest: 78%;
    --go--font-size: 1.1rem;
    --go--line-height: 1.9;
    --go--type-ratio: 1.2;

    // Headings
    --go-heading--button-spacing: 1.75rem;
    --go-heading--color--text: hsl(0, 0%, 0%);
    --go-heading--font-family: "Trocchi", sans-serif;
    --go-heading--font-weight: 400;
    --go-heading--line-height: 1.325;
    --go-heading--margin-bottom: 1.25rem;

    // Captions
    --go-caption--color--text: hsl(0, 0%, 43%);
    --go-caption--font-size: 0.85rem;
    --go-caption--text-align: center;

    // Links
    --go--hyperlink--color--text: var(--go-heading--color--text);
    --go--hyperlink-interactive--color--text: var(--go--color--primary);

    // Blockquote
    --go-quote-large--font-size: var(--go--type-scale-4);

    // Accessibility
    --go-outline--color--text: var(--go--color--primary);
    --go-selection--color--background: var(--go-heading--color--text);
    --go-selection--color--text: var(--go--color--white);

    // Buttons
    --go-button--font-size: 0.725rem;
    --go-button--padding--x: 1.85rem;
    --go-button--padding--y: 1.65rem;
    --go-button--border-radius: 0;
    --go-button--text-transform: uppercase;
    --go-button--letter-spacing: 3px;
    --go-button--font-weight: 600;

    // Labels
    --go-label--font-size: var(--go-navigation--font-size);
    --go-label--font-weight: var(--go-navigation--font-weight, 400);
    --go-label--letter-spacing: var(--go-navigation--letter-spacing, normal);
    --go-label--margin-bottom: 0.5rem;
    --go-label--text-transform: uppercase;

    // Input
    --go-input-interactive--color--border-color: var(--go--color--tertiary);
    --go-input--border: var(--go-input--border-width, 2px) var(--go-input--border-style, solid) var(--go-input--border-color, var(--go-heading--color--text));
    --go-input--color--text: var(--go-caption--color--text);
    --go-input--font-size: 1.1rem;
    --go-input--margin-bottom: 2rem;
    --go-input--padding--x: 1.35rem;
    --go-input--padding--y: 1rem;
    --go-input-interactive--color--text: var(--go-heading--color--text);
    --go-input-interactive--color--background: var(--go--color--tertiary);

    // Site Title
    --go-site-title--color--text: var(--go-heading--color--text);
    --go-site-title--font-size: 1.5rem;
    --go-site-title--letter-spacing: 0.033em;
    --go-site-title--font-weight: 400;

    @include media(medium) {
        --go-site-title--font-size: 2rem;
    }

    // Site Description
    --go-site-description--color--text: var(--go-heading--color--text);
    --go-site-description--font-family: "Source Code Pro", monospace;
    --go-site-description--font-size: 0.9rem;
    --go-site-description--font-family-weight: 400;
    --go-site-description--opacity: 1;

    // Site Navigation
    --go-navigation--color--text: var(--go-heading--color--text);
    --go-navigation--font-family: "Source Code Pro", monospace;
    --go-navigation--font-size: 0.9rem;
    --go-navigation-mobile--font-size: 1rem;

    // Site Search
    --go-search-button--color--text-interactive: var(--go--color--secondary);
    --go-search-button--color--background: var(--go--color--primary);
    --go-search-button--color--background-interactive: var(--go-heading--color--text);

    // Footer
    --go-footer--color--background: var(--go--color--tertiary);
    --go-footer--color--text: hsl(0, 0%, 55%);
    --go-footer--font-family: "Source Code Pro", sans-serif;
    --go-footer-3--border-color: var(--go--color--white);
    --go-footer-heading--color--text: var(--go--color--white);
    --go-footer-navigation--color--text: var(--go--color--white);

    // Social Icons
    --go-social--color--text: var(--go--color--white);
    --go-social--size: 1.5rem;
    --go-social--padding: 0.5rem;

    @include media(medium) {
        --go-social--size: 1.65rem;
        --go-social--padding: 1rem;
    }

    // Posts
    --go-meta--color--text: var(--go-heading--color--text);

    // CoBlocks
    --wp-block-coblocks-gallery-carousel--overlay--opacity: 0;
}