diff options
| author | Emiel Hollander <EmielH@users.noreply.github.com> | 2019-01-13 15:41:51 +0300 |
|---|---|---|
| committer | Emiel Hollander <EmielH@users.noreply.github.com> | 2019-01-13 15:42:48 +0300 |
| commit | 4c20e50dbe33888aa98da15a38c1ee726fc5a392 (patch) | |
| tree | 9abc2686f33e8236540925ed27a5237efcac7d7f /assets | |
| parent | b0f7e8160e046d40fd67deb380d0af0bbad6a8f3 (diff) | |
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
Diffstat (limited to 'assets')
| -rw-r--r-- | assets/scss/hallo.scss | 7 | ||||
| -rw-r--r-- | assets/scss/hallo/_base.scss | 10 | ||||
| -rw-r--r-- | assets/scss/hallo/_variables.scss | 6 |
3 files changed, 11 insertions, 12 deletions
diff --git a/assets/scss/hallo.scss b/assets/scss/hallo.scss index a9598db..ad32f21 100644 --- a/assets/scss/hallo.scss +++ b/assets/scss/hallo.scss @@ -1,3 +1,8 @@ +// Colours +$color-background: {{ .Site.Params.colors.background | default "#6fcdbd" }}; +$color-foreground: {{ .Site.Params.colors.foreground | default "#fff" }}; +$color-hover: {{ .Site.Params.colors.hover | default "#333" }}; + @import 'hallo/variables'; @import 'hallo/base'; -@import 'hallo/layout';
\ No newline at end of file +@import 'hallo/layout'; 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; |