From bc0263531b6dc31e38fb2dc26f883212f2ec4345 Mon Sep 17 00:00:00 2001
From: Matthew Taylor <mewtaylor@gmail.com>
Date: Fri, 19 Aug 2016 14:11:24 -0400
Subject: [PATCH 01/26] align gender/org input msg with others

Because the `input` field is already to the right, they were being transformed too far over. This overrides the transform to be correct, and also scopes some css in more detail
---
 src/components/card/card.scss          |  94 ++++++++--------
 src/components/registration/steps.scss | 146 ++++++++++++++-----------
 2 files changed, 133 insertions(+), 107 deletions(-)

diff --git a/src/components/card/card.scss b/src/components/card/card.scss
index b2b70c22c..61ba55798 100644
--- a/src/components/card/card.scss
+++ b/src/components/card/card.scss
@@ -21,43 +21,6 @@
         }
     }
 
-    .validation-message {
-        $arrow-border-width: 1rem;
-        display: block;
-        position: absolute;
-        top: 0;
-        left: 0;
-        transform: translate(16rem, 0);
-        margin-left: $arrow-border-width;
-        border: 1px solid $active-gray;
-        border-radius: 5px;
-        background-color: $ui-orange;
-        padding: 1rem;
-        max-width: 18.75rem;
-        min-height: 1rem;
-        overflow: visible;
-        color: $type-white;
-
-        &:before {
-            display: block;
-            position: absolute;
-            top: 1rem;
-            left: -$arrow-border-width / 2;
-
-            transform: rotate(45deg);
-
-            border-bottom: 1px solid $active-gray;
-            border-left: 1px solid $active-gray;
-            border-radius: 5px;
-
-            background-color: $ui-orange;
-            width: $arrow-border-width;
-            height: $arrow-border-width;
-
-            content: "";
-        }
-    }
-
     .form {
         padding: 3rem 4rem;
 
@@ -77,6 +40,43 @@
             .col-sm-9 {
                 position: relative;
             }
+
+            .validation-message {
+                $arrow-border-width: 1rem;
+                display: block;
+                position: absolute;
+                top: 0;
+                left: 0;
+                transform: translate(16rem, 0);
+                margin-left: $arrow-border-width;
+                border: 1px solid $active-gray;
+                border-radius: 5px;
+                background-color: $ui-orange;
+                padding: 1rem;
+                max-width: 18.75rem;
+                min-height: 1rem;
+                overflow: visible;
+                color: $type-white;
+
+                &:before {
+                    display: block;
+                    position: absolute;
+                    top: 1rem;
+                    left: -$arrow-border-width / 2;
+
+                    transform: rotate(45deg);
+
+                    border-bottom: 1px solid $active-gray;
+                    border-left: 1px solid $active-gray;
+                    border-radius: 5px;
+
+                    background-color: $ui-orange;
+                    width: $arrow-border-width;
+                    height: $arrow-border-width;
+
+                    content: "";
+                }
+            }
         }
     }
 }
