// ============================================================================ // :: 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 { @extend %__text-default; } // Long enlarged copy on narrow viewports: avoid horizontal overflow site-wide. html[data-text-zoom="large"], html[data-text-zoom="xlarge"] { @include respond-to($breakpoint-tablet-default) { body { overflow-wrap: break-word; word-break: break-word; } } } // ============================================================================ // :: 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. */ h1 { @extend %h1-default; } h2 { @extend %h2-default; } h3 { @extend %h3-default; } h4 { @extend %h4-default; } h5 { @extend %h5-default; } h6 { @extend %h6-default; } // ============================================================================ // :: Heading Utilities // ============================================================================ /** * Utility classes to decouple semantic heading levels from their visual style. * Use these when the markup level and the desired typography level differ. */ .u-visual-h1 { @extend %h1-default; } .u-visual-h2 { @extend %h2-default; } .u-visual-h3 { @extend %h3-default; } .u-visual-h4 { @extend %h4-default; } .u-visual-h5 { @extend %h5-default; } .u-visual-h6 { @extend %h6-default; } // ============================================================================ // :: 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 { @extend %text-default; } small { @extend %text-small-default; } strong { color: $primary-color-base; } .p--size-2x { font-size: $font-size-2x-large; } .text-right { text-align: right; } // ============================================================================ // :: Link // ============================================================================ /** * The link contains the color and typography-proprties for the interactive * elements like a