12 files changed, 49 insertions, 29 deletions

diff --git a/docs/configuration.md b/docs/configuration.md
index edcf1ed..4bd4677 100644
--- a/docs/configuration.md
+++ b/docs/configuration.md
@@ -13,7 +13,8 @@ Title, icons, links, colors, and services can be configured in the `config.yml`
 
 title: "App dashboard"
 subtitle: "Homer"
-logo: "assets/homer.png"
+# documentTitle: "Welcome" # Customize the browser tab text
+logo: "assets/logo.png"
 # Alternatively a fa icon can be provided:
 # icon: "fas fa-skull-crossbones"
 
@@ -67,6 +68,7 @@ message:
   # url: "https://<my-api-endpoint>" # Can fetch information from an endpoint to override value below.
   style: "is-warning"
   title: "Optional message!"
+  icon: "fa fa-exclamation-triangle"
   content: "Lorem ipsum dolor sit amet, consectetur adipiscing elit."
 
 # Optional navbar
@@ -85,7 +87,7 @@ links:
 # Leave only a "items" key if not using group (group name, icon & tagstyle are optional, section separation will not be displayed).
 services:
   - name: "Application"
-    icon: "fa fa-code-fork"
+    icon: "fas fa-code-branch"
     items:
       - name: "Awesome app"
         logo: "assets/tools/sample.png"
@@ -110,7 +112,8 @@ services:
         subtitle: "Another example"
         tag: "other"
         url: "https://www.reddit.com/r/selfhosted/"
