Roughly invert media queries

gratipay · Jan 6, 2015 · b8dceff · b8dceff
1 parent 93d5a0d
commit b8dceff
Show file tree

Hide file tree

Showing 5 changed files with 70 additions and 87 deletions.
diff --git a/scss/gratipay.scss b/scss/gratipay.scss
@@ -2,8 +2,6 @@
     This is the top of the Gratipay CSS tree.
 */
 
-@import "reset";
-
 @import "mixins/layout";
 @import "mixins/icons";
 @import "mixins/borders-backgrounds-shadows";
@@ -14,6 +12,7 @@
 // =============
 // http://bradfrost.com/blog/post/atomic-web-design/
 
+@import "atoms/reset";
 @import "atoms/variables";
 @import "atoms/buttons-knobs";
 @import "atoms/elements";

diff --git a/scss/molecules/leaderboard.scss b/scss/molecules/leaderboard.scss
@@ -1,38 +1,40 @@
 #leaderboard {
     @include clearfix;
     width: leaderboard-width(3);
-}
+    .people {
+        width: $people-column-width * 3;
+        margin-left: $people-column-gutter;
+        float: left;
 
-.people {
-    width: $people-column-width * 3;
-    margin-left: $people-column-gutter;
-    float: left;
+        li:nth-child(4n) {
+            display: none;
+        }
+        &:first-child {
+            margin: 0;
+        }
 
-    &:first-child {
-        margin: 0;
-    }
+        ul {
+            // hide whitespace between items
+            font-size: 0;
+            line-height: 0;
+            li {
+                display: inline-block;
+                margin: 0;
+                padding: 2px;
+                vertical-align: top;
+                width: $people-column-width;
+            }
+        }
 
-    ul {
-        // hide whitespace between items
-        font-size: 0;
-        line-height: 0;
-        li {
-            display: inline-block;
-            margin: 0;
-            padding: 2px;
-            vertical-align: top;
-            width: $people-column-width;
+        h2 {
+            font-size: 13px;
         }
     }
-
-    h2 {
-        font-size: 13px;
+    .more-container {
+        @include clearfix;
+        text-align: center;
+        padding-top: 20px;
+        width: $people-column-width * 3 * 3;
+        margin-left: $people-column-gutter;
     }
 }
-.more-container {
-    @include clearfix;
-    text-align: center;
-    padding-top: 20px;
-    width: $people-column-width * 3 * 3;
-    margin-left: $people-column-gutter;
-}
diff --git a/scss/pages/homepage.scss b/scss/pages/homepage.scss
@@ -111,4 +111,28 @@
         line-height: 40px;
         margin-top: -40px;
     }
+
+    // smushed in from old responsiveness.scss
+    #sidebar, #content {
+        padding: 32px 32px 60px;
+        h1 {
+            font-size: 24px;
+            line-height: 36px;
+        }
+        p, .jump {
+            font-size: 16px;
+            line-height: 24px;
+        }
+    }
+    #sidebar {
+        text-align: center;
+        img { width: 256px; position: static; }
+        h1 { margin-top: 32px; }
+        h1, p { text-align: left; }
+    }
+    #content {
+        div.twitter {
+            text-align: center;
+        }
+    }
 }
diff --git a/scss/templates/layout.scss b/scss/templates/layout.scss
@@ -5,6 +5,7 @@ body {
     background-size: 100% auto;
     background-position: 0 -54px;
     line-height: 100%;
+    font-size: 14px;
 }
 
 #header {
@@ -263,3 +264,4 @@ body {
         }
     }
 }
+
diff --git a/scss/templates/responsiveness.scss b/scss/templates/responsiveness.scss
@@ -1,17 +1,4 @@
-// Large screens
 @media (min-width: 940px) {
-    .two-column > * {
-        float: left;
-        width: 50%;
-        padding: 0 20px 0 0;
-        &:nth-child(even) {
-            padding-right: 0;
-        }
-    }
-}
-
-// Small screens/tablets
-@media (max-width: 1150px) {
     // 2 column sections
     #leaderboard {
         width: leaderboard-width(2);
@@ -23,9 +10,17 @@
     .more-container {
         width: $people-column-width * 2 * 3;
     }
+    .two-column > * {
+        float: left;
+        width: 50%;
+        padding: 0 20px 0 0;
+        &:nth-child(even) {
+            padding-right: 0;
+        }
+    }
 }
 
-@media (max-width: 940px) {
+@media (min-width: 880px) {
     .support-gratipay {
         line-height: 125%;
     }
@@ -50,8 +45,7 @@
     }
 }
 
-// Smaller tablets in portrait/landscape phones
-@media (max-width: 880px) {
+@media (min-width: 700px) {
     #leaderboard {
         width: 100%;
 
@@ -80,7 +74,7 @@
     }
 }
 
-@media (max-width: 700px) {
+@media (min-width: 480px) {
     .luxury {
         display: none !important;
     }
@@ -161,47 +155,9 @@
             }
         }
     }
-}
-
-// Portrait phones
-@media (max-width: 479px) {
-    body {
-        font-size: 14px;
-    }
-
-    #homepage {
-        #sidebar, #content {
-            padding: 32px 32px 60px;
-            h1 {
-                font-size: 24px;
-                line-height: 36px;
-            }
-            p, .jump {
-                font-size: 16px;
-                line-height: 24px;
-            }
-        }
-        #sidebar {
-            text-align: center;
-            img { width: 256px; position: static; }
-            h1 { margin-top: 32px; }
-            h1, p { text-align: left; }
-        }
-        #content {
-            div.twitter {
-                text-align: center;
-            }
-        }
-    }
-
-
     #leaderboard {
-        .people {
-            width: $people-column-width * 3;
-
-            li:nth-child(4n) {
-                display: none;
-            }
+        li:nth-child(4n) {
+            display: block;
         }
     }
 }