@@ -105,15 +105,19 @@
 
 @media only screen and (max-width: $desktop - 1) {
     .card {
-        .validation-message {
-            position: relative;
-            transform: none;
-            margin: inherit;
-            width: 100%;
-            height: inherit;
+        .form {
+            .row {
+                .validation-message {
+                    position: relative;
+                    transform: none;
+                    margin: inherit;
+                    width: 100%;
+                    height: inherit;
 
-            &:before {
-                display: none;
+                    &:before {
+                        display: none;
+                    }
+                }
             }
         }
     }
diff --git a/src/components/registration/steps.scss b/src/components/registration/steps.scss
index 0355fbf7d..841f99ae4 100644
--- a/src/components/registration/steps.scss
+++ b/src/components/registration/steps.scss
@@ -2,10 +2,6 @@
 @import "../../frameless";
 
 .registration-step {
-    .demographics-checkbox-is-robot {
-        display: none;
-    }
-
     .invite-avatar {
         display: block;
         margin: 0 auto 1rem auto;
@@ -13,20 +9,30 @@
         border-radius: 8px;
     }
 
-    .gender-input,
-    .other-input {
-        float: right;
-        width: 90%;
-
-        .row {
-            margin-left: .5rem;
+    .card {
+        .demographics-checkbox-is-robot {
+            display: none;
         }
-    }
 
-    .help-text {
-        margin: .25rem 0;
-        text-align: left;
-        color: $ui-dark-gray;
+        .gender-input,
+        .other-input {
+            float: right;
+            width: 90%;
+
+            .row {
+                margin-left: .5rem;
+
+                .validation-message {
+                    transform: translate(14rem, 0);
+                }
+            }
+        }
+
+        .help-text {
+            margin: .25rem 0;
+            text-align: left;
+            color: $ui-dark-gray;
+        }
     }
 
     &.class-invite-step {
@@ -51,58 +57,66 @@
     }
 
     &.username-step {
-        .username-label {
-            margin-bottom: .75rem;
+        .card {
+            .username-label {
+                margin-bottom: .75rem;
+            }
         }
     }
 
     &.demographics-step {
-        .gender-input {
-            margin-top: -5.5rem;
-        }
+        .card {
+            .gender-input {
+                margin-top: -5.5rem;
+            }
 
-        .radio {
-            margin-right: 2.5rem;
-            line-height: 3rem;
+            .radio {
+                margin-right: 2.5rem;
+                line-height: 3rem;
 
-            input {
-                margin-right: 1rem;
+                input {
+                    margin-right: 1rem;
+                }
             }
         }
     }
 
     &.phone-step {
-        .form-group {
-            margin-bottom: 2rem;
-        }
+        .card {
+            .form-group {
+                margin-bottom: 2rem;
+            }
 
-        input {
-            &[type=checkbox] {
-                margin-bottom: 1.25rem;
+            input {
+                &[type=checkbox] {
+                    margin-bottom: 1.25rem;
+                }
             }
         }
     }
 
     &.organization-step {
-        .checkbox-group {
-            .validation-message {
-                transform: translate(16rem, 8rem);
+        .card {
+            .checkbox-group {
+                .validation-message {
+                    transform: translate(16rem, 8rem);
+                }
             }
-        }
 
-        input {
-            &[value="8"] {
-                margin: 1rem 0;
+            input {
+                &[value="8"] {
+                    margin: 1rem 0;
+                }
             }
-        }
 
-        .other-input {
-            margin-top: -5.75rem;
+            .other-input {
+                margin-top: -5.75rem;
+            }
         }
     }
 
     &.usescratch-step {
-        .form {
+        .card {
             .form-group {
                 margin-bottom: 0;
 
@@ -112,13 +126,13 @@
                     }
                 }
             }
-        }
 
-        p {
-            &.char-count {
-                margin-top: 0;
-                margin-bottom: 1rem;
-                text-align: right;
+            p {
+                &.char-count {
+                    margin-top: 0;
+                    margin-bottom: 1rem;
+                    text-align: right;
+                }
             }
         }
     }
@@ -149,9 +163,11 @@
 @media only screen and (max-width: $mobile - 1) {
     .registration-step {
         &.demographics-step {
-            .radio {
-                width: 100%;
-                text-align: left;
+            .card {
+                .radio {
+                    width: 100%;
+                    text-align: left;
+                }
             }
         }
 
@@ -167,24 +183,30 @@
 
 @media only screen and (max-width: $desktop - 1) {
     .registration-step {
-        .form {
-            text-align: left;
+        .card {
+            .form {
+                text-align: left;
+            }
         }
 
         &.phone-step {
-            .checkbox,
-            .validation-message {
-                text-align: left;
-            }
+            .card {
+                .checkbox,
+                .validation-message {
+                    text-align: left;
+                }
 
-            .checkbox {
-                margin-bottom: 1rem;
+                .checkbox {
+                    margin-bottom: 1rem;
+                }
             }
         }
 
         &.organization-step {
-            .checkbox-group {
-                text-align: left;
+            .card {
+                .checkbox-group {
+                    text-align: left;
+                }
             }
         }
     }

From baf0676f990276d8620007f2c8df2073a8b8996d Mon Sep 17 00:00:00 2001
From: Matthew Taylor <mewtaylor@gmail.com>
Date: Fri, 19 Aug 2016 15:06:12 -0400
Subject: [PATCH 02/26] move `.validation-message` out`
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

It doesn’t need to be specifically styled, as we have no use for it inside `.card` but outside `.row` yet. Thanks @rschamp!
---
 src/components/card/card.scss | 94 +++++++++++++++++------------------
 1 file changed, 45 insertions(+), 49 deletions(-)

diff --git a/src/components/card/card.scss b/src/components/card/card.scss
index 61ba55798..b2b70c22c 100644
--- a/src/components/card/card.scss
+++ b/src/components/card/card.scss
@@ -21,6 +21,43 @@
         }
     }
 
+    .validation-message {
+        $arrow-border-width: 1rem;
+        display: block;
+        position: absolute;
+        top: 0;
+        left: 0;
+        transform: translate(16rem, 0);
+        margin-left: $arrow-border-width;
+        border: 1px solid $active-gray;
+        border-radius: 5px;
+        background-color: $ui-orange;
+        padding: 1rem;
+        max-width: 18.75rem;
+        min-height: 1rem;
+        overflow: visible;
+        color: $type-white;
+
+        &:before {
+            display: block;
+            position: absolute;
+            top: 1rem;
+            left: -$arrow-border-width / 2;
+
+            transform: rotate(45deg);
+
+            border-bottom: 1px solid $active-gray;
+            border-left: 1px solid $active-gray;
+            border-radius: 5px;
+
+            background-color: $ui-orange;
+            width: $arrow-border-width;
+            height: $arrow-border-width;
+
+            content: "";
+        }
+    }
+
     .form {
         padding: 3rem 4rem;
 
@@ -40,43 +77,6 @@
             .col-sm-9 {
                 position: relative;
             }
-
-            .validation-message {
-                $arrow-border-width: 1rem;
-                display: block;
-                position: absolute;
-                top: 0;
-                left: 0;
-                transform: translate(16rem, 0);
-                margin-left: $arrow-border-width;
-                border: 1px solid $active-gray;
-                border-radius: 5px;
-                background-color: $ui-orange;
-                padding: 1rem;
-                max-width: 18.75rem;
-                min-height: 1rem;
-                overflow: visible;
-                color: $type-white;
-
-                &:before {
-                    display: block;
-                    position: absolute;
-                    top: 1rem;
-                    left: -$arrow-border-width / 2;
-
-                    transform: rotate(45deg);
-
-                    border-bottom: 1px solid $active-gray;
-                    border-left: 1px solid $active-gray;
-                    border-radius: 5px;
-
-                    background-color: $ui-orange;
-                    width: $arrow-border-width;
-                    height: $arrow-border-width;
-
-                    content: "";
-                }
-            }
         }
     }
 }
@@ -105,19 +105,15 @@
 
 @media only screen and (max-width: $desktop - 1) {
     .card {
-        .form {
-            .row {
-                .validation-message {
-                    position: relative;
-                    transform: none;
-                    margin: inherit;
-                    width: 100%;
-                    height: inherit;
+        .validation-message {
+            position: relative;
+            transform: none;
+            margin: inherit;
+            width: 100%;
+            height: inherit;
 
-                    &:before {
-                        display: none;
-                    }
-                }
+            &:before {
+                display: none;
             }
         }
     }

From 70eb82f7cb2df91b8dbbe16fe6a9d999d704b697 Mon Sep 17 00:00:00 2001
From: Matthew Taylor <mewtaylor@gmail.com>
Date: Fri, 19 Aug 2016 15:16:35 -0400
Subject: [PATCH 03/26] remove `.card`-specific stylings

---
 src/components/registration/steps.scss | 154 +++++++++++--------------
 1 file changed, 67 insertions(+), 87 deletions(-)

diff --git a/src/components/registration/steps.scss b/src/components/registration/steps.scss
index 841f99ae4..d9ef9e135 100644
--- a/src/components/registration/steps.scss
+++ b/src/components/registration/steps.scss
@@ -2,6 +2,10 @@
 @import "../../frameless";
 
 .registration-step {
+    .demographics-checkbox-is-robot {
+        display: none;
+    }
+
     .invite-avatar {
         display: block;
         margin: 0 auto 1rem auto;
@@ -9,30 +13,24 @@
         border-radius: 8px;
     }
 
-    .card {
-        .demographics-checkbox-is-robot {
-            display: none;
-        }
+    .gender-input,
+    .other-input {
+        float: right;
+        width: 90%;
 
-        .gender-input,
-        .other-input {
-            float: right;
-            width: 90%;
+        .row {
+            margin-left: .5rem;
 
-            .row {
-                margin-left: .5rem;
-
-                .validation-message {
-                    transform: translate(14rem, 0);
-                }
+            .validation-message {
+                transform: translate(14rem, 0);
             }
         }
+    }
 
-        .help-text {
-            margin: .25rem 0;
-            text-align: left;
-            color: $ui-dark-gray;
-        }
+    .help-text {
+        margin: .25rem 0;
+        text-align: left;
+        color: $ui-dark-gray;
     }
 
     &.class-invite-step {
@@ -57,82 +55,72 @@
     }
 
     &.username-step {
-        .card {
-            .username-label {
-                margin-bottom: .75rem;
-            }
+        .username-label {
+            margin-bottom: .75rem;
         }
     }
 
     &.demographics-step {
-        .card {
-            .gender-input {
-                margin-top: -5.5rem;
-            }
+        .gender-input {
+            margin-top: -5.5rem;
+        }
 
-            .radio {
-                margin-right: 2.5rem;
-                line-height: 3rem;
+        .radio {
+            margin-right: 2.5rem;
+            line-height: 3rem;
 
-                input {
-                    margin-right: 1rem;
-                }
+            input {
+                margin-right: 1rem;
             }
         }
     }
 
     &.phone-step {
-        .card {
-            .form-group {
-                margin-bottom: 2rem;
-            }
+        .form-group {
+            margin-bottom: 2rem;
+        }
 
-            input {
-                &[type=checkbox] {
-                    margin-bottom: 1.25rem;
-                }
+        input {
+            &[type=checkbox] {
+                margin-bottom: 1.25rem;
             }
         }
     }
 
     &.organization-step {
-        .card {
-            .checkbox-group {
-                .validation-message {
-                    transform: translate(16rem, 8rem);
-                }
+        .checkbox-group {
+            .validation-message {
+                transform: translate(16rem, 8rem);
             }
+        }
 
-            input {
-                &[value="8"] {
-                    margin: 1rem 0;
-                }
+        input {
+            &[value="8"] {
+                margin: 1rem 0;
             }
+        }
 
-            .other-input {
-                margin-top: -5.75rem;
-            }
+        .other-input {
+            margin-top: -5.75rem;
         }
     }
 
     &.usescratch-step {
-        .card {
-            .form-group {
-                margin-bottom: 0;
+        .form-group {
+            margin-bottom: 0;
 
-                &.has-error {
-                    .textarea {
-                        border: 1px solid $ui-orange;
-                    }
+            &.has-error {
+                .textarea {
+                    border: 1px solid $ui-orange;
                 }
             }
+        }
 
-            p {
-                &.char-count {
-                    margin-top: 0;
-                    margin-bottom: 1rem;
-                    text-align: right;
-                }
+        p {
+            &.char-count {
+                margin-top: 0;
+                margin-bottom: 1rem;
+                text-align: right;
             }
         }
     }
@@ -163,11 +151,9 @@
 @media only screen and (max-width: $mobile - 1) {
     .registration-step {
         &.demographics-step {
-            .card {
-                .radio {
-                    width: 100%;
-                    text-align: left;
-                }
+            .radio {
+                width: 100%;
+                text-align: left;
             }
         }
 
@@ -183,30 +169,24 @@
 
 @media only screen and (max-width: $desktop - 1) {
     .registration-step {
-        .card {
-            .form {
-                text-align: left;
-            }
+        .form {
+            text-align: left;
         }
 
         &.phone-step {
-            .card {
-                .checkbox,
-                .validation-message {
-                    text-align: left;
-                }
+            .checkbox,
+            .validation-message {
+                text-align: left;
+            }
 
-                .checkbox {
-                    margin-bottom: 1rem;
-                }
+            .checkbox {
+                margin-bottom: 1rem;
             }
         }
 
         &.organization-step {
-            .card {
-                .checkbox-group {
-                    text-align: left;
-                }
+            .checkbox-group {
+                text-align: left;
             }
         }
     }

From af2165a6972e50cbf4afd1780b2f2e59f9d95a22 Mon Sep 17 00:00:00 2001
From: Matthew Taylor <mewtaylor@gmail.com>
Date: Mon, 22 Aug 2016 15:55:43 -0400
Subject: [PATCH 04/26] Add Abkhaz to custom locale list
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

it’s not in `intl-messageformat`. Give it Azerbaijani as a parent language for now, as they have similar enough structures for plualization/alphabet purposes.
---
 custom-locales.json | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/custom-locales.json b/custom-locales.json
index ad3e37405..83c4a0b11 100644
--- a/custom-locales.json
+++ b/custom-locales.json
@@ -1,4 +1,8 @@
 {
+    "ab": {
+        "locale": "ab",
+        "parentLocale": "az"
+    },
     "an": {
         "locale": "an",
         "parentLocale": "ca"

From 9657262daa2e0288a13147ee2d9234d135710f91 Mon Sep 17 00:00:00 2001
From: Matthew Taylor <mewtaylor@gmail.com>
Date: Mon, 22 Aug 2016 16:01:17 -0400
Subject: [PATCH 05/26] Capitalize other languages

per https://github.com/LLK/scratchr2/pull/3954#issuecomment-241529290
---
 languages.json | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/languages.json b/languages.json
index 411834551..774ddf326 100644
--- a/languages.json
+++ b/languages.json
@@ -21,7 +21,7 @@
     "eu": "Euskara",
     "fa": "فارسی",
     "fr": "Français",
-    "fur": "furlan",
+    "fur": "Furlan",
     "ga": "Gaeilge",
     "gd": "Gàidhlig",
     "gl": "Galego",
@@ -61,7 +61,7 @@
     "ro": "Română",
     "ru": "Русский",
     "sc": "Sardu",
-    "sq": "shqiptar",
+    "sq": "Shqiptar",
     "sk": "Slovenčina",
     "sl": "Slovenščina",
     "sr": "Српски",

From 3ab92e0c36ccbebe63fb2216a0cf81b017b1c6d2 Mon Sep 17 00:00:00 2001
From: Matthew Taylor <mewtaylor@gmail.com>
Date: Mon, 22 Aug 2016 16:33:06 -0400
Subject: [PATCH 06/26] capitalize one more language

existing, but needs it
---
 languages.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/languages.json b/languages.json
index 774ddf326..85679754d 100644
--- a/languages.json
+++ b/languages.json
@@ -65,7 +65,7 @@
     "sk": "Slovenčina",
     "sl": "Slovenščina",
     "sr": "Српски",
-    "fi": "suomi",
+    "fi": "Suomi",
     "sv": "Svenska",
     "te": "తెలుగు",
     "nai": "Tepehuan",

From f883ecfbaeb9b5d196a4acd97ff8d0a6a5f108b1 Mon Sep 17 00:00:00 2001
From: Technoboy10 <technoboy10@fake.email>
Date: Mon, 8 Aug 2016 08:38:32 -0400
Subject: [PATCH 07/26] commit changes

---
 src/_colors.scss                       |  1 +
 src/components/grid/grid.jsx           |  3 ++
 src/components/grid/grid.scss          | 37 ++++++++++-----
 src/components/thumbnail/thumbnail.jsx |  4 +-
 src/views/explore/explore.jsx          | 62 ++++++++++++++------------
 src/views/explore/explore.scss         | 46 +++++++++++++++----
 6 files changed, 105 insertions(+), 48 deletions(-)

diff --git a/src/_colors.scss b/src/_colors.scss
index 7a8947665..dff8ef60a 100644
--- a/src/_colors.scss
+++ b/src/_colors.scss
@@ -11,6 +11,7 @@ $background-color: hsla(0, 0, 99, 1); //#FDFDFD
 /* UI Secondary Colors */
 $ui-aqua: hsla(170, 70, 50, 1); //#26D9BB
 $ui-purple: hsla(265, 55, 55, 1); //#824DCB
+$ui-yellow: hsla(45, 100, 50, 1); //#FFBF00
 $ui-white: #fff;
 
 $ui-border: hsla(0, 0, 85, 1); //#D9D9D9
diff --git a/src/components/grid/grid.jsx b/src/components/grid/grid.jsx
index 04f8a0b42..052a61dd7 100644
--- a/src/components/grid/grid.jsx
+++ b/src/components/grid/grid.jsx
@@ -12,6 +12,7 @@ var Grid = React.createClass({
         return {
             items: require('./grid.json'),
             itemType: 'projects',
+            explore: false,
             showLoves: false,
             showFavorites: false,
             showRemixes: false,
@@ -32,6 +33,7 @@ var Grid = React.createClass({
                         if (this.props.itemType == 'projects') {
                             return (
                                 <Thumbnail key={item.id}
+                                           explore={this.props.explore}
                                            showLoves={this.props.showLoves}
                                            showFavorites={this.props.showFavorites}
                                            showRemixes={this.props.showRemixes}
@@ -50,6 +52,7 @@ var Grid = React.createClass({
                         else {
                             return (
                                 <Thumbnail key={item.id}
+                                           explore={this.props.explore}
                                            type={'gallery'}
                                            href={href}
                                            title={item.title}
diff --git a/src/components/grid/grid.scss b/src/components/grid/grid.scss
index 1f72e99d5..dba1a2cb9 100644
--- a/src/components/grid/grid.scss
+++ b/src/components/grid/grid.scss
@@ -1,4 +1,5 @@
 @import "../../frameless";
+@import "../../colors";
 
 .grid {
     display: inline-block;
@@ -20,21 +21,37 @@
     .thumbnail {
         padding: 12px;
 
-        &.project {
-            width: $project-width;
-
-            img {
+        &:not(.explore) {
+            &.project {
                 width: $project-width;
-                height: $project-height;
+
+                img {
+                    width: $project-width;
+                    height: $project-height;
+                }
+            }
+
+            &.gallery {
+                width: $gallery-width;
+
+                img {
+                    width: $gallery-width;
+                    height: $gallery-height;
+                }
             }
         }
 
-        &.gallery {
-            width: $gallery-width;
+        &.explore {
+            &.project {
+                box-shadow: 0 0 3px $box-shadow-gray;
+                background-color: $ui-white;
+                width: 220px;
+                height: 208px;
 
-            img {
-                width: $gallery-width;
-                height: $gallery-height;
+                img {
+                    width: 204px;
+                    height: 152px;
+                }
             }
         }
     }
diff --git a/src/components/thumbnail/thumbnail.jsx b/src/components/thumbnail/thumbnail.jsx
index f85dc18c4..32fff6206 100644
--- a/src/components/thumbnail/thumbnail.jsx
+++ b/src/components/thumbnail/thumbnail.jsx
@@ -20,6 +20,7 @@ var Thumbnail = React.createClass({
             showRemixes: false,
             showViews: false,
             linkTitle: true,
+            explore: false,
             alt: ''
         };
     },
@@ -27,7 +28,8 @@ var Thumbnail = React.createClass({
         var classes = classNames(
             'thumbnail',
             this.props.type,
-            this.props.className
+            this.props.className,
+            {'explore': this.props.explore}
         );
         var extra = [];
         if (this.props.creator) {
diff --git a/src/views/explore/explore.jsx b/src/views/explore/explore.jsx
index 2149be580..83b585f09 100644
--- a/src/views/explore/explore.jsx
+++ b/src/views/explore/explore.jsx
@@ -7,8 +7,8 @@ var render = require('../../lib/render.jsx');
 var api = require('../../lib/api');
 
 var Page = require('../../components/page/www/page.jsx');
-var Box = require('../../components/box/box.jsx');
 var Tabs = require('../../components/tabs/tabs.jsx');
+var TitleBanner = require('../../components/title-banner/title-banner.jsx');
 var SubNavigation = require('../../components/subnavigation/subnavigation.jsx');
 var Grid = require('../../components/grid/grid.jsx');
 
@@ -59,7 +59,7 @@ var Explore = injectIntl(React.createClass({
     },
     getExploreMore: function () {
         var qText = '&q=' + this.props.acceptableTabs[this.props.category] || '*';
-        
+
         api({
             uri: '/search/' + this.props.itemType +
                  '?limit=' + this.props.loadNumber +
@@ -116,34 +116,38 @@ var Explore = injectIntl(React.createClass({
         return (
             <div>
                 <div className='outer'>
-                    <Box title={formatMessage({id: 'general.explore'})}>
-                        <SubNavigation className='categories'>
-                            {this.getBubble('all')}
-                            {this.getBubble('animations')}
-                            {this.getBubble('art')}
-                            {this.getBubble('games')}
-                            {this.getBubble('music')}
-                            {this.getBubble('stories')}
-                        </SubNavigation>
-                        <Tabs>
-                            {this.getTab('projects')}
-                            {this.getTab('studios')}
-                        </Tabs>
-                        <div id='projectBox' key='projectBox'>
-                            <Grid items={this.state.loaded}
-                                  itemType={this.props.itemType}
-                                  showLoves={false}
-                                  showFavorites={false}
-                                  showViews={false} />
-                            <SubNavigation className='load'>
-                                <button onClick={this.getExploreMore}>
-                                    <li>
-                                        <FormattedMessage id='general.loadMore' />
-                                    </li>
-                                </button>
-                            </SubNavigation>
+                    <TitleBanner className="masthead">
+                        <div className="inner">
+                            <h1>Explore</h1>
                         </div>
-                    </Box>
+                    </TitleBanner>
+                    <Tabs>
+                        {this.getTab('projects')}
+                        {this.getTab('studios')}
+                    </Tabs>
+                    <SubNavigation className='categories'>
+                        {this.getBubble('all')}
+                        {this.getBubble('animations')}
+                        {this.getBubble('art')}
+                        {this.getBubble('games')}
+                        {this.getBubble('music')}
+                        {this.getBubble('stories')}
+                    </SubNavigation>
+                    <div id='projectBox' key='projectBox'>
+                        <Grid items={this.state.loaded}
+                              itemType={this.props.itemType}
+                              explore={true}
+                              showLoves={false}
+                              showFavorites={false}
+                              showViews={false} />
+                        <SubNavigation className='load'>
+                            <button onClick={this.getExploreMore}>
+                                <li>
+                                    <FormattedMessage id='general.loadMore' />
+                                </li>
+                            </button>
+                        </SubNavigation>
+                    </div>
                 </div>
             </div>
 
diff --git a/src/views/explore/explore.scss b/src/views/explore/explore.scss
index 3e8406771..8918d0e04 100644
--- a/src/views/explore/explore.scss
+++ b/src/views/explore/explore.scss
@@ -4,6 +4,36 @@
 $base-bg: $ui-white;
 
 #view {
+    padding: 0;
+}
+
+.outer {
+    .title-banner {
+        &.masthead {
+            margin-bottom: 0;
+            background-color: $ui-yellow;
+            padding: 0;
+
+            h1 {
+                text-align: center;
+                color: $ui-white;
+                font-size: 3rem;
+            }
+
+            p {
+                margin: 0;
+                width: $cols6;
+                text-align: left;
+                color: $ui-white;
+
+                a {
+                    border-bottom: 1px solid $ui-white;
+                    color: $ui-white;
+                }
+            }
+        }
+    }
+
     .box {
         display: block;
         margin-right: auto;
@@ -13,7 +43,7 @@ $base-bg: $ui-white;
         .box-content {
             padding: 0;
         }
-    }   
+    }
 
     .categories {
         display: inline-block;
@@ -26,20 +56,20 @@ $base-bg: $ui-white;
             opacity: .75;
             background-color: $ui-white;
             color: $header-gray;
-    
+
             &:hover {
                 opacity: 1;
                 border-color: $active-dark-gray;
             }
-        }
 
-        li.active {
-            opacity: 1;
-            border-color: $active-dark-gray;
-
-            &:hover {
+            &.active {
                 opacity: 1;
                 border-color: $active-dark-gray;
+
+                &:hover {
+                    opacity: 1;
+                    border-color: $active-dark-gray;
+                }
             }
         }
     }

From 432b621079729244e8f978d0ac1ff802ea562383 Mon Sep 17 00:00:00 2001
From: Technoboy10 <technoboy10@fake.email>
Date: Mon, 8 Aug 2016 13:00:40 -0400
Subject: [PATCH 08/26] wip

---
 src/components/grid/grid.jsx           | 15 ++++++++++-
 src/components/thumbnail/thumbnail.jsx |  9 +++++++
 src/views/explore/explore.jsx          |  3 ++-
 src/views/explore/explore.scss         | 37 +++++++++++++++++++++++++-
 4 files changed, 61 insertions(+), 3 deletions(-)

diff --git a/src/components/grid/grid.jsx b/src/components/grid/grid.jsx
index 052a61dd7..292cd416b 100644
--- a/src/components/grid/grid.jsx
+++ b/src/components/grid/grid.jsx
@@ -4,6 +4,7 @@ var React = require('react');
 var Thumbnail = require('../thumbnail/thumbnail.jsx');
 var FlexRow = require('../flex-row/flex-row.jsx');
 
+var api = require('../../lib/api');
 require('./grid.scss');
 
 var Grid = React.createClass({
@@ -16,9 +17,19 @@ var Grid = React.createClass({
             showLoves: false,
             showFavorites: false,
             showRemixes: false,
-            showViews: false
+            showViews: false,
+            showAvatar: false
         };
     },
+    getAvatar: function (username) {
+        var url = '';
+        api({
+            uri: '/users/' + username
+        }, function (err, body) {
+            this.url = body.profile.images['32x32'];
+        }.bind(this));
+        console.log(url);
+    },
     render: function () {
         var classes = classNames(
             'grid',
@@ -38,10 +49,12 @@ var Grid = React.createClass({
                                            showFavorites={this.props.showFavorites}
                                            showRemixes={this.props.showRemixes}
                                            showViews={this.props.showViews}
+                                           showAvatar={this.props.showAvatar}
                                            type={'project'}
                                            href={href}
                                            title={item.title}
                                            src={item.image}
+                                           avatar={this.getAvatar(item.author.username)}
                                            creator={item.author.username}
                                            loves={item.stats.loves}
                                            favorites={item.stats.favorites}
diff --git a/src/components/thumbnail/thumbnail.jsx b/src/components/thumbnail/thumbnail.jsx
index 32fff6206..8fa73c3b3 100644
--- a/src/components/thumbnail/thumbnail.jsx
+++ b/src/components/thumbnail/thumbnail.jsx
@@ -14,11 +14,13 @@ var Thumbnail = React.createClass({
             href: '#',
             title: 'Project',
             src: '',
+            avatar: '',
             type: 'project',
             showLoves: false,
             showFavorites: false,
             showRemixes: false,
             showViews: false,
+            showAvatar: false,
             linkTitle: true,
             explore: false,
             alt: ''
@@ -32,6 +34,13 @@ var Thumbnail = React.createClass({
             {'explore': this.props.explore}
         );
         var extra = [];
+        if (this.props.avatar && this.props.showAvatar) {
+            extra.push(
+                <a className="creator-image" href={'/users/' + this.props.creator + '/'}>
+                    <img src={this.props.avatar} alt={this.props.creator} />
+                </a>
+            );
+        }
         if (this.props.creator) {
             extra.push(
                 <div key="creator" className="thumbnail-creator">
diff --git a/src/views/explore/explore.jsx b/src/views/explore/explore.jsx
index 83b585f09..f92ea9a7a 100644
--- a/src/views/explore/explore.jsx
+++ b/src/views/explore/explore.jsx
@@ -139,7 +139,8 @@ var Explore = injectIntl(React.createClass({
                               explore={true}
                               showLoves={false}
                               showFavorites={false}
-                              showViews={false} />
+                              showViews={false}
+                              showAvatar={true}/>
                         <SubNavigation className='load'>
                             <button onClick={this.getExploreMore}>
                                 <li>
diff --git a/src/views/explore/explore.scss b/src/views/explore/explore.scss
index 8918d0e04..03b5a9af0 100644
--- a/src/views/explore/explore.scss
+++ b/src/views/explore/explore.scss
@@ -77,9 +77,13 @@ $base-bg: $ui-white;
     #projectBox {
         border-top: 2px solid;
         border-color: $active-gray;
-        background-color: $ui-white;
+        background-color: $ui-gray;
         padding-bottom: 30px;
         width: 100%;
+
+        .grid .flex-row {
+            justify-content: space-around;
+        }
     }
 
     .load button {
@@ -92,4 +96,35 @@ $base-bg: $ui-white;
             color: $header-gray;
         }
     }
+
+    .thumbnail {
+        $project-width: 220px;
+        $project-height: 208px;
+        margin-left: 8px;
+        padding: 0;
+
+        &.project {
+            margin-bottom: 16px;
+            border-radius: 4px;
+            width: $project-width;
+            height: $project-height;
+
+            .thumbnail-image {
+                margin: 8px auto;
+                width: 204px;
+                height: 152px;
+
+                img {
+                    border: 0;
+                    border-radius: 4px;
+                }
+            }
+
+            .thumbnail-title,
+            .thumbnail-creator {
+                margin: 0 auto;
+                width: 204px;
+            }
+        }
+    }
 }

From 55163d2c868eea1d0b4b8190cd27f1102d811a4b Mon Sep 17 00:00:00 2001
From: Technoboy10 <technoboy10@fake.email>
Date: Mon, 8 Aug 2016 17:36:44 -0400
Subject: [PATCH 09/26] more work on user avatar in thumbnail

---
 src/components/thumbnail/thumbnail.jsx | 6 +-----
 1 file changed, 1 insertion(+), 5 deletions(-)

diff --git a/src/components/thumbnail/thumbnail.jsx b/src/components/thumbnail/thumbnail.jsx
index 8fa73c3b3..b9d8513a9 100644
--- a/src/components/thumbnail/thumbnail.jsx
+++ b/src/components/thumbnail/thumbnail.jsx
@@ -1,5 +1,4 @@
 var classNames = require('classnames');
-var FormattedMessage = require('react-intl').FormattedMessage;
 var React = require('react');
 
 require('./thumbnail.scss');
@@ -44,10 +43,7 @@ var Thumbnail = React.createClass({
         if (this.props.creator) {
             extra.push(
                 <div key="creator" className="thumbnail-creator">
-                    <FormattedMessage id={'thumbnail.by'} />{' '}
-                    <a href={'/users/' + this.props.creator + '/'}>
-                        {this.props.creator}
-                    </a>
+                    <a href={'/users/' + this.props.creator + '/'}>{this.props.creator}</a>
                 </div>
             );
         }

From cca9b4a7ed619d5a652374c1e19fd5989783e133 Mon Sep 17 00:00:00 2001
From: Technoboy10 <technoboy10@fake.email>
Date: Mon, 8 Aug 2016 17:36:58 -0400
Subject: [PATCH 10/26] style tweaks

---
 src/views/explore/explore.jsx  |  5 +++
 src/views/explore/explore.scss | 81 +++++++++++++++++++++++++---------
 2 files changed, 64 insertions(+), 22 deletions(-)

diff --git a/src/views/explore/explore.jsx b/src/views/explore/explore.jsx
index f92ea9a7a..2812063e8 100644
--- a/src/views/explore/explore.jsx
+++ b/src/views/explore/explore.jsx
@@ -105,6 +105,11 @@ var Explore = injectIntl(React.createClass({
         return (
             <a href={'/explore/' + type + '/' + this.props.category + '/'}>
                 <li className={classes}>
+                    {this.props.itemType === type ? [
+                        <img src={'/svgs/explore/' + type + '-active.svg'} className={'tab-icon ' + type} />
+                    ] : [
+                        <img src={'/svgs/explore/' + type + '-inactive.svg'} className={'tab-icon ' + type} />
+                    ]}
                     <FormattedMessage id={'general.' + type} />
                 </li>
             </a>
diff --git a/src/views/explore/explore.scss b/src/views/explore/explore.scss
index 03b5a9af0..74310adad 100644
--- a/src/views/explore/explore.scss
+++ b/src/views/explore/explore.scss
@@ -4,6 +4,7 @@
 $base-bg: $ui-white;
 
 #view {
+    background-color: $ui-gray;
     padding: 0;
 }
 
@@ -45,43 +46,79 @@ $base-bg: $ui-white;
         }
     }
 
-    .categories {
-        display: inline-block;
-        background-color: $ui-gray;
-        padding-left: 10px;
-        width: calc(100% - 10px);
-        justify-content: left;
+    .tab-background {
+        box-shadow: 1px 0 1px $box-shadow-gray;
+        background-color: $ui-white;
+        width: 100%;
+    }
+
+    .tabs {
+        background-color: $ui-white;
+        padding: 0;
+        width: 100%;
+        justify-content: center;
 
         li {
-            opacity: .75;
-            background-color: $ui-white;
-            color: $header-gray;
-
-            &:hover {
-                opacity: 1;
-                border-color: $active-dark-gray;
-            }
+            margin: 0;
+            border: 0;
+            border-radius: 0;
+            width: $cols2;
+            text-align: center;
 
             &.active {
-                opacity: 1;
-                border-color: $active-dark-gray;
+                border-bottom: 3px solid $ui-aqua;
+            }
 
-                &:hover {
-                    opacity: 1;
-                    border-color: $active-dark-gray;
+            &:active {
+                box-shadow: none;
+                padding: .75em 1.5em;
+            }
+
+            .tab-icon {
+                display: block;
+                margin: 0 auto;
+
+                &.projects {
+                    margin-bottom: 4px;
+                    width: 20px;
+                }
+
+                &.studios {
+                    width: 24px;
                 }
             }
         }
     }
 
+    .categories {
+        border-bottom: 1px solid $ui-border;
+        width: 58.75rem;
+        justify-content: center;
+
+        li {
+            border: 0;
+            background-color: $ui-dark-gray;
+            color: $ui-light-gray;
+
+            &.active {
+                opacity: 1;
+                background-color: $ui-aqua;
+                color: $ui-white;
+            }
+
+            &:active {
+                padding: .75em 1.5em;
+            }
+        }
+    }
+
     #projectBox {
-        border-top: 2px solid;
-        border-color: $active-gray;
         background-color: $ui-gray;
         padding-bottom: 30px;
         width: 100%;
 
         .grid .flex-row {
+            width: $cols12;
             justify-content: space-around;
         }
     }
@@ -89,7 +126,7 @@ $base-bg: $ui-white;
     .load button {
         outline: None;
         border: None;
-        background-color: $ui-white;
+        background-color: $ui-gray;
         padding: 0;
 
         li {

From 278f7c88191c785e9f24a3acb87a994626aacc9b Mon Sep 17 00:00:00 2001
From: Technoboy10 <technoboy10@fake.email>
Date: Mon, 8 Aug 2016 17:41:08 -0400
Subject: [PATCH 11/26] more tweaks

---
 src/views/explore/explore.scss | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/views/explore/explore.scss b/src/views/explore/explore.scss
index 74310adad..5ec9342a1 100644
--- a/src/views/explore/explore.scss
+++ b/src/views/explore/explore.scss
@@ -92,6 +92,7 @@ $base-bg: $ui-white;
 
     .categories {
         border-bottom: 1px solid $ui-border;
+        padding: 8px 0;
         width: 58.75rem;
         justify-content: center;
 
@@ -114,7 +115,8 @@ $base-bg: $ui-white;
 
     #projectBox {
         background-color: $ui-gray;
-        padding-bottom: 30px;
+        padding-top: 8px;
+        padding-bottom: 32px;
         width: 100%;
 
         .grid .flex-row {

From 6cb3d5ceb03d45ba84c79c016a9ed0ec488c27b6 Mon Sep 17 00:00:00 2001
From: Technoboy10 <technoboy10@fake.email>
Date: Fri, 12 Aug 2016 16:29:46 -0400
Subject: [PATCH 12/26] add SVGs for tab icons

---
 static/svgs/tabs/projects-active.svg   | 1 +
 static/svgs/tabs/projects-inactive.svg | 1 +
 static/svgs/tabs/studios-active.svg    | 1 +
 static/svgs/tabs/studios-inactive.svg  | 1 +
 4 files changed, 4 insertions(+)
 create mode 100644 static/svgs/tabs/projects-active.svg
 create mode 100644 static/svgs/tabs/projects-inactive.svg
 create mode 100644 static/svgs/tabs/studios-active.svg
 create mode 100644 static/svgs/tabs/studios-inactive.svg

diff --git a/static/svgs/tabs/projects-active.svg b/static/svgs/tabs/projects-active.svg
new file mode 100644
index 000000000..3738946b1
--- /dev/null
+++ b/static/svgs/tabs/projects-active.svg
@@ -0,0 +1 @@
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><title>Icons</title><path d="M13.39,3.29V9.4a0.41,0.41,0,0,1-.14.31,4.18,4.18,0,0,1-5.51,0,3.42,3.42,0,0,0-2.23-.84,3.35,3.35,0,0,0-2.07.72v4.05a0.42,0.42,0,1,1-.84,0V3.29A0.41,0.41,0,0,1,2.87,2.9,4.17,4.17,0,0,1,8.27,3a3.39,3.39,0,0,0,4.45,0,0.39,0.39,0,0,1,.43-0.06A0.4,0.4,0,0,1,13.39,3.29Z" fill="#26d9bb" stroke="#22b296" stroke-linecap="round" stroke-linejoin="round"/></svg>
\ No newline at end of file
diff --git a/static/svgs/tabs/projects-inactive.svg b/static/svgs/tabs/projects-inactive.svg
new file mode 100644
index 000000000..c86555b0c
--- /dev/null
+++ b/static/svgs/tabs/projects-inactive.svg
@@ -0,0 +1 @@
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><title>Icons</title><path d="M13.39,3.29V9.4a0.41,0.41,0,0,1-.14.31,4.18,4.18,0,0,1-5.51,0,3.42,3.42,0,0,0-2.23-.84,3.35,3.35,0,0,0-2.07.72v4.05a0.42,0.42,0,1,1-.84,0V3.29A0.41,0.41,0,0,1,2.87,2.9,4.17,4.17,0,0,1,8.27,3a3.39,3.39,0,0,0,4.45,0,0.39,0.39,0,0,1,.43-0.06A0.4,0.4,0,0,1,13.39,3.29Z" fill="none" stroke="#6b6b6b" stroke-linecap="round" stroke-linejoin="round"/></svg>
\ No newline at end of file
diff --git a/static/svgs/tabs/studios-active.svg b/static/svgs/tabs/studios-active.svg
new file mode 100644
index 000000000..71e9fac64
--- /dev/null
+++ b/static/svgs/tabs/studios-active.svg
@@ -0,0 +1 @@
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><title>Icons</title><polyline points="6.88 12.46 6.88 12.46 13.58 12.46 13.58 8 13.58 8" fill="none" stroke="#22b296" stroke-linecap="round" stroke-linejoin="round"/><polyline points="4.65 10.23 4.65 10.23 11.35 10.23 11.35 5.77 11.35 5.77" fill="none" stroke="#22b296" stroke-linecap="round" stroke-linejoin="round"/><rect x="2.42" y="3.54" width="6.69" height="4.46" transform="translate(11.54 11.54) rotate(-180)" fill="#26d9bb" stroke="#22b296" stroke-linecap="round" stroke-linejoin="round"/></svg>
\ No newline at end of file
diff --git a/static/svgs/tabs/studios-inactive.svg b/static/svgs/tabs/studios-inactive.svg
new file mode 100644
index 000000000..241faf900
--- /dev/null
+++ b/static/svgs/tabs/studios-inactive.svg
@@ -0,0 +1 @@
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><title>Icons</title><polyline points="4.65 10.23 4.65 10.23 11.35 10.23 11.35 5.77 11.35 5.77" fill="none" stroke="#6b6b6b" stroke-linecap="round" stroke-linejoin="round"/><rect x="2.42" y="3.54" width="6.69" height="4.46" transform="translate(11.54 11.54) rotate(-180)" fill="none" stroke="#6b6b6b" stroke-linecap="round" stroke-linejoin="round"/><polyline points="6.88 12.46 6.88 12.46 13.58 12.46 13.58 8 13.58 8" fill="none" stroke="#6b6b6b" stroke-linecap="round" stroke-linejoin="round"/></svg>
\ No newline at end of file

From 3fa6fa95fd6c124423d13f1155b3d426e45d009c Mon Sep 17 00:00:00 2001
From: Technoboy10 <technoboy10@fake.email>
Date: Fri, 12 Aug 2016 16:30:18 -0400
Subject: [PATCH 13/26] add card display to grid and thumbnail components

---
 src/components/grid/grid.jsx            | 19 +++--------
 src/components/grid/grid.scss           | 16 +++++++--
 src/components/thumbnail/thumbnail.jsx  | 45 ++++++++++++++-----------
 src/components/thumbnail/thumbnail.scss |  8 +++--
 4 files changed, 50 insertions(+), 38 deletions(-)

diff --git a/src/components/grid/grid.jsx b/src/components/grid/grid.jsx
index 292cd416b..6764484f5 100644
--- a/src/components/grid/grid.jsx
+++ b/src/components/grid/grid.jsx
@@ -4,7 +4,6 @@ var React = require('react');
 var Thumbnail = require('../thumbnail/thumbnail.jsx');
 var FlexRow = require('../flex-row/flex-row.jsx');
 
-var api = require('../../lib/api');
 require('./grid.scss');
 
 var Grid = React.createClass({
@@ -13,7 +12,7 @@ var Grid = React.createClass({
         return {
             items: require('./grid.json'),
             itemType: 'projects',
-            explore: false,
+            cards: false,
             showLoves: false,
             showFavorites: false,
             showRemixes: false,
@@ -21,15 +20,6 @@ var Grid = React.createClass({
             showAvatar: false
         };
     },
-    getAvatar: function (username) {
-        var url = '';
-        api({
-            uri: '/users/' + username
-        }, function (err, body) {
-            this.url = body.profile.images['32x32'];
-        }.bind(this));
-        console.log(url);
-    },
     render: function () {
         var classes = classNames(
             'grid',
@@ -44,7 +34,7 @@ var Grid = React.createClass({
                         if (this.props.itemType == 'projects') {
                             return (
                                 <Thumbnail key={item.id}
-                                           explore={this.props.explore}
+                                           cards={this.props.cards}
                                            showLoves={this.props.showLoves}
                                            showFavorites={this.props.showFavorites}
                                            showRemixes={this.props.showRemixes}
@@ -54,7 +44,8 @@ var Grid = React.createClass({
                                            href={href}
                                            title={item.title}
                                            src={item.image}
-                                           avatar={this.getAvatar(item.author.username)}
+                                           avatar={'https://cdn2.scratch.mit.edu/get_image/user/'
+                                               + item.author.id + '_32x32.png'}
                                            creator={item.author.username}
                                            loves={item.stats.loves}
                                            favorites={item.stats.favorites}
@@ -65,7 +56,7 @@ var Grid = React.createClass({
                         else {
                             return (
                                 <Thumbnail key={item.id}
-                                           explore={this.props.explore}
+                                           cards={this.props.cards}
                                            type={'gallery'}
                                            href={href}
                                            title={item.title}
diff --git a/src/components/grid/grid.scss b/src/components/grid/grid.scss
index dba1a2cb9..cd18c2c13 100644
--- a/src/components/grid/grid.scss
+++ b/src/components/grid/grid.scss
@@ -21,7 +21,7 @@
     .thumbnail {
         padding: 12px;
 
-        &:not(.explore) {
+        &:not(.cards) {
             &.project {
                 width: $project-width;
 
@@ -41,7 +41,7 @@
             }
         }
 
-        &.explore {
+        &.cards {
             &.project {
                 box-shadow: 0 0 3px $box-shadow-gray;
                 background-color: $ui-white;
@@ -53,6 +53,18 @@
                     height: 152px;
                 }
             }
+
+            &.gallery {
+                box-shadow: 0 0 3px $box-shadow-gray;
+                background-color: $ui-white;
+                width: 220px;
+                height: 164px;
+
+                img {
+                    width: 204px;
+                    height: 120px;
+                }
+            }
         }
     }
 
diff --git a/src/components/thumbnail/thumbnail.jsx b/src/components/thumbnail/thumbnail.jsx
index b9d8513a9..8e4ac7a01 100644
--- a/src/components/thumbnail/thumbnail.jsx
+++ b/src/components/thumbnail/thumbnail.jsx
@@ -21,7 +21,7 @@ var Thumbnail = React.createClass({
             showViews: false,
             showAvatar: false,
             linkTitle: true,
-            explore: false,
+            cards: false,
             alt: ''
         };
     },
@@ -30,23 +30,11 @@ var Thumbnail = React.createClass({
             'thumbnail',
             this.props.type,
             this.props.className,
-            {'explore': this.props.explore}
+            {'cards': this.props.cards}
         );
         var extra = [];
-        if (this.props.avatar && this.props.showAvatar) {
-            extra.push(
-                <a className="creator-image" href={'/users/' + this.props.creator + '/'}>
-                    <img src={this.props.avatar} alt={this.props.creator} />
-                </a>
-            );
-        }
-        if (this.props.creator) {
-            extra.push(
-                <div key="creator" className="thumbnail-creator">
-                    <a href={'/users/' + this.props.creator + '/'}>{this.props.creator}</a>
-                </div>
-            );
-        }
+        var info = [];
+
         if (this.props.loves && this.props.showLoves) {
             extra.push(
                 <div
@@ -87,7 +75,7 @@ var Thumbnail = React.createClass({
                 </div>
             );
         }
-        var imgElement,titleElement;
+        var imgElement,titleElement,avatarElement;
         if (this.props.linkTitle) {
             imgElement = <a className="thumbnail-image" href={this.props.href}>
                              <img src={this.props.src} alt={this.props.alt} />
@@ -98,11 +86,30 @@ var Thumbnail = React.createClass({
             titleElement = this.props.title;
         }
 
+        info.push(titleElement);
+
+        if (this.props.creator) {
+            info.push(
+                <div key="creator" className="thumbnail-creator">
+                    <a href={'/users/' + this.props.creator + '/'}>{this.props.creator}</a>
+                </div>
+            );
+        }
+
+        if (this.props.avatar && this.props.showAvatar) {
+            avatarElement =
+                <a className="creator-image" href={'/users/' + this.props.creator + '/'}>
+                    <img src={this.props.avatar} alt={this.props.creator} />
+                </a>;
+        }
         return (
             <div className={classes} >
                 {imgElement}
-                <div className="thumbnail-title">
-                    {titleElement}
+                <div className="thumbnail-info">
+                    {avatarElement}
+                    <div className="thumbnail-title">
+                        {info}
+                    </div>
                 </div>
                 {extra}
             </div>
diff --git a/src/components/thumbnail/thumbnail.scss b/src/components/thumbnail/thumbnail.scss
index f119b78ec..f731449ab 100644
--- a/src/components/thumbnail/thumbnail.scss
+++ b/src/components/thumbnail/thumbnail.scss
@@ -90,9 +90,11 @@
         $project-height: 108px;
         width: $project-width;
 
-        img {
-            width: $project-width;
-            height: $project-height;
+        .thumbnail-image {
+            img {
+                width: $project-width;
+                height: $project-height;
+            }
         }
     }
 

From 017df9da20863c975d96c3aa431fb093e989cc7c Mon Sep 17 00:00:00 2001
From: Technoboy10 <technoboy10@fake.email>
Date: Fri, 12 Aug 2016 16:30:33 -0400
Subject: [PATCH 14/26] redo tabs component

---
 src/components/tabs/tabs.jsx  |  8 +++--
 src/components/tabs/tabs.scss | 64 ++++++++++++++++++++---------------
 2 files changed, 42 insertions(+), 30 deletions(-)

diff --git a/src/components/tabs/tabs.jsx b/src/components/tabs/tabs.jsx
index 814a3e02e..dd816c1ac 100644
--- a/src/components/tabs/tabs.jsx
+++ b/src/components/tabs/tabs.jsx
@@ -16,9 +16,11 @@ var Tabs = React.createClass({
             this.props.className
         );
         return (
-            <SubNavigation className={classes}>
-                {this.props.children}
-            </SubNavigation>
+            <div className='tab-background'>
+                <SubNavigation className={classes}>
+                    {this.props.children}
+                </SubNavigation>
+            </div>
         );
     }
 });
diff --git a/src/components/tabs/tabs.scss b/src/components/tabs/tabs.scss
index 3d3939717..303708f45 100644
--- a/src/components/tabs/tabs.scss
+++ b/src/components/tabs/tabs.scss
@@ -1,38 +1,48 @@
 @import "../../colors";
+@import "../../frameless";
 
 .tabs {
-    background-color:  $ui-gray;
-    padding: 0 0 0 20px;
-    width: calc(100% - 20px);
-    justify-content: flex-start;
+    background-color:  $ui-white;
+    padding: 0;
+    width: $cols12;
+    justify-content: center;
 }
 
 .tabs li {
-    opacity: .75;
-    margin-bottom: -4px;
-    border-top-left-radius: 10px;
-    border-top-right-radius: 10px;
-    border-bottom-left-radius: 0;
-    border-bottom-right-radius: 0;
-    background-color: $ui-white;
+    margin: 0;
+    border: 0;
+    border-radius: 0;
+    width: $cols2;
+    text-align: center;
     color: $header-gray;
-    
+
+    &.active {
+        border-bottom: 3px solid $ui-aqua;
+
+        &:hover {
+            color: $header-gray;
+        }
+    }
+
+    &:active {
+        box-shadow: none;
+        padding: .75em 1.5em;
+    }
+
+    &.inactive {
+        &:hover {
+            border-bottom: 3px solid $active-dark-gray;
+        }
+    }
+
+    .tab-icon {
+        display: block;
+        margin: 0 auto;
+        margin-bottom: 4px;
+        width: 24px;
+    }
+
     &:hover {
-        opacity: 1;
-        border-color: $active-gray;
-        background-color: $ui-white;
-        color: $header-gray;
-    }
-}
-
-
-.tabs li.active {
-    opacity: 1;
-    border-bottom: 4px solid $ui-white;
-
-    &:hover {
-        opacity: 1;
-        border-bottom: 4px solid $ui-white;
         background-color: $ui-white;
         color: $header-gray;
     }

From 4d0efd1268374325d08f5e77b1d70b435a545413 Mon Sep 17 00:00:00 2001
From: Technoboy10 <technoboy10@fake.email>
Date: Fri, 12 Aug 2016 16:30:52 -0400
Subject: [PATCH 15/26] explore redesign

---
 src/views/explore/explore.jsx  |  78 +++++++-----
 src/views/explore/explore.scss | 212 +++++++++++++++++++++++----------
 2 files changed, 203 insertions(+), 87 deletions(-)

diff --git a/src/views/explore/explore.jsx b/src/views/explore/explore.jsx
index 2812063e8..3a17a8ae5 100644
--- a/src/views/explore/explore.jsx
+++ b/src/views/explore/explore.jsx
@@ -9,6 +9,9 @@ var api = require('../../lib/api');
 var Page = require('../../components/page/www/page.jsx');
 var Tabs = require('../../components/tabs/tabs.jsx');
 var TitleBanner = require('../../components/title-banner/title-banner.jsx');
+var Button = require('../../components/forms/button.jsx');
+var Form = require('../../components/forms/form.jsx');
+var Select = require('../../components/forms/select.jsx');
 var SubNavigation = require('../../components/subnavigation/subnavigation.jsx');
 var Grid = require('../../components/grid/grid.jsx');
 
@@ -27,16 +30,19 @@ var Explore = injectIntl(React.createClass({
             stories: 'stories'
         };
         var typeOptions = ['projects','studios'];
+        var modeOptions = ['trending', 'popular', 'recent', ''];
 
         var pathname = window.location.pathname.toLowerCase();
         if (pathname[pathname.length - 1] === '/') {
             pathname = pathname.substring(0, pathname.length - 1);
         }
-        var slash = pathname.lastIndexOf('/');
-        var currentCategory = pathname.substring(slash + 1,pathname.length);
-        var typeStart = pathname.indexOf('explore/');
-        var type = pathname.substring(typeStart + 8,slash);
-        if (Object.keys(categoryOptions).indexOf(currentCategory) === -1 || typeOptions.indexOf(type) === -1) {
+        var options = pathname.split('/');
+        var type = options[2];
+        var currentCategory = options[3];
+        var currentMode = options.length > 4 ? options[4] : '';
+        if (Object.keys(categoryOptions).indexOf(currentCategory) === -1 ||
+        typeOptions.indexOf(type) === -1 ||
+        modeOptions.indexOf(currentMode) === -1){
             window.location = window.location.origin + '/explore/projects/all/';
         }
 
@@ -44,7 +50,9 @@ var Explore = injectIntl(React.createClass({
             category: currentCategory,
             acceptableTabs: categoryOptions,
             acceptableTypes: typeOptions,
+            acceptableModes: modeOptions,
             itemType: type,
+            mode: currentMode,
             loadNumber: 16
         };
     },
@@ -65,6 +73,7 @@ var Explore = injectIntl(React.createClass({
                  '?limit=' + this.props.loadNumber +
                  '&offset=' + this.state.offset +
                  '&language=' + this.props.intl.locale +
+                 '&mode=' + (this.props.mode ? this.props.mode : 'trending') +
                  qText
         }, function (err, body) {
             if (!err) {
@@ -84,14 +93,20 @@ var Explore = injectIntl(React.createClass({
                 break;
             }
         }
-        window.location = window.location.origin + '/explore/' + newType + '/' + this.props.tab;
+        window.location = window.location.origin + '/explore/' + newType + '/' + this.props.tab + '/' + this.props.mode;
+    },
+    changeSortMode: function (name, value) {
+        if (this.props.acceptableModes.indexOf(value) !== -1) {
+            window.location = window.location.origin + '/explore/' +
+            this.props.itemType + '/' + this.props.category + '/' + value;
+        }
     },
     getBubble: function (type) {
         var classes = classNames({
             active: (this.props.category === type)
         });
         return (
-            <a href={'/explore/' + this.props.itemType + '/' + type + '/'}>
+            <a href={'/explore/' + this.props.itemType + '/' + type + '/' + this.props.mode}>
                 <li className={classes}>
                     <FormattedMessage id={'general.' + type} />
                 </li>
@@ -100,15 +115,16 @@ var Explore = injectIntl(React.createClass({
     },
     getTab: function (type) {
         var classes = classNames({
-            active: (this.props.itemType === type)
+            active: (this.props.itemType === type),
+            inactive: (this.props.itemType !== type)
         });
         return (
-            <a href={'/explore/' + type + '/' + this.props.category + '/'}>
+            <a href={'/explore/' + type + '/' + this.props.category + '/' + this.props.mode}>
                 <li className={classes}>
                     {this.props.itemType === type ? [
-                        <img src={'/svgs/explore/' + type + '-active.svg'} className={'tab-icon ' + type} />
+                        <img src={'/svgs/tabs/' + type + '-active.svg'} className={'tab-icon ' + type} />
                     ] : [
-                        <img src={'/svgs/explore/' + type + '-inactive.svg'} className={'tab-icon ' + type} />
+                        <img src={'/svgs/tabs/' + type + '-inactive.svg'} className={'tab-icon ' + type} />
                     ]}
                     <FormattedMessage id={'general.' + type} />
                 </li>
@@ -130,29 +146,37 @@ var Explore = injectIntl(React.createClass({
                         {this.getTab('projects')}
                         {this.getTab('studios')}
                     </Tabs>
-                    <SubNavigation className='categories'>
-                        {this.getBubble('all')}
-                        {this.getBubble('animations')}
-                        {this.getBubble('art')}
-                        {this.getBubble('games')}
-                        {this.getBubble('music')}
-                        {this.getBubble('stories')}
-                    </SubNavigation>
+                    <div className="sort-controls">
+                        <SubNavigation className='categories'>
+                            {this.getBubble('all')}
+                            {this.getBubble('animations')}
+                            {this.getBubble('art')}
+                            {this.getBubble('games')}
+                            {this.getBubble('music')}
+                            {this.getBubble('stories')}
+                        </SubNavigation>
+                        <Form className='sort-mode'>
+                            <Select name="sort"
+                                    options={[
+                                        {value: 'trending', label: 'Trending'},
+                                        {value: 'popular', label: 'Popular'},
+                                        {value: 'recent', label: 'Recent'}
+                                    ]}
+                                    value={this.props.mode}
+                                    onChange={this.changeSortMode}/>
+                        </Form>
+                    </div>
                     <div id='projectBox' key='projectBox'>
                         <Grid items={this.state.loaded}
                               itemType={this.props.itemType}
-                              explore={true}
+                              cards={true}
                               showLoves={false}
                               showFavorites={false}
                               showViews={false}
                               showAvatar={true}/>
-                        <SubNavigation className='load'>
-                            <button onClick={this.getExploreMore}>
-                                <li>
-                                    <FormattedMessage id='general.loadMore' />
-                                </li>
-                            </button>
-                        </SubNavigation>
+                          <Button onClick={this.getExploreMore} className="white">
+                            <FormattedMessage id='general.loadMore' />
+                        </Button>
                     </div>
                 </div>
             </div>
diff --git a/src/views/explore/explore.scss b/src/views/explore/explore.scss
index 5ec9342a1..1fcc33936 100644
--- a/src/views/explore/explore.scss
+++ b/src/views/explore/explore.scss
@@ -35,111 +35,103 @@ $base-bg: $ui-white;
         }
     }
 
-    .box {
-        display: block;
+    .left-pusher {
         margin-right: auto;
-        margin-bottom: 20px;
-        margin-left: auto;
-
-        .box-content {
-            padding: 0;
-        }
+        width: 8.75rem;
     }
 
     .tab-background {
-        box-shadow: 1px 0 1px $box-shadow-gray;
+        box-shadow: 0 0 1px $box-shadow-gray;
         background-color: $ui-white;
         width: 100%;
     }
 
     .tabs {
-        background-color: $ui-white;
-        padding: 0;
-        width: 100%;
-        justify-content: center;
+        width: 58.75rem;
+    }
 
-        li {
-            margin: 0;
-            border: 0;
-            border-radius: 0;
-            width: $cols2;
-            text-align: center;
+    /* HACK: sort controls are terrible. There's some sort of magic formula for height of formsy components that I can't control. */
 
-            &.active {
-                border-bottom: 3px solid $ui-aqua;
+    .sort-controls {
+        display: flex;
+        margin: 0 auto;
+        border-bottom: 1px solid $ui-border;
+        padding: 8px 0;
+        width: 58.75rem;
+        justify-content: space-between;
+    }
+
+    .sort-mode {
+        margin-top: -4px;
+        width: 13.75rem;
+
+        .select {
+
+            select {
+                margin-bottom: 0;
+                border: 0;
+                background-color: transparent;
+                height: 32px;
+                color: $header-gray;
+
+                &:focus,
+                &:active {
+                    background-color: transparent;
+                }
             }
 
-            &:active {
-                box-shadow: none;
-                padding: .75em 1.5em;
-            }
-
-            .tab-icon {
-                display: block;
-                margin: 0 auto;
-
-                &.projects {
-                    margin-bottom: 4px;
-                    width: 20px;
-                }
-
-                &.studios {
-                    width: 24px;
-                }
+            .help-block {
+                display: none;
             }
         }
     }
 
     .categories {
-        border-bottom: 1px solid $ui-border;
-        padding: 8px 0;
-        width: 58.75rem;
-        justify-content: center;
+        justify-content: flex-start;
 
         li {
             border: 0;
-            background-color: $ui-dark-gray;
-            color: $ui-light-gray;
+            background-color: $active-gray;
+            color: $ui-white;
 
             &.active {
                 opacity: 1;
                 background-color: $ui-aqua;
                 color: $ui-white;
+
             }
 
             &:active {
                 padding: .75em 1.5em;
             }
+
+            &:hover {
+                background-color: $active-dark-gray;
+            }
         }
     }
 
     #projectBox {
         background-color: $ui-gray;
-        padding-top: 8px;
+        padding-top: 16px;
         padding-bottom: 32px;
         width: 100%;
 
         .grid .flex-row {
             width: $cols12;
-            justify-content: space-around;
+            justify-content: space-between;
+        }
+
+        .button {
+            display: block;
+            margin: 0 auto;
         }
     }
 
-    .load button {
-        outline: None;
-        border: None;
-        background-color: $ui-gray;
-        padding: 0;
-
-        li {
-            color: $header-gray;
-        }
-    }
 
     .thumbnail {
         $project-width: 220px;
         $project-height: 208px;
-        margin-left: 8px;
         padding: 0;
 
         &.project {
@@ -158,11 +150,111 @@ $base-bg: $ui-white;
                     border-radius: 4px;
                 }
             }
+        }
 
-            .thumbnail-title,
-            .thumbnail-creator {
-                margin: 0 auto;
+        &.gallery {
+            margin-bottom: 16px;
+            border-radius: 4px;
+            width: $project-width;
+            height: $project-height;
+
+            .thumbnail-image {
+                margin: 8px auto;
                 width: 204px;
+                height: 120px;
+
+                img {
+                    border: 0;
+                    border-radius: 4px;
+                }
+            }
+        }
+
+        .thumbnail-info {
+            margin: 0 auto;
+            width: 204px;
+
+            .creator-image {
+                float: left;
+
+                img {
+                    margin-right: 8px;
+                    border-radius: 4px;
+                    width: 32px;
+                    height: 32px;
+                }
+            }
+
+            .thumbnail-title {
+                float: left;
+                max-width: 164px;
+
+                .thumbnail-creator a {
+                    color: $type-gray;
+                }
+            }
+        }
+    }
+}
+
+//4 columns
+@media only screen and (max-width: $mobile - 1) {
+    .outer {
+        .tabs {
+            width: $cols4;
+        }
+
+        .sort-controls {
+            width: $cols4;
+        }
+
+        #projectBox {
+            .grid {
+                .flex-row {
+                    width: $cols4;
+                }
+            }
+        }
+    }
+}
+
+//6 columns
+@media only screen and (min-width: $mobile) and (max-width: $tablet - 1) {
+    .outer {
+        .tabs {
+            width: $cols6;
+        }
+
+        .sort-controls {
+            width: $cols6;
+        }
+
+        #projectBox {
+            .grid {
+                .flex-row {
+                    width: $cols6;
+                }
+            }
+        }
+    }
+}
+
+// 8 columns
+@media only screen and (min-width: $tablet) and (max-width: $desktop - 1) {
+    .outer {
+        .tabs {
+            width: $cols8;
+        }
+
+        .sort-controls {
+            width: $cols8;
+        }
+
+        #projectBox {
+            .grid {
+                .flex-row {
+                    width: $cols9;
+                }
             }
         }
     }

From 647c925a1c1d6ee433b29d6cd6ddc6b6efa0b396 Mon Sep 17 00:00:00 2001
From: Technoboy10 <technoboy10@fake.email>
Date: Fri, 12 Aug 2016 16:31:09 -0400
Subject: [PATCH 16/26] search redesign

---
 src/views/search/search.jsx  |  57 ++++---
 src/views/search/search.scss | 279 ++++++++++++++++++++++++++++++++---
 2 files changed, 298 insertions(+), 38 deletions(-)

diff --git a/src/views/search/search.jsx b/src/views/search/search.jsx
index c517b739f..66031db6b 100644
--- a/src/views/search/search.jsx
+++ b/src/views/search/search.jsx
@@ -6,8 +6,10 @@ var render = require('../../lib/render.jsx');
 var api = require('../../lib/api');
 
 var Page = require('../../components/page/www/page.jsx');
-var Box = require('../../components/box/box.jsx');
-var SubNavigation = require('../../components/subnavigation/subnavigation.jsx');
+var TitleBanner = require('../../components/title-banner/title-banner.jsx');
+var Form = require('../../components/forms/form.jsx');
+var Input = require('../../components/forms/input.jsx');
+var Button = require('../../components/forms/button.jsx');
 var Tabs = require('../../components/tabs/tabs.jsx');
 var Grid = require('../../components/grid/grid.jsx');
 
@@ -62,6 +64,7 @@ var Search = injectIntl(React.createClass({
                  '?limit=' + this.props.loadNumber +
                  '&offset=' + this.state.offset +
                  '&language=' + this.props.intl.locale +
+                 '&mode=popular' +
                  termText
         }, function (err, body) {
             var loadedSoFar = this.state.loaded;
@@ -71,16 +74,21 @@ var Search = injectIntl(React.createClass({
             this.setState({offset: currentOffset});
         }.bind(this));
     },
+    onSearchSubmit: function (formData) {
+        window.location.href = '/search/projects?q=' + formData.q;
+    },
     getTab: function (type) {
         var term = this.props.searchTerm.split(' ').join('+');
         var allTab = <a href={'/search/' + type + '?q=' + term + '/'}>
-                        <li>
+                        <li className='inactive'>
+                            <img src={'/svgs/tabs/' + type + '-inactive.svg'} className={'tab-icon ' + type} />
                             <FormattedMessage id={'general.' + type} />
                         </li>
                     </a>;
         if (this.props.tab == type) {
             allTab = <a href={'/search/' + type + '?q=' + term + '/'}>
                         <li className='active'>
+                            <img src={'/svgs/tabs/' + type + '-active.svg'} className={'tab-icon ' + type} />
                             <FormattedMessage id={'general.' + type} />
                         </li>
                     </a>;
@@ -89,32 +97,41 @@ var Search = injectIntl(React.createClass({
     },
     render: function () {
         var formatMessage = this.props.intl.formatMessage;
-        
+
         return (
             <div>
                 <div className='outer'>
-                    <Box title={formatMessage({id: 'general.results'}) + ':'}
-                         subtitle={this.props.searchTerm}
-                         moreProps={{className: 'subnavigation'}}>
+                        <TitleBanner className="masthead">
+                            <div className="inner">
+                                <h1>Search</h1>
+                                <div className="search">
+                                    <Form onSubmit={this.onSearchSubmit}>
+                                        <Button type="submit" className="btn-search" />
+                                        <Input type="text"
+                                               aria-label={formatMessage({id: 'general.search'})}
+                                               placeholder={formatMessage({id: 'general.search'})}
+                                               defaultValue={decodeURI(this.props.searchTerm)}
+                                               name="q" />
+                                    </Form>
+                                </div>
+                            </div>
+                        </TitleBanner>
                         <Tabs>
                             {this.getTab('projects')}
                             {this.getTab('studios')}
                         </Tabs>
                         <div id='projectBox' key='projectBox'>
-                            <Grid items={this.state.loaded}
-                                  itemType={this.props.tab}
-                                  showLoves={false}
-                                  showFavorites={false}
-                                  showViews={false} />
-                            <SubNavigation className='load'>
-                                <button onClick={this.getSearchMore}>
-                                    <li>
-                                        <FormattedMessage id='general.loadMore' />
-                                    </li>
-                                </button>
-                            </SubNavigation>
+                        <Grid items={this.state.loaded}
+                              itemType={this.props.tab}
+                              cards={true}
+                              showAvatar={true}
+                              showLoves={false}
+                              showFavorites={false}
+                              showViews={false} />
+                         <Button onClick={this.getSearchMore} className="white">
+                            <FormattedMessage id='general.loadMore' />
+                        </Button>
                         </div>
-                    </Box>
                 </div>
             </div>
         );
diff --git a/src/views/search/search.scss b/src/views/search/search.scss
index 49752fb82..888d2de38 100644
--- a/src/views/search/search.scss
+++ b/src/views/search/search.scss
@@ -4,33 +4,276 @@
 $base-bg: $ui-white;
 
 #view {
-    .box {
-        display: block;
-        margin-right: auto;
-        margin-bottom: 20px;
-        margin-left: auto;
+    background-color: $ui-gray;
+    padding: 0;
+}
 
-        .box-content {
+.outer {
+    .title-banner {
+        &.masthead {
+            margin-bottom: 0;
+            background-color: darken($ui-blue, 10%);
             padding: 0;
-        }
-    }   
 
-    #projectBox {
-        border-top: 2px solid;
-        border-color: $active-gray;
+            h1 {
+                text-align: center;
+                color: $ui-white;
+                font-size: 3rem;
+            }
+
+            p {
+                margin: 0;
+                width: $cols6;
+                text-align: left;
+                color: $ui-white;
+
+                a {
+                    border-bottom: 1px solid $ui-white;
+                    color: $ui-white;
+                }
+            }
+        }
+    }
+
+    .search {
+        margin: 0 auto;
+        border-right: 0;
+        width: $cols6;
+        color: $type-white;
+
+        .form {
+            margin: 0;
+        }
+
+        .row {
+            .help-block {
+                display: none;
+            }
+        }
+
+        .input,
+        .button {
+            display: inline-block;
+            margin-top: 5px;
+            outline: none;
+            border: 0;
+            background-color: $active-gray;
+            height: 14px;
+
+            &[type=text] {
+                transition: .15s ease background-color;
+                padding: 0;
+                padding-right: 10px;
+                padding-left: 40px;
+                width: calc(100% - 50px);
+                height: 40px;
+                color: $type-white;
+                font-size: .85em;
+
+                &::placeholder {
+                    $placeholder-transparent: rgba(255, 255, 255, .75);
+                    color: $placeholder-transparent;
+                }
+
+                &:focus {
+                    transition: .15s ease background-color;
+                    background-color: $active-dark-gray;
+                }
+
+                .ie9 & {
+                    width: 70px;
+                }
+            }
+        }
+
+        .btn-search {
+            position: absolute;
+
+            box-shadow: none;
+            background-color: transparent;
+            background-image: url("/images/nav-search-glass.png");
+            background-repeat: no-repeat;
+            background-position: center center;
+            background-size: 14px 14px;
+
+            width: 40px;
+            height: 40px;
+
+            &:hover {
+                box-shadow: none;
+            }
+        }
+    }
+
+    .select {
+        select {
+            margin-bottom: 0;
+            color: $header-gray;
+        }
+
+        .help-block {
+            display: none;
+        }
+    }
+
+    .tab-background {
+        box-shadow: 0 0 1px $box-shadow-gray;
         background-color: $ui-white;
-        padding-bottom: 30px;
         width: 100%;
     }
 
-    .load button {
-        outline: None;
-        border: None;
-        background-color: $ui-white;
+    #projectBox {
+        margin-top: 16px;
+        background-color: $ui-gray;
+        padding-bottom: 32px;
+        width: 100%;
+
+        .grid .flex-row {
+            width: $cols12;
+            justify-content: space-between;
+        }
+
+        .button {
+            display: block;
+            margin: 0 auto;
+        }
+    }
+
+
+    .thumbnail {
+        $project-width: 220px;
+        $project-height: 208px;
         padding: 0;
 
-        li {
-            color: $header-gray;
+        &.project {
+            margin-bottom: 16px;
+            border-radius: 4px;
+            width: $project-width;
+            height: $project-height;
+
+            .thumbnail-image {
+                margin: 8px auto;
+                width: 204px;
+                height: 152px;
+
+                img {
+                    border: 0;
+                    border-radius: 4px;
+                }
+            }
+        }
+
+        &.gallery {
+            margin-bottom: 16px;
+            border-radius: 4px;
+            width: $project-width;
+            height: $project-height;
+
+            .thumbnail-image {
+                margin: 8px auto;
+                width: 204px;
+                height: 120px;
+
+                img {
+                    border: 0;
+                    border-radius: 4px;
+                }
+            }
+        }
+
+        .thumbnail-info {
+            margin: 0 auto;
+            width: 204px;
+
+            .creator-image {
+                float: left;
+
+                img {
+                    margin-right: 8px;
+                    border-radius: 4px;
+                    width: 32px;
+                    height: 32px;
+                }
+            }
+
+            .thumbnail-title {
+                float: left;
+                max-width: 164px;
+
+                .thumbnail-creator a {
+                    color: $type-gray;
+                }
+            }
+        }
+    }
+}
+
+//4 columns
+@media only screen and (max-width: $mobile - 1) {
+    .outer {
+        .search {
+            .btn-search {
+                left: 40px;
+            }
+        }
+
+        .tabs {
+            width: $cols4;
+        }
+
+        .sort-controls {
+            width: $cols4;
+        }
+
+        #projectBox {
+            .grid {
+                .flex-row {
+                    width: $cols4;
+                }
+            }
+        }
+    }
+}
+
+
+//6 columns
+@media only screen and (min-width: $mobile) and (max-width: $tablet - 1) {
+    .outer {
+        .tabs {
+            width: $cols6;
+        }
+
+        .sort-controls {
+            width: $cols6;
+        }
+
+        #projectBox {
+            .grid {
+                .flex-row {
+                    width: $cols6;
+                }
+            }
+        }
+    }
+}
+
+// 8 columns
+@media only screen and (min-width: $tablet) and (max-width: $desktop - 1) {
+    .outer {
+        .tabs {
+            width: $cols8;
+        }
+
+        .sort-controls {
+            width: $cols8;
+        }
+
+        #projectBox {
+            .grid {
+                .flex-row {
+                    width: $cols9;
+                }
+            }
         }
     }
 }

From 6394d3e8cf0b7461792955606f715ac3d6b4431f Mon Sep 17 00:00:00 2001
From: Technoboy10 <technoboy10@fake.email>
Date: Tue, 16 Aug 2016 19:19:01 -0600
Subject: [PATCH 17/26] make search bar on 4 column layout look right

---
 src/views/search/search.scss | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/views/search/search.scss b/src/views/search/search.scss
index 888d2de38..032c3b43b 100644
--- a/src/views/search/search.scss
+++ b/src/views/search/search.scss
@@ -212,6 +212,8 @@ $base-bg: $ui-white;
 @media only screen and (max-width: $mobile - 1) {
     .outer {
         .search {
+            width: $cols4;
+
             .btn-search {
                 left: 40px;
             }

From f27e99f1a4afa34d61091f044051d494a802cc5d Mon Sep 17 00:00:00 2001
From: Technoboy10 <technoboy10@fake.email>
Date: Mon, 22 Aug 2016 11:21:08 -0600
Subject: [PATCH 18/26] move card styling to grid.scss, use card as default
 grid style

---
 src/components/grid/grid.jsx           |   3 -
 src/components/grid/grid.scss          | 118 ++++++++++++++++---------
 src/components/thumbnail/thumbnail.jsx |   4 +-
 src/views/explore/explore.scss         |  95 --------------------
 src/views/search/search.scss           |  97 --------------------
 5 files changed, 76 insertions(+), 241 deletions(-)

diff --git a/src/components/grid/grid.jsx b/src/components/grid/grid.jsx
index 6764484f5..93572840d 100644
--- a/src/components/grid/grid.jsx
+++ b/src/components/grid/grid.jsx
@@ -12,7 +12,6 @@ var Grid = React.createClass({
         return {
             items: require('./grid.json'),
             itemType: 'projects',
-            cards: false,
             showLoves: false,
             showFavorites: false,
             showRemixes: false,
@@ -34,7 +33,6 @@ var Grid = React.createClass({
                         if (this.props.itemType == 'projects') {
                             return (
                                 <Thumbnail key={item.id}
-                                           cards={this.props.cards}
                                            showLoves={this.props.showLoves}
                                            showFavorites={this.props.showFavorites}
                                            showRemixes={this.props.showRemixes}
@@ -56,7 +54,6 @@ var Grid = React.createClass({
                         else {
                             return (
                                 <Thumbnail key={item.id}
-                                           cards={this.props.cards}
                                            type={'gallery'}
                                            href={href}
                                            title={item.title}
diff --git a/src/components/grid/grid.scss b/src/components/grid/grid.scss
index cd18c2c13..88734b987 100644
--- a/src/components/grid/grid.scss
+++ b/src/components/grid/grid.scss
@@ -5,8 +5,8 @@
     display: inline-block;
     width: 100%;
 
-    $project-width: 200px;
-    $project-height: 150px;
+    $project-width: 220px;
+    $project-height: 208px;
 
     $gallery-width: 200px;
     $gallery-height: 118px;
@@ -14,58 +14,81 @@
     .flex-row {
         margin: 0 auto;
         padding: 12px;
-        width: (96px + (4 * $project-width)) / $em;
-        justify-content: flex-start;
-    }
+        width: $cols12;
+        justify-content: space-between;    }
 
     .thumbnail {
-        padding: 12px;
+        padding: 0;
 
-        &:not(.cards) {
-            &.project {
-                width: $project-width;
-
-                img {
-                    width: $project-width;
-                    height: $project-height;
-                }
-            }
-
-            &.gallery {
-                width: $gallery-width;
-
-                img {
-                    width: $gallery-width;
-                    height: $gallery-height;
-                }
-            }
-        }
-
-        &.cards {
-            &.project {
-                box-shadow: 0 0 3px $box-shadow-gray;
-                background-color: $ui-white;
-                width: 220px;
-                height: 208px;
+        &.project {
+            margin-bottom: 16px;
+            border-radius: 4px;
+            box-shadow: 0 0 3px $box-shadow-gray;
+            background-color: $ui-white;
+            width: $project-width;
+            height: $project-height;
+
+            .thumbnail-image {
+                margin: 8px auto;
+                width: 204px;
+                height: 152px;
 
                 img {
+                    margin: 0 auto;
+                    border: 0;
+                    border-radius: 4px;
                     width: 204px;
                     height: 152px;
                 }
             }
+        }
 
-            &.gallery {
-                box-shadow: 0 0 3px $box-shadow-gray;
-                background-color: $ui-white;
-                width: 220px;
-                height: 164px;
+        &.gallery {
+            margin-bottom: 16px;
+            border-radius: 4px;
+            box-shadow: 0 0 3px $box-shadow-gray;
+            background-color: $ui-white;
+            width: $project-width;
+            height: 164px;
+
+            .thumbnail-image {
+                margin: 8px auto;
+                width: 204px;
+                height: 120px;
 
                 img {
+                    border: 0;
+                    border-radius: 4px;
                     width: 204px;
                     height: 120px;
                 }
             }
         }
+
+        .thumbnail-info {
+            margin: 0 auto;
+            width: 204px;
+
+            .creator-image {
+                float: left;
+
+                img {
+                    margin-right: 8px;
+                    border-radius: 4px;
+                    width: 32px;
+                    height: 32px;
+                }
+            }
+
+            .thumbnail-title {
+                float: left;
+                max-width: 164px;
+
+                .thumbnail-creator a {
+                    color: $type-gray;
+                }
+            }
+        }
     }
 
     &.column {
@@ -73,15 +96,24 @@
         justify-content: center;
     }
 
-    @media only screen and (max-width: $tablet - 1) {
-        flex-direction: column;
+    //4 columns
+    @media only screen and (max-width: $mobile - 1) {
+        .flex-row {
+            width: $cols4;
+        }
     }
 
-    @media only screen and (max-width: $desktop - 1) {
+    //6 columns
+    @media only screen and (min-width: $mobile) and (max-width: $tablet - 1) {
         .flex-row {
-            padding: 12px 0;
-            width: 100%;
-            justify-content: space-around;
+            width: $cols6;
+        }
+    }
+
+    // 8 columns
+    @media only screen and (min-width: $tablet) and (max-width: $desktop - 1) {
+        .flex-row {
+            width: $cols9;
         }
     }
 }
diff --git a/src/components/thumbnail/thumbnail.jsx b/src/components/thumbnail/thumbnail.jsx
index 8e4ac7a01..ce96cf529 100644
--- a/src/components/thumbnail/thumbnail.jsx
+++ b/src/components/thumbnail/thumbnail.jsx
@@ -21,7 +21,6 @@ var Thumbnail = React.createClass({
             showViews: false,
             showAvatar: false,
             linkTitle: true,
-            cards: false,
             alt: ''
         };
     },
@@ -29,8 +28,7 @@ var Thumbnail = React.createClass({
         var classes = classNames(
             'thumbnail',
             this.props.type,
-            this.props.className,
-            {'cards': this.props.cards}
+            this.props.className
         );
         var extra = [];
         var info = [];
diff --git a/src/views/explore/explore.scss b/src/views/explore/explore.scss
index 1fcc33936..fcc3e5944 100644
--- a/src/views/explore/explore.scss
+++ b/src/views/explore/explore.scss
@@ -40,12 +40,6 @@ $base-bg: $ui-white;
         width: 8.75rem;
     }
 
-    .tab-background {
-        box-shadow: 0 0 1px $box-shadow-gray;
-        background-color: $ui-white;
-        width: 100%;
-    }
-
     .tabs {
         width: 58.75rem;
     }
@@ -117,84 +111,11 @@ $base-bg: $ui-white;
         padding-bottom: 32px;
         width: 100%;
 
-        .grid .flex-row {
-            width: $cols12;
-            justify-content: space-between;
-        }
-
         .button {
             display: block;
             margin: 0 auto;
         }
     }
-
-
-    .thumbnail {
-        $project-width: 220px;
-        $project-height: 208px;
-        padding: 0;
-
-        &.project {
-            margin-bottom: 16px;
-            border-radius: 4px;
-            width: $project-width;
-            height: $project-height;
-
-            .thumbnail-image {
-                margin: 8px auto;
-                width: 204px;
-                height: 152px;
-
-                img {
-                    border: 0;
-                    border-radius: 4px;
-                }
-            }
-        }
-
-        &.gallery {
-            margin-bottom: 16px;
-            border-radius: 4px;
-            width: $project-width;
-            height: $project-height;
-
-            .thumbnail-image {
-                margin: 8px auto;
-                width: 204px;
-                height: 120px;
-
-                img {
-                    border: 0;
-                    border-radius: 4px;
-                }
-            }
-        }
-
-        .thumbnail-info {
-            margin: 0 auto;
-            width: 204px;
-
-            .creator-image {
-                float: left;
-
-                img {
-                    margin-right: 8px;
-                    border-radius: 4px;
-                    width: 32px;
-                    height: 32px;
-                }
-            }
-
-            .thumbnail-title {
-                float: left;
-                max-width: 164px;
-
-                .thumbnail-creator a {
-                    color: $type-gray;
-                }
-            }
-        }
-    }
 }
 
 //4 columns
@@ -207,14 +128,6 @@ $base-bg: $ui-white;
         .sort-controls {
             width: $cols4;
         }
-
-        #projectBox {
-            .grid {
-                .flex-row {
-                    width: $cols4;
-                }
-            }
-        }
     }
 }
 
@@ -228,14 +141,6 @@ $base-bg: $ui-white;
         .sort-controls {
             width: $cols6;
         }
-
-        #projectBox {
-            .grid {
-                .flex-row {
-                    width: $cols6;
-                }
-            }
-        }
     }
 }
 
diff --git a/src/views/search/search.scss b/src/views/search/search.scss
index 032c3b43b..0a9d4f583 100644
--- a/src/views/search/search.scss
+++ b/src/views/search/search.scss
@@ -128,84 +128,11 @@ $base-bg: $ui-white;
         padding-bottom: 32px;
         width: 100%;
 
-        .grid .flex-row {
-            width: $cols12;
-            justify-content: space-between;
-        }
-
         .button {
             display: block;
             margin: 0 auto;
         }
     }
-
-
-    .thumbnail {
-        $project-width: 220px;
-        $project-height: 208px;
-        padding: 0;
-
-        &.project {
-            margin-bottom: 16px;
-            border-radius: 4px;
-            width: $project-width;
-            height: $project-height;
-
-            .thumbnail-image {
-                margin: 8px auto;
-                width: 204px;
-                height: 152px;
-
-                img {
-                    border: 0;
-                    border-radius: 4px;
-                }
-            }
-        }
-
-        &.gallery {
-            margin-bottom: 16px;
-            border-radius: 4px;
-            width: $project-width;
-            height: $project-height;
-
-            .thumbnail-image {
-                margin: 8px auto;
-                width: 204px;
-                height: 120px;
-
-                img {
-                    border: 0;
-                    border-radius: 4px;
-                }
-            }
-        }
-
-        .thumbnail-info {
-            margin: 0 auto;
-            width: 204px;
-
-            .creator-image {
-                float: left;
-
-                img {
-                    margin-right: 8px;
-                    border-radius: 4px;
-                    width: 32px;
-                    height: 32px;
-                }
-            }
-
-            .thumbnail-title {
-                float: left;
-                max-width: 164px;
-
-                .thumbnail-creator a {
-                    color: $type-gray;
-                }
-            }
-        }
-    }
 }
 
 //4 columns
@@ -226,14 +153,6 @@ $base-bg: $ui-white;
         .sort-controls {
             width: $cols4;
         }
-
-        #projectBox {
-            .grid {
-                .flex-row {
-                    width: $cols4;
-                }
-            }
-        }
     }
 }
 
@@ -248,14 +167,6 @@ $base-bg: $ui-white;
         .sort-controls {
             width: $cols6;
         }
-
-        #projectBox {
-            .grid {
-                .flex-row {
-                    width: $cols6;
-                }
-            }
-        }
     }
 }
 
@@ -269,13 +180,5 @@ $base-bg: $ui-white;
         .sort-controls {
             width: $cols8;
         }
-
-        #projectBox {
-            .grid {
-                .flex-row {
-                    width: $cols9;
-                }
-            }
-        }
     }
 }

From 55f95bb2a8078b216d66c409946ac863fc8ac541 Mon Sep 17 00:00:00 2001
From: Technoboy10 <technoboy10@fake.email>
Date: Mon, 22 Aug 2016 11:30:44 -0600
Subject: [PATCH 19/26] remove inactive class on tabs

---
 src/components/tabs/tabs.scss | 13 +++++++++----
 src/views/explore/explore.jsx |  3 +--
 src/views/search/search.jsx   |  2 +-
 3 files changed, 11 insertions(+), 7 deletions(-)

diff --git a/src/components/tabs/tabs.scss b/src/components/tabs/tabs.scss
index 303708f45..a612c3f76 100644
--- a/src/components/tabs/tabs.scss
+++ b/src/components/tabs/tabs.scss
@@ -1,6 +1,12 @@
 @import "../../colors";
 @import "../../frameless";
 
+.tab-background {
+    box-shadow: 0 0 1px $box-shadow-gray;
+    background-color: $ui-white;
+    width: 100%;
+}
+
 .tabs {
     background-color:  $ui-white;
     padding: 0;
@@ -20,6 +26,7 @@
         border-bottom: 3px solid $ui-aqua;
 
         &:hover {
+            border-bottom: 3px solid $ui-aqua;
             color: $header-gray;
         }
     }
@@ -29,10 +36,8 @@
         padding: .75em 1.5em;
     }
 
-    &.inactive {
-        &:hover {
-            border-bottom: 3px solid $active-dark-gray;
-        }
+    &:hover {
+        border-bottom: 3px solid $active-dark-gray;
     }
 
     .tab-icon {
diff --git a/src/views/explore/explore.jsx b/src/views/explore/explore.jsx
index 3a17a8ae5..993056c28 100644
--- a/src/views/explore/explore.jsx
+++ b/src/views/explore/explore.jsx
@@ -115,8 +115,7 @@ var Explore = injectIntl(React.createClass({
     },
     getTab: function (type) {
         var classes = classNames({
-            active: (this.props.itemType === type),
-            inactive: (this.props.itemType !== type)
+            active: (this.props.itemType === type)
         });
         return (
             <a href={'/explore/' + type + '/' + this.props.category + '/' + this.props.mode}>
diff --git a/src/views/search/search.jsx b/src/views/search/search.jsx
index 66031db6b..87e2b9ae0 100644
--- a/src/views/search/search.jsx
+++ b/src/views/search/search.jsx
@@ -80,7 +80,7 @@ var Search = injectIntl(React.createClass({
     getTab: function (type) {
         var term = this.props.searchTerm.split(' ').join('+');
         var allTab = <a href={'/search/' + type + '?q=' + term + '/'}>
-                        <li className='inactive'>
+                        <li>
                             <img src={'/svgs/tabs/' + type + '-inactive.svg'} className={'tab-icon ' + type} />
                             <FormattedMessage id={'general.' + type} />
                         </li>

From f0703b9f4697aa27352965b71ce2577ff252d0fd Mon Sep 17 00:00:00 2001
From: Technoboy10 <technoboy10@fake.email>
Date: Tue, 23 Aug 2016 08:11:18 -0600
Subject: [PATCH 20/26] fix styling error

---
 src/components/grid/grid.scss | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/components/grid/grid.scss b/src/components/grid/grid.scss
index 88734b987..d890a0e2d 100644
--- a/src/components/grid/grid.scss
+++ b/src/components/grid/grid.scss
@@ -15,7 +15,8 @@
         margin: 0 auto;
         padding: 12px;
         width: $cols12;
-        justify-content: space-between;    }
+        justify-content: space-between;
+    }
 
     .thumbnail {
         padding: 0;

From 32ef37e3bf6215f78506ae7c7017680b2bc95bb2 Mon Sep 17 00:00:00 2001
From: Technoboy10 <technoboy10@fake.email>
Date: Tue, 23 Aug 2016 11:10:02 -0600
Subject: [PATCH 21/26] remove unused variable

---
 src/views/explore/explore.jsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/views/explore/explore.jsx b/src/views/explore/explore.jsx
index 993056c28..c1c0e00df 100644
--- a/src/views/explore/explore.jsx
+++ b/src/views/explore/explore.jsx
@@ -131,7 +131,6 @@ var Explore = injectIntl(React.createClass({
         );
     },
     render: function () {
-        var formatMessage = this.props.intl.formatMessage;
 
         return (
             <div>

From 9a11e49444f0c56de4ab4c97ee000b59f5085047 Mon Sep 17 00:00:00 2001
From: Matthew Taylor <mewtaylor@gmail.com>
Date: Wed, 24 Aug 2016 07:54:08 -0400
Subject: [PATCH 22/26] Add `device-width` by default

Now that we have mobile nav/footer
---
 src/routes.json        | 18 ++++++------------
 src/template-config.js |  2 +-
 2 files changed, 7 insertions(+), 13 deletions(-)

diff --git a/src/routes.json b/src/routes.json
index 0520c20cd..478b94c9e 100644
--- a/src/routes.json
+++ b/src/routes.json
@@ -4,8 +4,7 @@
         "pattern": "^/?$",
         "routeAlias": "/?$",
         "view": "splash/splash",
-        "title": "Imagine, Program, Share",
-        "viewportWidth": "device-width"
+        "title": "Imagine, Program, Share"
     },
     {
         "name": "about",
@@ -48,32 +47,28 @@
         "pattern": "^/conference/plan/?$",
         "routeAlias": "/conference(?!/201[4-5])",
         "view": "conference/plan/plan",
-        "title": "Plan Your Visit",
-        "viewportWidth": "device-width"
+        "title": "Plan Your Visit"
     },
     {
         "name": "conference-expectations",
         "pattern": "^/conference/expect/?$",
         "routeAlias": "/conference(?!/201[4-5])",
         "view": "conference/expect/expect",
-        "title": "What to Expect",
-        "viewportWidth": "device-width"
+        "title": "What to Expect"
     },
     {
         "name": "conference-schedule",
         "pattern": "^/conference/schedule/?$",
         "routeAlias": "/conference(?!/201[4-5])",
         "view": "conference/schedule/schedule",
-        "title": "Conference Schedule",
-        "viewportWidth": "device-width"
+        "title": "Conference Schedule"
     },
     {
         "name": "conference-details",
         "pattern": "^/conference/:id/details/?$",
         "routeAlias": "/conference(?!/201[4-5])",
         "view": "conference/details/details",
-        "title": "Event Details",
-        "viewportWidth": "device-width"
+        "title": "Event Details"
     },
     {
         "name": "developers",
@@ -108,8 +103,7 @@
         "pattern": "^/educators/register/?$",
         "routeAlias": "/educators(?:/(faq|register|waiting))?/?$",
         "view": "teacherregistration/teacherregistration",
-        "title": "Teacher Registration",
-        "viewportWidth": "device-width"
+        "title": "Teacher Registration"
     },
     {
         "name": "teacherwaitingroom",
diff --git a/src/template-config.js b/src/template-config.js
index 297328d74..33cd26ca7 100644
--- a/src/template-config.js
+++ b/src/template-config.js
@@ -7,7 +7,7 @@ module.exports = {
         'and animations.',
 
     // override if mobile-friendly
-    viewportWidth: 942,
+    viewportWidth: 'device-width',
 
     // Open graph
     og_image: 'https://scratch.mit.edu/images/scratch-og.png',

From 28f96a1d0db54a89546c47c8ffc5b306723b35f3 Mon Sep 17 00:00:00 2001
From: Matthew Taylor <mewtaylor@gmail.com>
Date: Wed, 24 Aug 2016 10:23:26 -0400
Subject: [PATCH 23/26] Align grid items on the left

use `flex-start` with margins to ensure proper spacing between, while still starting at the left of each row.
---
 src/components/grid/grid.scss | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/components/grid/grid.scss b/src/components/grid/grid.scss
index d890a0e2d..97047f516 100644
--- a/src/components/grid/grid.scss
+++ b/src/components/grid/grid.scss
@@ -15,10 +15,11 @@
         margin: 0 auto;
         padding: 12px;
         width: $cols12;
-        justify-content: space-between;
+        justify-content: flex-start;
     }
 
     .thumbnail {
+        margin: 6px;
         padding: 0;
 
         &.project {

From fb5d9788f86faf7c50a77e6c622474498bed47e1 Mon Sep 17 00:00:00 2001
From: Matthew Taylor <mewtaylor@gmail.com>
Date: Wed, 24 Aug 2016 10:24:01 -0400
Subject: [PATCH 24/26] Re-structure grid styling a bit

combine stylings where possible, re-name some of the variables to be used more often
---
 src/components/grid/grid.scss | 36 +++++++++++++++++------------------
 1 file changed, 18 insertions(+), 18 deletions(-)

diff --git a/src/components/grid/grid.scss b/src/components/grid/grid.scss
index 97047f516..914090982 100644
--- a/src/components/grid/grid.scss
+++ b/src/components/grid/grid.scss
@@ -5,11 +5,11 @@
     display: inline-block;
     width: 100%;
 
-    $project-width: 220px;
+    $thumbnail-width: 220px;
+    $thumbnail-inner-width: 204px;
+    
     $project-height: 208px;
-
-    $gallery-width: 200px;
-    $gallery-height: 118px;
+    $gallery-height: 164px;
 
     .flex-row {
         margin: 0 auto;
@@ -22,46 +22,46 @@
         margin: 6px;
         padding: 0;
 
+        &.gallery,
         &.project {
             margin-bottom: 16px;
             border-radius: 4px;
             box-shadow: 0 0 3px $box-shadow-gray;
             background-color: $ui-white;
-            width: $project-width;
-            height: $project-height;
+            width: $thumbnail-width;
 
             .thumbnail-image {
                 margin: 8px auto;
-                width: 204px;
+                width: $thumbnail-inner-width;
+            }
+        }
+
+        &.project {
+            height: $project-height;
+
+            .thumbnail-image {
                 height: 152px;
 
                 img {
                     margin: 0 auto;
                     border: 0;
                     border-radius: 4px;
-                    width: 204px;
+                    width: $thumbnail-inner-width;
                     height: 152px;
                 }
             }
         }
 
         &.gallery {
-            margin-bottom: 16px;
-            border-radius: 4px;
-            box-shadow: 0 0 3px $box-shadow-gray;
-            background-color: $ui-white;
-            width: $project-width;
-            height: 164px;
+            height: $gallery-height;
 
             .thumbnail-image {
-                margin: 8px auto;
-                width: 204px;
                 height: 120px;
 
                 img {
                     border: 0;
                     border-radius: 4px;
-                    width: 204px;
+                    width: $thumbnail-inner-width;
                     height: 120px;
                 }
             }
@@ -69,7 +69,7 @@
 
         .thumbnail-info {
             margin: 0 auto;
-            width: 204px;
+            width: $thumbnail-inner-width;
 
             .creator-image {
                 float: left;

From 5dd80c10200c868f7df23cd7a3d2e0cb6cb65d36 Mon Sep 17 00:00:00 2001
From: Matthew Taylor <mewtaylor@gmail.com>
Date: Wed, 24 Aug 2016 10:55:13 -0400
Subject: [PATCH 25/26] additional reformatting

---
 src/components/grid/grid.scss | 71 ++++++++++++++++-------------------
 1 file changed, 33 insertions(+), 38 deletions(-)

diff --git a/src/components/grid/grid.scss b/src/components/grid/grid.scss
index 914090982..2afed6b19 100644
--- a/src/components/grid/grid.scss
+++ b/src/components/grid/grid.scss
@@ -13,26 +13,46 @@
 
     .flex-row {
         margin: 0 auto;
-        padding: 12px;
+        padding: 12px 0;
         width: $cols12;
         justify-content: flex-start;
     }
 
     .thumbnail {
-        margin: 6px;
-        padding: 0;
+        margin: 7px;
+        border-radius: 4px;
+        box-shadow: 0 0 3px $box-shadow-gray;
+        background-color: $ui-white;
+        padding-bottom: 4px;
+        width: $thumbnail-width;
 
-        &.gallery,
-        &.project {
-            margin-bottom: 16px;
-            border-radius: 4px;
-            box-shadow: 0 0 3px $box-shadow-gray;
-            background-color: $ui-white;
-            width: $thumbnail-width;
+        .thumbnail-image {
+            margin: 8px auto;
+            width: $thumbnail-inner-width;
+        }
 
-            .thumbnail-image {
-                margin: 8px auto;
-                width: $thumbnail-inner-width;
+        .thumbnail-info {
+            margin: 0 auto;
+            width: $thumbnail-inner-width;
+
+            .creator-image {
+                float: left;
+
+                img {
+                    margin-right: 8px;
+                    border-radius: 4px;
+                    width: 32px;
+                    height: 32px;
+                }
+            }
+
+            .thumbnail-title {
+                float: left;
+                max-width: 164px;
+
+                .thumbnail-creator a {
+                    color: $type-gray;
+                }
             }
         }
 
@@ -66,31 +86,6 @@
                 }
             }
         }
-
-        .thumbnail-info {
-            margin: 0 auto;
-            width: $thumbnail-inner-width;
-
-            .creator-image {
-                float: left;
-
-                img {
-                    margin-right: 8px;
-                    border-radius: 4px;
-                    width: 32px;
-                    height: 32px;
-                }
-            }
-
-            .thumbnail-title {
-                float: left;
-                max-width: 164px;
-
-                .thumbnail-creator a {
-                    color: $type-gray;
-                }
-            }
-        }
     }
 
     &.column {

From ab6f8e1049d7c912d3cbb34c6b3cfd287553c516 Mon Sep 17 00:00:00 2001
From: Matthew Taylor <mewtaylor@gmail.com>
Date: Wed, 24 Aug 2016 16:38:39 -0400
Subject: [PATCH 26/26] Add in an Oxford Comma

*whistles as he commits

see https://github.com/LLK/scratch-www/pull/819#issuecomment-242195194
---
 src/views/faq/l10n.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/views/faq/l10n.json b/src/views/faq/l10n.json
index bdb848a5b..a81f73c91 100644
--- a/src/views/faq/l10n.json
+++ b/src/views/faq/l10n.json
@@ -13,7 +13,7 @@
     "faq.makeGameTitle":"How do I make a game or animation with Scratch?",
     "faq.makeGameBody":"Check out the <a href= \"/help \">help page</a> to see lots of ways to get started with Scratch. Or just <a href= \"/projects/editor/?tip_bar=getStarted \">dive in</a> to the project editor.",
     "faq.requirementsTitle":"What are the system requirements for Scratch?",
-    "faq.requirementsBody":"To run Scratch 2, you need to be using (1) a Mac, Linux or Windows computer; (2) a version of <a href= \" \">Adobe Flash Player</a> released on or after June 15, 2016; (3) a relatively recent web browser: one of the latest two versions of <a href=\"http://google.com/chrome/\">Chrome</a>, <a href=\"http://www.mozilla.org/en-US/firefox/new/\">Firefox</a>, <a href=\"https://support.apple.com/downloads/safari\">Safari</a> (Mac or Windows only), <a href=\"https://www.microsoft.com/EN-US/windows/microsoft-edge\">Edge</a> (Windows only), or <a href=\"https://www.microsoft.com/en-us/download/internet-explorer.aspx\">Internet Explorer 10+</a> (Windows only). If your computer doesn’t meet these requirements, you can try downloading and installing <a href=\"/scratch_1.4\">Scratch 1.4</a>, which you can still use to share projects to the Scratch 2 website.",
+    "faq.requirementsBody":"To run Scratch 2, you need to be using (1) a Mac, Linux, or Windows computer; (2) a version of <a href= \" \">Adobe Flash Player</a> released on or after June 15, 2016; (3) a relatively recent web browser: one of the latest two versions of <a href=\"http://google.com/chrome/\">Chrome</a>, <a href=\"http://www.mozilla.org/en-US/firefox/new/\">Firefox</a>, <a href=\"https://support.apple.com/downloads/safari\">Safari</a> (Mac or Windows only), <a href=\"https://www.microsoft.com/EN-US/windows/microsoft-edge\">Edge</a> (Windows only), or <a href=\"https://www.microsoft.com/en-us/download/internet-explorer.aspx\">Internet Explorer 10+</a> (Windows only). If your computer doesn’t meet these requirements, you can try downloading and installing <a href=\"/scratch_1.4\">Scratch 1.4</a>, which you can still use to share projects to the Scratch 2 website.",
     "faq.offlineTitle":"Do you have a downloadable version so I can create and view projects offline?",
     "faq.offlineBody":"The Scratch 2 offline editor allows you to create Scratch projects without an internet connection. You can download Scratch 2 from the <a href= \"/scratch2download/ \">website</a>. You can also still use <a href = \"/scratch_1.4 \">Scratch 1.4</a>. Note: You can have both Scratch 1.4 and 2 on your computer.",
     "faq.uploadOldTitle":"Can I still upload projects created with older versions of Scratch to the website?",