// ============================================================================ // :: Base // ============================================================================ /** * The base contains the typography-properties on the and tag. * We set the font-size on the HTML tag to 62.5% to equalize 1rem to 10px * instead of 1rem to 16px. */ html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-size: 62.5%; } body { font-family: $font-family-roboto; font-size: $font-size; } // ============================================================================ // :: Headers // ============================================================================ /** * The headers contain the base styling like typoraphy-properties and color * properties defined on the

to

tags. Do not specify any padding or * margin on these tags to avoid having to override them in every component. */ $screen-1x-small: 480px; $screen-small-base: 720px; $screen-medium-base: 975px; $screen-large-base: 1140px; $screen-1x-large: 1440px; h1 { font-family: $font-family-beausans; font-weight: $font-weight-bold; font-size: $font-size-5x-large; line-height: $line-height-6x-large; color: $text-color; @include respond-to($screen-small-base) { font-size: $font-size-4x-large; line-height: $line-height-5x-large; } } h2 { font-family: $font-family-beausans; font-weight: $font-weight-ultrathin; font-size: $font-size-4x-large; line-height: $line-height-5x-large; color: $text-color; @include respond-to($screen-small-base) { font-size: $font-size-4x-large; line-height: $line-height-5x-large; } } h3 { font-family: $font-family-beausans; font-weight: $font-weight-medium; font-size: $font-size-3x-large; line-height: $line-height-4x-large; @include respond-to($screen-small-base) { font-size: $font-size-3x-large; font-weight: $font-weight-normal; line-height: $line-height-4x-large; } } h4 { font-family: $font-family-beausans; font-weight: $font-weight-thin; font-size: $font-size-2x-large; line-height: $line-height-3x-large; color: $text-color; @include respond-to($screen-small-base) { font-size: $font-size-1x-large; line-height: $line-height-3x-large; } } h5 { font-family: $font-family-beausans; font-weight: $font-weight-bold; font-size: $font-size-1x-large; line-height: $line-height-2x-large; color: $text-color; @include respond-to($screen-small-base) { font-size: $font-size; } } h6 { font-family: $font-family-beausans; font-weight: $font-weight-bold; font-size: $font-size-1x-small; line-height: $line-height; color: $text-color; } // ============================================================================ // :: Text // ============================================================================ /** * The text contains the color and typography-proprties for the paragraph, small * strong, ... tags. Do not specify any padding or margin on these tags to avoid * having to override them in every component. */ p { font-family: $font-family-roboto; font-weight: $font-weight-lite; font-size: $font-size; line-height: $line-height-2x-large; color: $text-color; @include respond-to($screen-small-base) { font-size: $font-size-1x-small; line-height: $line-height-1x-large; } } small { font-family: $font-family-roboto; font-weight: $font-weight-normal; font-size: $font-size; color: $text-color; } // ============================================================================ // :: Link // ============================================================================ /** * The link contains the color and typography-proprties for the interactive * elements like a