export const mediaQueries = [
  {
    name: 'palm',
    size: window.matchMedia('(max-width: 600px)')
  },
  {
    name: 'lap',
    size: window.matchMedia('(min-width: 601px) and (max-width: 959px)')
  },
  {
    name: 'desk',
    size: window.matchMedia('(min-width: 960px)')
  }
]

export function setupMqs(fn) {
  function mediaqueryresponse(i, action) {
    if (mediaQueries[i].size.matches) {
      action(mediaQueries[i].name)
    }
  }

  for (var i = 0; i < mediaQueries.length; i++) {
    mediaqueryresponse(i, fn)
    // need to debounce listener
    mediaQueries[i].size.addListener(mediaqueryresponse.bind(null, i, fn))
  }
}

@@ -25,31 +25,19 @@
 s = 
-%5B%0A  %7B%0A    name: '
+%7B%0A  
 palm
-',
+: %7B
 %0A   
@@ -86,34 +86,43 @@
 x)')
-%0A  %7D,%0A  %7B%0A    name: 'lap',
+,%0A    fontSize: '3vh'%0A  %7D,%0A  lap: %7B
 %0A   
@@ -194,35 +194,46 @@
 x)')
-%0A  %7D,%0A  %7B%0A    name: '
+,%0A    fontSize: '4.5vh'%0A  %7D,%0A  
 desk
-',
+: %7B
 %0A   
@@ -282,14 +282,38 @@
 x)')
+,%0A    fontSize: '4.25vh'
 %0A  %7D%0A
-%5D
+%7D
 %0A%0Aex
@@ -371,17 +371,19 @@
 esponse(
-i
+key
 , action
@@ -403,25 +403,27 @@
 ediaQueries%5B
-i
+key
 %5D.size.match
@@ -445,87 +445,72 @@
 ion(
-mediaQueries%5Bi%5D.name)%0A    %7D%0A  %7D%0A%0A  for (var i = 0; i %3C mediaQueries.length; i++
+key)%0A    %7D%0A  %7D%0A%0A  Object.keys(mediaQueries).forEach(function(key
 ) %7B%0A
@@ -532,17 +532,19 @@
 esponse(
-i
+key
 , fn)%0A  
@@ -545,16 +545,18 @@
 fn)%0A    
+  
 // need 
@@ -593,17 +593,19 @@
 Queries%5B
-i
+key
 %5D.size.a
@@ -645,17 +645,19 @@
 d(null, 
-i
+key
 , fn))%0A 
@@ -654,15 +654,17 @@
 ey, fn))%0A  %7D
+);
 %0A%7D%0A

amend media query data structure