media query 4 small displays

kitchenradio/app/radio.js

@@ -36,8 +36,8 @@ exports.init = function(Express, Configuration) {
 	});
 	
 	// set default volume level
-	Helper.shspawn('amixer scontrols');
+	//Helper.shspawn('amixer scontrols');
-	Helper.shspawn('amixer sset \'PCM\' '+volume+'%');
+	//Helper.shspawn('amixer sset \'PCM\' '+volume+'%');
 	
 	return this;
 }
@@ -103,7 +103,7 @@ exports.volume = function(step) {
   Log.log('Radio: volume ' + (step>0 ? 'up' : 'down'));
   
   if(step != 0) {
-    volume = volume + step;
+    volume += step;
     
     if(volume > 100) { volume = 100; }
     if(volume < 0) { volume = 0; }

kitchenradio/public/stylesheets/style.css

@@ -136,11 +136,14 @@ body {
   background-repeat: no-repeat;
   background-position: left top;
 }
+.clearboth {
+  clear: both;
+}
 a {
   color: #00B7FF;
 }
 .hidden {
-  display: none;
+  display: none !important;
 }
 #navigation {
   height: 70%;
@@ -176,6 +179,20 @@ a {
 #navigation .tile:hover {
   background-color: rgba(255, 255, 255, 0.5);
 }
+@media screen and (max-width: 320px) {
+  #navigation {
+    display: block;
+    text-align: center;
+  }
+  #navigation .tile {
+    display: inline-block;
+    width: 32%;
+  }
+  #navigation .tile .content .icon {
+    height: auto;
+    width: 88%;
+  }
+}
 #controls {
   background-color: rgba(255, 255, 255, 0.25);
   height: 30%;

kitchenradio/public/stylesheets/style.less

@@ -68,12 +68,16 @@ body {
   background-position: left top;
 }
 
+.clearboth {
+  clear: both;
+}
+
 a {
   color: #00B7FF;
 }
 
 .hidden {
-  display: none;
+  display: none !important;
 }
 
 #navigation {
@@ -114,6 +118,24 @@ a {
       background-color: @backgroundcolor_element_hover;
     }
   }
+  
+  @media screen and (max-width: 320px) {
+    display: block;
+    text-align: center;
+    
+    .tile {
+      display: inline-block;
+      width: 32%;
+      
+      .content {
+        
+        .icon {
+          height: auto;
+          width: 88%;
+        }
+      }
+    }
+  }
 }
 
 #controls {