widgets of type text look better now

css/dashboard.css

@@ -128,3 +128,8 @@ body {
   -webkit-transition: opacity 1s; /* For Safari 3.1 to 6.0 */
   transition: opacity 1s;
 }
+
+.flexFont {
+  height:100%;
+  width:100%;
+}

js/dashboard.js

@@ -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();
     })
   }
 
@@ -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()