rayelliott
/
gulp-web
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

add base typographical styles

This commit is contained in:
Ray Elliott 2020-05-21 14:48:47 +01:00
parent 38585b6a40
commit 6db90f9515
1 changed files with 79 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

113
src/scss/_base.scss
View File

@ -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();