mobile first

scss/components/accounts.scss

@@ -0,0 +1,105 @@
+.accounts {
+    margin-bottom: 12pt;
+    width: 100%;
+    span.none {
+        font-style: italic;
+        color: $gray;
+    }
+    font: normal 16px $Ideal;
+
+    .account-action {
+        padding-right: 8px;
+        vertical-align: middle;
+        text-align: right;
+
+        .account-delete {
+            display: inline-block;
+        }
+    }
+
+    tr.has-avatar > .account-details {
+      vertical-align: bottom;
+    }
+
+    table {
+        width: 100%;
+    }
+    tr {
+        border-top: 1px solid $light-gray;
+
+        &:last-of-type {
+            border-bottom: 1px solid $light-gray;
+        }
+    }
+    td {
+        text-align: left;
+        vertical-align: middle;
+        line-height: 100%;
+
+        padding: 6pt 0;
+
+        &.account-type {
+            width: 49px;
+            margin-bottom: 3px;
+
+            // Width and height of the avatar.
+            // The images and whitespace surrounding them scale to based on this.
+            $AvatarSize: 36pt;
+
+            // Width and height of the platform icon. 70% of avatar size.
+            $PlatformImageSize: round($AvatarSize * 0.7);
+
+            // Right offset of the platform icon.
+            $PlatformImageOffset: round($PlatformImageSize * 0.6);
+
+            .sanity-preserving-wrapper {
+                position: relative;
+                margin-right: $PlatformImageOffset - 4pt;
+            }
+
+            img {
+                width: $AvatarSize;
+                height: $AvatarSize;
+            }
+
+            img.avatar ~ img.platform {
+                width: $PlatformImageSize;
+                height: $PlatformImageSize;
+                position: absolute;
+                bottom: -6pt;
+                right: -$PlatformImageOffset;
+                border-radius: 3em;
+                border: 2px solid #FFFFFF;
+                background-color: #D7E4DE;
+            }
+        }
+    }
+    div.account-type {
+        font-size: 12px;
+        color: $gray;
+        text-transform: uppercase;
+        &:first-child {
+            padding-bottom: 3px;
+        }
+        &:last-child {
+            padding-top: 3px;
+        }
+    }
+    .account-details {
+        padding: 6pt;
+        word-break: break-all;
+    }
+    .account-username, span.none {
+        line-height: 16pt;
+    }
+    .account-delete {
+        background-image: url("close-button.png");
+        background-size: cover;
+        width: 15px;
+        height: 15px;
+
+        &:hover {
+            cursor: pointer;
+        }
+    }
+}

scss/components/members.scss

@@ -0,0 +1,33 @@
+#members { /* used on accounts elsewhere for GitHub org = Bitbucket team */
+    td, th {
+        padding: 0 6px 6px;
+        text-align: left;
+        vertical-align: baseline;
+        font-family: $Ideal;
+    }
+    th { // borrowed from elements/h2
+        font: bold 14px/14px $Ideal;
+        text-transform: uppercase;
+        padding: 34px 0 8px;
+    }
+    p + & th { padding-top: 13px; }
+    h2 + & th { padding-top: 26px; }
+    .declines, .not-on-gratipay {
+        font-size: 75%;
+        a {
+            font-weight: normal;
+        }
+    }
+    .declines {
+        color: #aaa;
+        a {
+            color: $darker-green;
+        }
+    }
+    img {
+        width: 18pt;
+        height: 18pt;
+        margin-right: 6pt;
+        float: left;
+    }
+}

scss/components/mini-user.scss

@@ -0,0 +1,65 @@
+.mini-user, .search-result {
+    background: white !important;
+    border: 4px solid #DEE0E0;
+    box-shadow: inset 0 0 0 1px #B6B7B9;
+    display: block;
+    overflow: hidden;
+    @include border-radius(3px);
+    &:hover {
+        border-color: $light-brown;
+        box-shadow: inset 0 0 0 1px $brown;
+        text-decoration: none;
+    }
+}
+
+.mini-user {
+    float: left;
+    width: $people-column-width - 4px;
+
+    span.inner {
+        display: block;
+        min-height: 50px;
+        padding: 5px;
+
+        span.avatar {
+            background: transparent url('avatar-default.png') center center no-repeat;
+            background-size: cover;
+            display: block;
+            height: 66px;
+            position: relative;
+        }
+        span.age,
+        span.money {
+            color: $black;
+            display: block;
+            font: bold 16px $Ideal;
+            margin: 7px 0 5px 0;
+        }
+        span.age {
+            font-size: 11px;
+        }
+        span.name {
+            display: block;
+            font: normal 11px $Ideal;
+            margin: 3px 0;
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
+        }
+    }
+
+    &.anonymous {
+        opacity: 0.33;
+    }
+}
+a.mini-user {
+    span.name {
+        color: $green;
+    }
+}
+span.mini-user {
+    border-color: white;
+    span.name {
+        color: $black;
+    }
+}

