diff options
| -rw-r--r-- | partials/_base.scss | 3 | ||||
| -rw-r--r-- | partials/_color.scss | 41 | ||||
| -rw-r--r-- | style.scss | 11 |
3 files changed, 48 insertions, 7 deletions
diff --git a/partials/_base.scss b/partials/_base.scss index c5a1ca0..885594f 100644 --- a/partials/_base.scss +++ b/partials/_base.scss @@ -1,2 +1 @@ -$background_color: #fff; -$spot_primary_color: #68a1d4; +@import "color"; diff --git a/partials/_color.scss b/partials/_color.scss new file mode 100644 index 0000000..0bd3b0b --- /dev/null +++ b/partials/_color.scss @@ -0,0 +1,41 @@ +// SASS style sheet */ +// Palette color codes */ +// Palette URL: http://paletton.com/#uid=20L0y0kh8nM7lAWc7sOlwjFqKek */ + +// Feel free to copy&paste color codes to your application */ + + +// As hex codes */ + +$color-primary-0: #BD9458; // Main Primary color */ +$color-primary-1: #FFE7C5; +$color-primary-2: #E6C28F; +$color-primary-3: #9D7233; +$color-primary-4: #724B13; + +$color-complement-0: #3E5D7B; // Main Complement color */ +$color-complement-1: #90A3B6; +$color-complement-2: #617B95; +$color-complement-3: #264766; +$color-complement-4: #112E4A; + + + +// As RGBa codes */ + +$rgba-primary-0: rgba(189,148, 88,1); // Main Primary color */ +$rgba-primary-1: rgba(255,231,197,1); +$rgba-primary-2: rgba(230,194,143,1); +$rgba-primary-3: rgba(157,114, 51,1); +$rgba-primary-4: rgba(114, 75, 19,1); + +$rgba-complement-0: rgba( 62, 93,123,1); // Main Complement color */ +$rgba-complement-1: rgba(144,163,182,1); +$rgba-complement-2: rgba( 97,123,149,1); +$rgba-complement-3: rgba( 38, 71,102,1); +$rgba-complement-4: rgba( 17, 46, 74,1); + + + +// Generated by Paletton.com © 2002-2014 */ +// http://paletton.com */ @@ -25,7 +25,7 @@ max-width: 45em; margin: 0 auto; padding: .5em 2em; - background-color: $background_color; + background-color: $color-primary-1; } // layout - main content @@ -94,7 +94,7 @@ a { color: transparent; &:hover { - color: $spot_primary_color; + color: $color-complement-0; text-decoration: none; } } @@ -104,14 +104,15 @@ // // Grey underlay, Helvetica text body { - background-color: $spot_primary_color; + background-color: $color-primary-0; font-family: Helvetica Neue, Helvetica, Arial, sans-serif; } -// Anchors +// Links // -// Underlined only when hovered +// Use primary color; underlined only when hovered a { + @include link-colors($color-complement-0, $color-complement-2); @include hover-link; } |