diff --git a/src/scss/_base.scss b/src/scss/_base.scss index 1c3970b..ad6fea0 100644 --- a/src/scss/_base.scss +++ b/src/scss/_base.scss @@ -1,47 +1,52 @@ :root { ---primary-900: #{$color__primary-900}; ---primary-800: #{$color__primary-800}; ---primary-700: #{$color__primary-700}; ---primary-600: #{$color__primary-600}; ---primary-500: #{$color__primary-500}; ---primary-400: #{$color__primary-400}; ---primary-300: #{$color__primary-300}; ---primary-200: #{$color__primary-200}; ---primary-100: #{$color__primary-100}; ---primary-50: #{$color__primary-50}; + --primary-900: #{$color__primary-900}; + --primary-800: #{$color__primary-800}; + --primary-700: #{$color__primary-700}; + --primary-600: #{$color__primary-600}; + --primary-500: #{$color__primary-500}; + --primary-400: #{$color__primary-400}; + --primary-300: #{$color__primary-300}; + --primary-200: #{$color__primary-200}; + --primary-100: #{$color__primary-100}; + --primary-50: #{$color__primary-50}; ---secondary-500: #{$color__secondary-500}; ---tertiary-500: #{$color__tertiary-500}; + --secondary-500: #{$color__secondary-500}; + --tertiary-500: #{$color__tertiary-500}; ---accent-900: #{$color__accent-900}; ---accent-800: #{$color__accent-800}; ---accent-700: #{$color__accent-700}; ---accent-600: #{$color__accent-600}; ---accent-500: #{$color__accent-500}; ---accent-400: #{$color__accent-400}; ---accent-300: #{$color__accent-300}; ---accent-200: #{$color__accent-200}; ---accent-100: #{$color__accent-100}; ---accent-50: #{$color__accent-50}; + --accent-900: #{$color__accent-900}; + --accent-800: #{$color__accent-800}; + --accent-700: #{$color__accent-700}; + --accent-600: #{$color__accent-600}; + --accent-500: #{$color__accent-500}; + --accent-400: #{$color__accent-400}; + --accent-300: #{$color__accent-300}; + --accent-200: #{$color__accent-200}; + --accent-100: #{$color__accent-100}; + --accent-50: #{$color__accent-50}; ---neutral-900: #{$color__neutral-900}; ---neutral-800: #{$color__neutral-800}; ---neutral-700: #{$color__neutral-700}; ---neutral-600: #{$color__neutral-600}; ---neutral-500: #{$color__neutral-500}; ---neutral-400: #{$color__neutral-400}; ---neutral-300: #{$color__neutral-300}; ---neutral-200: #{$color__neutral-200}; ---neutral-100: #{$color__neutral-100}; + --neutral-900: #{$color__neutral-900}; + --neutral-800: #{$color__neutral-800}; + --neutral-700: #{$color__neutral-700}; + --neutral-600: #{$color__neutral-600}; + --neutral-500: #{$color__neutral-500}; + --neutral-400: #{$color__neutral-400}; + --neutral-300: #{$color__neutral-300}; + --neutral-200: #{$color__neutral-200}; + --neutral-100: #{$color__neutral-100}; + + --white: #{$color__white}; + --black: #{$color__black}; ---white: #{$color__white}; ---black: #{$color__black}; } body { font-size: 100%; + line-height: 1.6; + + box-sizing: border-box; + @include font-body; - color: $color-body; + color: $color-body; background-color: $background-color; } @@ -54,6 +59,46 @@ h6 { @include font-title(); } +h1 { + font-size: 2em; + margin-bottom: 1.6rem; + @include font-title(semi-bold); +} + +h2 { + font-size: 1.6em; + margin-bottom: 1.6rem; + @include font-title(semi-bold); +} + +h3 { + font-size: 1.4em; + margin-bottom: 1.6rem; + @include font-title(semi-bold); +} + +h4, h5, h6 { + opacity: 0.8; + margin-bottom: 0.8rem; +} + +h4 { + font-size: 1.2em; + @include font-title(semi-bold); +} + +h5 { + font-size: 1.2em; +} + +h6 { + font-size: 1.1em; +} + +p { + margin-bottom: 1.6rem; +} + a, button { @include font-link();