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 { :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();