scss/components/sign_in.scss

@@ -16,7 +16,7 @@
             margin-top: 11px;
         }
         &.highlight {
-            @include box-shadow(0, 0, 8px, $green);
+            box-shadow: 0 0 8px $green;
             background: $darker-green;
         }
     }

scss/elements/elements.scss

@@ -1,17 +1,13 @@
 * {
     box-sizing: border-box;
+    -moz-box-sizing: border-box;
 }
 
 body {
     color: $black;
     font: normal 16px/21px $Ideal;
-    min-width: 320px;
     text-rendering: optimizeLegibility;
 }
-* {
-    box-sizing: border-box;
-    -moz-box-sizing: border-box;
-}
 a {
     color: $green;
     text-decoration: none;
@@ -106,6 +102,3 @@ table.simple {
         padding-right: 42px;
     }
 }
-.mono {
-    font: normal 12px/16px $Mono;
-}

scss/fragments/card.scss

@@ -0,0 +1 @@
+

scss/fragments/secondary-nav.scss

@@ -0,0 +1 @@
+

scss/gratipay.scss

@@ -10,18 +10,21 @@
 
 */
 
-@import "mixins/layout";
-@import "mixins/icons";
-@import "mixins/borders-backgrounds-shadows";
 @import "mixins/animation";
+@import "mixins/border-radius";
+@import "mixins/icons";
+@import "mixins/layout";
 @import "mixins/transform";
-@import "utils";
 @import "variables";
+@import "utils";
 
+// dependency order
 @import "elements/reset";
 @import "elements/buttons-knobs";
 @import "elements/elements";
 
+// alphabetical order
+@import "components/accounts";
 @import "components/chart";
 @import "components/chosen";
 @import "components/communities";
@@ -33,7 +36,9 @@
 @import "components/leaderboard";
 @import "components/linear_gradient";
 @import "components/loading-indicators";
+@import "components/members";
 @import "components/memberships";
+@import "components/mini-user";
 @import "components/payments-by";
 @import "components/profile-statement";
 @import "components/sign_in";
@@ -43,14 +48,18 @@
 @import "components/tipr";
 @import "components/upgrade";
 
-@import "fragments/accounts";
-@import "fragments/members";
-@import "fragments/mini-user";
+// spatial order (top to bottom)
 @import "fragments/notifications";
+@import "fragments/header";
+@import "fragments/secondary-nav";
+@import "fragments/card";
+@import "fragments/content";
+@import "fragments/footer";
 
-@import "layouts/layout";
-@import "layouts/responsiveness";
+// content size order
+@import "layouts/smallest";
 
+// random order
 @import "pages/homepage";
 @import "pages/history";
 @import "pages/team";

scss/layouts/responsiveness.scss

@@ -1,4 +1,3 @@
-// Large screens
 @media (min-width: 940px) {
     .two-column > * {
         float: left;
@@ -10,7 +9,6 @@
     }
 }
 
-// Small screens/tablets
 @media (max-width: 1150px) {
     // 2 column sections
     #leaderboard {
@@ -47,7 +45,6 @@
     }
 }
 
-// Smaller tablets in portrait/landscape phones
 @media (max-width: 880px) {
     #leaderboard {
         width: 100%;
@@ -160,7 +157,6 @@
     }
 }
 
-// Portrait phones
 @media (max-width: 479px) {
     body {
         font-size: 14px;

scss/mixins/border-radius.scss

@@ -0,0 +1,4 @@
+@mixin border-radius($radius: 5px) {
+    border-radius: $radius;
+    background-clip: padding-box;
+}

scss/utils.scss

@@ -23,3 +23,6 @@
     top: -99999px;
     left: -99999px;
 }
+.mono {
+    font: normal 12px/16px $Mono;
+}