aboutsummaryrefslogtreecommitdiffhomepage
diff options
context:
space:
mode:
authorBastien Wirtz <bastien.wirtz@gmail.com>2020-07-15 14:26:01 -0700
committerBastien Wirtz <bastien.wirtz@gmail.com>2020-07-15 14:26:01 -0700
commit154e6efe8036dca91b1bfe9c4fb22ef227df5858 (patch)
tree4e422123d4847e9d425dfbc65c40ba4ec728783c
parentd05b8d3bf0e4951ea863131b5a0067a5cd339cae (diff)
downloadhomer-154e6efe8036dca91b1bfe9c4fb22ef227df5858.tar.gz
homer-154e6efe8036dca91b1bfe9c4fb22ef227df5858.tar.zst
homer-154e6efe8036dca91b1bfe9c4fb22ef227df5858.zip
Adding support for section backgrounf images
-rw-r--r--docs/configuration.md2
-rw-r--r--src/assets/app.scss3
-rw-r--r--src/assets/defaults.yml2
-rw-r--r--src/components/DynamicTheme.vue8
4 files changed, 14 insertions, 1 deletions
diff --git a/docs/configuration.md b/docs/configuration.md
index de99271..1ced2d8 100644
--- a/docs/configuration.md
+++ b/docs/configuration.md
@@ -42,6 +42,7 @@ colors:
42 text-subtitle: "#424242" 42 text-subtitle: "#424242"
43 card-shadow: rgba(0, 0, 0, 0.1) 43 card-shadow: rgba(0, 0, 0, 0.1)
44 link-hover: "#363636" 44 link-hover: "#363636"
45 background-image: "assets/your/light/bg.png"
45 dark: 46 dark:
46 highlight-primary: "#3367d6" 47 highlight-primary: "#3367d6"
47 highlight-secondary: "#4285f4" 48 highlight-secondary: "#4285f4"
@@ -54,6 +55,7 @@ colors:
54 text-subtitle: "#f5f5f5" 55 text-subtitle: "#f5f5f5"
55 card-shadow: rgba(0, 0, 0, 0.4) 56 card-shadow: rgba(0, 0, 0, 0.4)
56 link-hover: "#ffdd57" 57 link-hover: "#ffdd57"
58 background-image: "assets/your/dark/bg.png"
57 59
58# Optional message 60# Optional message
59message: 61message:
diff --git a/src/assets/app.scss b/src/assets/app.scss
index ab067e6..4585874 100644
--- a/src/assets/app.scss
+++ b/src/assets/app.scss
@@ -24,6 +24,9 @@ body {
24 #app { 24 #app {
25 min-height: 100%; 25 min-height: 100%;
26 background-color: var(--background); 26 background-color: var(--background);
27 background-image: var(--background-image);
28 background-size: cover;
29 background-position: center;
27 color: var(--text); 30 color: var(--text);
28 transition: background-color cubic-bezier(0.165, 0.84, 0.44, 1) 300ms; 31 transition: background-color cubic-bezier(0.165, 0.84, 0.44, 1) 300ms;
29 32
diff --git a/src/assets/defaults.yml b/src/assets/defaults.yml
index 99f5ed5..f011346 100644
--- a/src/assets/defaults.yml
+++ b/src/assets/defaults.yml
@@ -24,6 +24,7 @@ colors:
24 text-subtitle: "#424242" 24 text-subtitle: "#424242"
25 card-shadow: rgba(0, 0, 0, 0.1) 25 card-shadow: rgba(0, 0, 0, 0.1)
26 link-hover: "#363636" 26 link-hover: "#363636"
27 background-image: ""
27 dark: 28 dark:
28 highlight-primary: "#3367d6" 29 highlight-primary: "#3367d6"
29 highlight-secondary: "#4285f4" 30 highlight-secondary: "#4285f4"
@@ -36,6 +37,7 @@ colors:
36 text-subtitle: "#f5f5f5" 37 text-subtitle: "#f5f5f5"
37 card-shadow: rgba(0, 0, 0, 0.4) 38 card-shadow: rgba(0, 0, 0, 0.4)
38 link-hover: "#ffdd57" 39 link-hover: "#ffdd57"
40 background-image: ""
39 41
40message: ~ 42message: ~
41links: [] 43links: []
diff --git a/src/components/DynamicTheme.vue b/src/components/DynamicTheme.vue
index cf9963b..2ccb47b 100644
--- a/src/components/DynamicTheme.vue
+++ b/src/components/DynamicTheme.vue
@@ -25,7 +25,13 @@ export default {
25 getVars: function (theme) { 25 getVars: function (theme) {
26 let vars = []; 26 let vars = [];
27 for (const themeVars in theme) { 27 for (const themeVars in theme) {
28 vars.push(`--${themeVars}: ${theme[themeVars]}`); 28 let value = `${theme[themeVars]}`;
29 if (!value) {
30 value = "inital";
31 } else if (themeVars == "background-image") {
32 value = `url(${theme[themeVars]})`;
33 }
34 vars.push(`--${themeVars}: ${value}`);
29 } 35 }
30 return vars.join(";"); 36 return vars.join(";");
31 }, 37 },