From 4c20e50dbe33888aa98da15a38c1ee726fc5a392 Mon Sep 17 00:00:00 2001 From: Emiel Hollander Date: Sun, 13 Jan 2019 13:41:51 +0100 Subject: Add configuration options for colors It's now possible to add a [params.colors] section to config.toml to configure the colors the site uses. It is used like this: [params.colors] background = "#81c6ff" foreground = "#edf7ff" hover = "#ffba82" Breaking changes: The SCSS variables have been renamed. * $background-1 is now $color-background * $default-light is now $color-foreground * $default-dark is now $color-hover See #4 --- assets/scss/hallo/_base.scss | 10 +++++----- assets/scss/hallo/_variables.scss | 6 ------ 2 files changed, 5 insertions(+), 11 deletions(-) (limited to 'assets/scss/hallo') diff --git a/assets/scss/hallo/_base.scss b/assets/scss/hallo/_base.scss index 2b775fa..fe91eeb 100644 --- a/assets/scss/hallo/_base.scss +++ b/assets/scss/hallo/_base.scss @@ -1,6 +1,6 @@ html, body { - color: $default-light; + color: $color-foreground; margin: 1rem; padding: 0; } @@ -12,15 +12,15 @@ html { } body { - background-color: $background-1; + background-color: $color-background; } a { @include transition(color .2s ease-out); - color: $default-light; + color: $color-foreground; &:hover { - color: $default-dark; + color: $color-hover; } } @@ -35,7 +35,7 @@ h2 { img.portrait { border-radius: 50%; - border: 10px solid $default-light; + border: 10px solid $color-foreground; margin: 2em 3em; width: 300px; height: 300px; diff --git a/assets/scss/hallo/_variables.scss b/assets/scss/hallo/_variables.scss index e540bd3..c5071c2 100644 --- a/assets/scss/hallo/_variables.scss +++ b/assets/scss/hallo/_variables.scss @@ -1,9 +1,3 @@ -// Colours -$background-1: #6fcdbd; -$background-2: #81c6ff; -$default-light: #fff; -$default-dark: #333; - // Fonts $sans-serif: Montserrat, 'Helvetica Neue', 'Segoe UI', Helvetica, Arial, sans-serif; -- cgit v1.2.3