From 9f1b47354ac96a8335c792263f4f22a33e5c9e61 Mon Sep 17 00:00:00 2001 From: rayelliott Date: Mon, 30 Mar 2020 17:45:27 +0000 Subject: [PATCH] add basic color scheme --- site/layouts/partials/hero.html | 1 - src/css/imports/base.scss | 6 +++++ src/css/imports/variables.scss | 44 ++++++++++++++++++++++++++++++++- src/css/main.css | 6 +---- 4 files changed, 50 insertions(+), 7 deletions(-) create mode 100644 src/css/imports/base.scss diff --git a/site/layouts/partials/hero.html b/site/layouts/partials/hero.html index e84e20a..fd812dc 100644 --- a/site/layouts/partials/hero.html +++ b/site/layouts/partials/hero.html @@ -1,7 +1,6 @@
- {{ partial "blocks.html" . }}
diff --git a/src/css/imports/base.scss b/src/css/imports/base.scss new file mode 100644 index 0000000..78c887b --- /dev/null +++ b/src/css/imports/base.scss @@ -0,0 +1,6 @@ +body { + font-family: "Montserrat", sans-serif; + color: var(--color__body); + background-color: var(--color__bg); +} + diff --git a/src/css/imports/variables.scss b/src/css/imports/variables.scss index 86491dc..9df2de3 100644 --- a/src/css/imports/variables.scss +++ b/src/css/imports/variables.scss @@ -1,5 +1,47 @@ $z-index__header: 100; :root { - --color__bg: #eee; + --primary-100: #eff8ff; + --primary-200: #aad4f5; + --primary-300: #63a2d8; + --primary-400: #3183c8; + --primary-500: #2368a2; + --primary-600: #1a4971; + --primary-700: #203d54; + // --primary-800: #203d54; + // --primary-900: #203d54; + --neutral-100: #f8f9fa; + --neutral-200: #e1e7ec; + --neutral-300: #cfd6de; + --neutral-400: #b8c4ce; + --neutral-500: #8895a7; + --neutral-600: #5f6b7a; + --neutral-700: #212934; + // --neutral-800: #212934; + // --neutral-900: #212934; + --accent-primary-100: #e3fcec; + --accent-primary-200: #a8eec1; + --accent-primary-300: #74d99f; + --accent-primary-400: #38c172; + --accent-primary-500: #259d58; + --accent-primary-600: #197741; + --accent-primary-700: #145239; + // --accent-primary-800: #145239; + // --accent-primary-900: #145239; + --accent-secondary-100: #fce8e8; + --accent-secondary-200: #f5aaaa; + --accent-secondary-300: #e46464; + --accent-secondary-400: #dc3030; + --accent-secondary-500: #b82020; + --accent-secondary-600: #891b1b; + --accent-secondary-700: #611818; + // --accent-secondary-800: #611818; + // --accent-secondary-900: #611818; + + // --accent-tertiary-100: #e7ffee; + // --accent-quaternary-100: #fffcf4; + // --accent-quinary-100: #ffeefc; + + --color__bg: var(--neutral-100); + --color__body: var(--neutral-600); } diff --git a/src/css/main.css b/src/css/main.css index a9d2a59..b56c1fe 100644 --- a/src/css/main.css +++ b/src/css/main.css @@ -3,6 +3,7 @@ @import "imports/variables.scss"; +@import "imports/base.scss"; @import "imports/layout.scss"; @import "imports/utility.scss"; @import "imports/mixins.scss"; @@ -10,11 +11,6 @@ @import "mapbox-gl/dist/mapbox-gl.css"; -// fonts -body { - font-family: "Montserrat", sans-serif; -} - // swup transition classes .transition-fade { transition: 0.3s;