add base typographical styles
This commit is contained in:
parent
38585b6a40
commit
6db90f9515
|
@ -1,45 +1,50 @@
|
||||||
:root {
|
:root {
|
||||||
--primary-900: #{$color__primary-900};
|
--primary-900: #{$color__primary-900};
|
||||||
--primary-800: #{$color__primary-800};
|
--primary-800: #{$color__primary-800};
|
||||||
--primary-700: #{$color__primary-700};
|
--primary-700: #{$color__primary-700};
|
||||||
--primary-600: #{$color__primary-600};
|
--primary-600: #{$color__primary-600};
|
||||||
--primary-500: #{$color__primary-500};
|
--primary-500: #{$color__primary-500};
|
||||||
--primary-400: #{$color__primary-400};
|
--primary-400: #{$color__primary-400};
|
||||||
--primary-300: #{$color__primary-300};
|
--primary-300: #{$color__primary-300};
|
||||||
--primary-200: #{$color__primary-200};
|
--primary-200: #{$color__primary-200};
|
||||||
--primary-100: #{$color__primary-100};
|
--primary-100: #{$color__primary-100};
|
||||||
--primary-50: #{$color__primary-50};
|
--primary-50: #{$color__primary-50};
|
||||||
|
|
||||||
--secondary-500: #{$color__secondary-500};
|
--secondary-500: #{$color__secondary-500};
|
||||||
--tertiary-500: #{$color__tertiary-500};
|
--tertiary-500: #{$color__tertiary-500};
|
||||||
|
|
||||||
--accent-900: #{$color__accent-900};
|
--accent-900: #{$color__accent-900};
|
||||||
--accent-800: #{$color__accent-800};
|
--accent-800: #{$color__accent-800};
|
||||||
--accent-700: #{$color__accent-700};
|
--accent-700: #{$color__accent-700};
|
||||||
--accent-600: #{$color__accent-600};
|
--accent-600: #{$color__accent-600};
|
||||||
--accent-500: #{$color__accent-500};
|
--accent-500: #{$color__accent-500};
|
||||||
--accent-400: #{$color__accent-400};
|
--accent-400: #{$color__accent-400};
|
||||||
--accent-300: #{$color__accent-300};
|
--accent-300: #{$color__accent-300};
|
||||||
--accent-200: #{$color__accent-200};
|
--accent-200: #{$color__accent-200};
|
||||||
--accent-100: #{$color__accent-100};
|
--accent-100: #{$color__accent-100};
|
||||||
--accent-50: #{$color__accent-50};
|
--accent-50: #{$color__accent-50};
|
||||||
|
|
||||||
--neutral-900: #{$color__neutral-900};
|
--neutral-900: #{$color__neutral-900};
|
||||||
--neutral-800: #{$color__neutral-800};
|
--neutral-800: #{$color__neutral-800};
|
||||||
--neutral-700: #{$color__neutral-700};
|
--neutral-700: #{$color__neutral-700};
|
||||||
--neutral-600: #{$color__neutral-600};
|
--neutral-600: #{$color__neutral-600};
|
||||||
--neutral-500: #{$color__neutral-500};
|
--neutral-500: #{$color__neutral-500};
|
||||||
--neutral-400: #{$color__neutral-400};
|
--neutral-400: #{$color__neutral-400};
|
||||||
--neutral-300: #{$color__neutral-300};
|
--neutral-300: #{$color__neutral-300};
|
||||||
--neutral-200: #{$color__neutral-200};
|
--neutral-200: #{$color__neutral-200};
|
||||||
--neutral-100: #{$color__neutral-100};
|
--neutral-100: #{$color__neutral-100};
|
||||||
|
|
||||||
|
--white: #{$color__white};
|
||||||
|
--black: #{$color__black};
|
||||||
|
|
||||||
--white: #{$color__white};
|
|
||||||
--black: #{$color__black};
|
|
||||||
}
|
}
|
||||||
|
|
||||||
body {
|
body {
|
||||||
font-size: 100%;
|
font-size: 100%;
|
||||||
|
line-height: 1.6;
|
||||||
|
|
||||||
|
box-sizing: border-box;
|
||||||
|
|
||||||
@include font-body;
|
@include font-body;
|
||||||
color: $color-body;
|
color: $color-body;
|
||||||
background-color: $background-color;
|
background-color: $background-color;
|
||||||
|
@ -54,6 +59,46 @@ h6 {
|
||||||
@include font-title();
|
@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,
|
a,
|
||||||
button {
|
button {
|
||||||
@include font-link();
|
@include font-link();
|
||||||
|
|
Loading…
Reference in New Issue