Improve font size, refactor less

app/less/charts.less

@@ -23,7 +23,7 @@
       }
 
       text {
-        font-size: 0.75em;
+        font-size: 0.8em;
         fill: @primary-disabled;
       }
 

app/less/comparison.less

@@ -3,7 +3,6 @@
   display: inline-block;
   text-align: left;
   border-collapse: collapse;
-  //font-size:0.85em;
 
   td {
     border: 1px solid @primary-disabled;
@@ -37,10 +36,13 @@
   .user-select-none();
   cursor: default;
   overflow: hidden;
-  font-size: 0.75em;
   margin: 0;
   padding: 0;
 
+  .tablet({
+    font-size: 0.8em;
+  });
+
   .as-sortable-placeholder {
     background-color: @primary-bg;
   }
@@ -113,5 +115,7 @@
 
 #comp-tbl {
   margin: 1em auto;
-  font-size: 0.85em;
+  .tablet({
+    font-size: 0.85em;
+  });
 }

app/less/outfit.less

@@ -3,11 +3,11 @@
   font-size: 1.1em;
 
   // iPads  Landscape
-  @media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
+  .tablet({
     & {
       font-size: 0.95em;
     }
-  }
+  });
 
   width: 64em;
   margin: 0 auto;

app/less/utilities.less

@@ -21,7 +21,7 @@
   background-clip:         padding-box;
 }
 
-.user-select-none (){
+.user-select-none () {
   -webkit-touch-callout: none;
   -webkit-user-select: none;
   -khtml-user-select: none;
@@ -29,3 +29,10 @@
   -ms-user-select: none;
   user-select: none;
 }
+
+// 1024 x 768 typical tablet resolution
+.tablet(@rules) {
+  @media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
+    @rules();
+  }
+}