-        target: "_blank" # optionnal html a tag target attribute
+        target: "_blank" # optional html a tag target attribute
+        # class: "green" # optional custom CSS class for card, useful with custom stylesheet
 ```
 
 If you choose to fetch message information from an endpoint, the output format should be:
diff --git a/docs/developement.md b/docs/development.md
index 6ea1cba..6ea1cba 100644
--- a/docs/developement.md
+++ b/docs/development.md
diff --git a/package.json b/package.json
index ac96f68..87fdf5b 100644
--- a/package.json
+++ b/package.json
@@ -8,7 +8,7 @@
     "lint": "vue-cli-service lint"
   },
   "dependencies": {
-    "@fortawesome/fontawesome-free": "^5.13.1",
+    "@fortawesome/fontawesome-free": "^5.15.1",
     "bulma": "^0.9.0",
     "core-js": "^3.6.4",
     "js-yaml": "^3.14.0",
diff --git a/public/assets/config.yml.dist b/public/assets/config.yml.dist
index 6be66e1..85478ec 100644
--- a/public/assets/config.yml.dist
+++ b/public/assets/config.yml.dist
@@ -10,7 +10,7 @@ logo: "logo.png"
 header: true
 footer: '<p>Created with <span class="has-text-danger">❤️</span> with <a href="https://bulma.io/">bulma</a>, <a href="https://vuejs.org/">vuejs</a> & <a href="https://fontawesome.com/">font awesome</a> // Fork me on <a href="https://github.com/bastienwirtz/homer"><i class="fab fa-github-alt"></i></a></p>' # set false if you want to hide it.
 
-# Optionnal theme customization
+# Optional theme customization
 theme: default
 colors:
   light:
@@ -42,7 +42,8 @@ colors:
 message:
   #url: https://b4bz.io
   style: "is-dark" # See https://bulma.io/documentation/components/message/#colors for styling options.
-  title: "👋 Demo !"
+  title: "Demo !"
+  icon: "fa fa-grin"
   content: "This is a dummy homepage demo. <br /> Find more information on <a href='https://github.com/bastienwirtz/homer'>github.com/bastienwirtz/homer</a>"
 
 # Optional navbar
@@ -51,7 +52,7 @@ links:
   - name: "Contribute"
     icon: "fab fa-github"
     url: "https://github.com/bastienwirtz/homer"
-    target: "_blank" # optionnal html a tag target attribute
+    target: "_blank" # optional html a tag target attribute
   - name: "Wiki"
     icon: "fas fa-book"
     url: "https://www.wikipedia.org/"
@@ -68,7 +69,7 @@ services:
         subtitle: "Bookmark example"
         tag: "app"
         url: "https://www.reddit.com/r/selfhosted/"
-        target: "_blank" # optionnal html a tag target attribute
+        target: "_blank" # optional html a tag target attribute
       - name: "Another one"
         logo: "assets/tools/sample2.png"
         subtitle: "Another application"
diff --git a/public/assets/config.yml.dist.sample-sui b/public/assets/config.yml.dist.sample-sui
index 71eaef0..ff7f80a 100644
--- a/public/assets/config.yml.dist.sample-sui
+++ b/public/assets/config.yml.dist.sample-sui
@@ -9,7 +9,7 @@ logo: false
 
 header: true
 
-# Optionnal theme customization
+# Optional theme customization
 theme: sui
 colors:
   light:
diff --git a/public/assets/custom.css.sample b/public/assets/custom.css.sample
new file mode 100644
index 0000000..00658d7
--- /dev/null
+++ b/public/assets/custom.css.sample
@@ -0,0 +1,8 @@
+@charset "UTF-8";
+
+/* Custom card colors */
+/* Use with `class:` property of services in config.yml */
+body #app .card.green {
+  background-color: #006600;
+  color: #00ff00;
+}
diff --git a/src/App.vue b/src/App.vue
index eb132d0..c47b5a9 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -159,7 +159,9 @@ export default {
     }
     this.config = merge(defaults, config);
     this.services = this.config.services;
-    document.title = `${this.config.title} | ${this.config.subtitle}`;
+    document.title =
+      this.config.documentTitle ||
+      `${this.config.title} | ${this.config.subtitle}`;
     if (this.config.stylesheet) {
       let stylesheet = "";
       for (const file of this.config.stylesheet) {
diff --git a/src/assets/app.scss b/src/assets/app.scss
index 4585874..59afd00 100644
--- a/src/assets/app.scss
+++ b/src/assets/app.scss
@@ -13,17 +13,17 @@
   text-overflow: ellipsis;
 }
 
-html {
+html, body, body #app {
   height: 100%;
+  background-color: var(--background);
 }
 
 body {
   font-family: "Raleway", sans-serif;
-  height: 100%;
 
   #app {
+    height: auto;
     min-height: 100%;
-    background-color: var(--background);
     background-image: var(--background-image);
     background-size: cover;
     background-position: center;
@@ -170,6 +170,7 @@ body {
 
     .title {
       font-size: 1.1em;
+      line-height: 1.2em;
       @include ellipsis();
     }
 
diff --git a/src/components/DynamicTheme.vue b/src/components/DynamicTheme.vue
index 2ccb47b..fc2fd55 100644
--- a/src/components/DynamicTheme.vue
+++ b/src/components/DynamicTheme.vue
@@ -1,17 +1,15 @@
 <template>
   <DynamicStyle>
-    /* light / dark theme switch based on system pref if available */ body #app
-    {
+    :root, body #app.is-light {
     {{ getVars(themes.light) }}
     } @media (prefers-color-scheme: light), (prefers-color-scheme:
-    no-preference) { body #app {
+    no-preference) { :root, body #app {
     {{ getVars(themes.light) }}
-    } } @media (prefers-color-scheme: dark) { body #app { } } /* light / dark
-    theme override base on user choice. */ body #app.is-dark {
+    } } body #app.is-dark {
     {{ getVars(themes.dark) }}
-    } body #app.is-light {
-    {{ getVars(themes.light) }}
-    }
+    } @media (prefers-color-scheme: dark) { :root, body #app {
+    {{ getVars(themes.dark) }}
+    } }
   </DynamicStyle>
 </template>
 
diff --git a/src/components/Message.vue b/src/components/Message.vue
index d007d3e..5a1e0ea 100644
--- a/src/components/Message.vue
+++ b/src/components/Message.vue
@@ -1,7 +1,10 @@
 <template>
   <article v-if="show" class="message" :class="message.style">
-    <div v-if="message.title" class="message-header">
-      <p>{{ message.title }}</p>
+    <div v-if="message.title || message.icon" class="message-header">
+      <p>
+        <i v-if="message.icon" :class="`fa-fw ${message.icon}`"></i>
+        {{ message.title }}
+      </p>
     </div>
     <div
       v-if="message.content"
diff --git a/src/components/Service.vue b/src/components/Service.vue
index 88e6e69..81ad8a2 100644
--- a/src/components/Service.vue
+++ b/src/components/Service.vue
@@ -1,6 +1,6 @@
 <template>
   <div>
-    <div class="card">
+    <div class="card" :class="item.class">
       <a :href="item.url" :target="item.target" rel="noreferrer">
         <div class="card-content">
           <div class="media">
@@ -37,4 +37,8 @@ export default {
 };
 </script>
 
-<style scoped lang="scss"></style>
+<style scoped lang="scss">
+.media-left img {
+  max-height: 100%;
+}
+</style>
diff --git a/yarn.lock b/yarn.lock
index 57c90de..463904c 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -822,10 +822,10 @@
     lodash "^4.17.13"
     to-fast-properties "^2.0.0"
 
-"@fortawesome/fontawesome-free@^5.13.1":
-  version "5.13.1"
-  resolved "https://registry.yarnpkg.com/@fortawesome/fontawesome-free/-/fontawesome-free-5.13.1.tgz#c53b4066edae16cd1fd669f687baf031b45fb9d6"
-  integrity sha512-D819f34FLHeBN/4xvw0HR0u7U2G7RqjPSggXqf7LktsxWQ48VAfGwvMrhcVuaZV2fF069c/619RdgCCms0DHhw==
+"@fortawesome/fontawesome-free@^5.15.1":
+  version "5.15.1"
+  resolved "https://registry.yarnpkg.com/@fortawesome/fontawesome-free/-/fontawesome-free-5.15.1.tgz#ccfef6ddbe59f8fe8f694783e1d3eb88902dc5eb"
+  integrity sha512-OEdH7SyC1suTdhBGW91/zBfR6qaIhThbcN8PUXtXilY4GYnSBbVqOntdHbC1vXwsDnX0Qix2m2+DSU1J51ybOQ==
 
 "@hapi/address@2.x.x":
   version "2.1.4"