Improvements

3 files changed, 63 insertions, 4 deletions

diff --git a/docs/configuration.md b/docs/configuration.md
index a43d7f1..6c6a444 100644
--- a/docs/configuration.md
+++ b/docs/configuration.md
@@ -7,7 +7,7 @@ Title, icons, links, colors, and services can be configured in the `config.yml`
 # Homepage configuration
 # See https://fontawesome.com/icons for icons options
 
-# Optional: Use external configuration file. 
+# Optional: Use external configuration file.
 # Using this will ignore remaining config in this file
 # externalConfig: https://example.com/server-luci/config.yaml
 
@@ -118,6 +118,8 @@ services:
         # background: red # optional color for card to set color directly without custom stylesheet
 ```
 
+View the (Custom Services)[customservices.md] file for details about all available custom services (like PiHole).
+
 If you choose to fetch message information from an endpoint, the output format should be:
 
 ```json
diff --git a/docs/customservices.md b/docs/customservices.md
new file mode 100644
index 0000000..42bd87d
--- /dev/null
+++ b/docs/customservices.md
@@ -0,0 +1,35 @@
+# Tips & Tricks
+
+Here is an overview of all custom services that are avaiable within Homer.
+
+## PiHole
+
+Using the PiHole service you can display info about your local PiHole instance right on your Homer dashboard.
+
+The following configuration is available for the PiHole service.
+
+```
+ items:
+      - name: "Pi-hole"
+        logo: "assets/tools/sample.png"
+        # subtitle: "Network-wide Ad Blocking" # optional, if no subtitle is defined, PiHole statistics will be shown
+        url: "http://192.168.0.151/admin"
+        type: "PiHole"
+```
+
+## OpenWeatherMap
+
+Using the OpenWeatherMap service you can display weather information about a given location.
+
+The following configuration is available for the OpenWeatherMap service
+
+```
+items:
+       - name: "Weather"
+         url: "https://api.openweathermap.org/data/2.5/weather"
+         location: "Amsterdam" # your location.
+         apiKey: "<---insert-api-key-here--->" # insert your own API key here. Request one from https://openweathermap.org/api.
+         units: "metric" # units to display temperature. Can be one of: metric, imperial, kelvin. Defaults to kelvin.
+         background: "square" choose which type of background you want behind the image. Can be one of: square, cicle, none. Defaults to none.
+         type: "OpenWeather"
+```
diff --git a/src/components/services/OpenWeather.vue b/src/components/services/OpenWeather.vue
index a9310ee..b1e5c57 100644
--- a/src/components/services/OpenWeather.vue
+++ b/src/components/services/OpenWeather.vue
@@ -4,7 +4,7 @@
       <a :href="item.url" :target="item.target" rel="noreferrer">
         <div class="card-content">
           <div class="media">
-            <div v-if="image" class="media-left">
+            <div v-if="image" class="media-left" :class="item.background">
               <figure class="image is-48x48">
                 <img
                   :src="`http://openweathermap.org/img/wn/` + image + `@2x.png`"
@@ -99,7 +99,29 @@ export default {
 </script>
 
 <style scoped lang="scss">
-.media-left img {
-  max-height: 100%;
+.media-left {
+  &.circle,
+  &.square {
+    background-color: #e4e4e4;
+  }
+
+  &.circle {
+    border-radius: 90%;
+  }
+
+  img {
+    max-height: 100%;
+  }
+}
+
+// Add a circular border around the weather image when in dark mode.
+// Otherwise the image is not distinguishable.
+.is-dark {
+  .media-left {
+    &.circle,
+    &.square {
+      background-color: #909090;
+    }
+  }
 }
 </style>