Merge pull request #17 from shevu/new_option_in_config

Configurable font size

README.md

@@ -9,6 +9,7 @@ A simple analog clock card for Home Assistant. Colors are based on your current
 | type | string | **Required** | "custom:clock-card"
 | time_zone | string | **Optional** | The timezone you would like to display. If ommited your current device time will be used. Must be a valid [TZ database name](https://en.wikipedia.org/wiki/List_of_tz_database_time_zones)
 | size | number | **Optional** | The size of the clock in px. Default is 300
+| font_size | number | **Optional** | The size of the date string in px. Default is 20
 | disable_seconds | boolean | **Optional** | Disable the seconds hand
 | show_continent | boolean | **Optional** | Display the timezone continent beneath the clock
 | show_city | boolean | **Optional** | Display the timezone city beneath the clock
@@ -56,6 +57,7 @@ All theme options can be set with a CSS valid color option.
 - type: "custom:clock-card"
   time_zone: "America/Chicago" #OPTIONAL
   size: 250 #OPTIONAL
+  font_size: 100 #OPTIONAL
   disable_seconds: true #OPTIONAL
   caption: "Corporate"
   display_date: "MM/DD/YY"

dist/clock-card.js

@@ -51,6 +51,7 @@ class ClockCard extends HTMLElement {
             var config = this.config;
             var theme = config.theme ? config.theme : {};
             var clock_size = config.size ? config.size : 300;
+            var font_size = config.font_size ? config.font_size : 20;
             const card = document.createElement('ha-card');
             this.content = document.createElement('div');
             this.content.style.display = "flex";
@@ -70,9 +71,9 @@ class ClockCard extends HTMLElement {
                     (config.show_city ? formatted_timezone : formatted_timezone.substr(0, formatted_timezone.indexOf("/"))) :
                     (config.show_city ? formatted_timezone.substr(formatted_timezone.indexOf("/") + 1) : "");
             }
-            var timezone_html = caption ? `<p id="time_caption" style="font-size:20px">${caption}</p>` : "";
+            var timezone_html = caption ? `<p id="time_caption" style="font-size:${font_size}px">${caption}</p>` : "";
             var now = config.time_zone ? timezoneTime(config.time_zone) : new Date();
-            timezone_html = config.display_date ? timezone_html + `<p id="display_date" style="font-size:20px">${now.format(config.display_date)}</p>` : timezone_html;
+            timezone_html = config.display_date ? timezone_html + `<p id="display_date" style="font-size:${font_size}px">${now.format(config.display_date)}</p>` : timezone_html;
             this.content.innerHTML = `<canvas width="${clock_size}px" height="${clock_size}px"></canvas>${timezone_html}`;
             card.appendChild(this.content);
             this.appendChild(card);