From 5a64b05b1cd0770734e8c8cd8e37691d99a46747 Mon Sep 17 00:00:00 2001 From: Jan Tuomi Date: Fri, 16 Nov 2018 19:25:09 +0200 Subject: [PATCH] Add typography and colors --- src/assets/scss/_globals.scss | 16 +++++++++++----- src/components/Card/Card.scss | 1 + src/components/Navigation/Navigation.scss | 10 +++++----- src/index.html.ejs | 1 + src/index.scss | 9 ++++----- 5 files changed, 22 insertions(+), 15 deletions(-) diff --git a/src/assets/scss/_globals.scss b/src/assets/scss/_globals.scss index 9bedffb..585b17d 100644 --- a/src/assets/scss/_globals.scss +++ b/src/assets/scss/_globals.scss @@ -1,7 +1,13 @@ +$dark-blue: #002d3a; $white: #fff; -$off-white: #f4f7fc; -$light-blue: #e4ecfa; -$blue: #2f6c76; -$dark-blue: #193b41; +$black: #000; +$grey1: #d4d0c7; +$grey2: #efece4; +$orange1: #d57a2d; +$orange2: #dd934e; +$blue: #57b2df; +$green1: #beddeb; +$green2: #c0dcd9; +$sand: #fdf9d7; -$font-helvetica: helvetica, arial, sans-serif; +$font: 'Montserrat', sans-serif; diff --git a/src/components/Card/Card.scss b/src/components/Card/Card.scss index 0623ffd..1c3767e 100644 --- a/src/components/Card/Card.scss +++ b/src/components/Card/Card.scss @@ -2,6 +2,7 @@ .card { background-color: $white; + color: $dark-blue; width: 20rem; white-space: wrap; text-align: left; diff --git a/src/components/Navigation/Navigation.scss b/src/components/Navigation/Navigation.scss index 0ba224e..dc56d87 100644 --- a/src/components/Navigation/Navigation.scss +++ b/src/components/Navigation/Navigation.scss @@ -1,5 +1,5 @@ @import "../../assets/scss/globals"; -$border-width: 4px; +$border-width: 2px; .navigation { width: 100%; @@ -9,14 +9,14 @@ $border-width: 4px; margin-bottom: 3rem; &__item { - background-color: $off-white; padding: 0.8rem 2rem; - transition: background-color 0.2s; - border-bottom: $border-width solid $blue; + transition: border-bottom 0.2s; + border-bottom: $border-width solid $dark-blue; cursor: pointer; + color: $white; &:hover { - background-color: $light-blue; + border-bottom: $border-width solid $white; } } } diff --git a/src/index.html.ejs b/src/index.html.ejs index c8a9e19..9d07423 100644 --- a/src/index.html.ejs +++ b/src/index.html.ejs @@ -2,6 +2,7 @@ +
diff --git a/src/index.scss b/src/index.scss index 7f56439..5722d6f 100644 --- a/src/index.scss +++ b/src/index.scss @@ -4,10 +4,10 @@ html, body { font-size: 16px; - background-color: $off-white; + background-color: $dark-blue; height: 100%; - font-family: $font-helvetica; - color: $blue; + font-family: $font; + color: $white; text-align: center; overflow: auto; } @@ -28,12 +28,11 @@ h1 { } p { - color: $dark-blue; + color: $white; font-size: 1.5rem; } a, a:hover { text-decoration: none; - color: $blue; }