widgets of type text look better now

css/dashboard.css

@@ -127,4 +127,9 @@ body {
 .opacity-animated {
   -webkit-transition: opacity 1s; /* For Safari 3.1 to 6.0 */
   transition: opacity 1s;
+}
+
+.flexFont {
+  height:100%;
+  width:100%;
 }

js/dashboard.js

@@ -41,8 +41,8 @@ class BlueWeatherDashboard {
 
     var page = this.params.page
 
-    if(this.initDone){
-    document.getElementById("navbarPage" + page + "Link").classList.add("active")
+    if (this.initDone) {
+      document.getElementById("navbarPage" + page + "Link").classList.add("active")
     }
 
     this.blueweather.getLocationData(this.params.loc, { from: this.params.range.from, to: this.params.range.to }, this.params.maxVals, true, function (locationData) {
@@ -185,8 +185,7 @@ class BlueWeatherDashboard {
             case "text":
               // the widget is pure text
               thisWidget.classList.add("text-center")
-              thisBody.innerHTML = '<h1 class="align-self-center mx-auto" style="font-size:10vw;margin-top: auto;margin-bottom: auto;">' + latestVal.measvalue + valueType.valueunit + '</h1>'
-
+              thisBody.innerHTML = '<div class="flexFont"><h1 style="font-size: 100%;">' + latestVal.measvalue + valueType.valueunit + '</h1></div>'
 
               //thisBody.innerHTML = '<svg viewBox="0 0 56 18"><text x="0" y="15">Fit Meeeeeeeeeeee</text></svg>'
               break
@@ -209,7 +208,7 @@ class BlueWeatherDashboard {
       loader.style = "position: absolute; left: 50%; opacity: 0;"
       mainContent.classList.add("opacity-animated");
       mainContent.style = "opacity: 1;"
-
+      flexFont();
     })
   }
 
@@ -242,28 +241,28 @@ class BlueWeatherDashboard {
       }
     }
     else {
-      if(from !== ""){
-      from = parseInt(from)
+      if (from !== "") {
+        from = parseInt(from)
       }
-      if(to !== ""){
-      to = parseInt(to)
+      if (to !== "") {
+        to = parseInt(to)
       }
     }
 
     var tmpFrom = from
     var tmpTo = to
 
-    if(tmpFrom === "") {
-      tmpFrom = Math.round( new Date().getTime() / 1000 - 60 * 60 * 24 )
+    if (tmpFrom === "") {
+      tmpFrom = Math.round(new Date().getTime() / 1000 - 60 * 60 * 24)
     }
 
-    if(tmpTo === "") {
+    if (tmpTo === "") {
       tmpTo = Math.round(new Date().getTime() / 1000)
     }
 
-    var dateFromString = this.getDateTimeString(tmpFrom, tmpTo-tmpFrom)
-    var dateToString = this.getDateTimeString(tmpTo, tmpTo-tmpFrom)
-    
+    var dateFromString = this.getDateTimeString(tmpFrom, tmpTo - tmpFrom)
+    var dateToString = this.getDateTimeString(tmpTo, tmpTo - tmpFrom)
+
     dropdownMenuButton.innerHTML = "<span data-feather=\"calendar\"></span> " + dateFromString + " - " + dateToString
     feather.replace()
 
@@ -511,7 +510,7 @@ class BlueWeatherDashboard {
 
   getDateTimeString(unixTime, range = 0) {
 
-    if(Math.abs(unixTime - new Date().getTime() / 1000) <= 60 ) {
+    if (Math.abs(unixTime - new Date().getTime() / 1000) <= 60) {
       return "now"
     }
 
@@ -520,8 +519,8 @@ class BlueWeatherDashboard {
     if (range <= 60 * 60 * 24 * 31) {
       // covers one month or less
 
-      datestr = 
-      ("0" + d.getDate()).slice(-2) + "-" +
+      datestr =
+        ("0" + d.getDate()).slice(-2) + "-" +
         ("0" + (d.getMonth() + 1)).slice(-2) + " " +
         ("0" + d.getHours()).slice(-2) + ":" +
         ("0" + d.getMinutes()).slice(-2)
@@ -584,6 +583,21 @@ class BlueWeatherDashboard {
     }
   }
 }
-
+flexFont = function () {
+  console.log("flexing fonts")
+  var divs = document.getElementsByClassName("flexFont");
+  for (var i = 0; i < divs.length; i++) {
+    var relFontsize = divs[i].offsetWidth * 0.2;
+    console.log(relFontsize)
+    divs[i].style.fontSize = relFontsize + 'px';
+  }
+};
+flexFont();
+window.onload = function (event) {
+  flexFont();
+};
+window.onresize = function (event) {
+  flexFont();
+};
 feather.replace()
 dashboard = new BlueWeatherDashboard()