Shelve work on mobile-first design

gratipay · Jan 6, 2015 · a3ee570 · a3ee570
1 parent c9aa629
commit a3ee570
Show file tree

Hide file tree

Showing 4 changed files with 100 additions and 79 deletions.
diff --git a/scss/atoms/elements.scss b/scss/atoms/elements.scss
@@ -5,7 +5,6 @@
 body {
     color: $black;
     font: normal 16px/21px $Ideal;
-    min-width: 320px;
     text-rendering: optimizeLegibility;
 }
 * {

diff --git a/scss/gratipay.scss b/scss/gratipay.scss
@@ -42,8 +42,7 @@
 @import "organisms/mini-user";
 @import "organisms/notifications";
 
-@import "templates/layout";
-@import "templates/responsiveness";
+@import "templates/small";
 
 @import "pages/homepage";
 @import "pages/history";

diff --git a/scss/templates/responsiveness.scss b/scss/templates/responsiveness.scss
@@ -1,79 +1,3 @@
-@media (min-width: 940px) {
-    // 2 column sections
-    #leaderboard {
-        width: leaderboard-width(2);
-
-        .people {
-            width: $people-column-width * 2;
-        }
-    }
-    .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 (min-width: 880px) {
-    .support-gratipay {
-        line-height: 125%;
-    }
-
-    .accounts {
-        width: 100%;
-    }
-
-    #homepage {
-        #sidebar img {
-            left: 32px;
-            top: 32px;
-            width: 284px;
-        }
-        #sidebar, #content {
-            padding: 150px 32px 60px;
-            width: auto;
-            .jump {
-                padding-top: 0;
-            }
-        }
-    }
-}
-
-@media (min-width: 700px) {
-    #leaderboard {
-        width: 100%;
-
-        .people {
-            float: none;
-            width: $people-column-width * 4;
-            margin: 0;
-
-            li {
-                &.luxury { display: none; }
-            }
-        }
-    }
-    .more-container {
-        width: $people-column-width * 4;
-        margin-left: 0;
-    }
-
-    #footer {
-        text-align: center;
-
-        li a {
-            margin: 0.25em;
-            padding: 0.75em;
-        }
-    }
-}
-
 @media (min-width: 480px) {
     .luxury {
         display: none !important;
@@ -161,3 +85,80 @@
         }
     }
 }
+
+@media (min-width: 700px) {
+    #leaderboard {
+        width: 100%;
+
+        .people {
+            float: none;
+            width: $people-column-width * 4;
+            margin: 0;
+
+            li {
+                &.luxury { display: none; }
+            }
+        }
+    }
+    .more-container {
+        width: $people-column-width * 4;
+        margin-left: 0;
+    }
+
+    #footer {
+        text-align: center;
+
+        li a {
+            margin: 0.25em;
+            padding: 0.75em;
+        }
+    }
+}
+
+@media (min-width: 880px) {
+    .support-gratipay {
+        line-height: 125%;
+    }
+
+    .accounts {
+        width: 100%;
+    }
+
+    #homepage {
+        #sidebar img {
+            left: 32px;
+            top: 32px;
+            width: 284px;
+        }
+        #sidebar, #content {
+            padding: 150px 32px 60px;
+            width: auto;
+            .jump {
+                padding-top: 0;
+            }
+        }
+    }
+}
+
+@media (min-width: 940px) {
+    // 2 column sections
+    #leaderboard {
+        width: leaderboard-width(2);
+
+        .people {
+            width: $people-column-width * 2;
+        }
+    }
+    .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;
+        }
+    }
+}
+
diff --git a/scss/templates/small.scss b/scss/templates/small.scss
@@ -0,0 +1,22 @@
+#header {
+    text-align: center;
+    h1 a {
+        display: block;
+        padding: 10px 0;
+        border-bottom: 1px solid $brown;
+    }
+    .nav {
+        li {
+            margin: 0;
+            a {
+                display: block;
+                padding: 10px;
+                border-bottom: 1px solid $black;
+            }
+        }
+    }
+}
+#content {
+    font: normal 11px/13px $Chronicle;
+    padding: 0 5px;
+}