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 | |
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
-rw-r--r-- | README.md | 17 | ||||
-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 | ||||
-rw-r--r-- | layouts/partials/head.html | 2 |
5 files changed, 28 insertions, 14 deletions
@@ -107,9 +107,24 @@ Feel free to submit pull requests for other translations of Hallo's texts. [Hugo documentation for multilingual sites](//gohugo.io/content-management/multilingual/) +### Colours + +You can alter the colours of your website using configuration options. Add the following to the `[params]` section of your `config.toml` for an alternate colour scheme: + +``` + [params.colors] + background = "#81c6ff" + foreground = "#edf7ff" + hover = "#ffba82" +``` + +* `background`: Used as background colour of the site. +* `foreground`: Used for text and the border of the portrait. +* `hover`: Used for hover of links. + ## Acknowledgments Stock portrait photo obtained [here](https://www.pexels.com/photo/adult-beautiful-blonde-blur-324658/). ## License -See [LICENSE](https://github.com/EmielH/hallo-hugo/blob/master/LICENSE).
\ No newline at end of file +See [LICENSE](https://github.com/EmielH/hallo-hugo/blob/master/LICENSE). 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; diff --git a/layouts/partials/head.html b/layouts/partials/head.html index 829e9b8..193f38b 100644 --- a/layouts/partials/head.html +++ b/layouts/partials/head.html @@ -19,7 +19,7 @@ {{- $inServerMode := .Site.IsServer }} {{- $cssTarget := "css/style.css" }} {{- $cssOptions := cond ($inServerMode) (dict "targetPath" $cssTarget "enableSourceMap" true) (dict "targetPath" $cssTarget "outputStyle" "compressed") }} - {{- $style := resources.Get "scss/hallo.scss" | toCSS $cssOptions }} + {{- $style := resources.Get "scss/hallo.scss" | resources.ExecuteAsTemplate "style.hallo.scss" . | toCSS $cssOptions }} <link rel="stylesheet" href="{{ $style.RelPermalink }}"> <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Montserrat:400,700"> |