From 3e95b498393e3e15d0a5fad1215576e626072212 Mon Sep 17 00:00:00 2001
From: Kagerou <dragonflysoft.kagerou@gmail.com>
Date: Tue, 20 May 2014 21:14:35 +0900
Subject: [PATCH] Update skeleton.css to reflect newer screen sizes

added additional mobile portrait and landscape @media selectors for common smartphone sizes (device width: 360px)
---
 stylesheets/skeleton.css | 90 ++++++++++++++++++++++++++++++++++++----
 1 file changed, 82 insertions(+), 8 deletions(-)

diff --git a/stylesheets/skeleton.css b/stylesheets/skeleton.css
index 5db3d38..b749321 100644
--- a/stylesheets/skeleton.css
+++ b/stylesheets/skeleton.css
@@ -129,7 +129,7 @@
 
     /* Note: Design for a width of 320px */
 
-    @media only screen and (max-width: 767px) {
+    @media only screen and (max-width: 320px) {
         .container { width: 300px; }
         .container .columns,
         .container .column { margin: 0; }
@@ -174,13 +174,10 @@
     }
 
 
-/* #Mobile (Landscape)
-================================================== */
+/* Note: Design for a width of 360px */
 
-    /* Note: Design for a width of 480px */
-
-    @media only screen and (min-width: 480px) and (max-width: 767px) {
-        .container { width: 420px; }
+    @media only screen and (min-width: 321px) and (max-width: 479px) {
+        .container { width: 340px; }
         .container .columns,
         .container .column { margin: 0; }
 
@@ -202,9 +199,86 @@
         .container .fifteen.columns,
         .container .sixteen.columns,
         .container .one-third.column,
-        .container .two-thirds.column { width: 420px; }
+        .container .two-thirds.column  { width: 340px; }
+
+        /* Offsets */
+        .container .offset-by-one,
+        .container .offset-by-two,
+        .container .offset-by-three,
+        .container .offset-by-four,
+        .container .offset-by-five,
+        .container .offset-by-six,
+        .container .offset-by-seven,
+        .container .offset-by-eight,
+        .container .offset-by-nine,
+        .container .offset-by-ten,
+        .container .offset-by-eleven,
+        .container .offset-by-twelve,
+        .container .offset-by-thirteen,
+        .container .offset-by-fourteen,
+        .container .offset-by-fifteen { padding-left: 0; }
+
     }
 
+/* #Mobile (Landscape)
+================================================== */
+
+    /* Note: Design for a width of 480px */
+
+    @media only screen and (min-width: 480px) and (max-width: 639px) {
+        .container { width: 460px; }
+        .container .columns,
+        .container .column { margin: 0; }
+
+        .container .one.column,
+        .container .one.columns,
+        .container .two.columns,
+        .container .three.columns,
+        .container .four.columns,
+        .container .five.columns,
+        .container .six.columns,
+        .container .seven.columns,
+        .container .eight.columns,
+        .container .nine.columns,
+        .container .ten.columns,
+        .container .eleven.columns,
+        .container .twelve.columns,
+        .container .thirteen.columns,
+        .container .fourteen.columns,
+        .container .fifteen.columns,
+        .container .sixteen.columns,
+        .container .one-third.column,
+        .container .two-thirds.column { width: 460px; }
+    }
+
+
+/* Note: Design for a width of 640px */
+
+    @media only screen and (min-width: 640px) and (max-width: 767px) {
+        .container { width: 620px; }
+        .container .columns,
+        .container .column { margin: 0; }
+
+        .container .one.column,
+        .container .one.columns,
+        .container .two.columns,
+        .container .three.columns,
+        .container .four.columns,
+        .container .five.columns,
+        .container .six.columns,
+        .container .seven.columns,
+        .container .eight.columns,
+        .container .nine.columns,
+        .container .ten.columns,
+        .container .eleven.columns,
+        .container .twelve.columns,
+        .container .thirteen.columns,
+        .container .fourteen.columns,
+        .container .fifteen.columns,
+        .container .sixteen.columns,
+        .container .one-third.column,
+        .container .two-thirds.column { width: 620px; }
+    }
 
 /* #Clearing
 ================================================== */