From 4c20e50dbe33888aa98da15a38c1ee726fc5a392 Mon Sep 17 00:00:00 2001
From: Emiel Hollander <EmielH@users.noreply.github.com>
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
---
 README.md                         | 17 ++++++++++++++++-
 assets/scss/hallo.scss            |  7 ++++++-
 assets/scss/hallo/_base.scss      | 10 +++++-----
 assets/scss/hallo/_variables.scss |  6 ------
 layouts/partials/head.html        |  2 +-
 5 files changed, 28 insertions(+), 14 deletions(-)

diff --git a/README.md b/README.md
index 288301d..54b3560 100644
--- a/README.md
+++ b/README.md
@@ -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">
-- 
cgit v1.2.3