Refactored responsive stuff.

app/less/app.less

@@ -1,5 +1,6 @@
 @import 'colors';
 @import 'fonts';
+@import 'responsive';
 @import 'utilities';
 @import 'icons';
 @import 'background-images';

app/less/header.less

@@ -47,26 +47,21 @@ header {
     color: @warning;
     // Less than 600px screen width: hide text
 
-
     &.disabled {
       color: @warning-disabled;
       cursor: default;
     }
 
     &.selected {
-        background-color: @bgBlack;
+      background-color: @bgBlack;
     }
 
     .menu-item-label {
-        @media screen and (min-width: 541px) {
-            margin-left: 1em;
-        }
-        @media screen and (max-width: 540px) {
-            margin-left: 0.5em;
-        }
-        @media screen and (max-width: 520px) {
-            display: none;
-        }
+      margin-left: 1em;
+
+      .medPhone({
+        display: none;
+      });
     }
   }
 

app/less/outfit.less

@@ -7,17 +7,16 @@
 
   .tablet({
     width: 100%;
-    //min-width: 750px;
-    //font-size: 0.8em;
   });
 
   &>.list {
-    @media screen and (max-width: 1000px) {
+    .tablet({
       width: 49%;
-    }
-    @media screen and (max-width: 600px) {
+    });
+
+    .largePhone({
       width: 100%;
-    }
+    });
   }
 }
 
@@ -64,10 +63,10 @@
       color: @primary;
     }
   }
-  @media screen and (max-width: 340px) {
-    button {
+  button {
+    .smallPhone({
       padding: 0.25em;
-    }
+    });
   }
 }
 
@@ -86,21 +85,21 @@
 }
 
 .outfit-button-label {
-    margin-left: 0.5em;
+  margin-left: 0.5em;
 
-    @media screen and (max-width: 640px) {
-        display: none;
-    }
+  .largePhone({
+    display: none;
+  });
 }
 
 #jumpRange {
-    width: 50%;
-    padding: 0 0.5em;
+  width: 50%;
+  padding: 0 0.5em;
 
-    @media screen and (max-width: 1000px) {
-        float: right;
-        clear: both;
-        display: block;
-        width: 100% !important;
-    }
+  .tablet({
+    float: right;
+    clear: both;
+    display: block;
+    width: 100% !important;
+  });
 }

app/less/responsive.less

@@ -0,0 +1,28 @@
+// Screens less than 1024 wide
+// More will be added over time to support mobile devices better
+// These are designed to trickle down. So tablet styles will apply to tablet and smaller, etc
+// To overwrite, put the smallest devices at the bottom
+
+.smallPhone(@rules) {
+  @media only screen and (max-width: 350px) {
+    @rules();
+  }
+}
+
+.medPhone(@rules) {
+  @media only screen and /*(min-width: 351px) and */ (max-width: 550px) {
+    @rules();
+  }
+}
+
+.largePhone(@rules) {
+  @media only screen and /*(min-width: 551px) and */ (max-width: 640px) {
+    @rules();
+  }
+}
+
+.tablet(@rules) {
+  @media only screen and /*(min-width: 601px) and */(max-width: 1024px) {
+    @rules();
+  }
+}

app/less/shipyard.less

@@ -16,9 +16,9 @@ a.ship {
   text-align: right;
   .user-select-none();
 
-  @media screen and (max-width: 350px) {
+  .smallPhone({
     width: 16em;
-  }
+  });
 
   h2 {
     width: 100%;

app/less/slot.less

@@ -17,17 +17,17 @@
     font-weight: normal;
   }
 
-  @media screen and (max-width: 1000px) {
+  .tablet({
     width: 50%;
     
     h1 {
         margin: 1em 0 0 0;
     }
-  }
+  });
 
-  @media screen and (max-width: 610px) {
+  .largePhone({
     width: 100%;
-  }
+  });
 }
 
 .slot {

app/less/utilities.less

@@ -29,11 +29,3 @@
   -ms-user-select: none;
   user-select: none;
 }
-
-// Screens less than 1024 wide
-// More will be added over time to support mobile devices better
-.tablet(@rules) {
-  @media only screen and (min-width: 300px) and (max-width: 1024px) {
-    @rules();
-  }
-}