Merge pull request #219 from LLK/release/2.2.3

Release 2.2.3 – HOC

.gitignore

@@ -15,3 +15,4 @@ npm-*
 .elasticbeanstalk/*
 !.elasticbeanstalk/*.cfg.yml
 !.elasticbeanstalk/*.global.yml
+deploy.zip

.travis.yml

@@ -15,7 +15,8 @@ env:
   - EB_APP=scratch-www
   - EB_AWS_BUCKET_NAME=elasticbeanstalk-us-east-1-307680192167
   - SKIP_CLEANUP=true
-  - BUILD_ARCHIVE=$TRAVIS_BUILD_ID.zip
+  - ELASTIC_BEANSTALK_LABEL=${TRAVIS_COMMIT:0:5}
+  - BUILD_ARCHIVE=$ELASTIC_BEANSTALK_LABEL.zip
 before_deploy:
 - zip -qr $BUILD_ARCHIVE .
 deploy:

Makefile

@@ -17,6 +17,19 @@ clean:
 	mkdir -p build
 	mkdir -p locales
 
+
+deploy:
+ifeq ($(shell grep "artifact: deploy.zip" .elasticbeanstalk/config.yml), )
+	@echo "You must configure elasticbeanstalk to deploy an artifact."
+	@echo "Add the following to your .elasticbeanstalk/config.yml"
+	@echo "deploy:\n  artifact: deploy.zip"
+else
+	@make build
+	git archive -o deploy.zip HEAD
+	zip -rv deploy.zip build
+	eb deploy -l $$(git rev-parse --verify --short=5 HEAD) -m "$$(git log -1 --pretty=%s)"
+endif
+
 static:
 	cp -a ./static/. ./build/
 
@@ -61,4 +74,4 @@ lint:
 
 # ------------------------------------
 
-.PHONY: build clean static translations webpack watch stop start test lint
+.PHONY: build clean deploy static translations webpack watch stop start test lint

README.md

@@ -35,10 +35,10 @@ npm stop
 
 | Variable      | Default                               | Description                                    |
 | ------------- | ------------------------------------- | ---------------------------------------------- |
-| `API_HOST`    | `https://api-staging.scratch.mit.edu` | Hostname for API requests                      |
+| `API_HOST`    | `https://api.scratch.mit.edu`         | Hostname for API requests                      |
 | `NODE_ENV`    | `null`                                | If not `production`, app acts like development |
 | `PORT`        | `8333`                                | Port for devserver (http://localhost:XXXX)     |
-| `PROXY_HOST`  | `https://staging.scratch.mit.edu`     | Pass-through location for scratchr2            |
+| `PROXY_HOST`  | `https://scratch.mit.edu`             | Pass-through location for scratchr2            |
 
 ### To Test
 ```bash

en.json

@@ -32,6 +32,13 @@
     "general.signIn": "Sign in",
     "general.statistics": "Statistics",
     "general.support": "Support",
+    "general.tipsWindow": "Tips Window",
+    "general.tipsAnimateYourNameTitle": "Animate Your Name",
+    "general.tipsBearstack": "Bearstack Story",
+    "general.tipsDanceTitle": "Dance, Dance, Dance",
+    "general.tipsGetStarted": "Getting Started",
+    "general.tipsHideAndSeekTitle": "Hide-and-Seek Game",
+    "general.tipsPongGame": "Create a Pong Game",
     "general.termsOfUse": "Terms of Use",
     "general.username": "Username",
     "general.viewAll": "View All",
@@ -41,6 +48,22 @@
     "footer.discuss": "Discussion Forums",
     "footer.help": "Help Page",
     "footer.scratchFamily": "Scratch Family",
+    "hoc.activityCards": "Activity Cards",
+    "hoc.activityCardsHeader": "Activity Cards and Guides",
+    "hoc.activityCardsInfo1": "Want tips and ideas for these Hour of Code activities? Use the activity cards to get ideas for creating with Scratch. Facilitator guides can help you plan a group activity.",
+    "hoc.addToStudios": "Add Your Projects to Studios",
+    "hoc.addToStudiosDescription": "These studios include projects created by young people around the world. Take a look at the studios to get inspired - or submit your own projects to the studios!",
+    "hoc.facilitatorGuide": "Facilitator Guide",
+    "hoc.findOutMore": "Find out more",
+    "hoc.helpScratch": "Help with Scratch",
+    "hoc.helpScratchDescription": "You can find tutorials and helpful hints in the <a href=\"/projects/editor/?tip_bar=home\">Tips Window</a>. For more resources, see <a href=\"/help\">Scratch Help</a>",
+    "hoc.moreActivities": "Want More Activities?",
+    "hoc.moreDescription": "Check out these other tutorials. Or remix one of our <a href=\"/starter_projects\">Starter Projects</a>",
+    "hoc.studioAlice": "Alice in Wonderland Studio",
+    "hoc.studioWeBareBears": "We Bare Bears Studio",
+    "hoc.subTitle": "With Scratch, you can program your own stories, games, and animations — and share them online.",
+    "hoc.tipsDescription": "Need help getting started? Looking for ideas?&nbsp; You can find tutorials and helpful hints in the <a href=\"/projects/editor/?tip_bar=home\">Tips Window</a>",
+    "hoc.title": "Get Creative with Coding",
     "intro.aboutScratch": "ABOUT SCRATCH",
     "intro.forEducators": "FOR EDUCATORS",
     "infro.forParents": "FOR PARENTS",

package.json

@@ -57,7 +57,7 @@
     "react-onclickoutside": "0.3.1",
     "react-slick": "git://github.com/mewtaylor/react-slick.git#remove-deprecation-warnings",
     "routes-to-nginx-conf": "0.0.4",
-    "sass-lint": "1.2.0",
+    "sass-lint": "1.3.2",
     "sass-loader": "2.0.1",
     "scratchr2_translations": "git://github.com/mewtaylor/scratchr2_translations.git#feature/packageify",
     "slick-carousel": "1.5.8",

server/config.js

 module.exports = {
+    // Bind environment
+    api_host: process.env.API_HOST || 'https://api.scratch.mit.edu',
+
     // Search and metadata
     title: 'Imagine, Program, Share',
     description:

server/index.js

@@ -67,7 +67,7 @@ if (typeof process.env.SENTRY_DSN === 'string') {
 
 // Bind proxies in development
 if (process.env.NODE_ENV !== 'production') {
-    var proxyHost = process.env.PROXY_HOST || 'https://staging.scratch.mit.edu';
+    var proxyHost = process.env.PROXY_HOST || 'https://scratch.mit.edu';
 
     app.use('/', proxy(proxyHost, {
         filter: function (req) {

server/template.html

@@ -28,10 +28,15 @@
         <link rel="shortcut icon" href="/favicon.ico" />
         <link rel="stylesheet" href="/css/lib/normalize.min.css" />
 
-        <!-- Polyfill -->
-        <script src="/js/lib/polyfill.min.js"></script>
+        <!-- Environment -->
+        <script>
+            window.env = {
+                API_HOST: "{{&api_host}}"
+            };
+        </script>
 
-        <!-- Initialize (Session & Localization) -->
+        <!-- Polyfill & Initialize (Session & Localization)-->
+        <script src="/js/lib/polyfill.min.js"></script>
         <script src="/js/init.bundle.js"></script>
     </head>
 

src/_frameless.scss

+/*
+    Frameless           <http://framelessgrid.com/>
+    by Joni Korpi       <http://jonikorpi.com/>
+    licensed under CC0  <http://creativecommons.org/publicdomain/zero/1.0/>
+*/
+
+
+//
+// Configuration
+//
+
+$font-size: 16px;       // Your base font-size in pixels
+$em: $font-size / 1em;  // Shorthand for outputting ems
+
+$column: 60px;  // The column-width of your grid in pixels
+$gutter: 20px;  // The gutter-width of your grid in pixels
+
+
+
+//
+// Column-widths in variables, in ems
+//
+
+$cols1: ( 1 * ($column + $gutter) - $gutter) / $em;
+$cols2: ( 2 * ($column + $gutter) - $gutter) / $em;
+$cols3: ( 3 * ($column + $gutter) - $gutter) / $em;
+$cols4: ( 4 * ($column + $gutter) - $gutter) / $em;
+$cols5: ( 5 * ($column + $gutter) - $gutter) / $em;
+$cols6: ( 6 * ($column + $gutter) - $gutter) / $em;
+$cols7: ( 7 * ($column + $gutter) - $gutter) / $em;
+$cols8: ( 8 * ($column + $gutter) - $gutter) / $em;
+$cols9: ( 9 * ($column + $gutter) - $gutter) / $em;
+$cols10: (10 * ($column + $gutter) - $gutter) / $em;
+$cols11: (11 * ($column + $gutter) - $gutter) / $em;
+$cols12: (12 * ($column + $gutter) - $gutter) / $em;
+
+//
+// Column-widths in a function, in ems
+//
+
+@mixin width ($cols: 1) {
+    width: ($cols * ($column + $gutter) - $gutter) / $em;
+}
+
+$desktop: 942px;
+$tablet: 640px;
+$mobile: 480px;
+
+//4 columns
+@media only screen and (max-width: $mobile - 1) {
+    #view {
+        text-align: center;
+    }
+
+    .inner {
+        margin: 0 auto;
+        width: 100%;
+    }
+}
+
+//6 columns
+@media only screen and (min-width: $mobile) and (max-width: $tablet - 1) {
+    #view {
+        text-align: center;
+    }
+
+    .inner {
+        margin: 0 auto;
+        width: $mobile;
+    }
+}
+
+//8 columns
+@media only screen and (min-width: $tablet) and (max-width: $desktop - 1) {
+    #view {
+        text-align: center;
+    }
+
+    .inner {
+        margin: 0 auto;
+        width: $tablet;
+    }
+}
+
+//12 columns
+@media only screen and (min-width: $desktop) {
+    .inner {
+        margin: 0 auto;
+        width: $desktop;
+    }
+}

src/components/box/box.scss

 @import "../../colors";
+@import "../../frameless";
 
 $base-bg: $ui-white;
 
@@ -6,6 +7,47 @@ $base-bg: $ui-white;
     display: inline-block;
     border: 1px solid $ui-border;
     border-radius: 10px 10px 0 0;
+    
+    //4 columns
+    @media only screen and (max-width: $mobile - 1) {
+        width: $cols4;
+        .box-header {
+            h4 {
+                font-size: .9rem;
+            }
+        }
+    }
+
+    //6 columns
+    @media only screen and (min-width: $mobile) and (max-width: $tablet - 1) {
+        width: $cols6;
+        .box-header {
+            h4 {
+                font-size: 1.0rem;
+            }
+        }
+    }
+
+    //8 columns
+    @media only screen and (min-width: $tablet) and (max-width: $desktop - 1) {
+        width: $cols8;
+        .box-header {
+            h4 {
+                font-size: 1.1rem;
+            }
+        }
+    }
+
+    //12 columns
+    @media only screen and (min-width: $desktop) {
+        width: $cols12;
+        .box-header {
+            h4 {
+                font-size: 1.1rem;
+            }
+        }
+    }
+
     background-color: $ui-white;
     width: 100%;
 
@@ -25,8 +67,6 @@ $base-bg: $ui-white;
         h4 {
             display: inline-block;
             float: left;
-
-            font-size: 1.1rem;
         }
 
         p {

src/components/intro/intro.scss

@@ -11,7 +11,8 @@
 
     .content {
         display: inline-block;
-        width: calc(66% - 20px);
+        width: calc(66% - 30px);
+        vertical-align: top;
 
         h1 {
             color: $ui-orange;

src/components/navigation/navigation.jsx

@@ -72,7 +72,10 @@ var Navigation = React.createClass({
             } else {
                 // clear message count check, and set to default id.
                 clearInterval(this.state.messageCountIntervalId);
-                this.setState({'messageCountIntervalId': -1});
+                this.setState({
+                    'unreadMessageCount': 0,
+                    'messageCountIntervalId': -1
+                });
             }
         }
     },
@@ -80,7 +83,10 @@ var Navigation = React.createClass({
         // clear message interval if it exists
         if (this.state.messageCountIntervalId != -1) {
             clearInterval(this.state.messageCountIntervalId);
-            this.setState({'messageCountIntervalId': -1});
+            this.setState({
+                'unreadMessageCount': 0,
+                'messageCountIntervalId': -1
+            });
         }
     },
     getProfileUrl: function () {
@@ -92,9 +98,10 @@ var Navigation = React.createClass({
             method: 'get',
             uri: '/proxy/users/' + this.state.session.user.username + '/activity/count'
         }, function (err, body) {
+            if (err) return this.setState({'unreadMessageCount': 0});
             if (body) {
                 var count = parseInt(body.msg_count, this.state.unreadMessageCount);
-                this.setState({'unreadMessageCount': count});
+                return this.setState({'unreadMessageCount': count});
             }
         }.bind(this));
     },

src/components/navigation/navigation.scss

@@ -16,6 +16,11 @@
     /* NOTE: Height should match offset settings in main.scss file */
     height: 50px;
 
+    .ie9 & {
+        display: table;
+        table-layout: fixed;
+    }
+
     .inner > ul {
         display: flex;
         margin: 0;
@@ -26,6 +31,10 @@
         flex-wrap: nowrap;
         flex-direction: row;
         justify-content: flex-start;
+
+        .ie9 & {
+            display: table-row;
+        }
         
 
         > li {
@@ -34,6 +43,13 @@
             float: left;
             height: 100%;
             align-self: flex-start;
+
+            .ie9 & {
+                display: table-cell;
+                float: none;
+                height: 50px;
+                vertical-align: bottom;
+            }
         }
 
         .logo {
@@ -83,6 +99,10 @@
             color: $type-white;
             flex-grow: 3;
 
+            .ie9 & {
+                width: 100%;
+            }
+
             form {
                 margin: 0;
             }
@@ -140,6 +160,10 @@
             margin-left: auto;
             align-self: flex-end;
 
+            .ie9 & {
+                float: none;
+            }
+
             a:hover {
                 background-color: $active-gray;
             }
@@ -202,10 +226,13 @@
         .account-nav {
             .userInfo {
                 padding-top: 14px;
-                padding-bottom: 3px;
+                max-width: 260px;
             }
 
             > a {
+                display: inline-block;
+                overflow: hidden;
+                text-overflow: ellipsis;
                 font-size: .8125rem;
                 font-weight: normal;
 

src/components/news/news.scss

@@ -19,6 +19,7 @@
         a {
             display: block;
             text-decoration: none;
+            white-space: normal;
 
             &:hover {
                 text-decoration: none;

src/components/subnavigation/subnavigation.jsx

+var classNames = require('classnames');
+var React = require('react');
+
+require('./subnavigation.scss');
+
+var SubNavigation = React.createClass({
+    type: 'SubNavigation',
+    render: function () {
+        var classes = classNames(
+            'sub-nav',
+            this.props.className
+        );
+        return (
+            <div className={classes}>
+                {this.props.children}
+            </div>
+        );
+    }
+});
+
+module.exports = SubNavigation;

src/components/subnavigation/subnavigation.scss

+@import "../../colors";
+
+.sub-nav {
+    display: flex;
+    margin: 0 auto;
+    padding: 5px 0;
+    width: 100%;
+    color: $type-white;
+    font-size: .8rem;
+    font-weight: bold;
+    justify-content: center;
+    flex-wrap: wrap;
+    
+
+    li {
+        display: inline-block;
+        margin: 5px;
+        border: 2px solid $active-gray;
+        border-radius: 50px;
+        padding: .75em 1em;
+        text-decoration: none;
+        color: $type-white;
+        list-style-type: none;
+
+        &:hover {
+            transition: background-color .25s ease;
+            border-color: transparent;
+            background-color: $active-gray;
+        }
+
+        &:active {
+            border: 0 solid transparent;
+            box-shadow: inset 0 0 5px $box-shadow-gray;
+            background-color: $active-dark-gray;
+            padding: calc(.75em + 2px) calc(1em + 2px);
+        }
+
+        &.description {
+            /* clear styling for info element */
+            border: none;
+            border-radius: none;
+            text-decoration: none;
+
+            &:hover {
+                transition: none;
+                background-color: transparent;
+            }
+
+            &:active {
+                border: none;
+                box-shadow: none;
+                background-color: transparent;
+            }
+        }
+    }
+}

src/environment.js

-var Environment = {
-    NODE_ENV: JSON.stringify(process.env.NODE_ENV || 'development'),
-    API_HOST: JSON.stringify(process.env.API_HOST || 'https://api-staging.scratch.mit.edu')
-};
-
-module.exports = Environment;

src/lib/render.jsx

@@ -15,11 +15,9 @@ var render = function (jsx, element) {
         element
     );
 
-    // If in production, provide list of rendered components
-    if (process.env.NODE_ENV != 'production') {
-        window._renderedComponents = window._renderedComponents || [];
-        window._renderedComponents.push(component);
-    }
+    // Provide list of rendered components
+    window._renderedComponents = window._renderedComponents || [];
+    window._renderedComponents.push(component);
 };
 
 module.exports = render;

src/main.scss

 @import "colors";
+@import "frameless";
 
 /* Tags */
 html,
@@ -35,6 +36,10 @@ h4 {
 }
 
 /* Links */
+a {
+    white-space: nowrap;
+}
+
 a:link,
 a:visited,
 a:active {
@@ -47,11 +52,6 @@ a:hover {
 }
 
 /* Classes */
-.inner {
-    margin: 0 auto;
-    width: 942px;
-}
-
 .empty {
     $bg-blue: #d9edf7;
     $bg-blue-accent: #bce8f1;
@@ -62,6 +62,7 @@ a:hover {
     text-align: center;
     line-height: 2rem;
     color: $type-gray;
+
     h4 {
         color: $type-gray;
     }

src/mixins/api.jsx

@@ -13,7 +13,7 @@ var Api = {
     ],
     api: function (opts, callback) {
         defaults(opts, {
-            host: process.env.API_HOST,
+            host: window.env.API_HOST,
             headers: {},
             json: {},
             useCsrf: false

src/views/hoc/hoc.scss

 @import "../../colors";
+@import "../../frameless";
 
 $base-bg: $ui-white;
 
@@ -6,147 +7,112 @@ $base-bg: $ui-white;
     padding: 0;
 
     // To be integrated into the Global Typography standards 
+    h3, 
     p {
-        line-height: 2em;
+        font-weight: 300; 
     }
 
-    // To be revamped in Global Grids standards
-    .inner {
-        margin: 0 auto;
-        width: 80%;
-        max-width: 960px;
-
-        .box {
-            margin-bottom: 10px;
-        }
+    p {
+        line-height: 2em;
     }
 
     .top-banner {
         transition: background-image .5s ease, background-color .5s ease;
-
-        margin-top: 10px;
         margin-bottom: 40px;
-
         background-color: $ui-aqua;
         background-position: center;
         background-size: cover;
-
-        padding: 10px 0;
+        padding: 20px 0;
         width: 100%;
 
         &.wbb-bg {    
-            background-image: url("/images/hide-bg.jpg");
+            background-image: url("/images/hoc2015/hide-bg.jpg");
         }
 
         &.dance-bg {
-            background-image: url("/images/dance-bg.jpg");
+            background-image: url("/images/hoc2015/dance-bg.jpg");
         }
 
         &.name-bg {
-            background-image: url("/images/name-bg.jpg");
+            background-image: url("/images/hoc2015/name-bg.jpg");
         }
 
         h1, 
         p {
             margin: 0 auto;
-            padding-top: 10px;
-
+            padding: 5px 0;
             max-width: 500px;
-
             text-align: center;
             color: $type-white;        
         }
 
-        .card-deck, 
-        .sub-nav {
-            display: flex;
-            margin: 20px auto;
-            
-            width: 80%;
-            max-width: 960px;
-
-            justify-content: center;
-            flex-wrap: wrap;
-        }
-
-        .card-deck {
+        section {
+            border: 0;
+            padding: 10px 0;
+            max-width: $desktop;
 
-            .card {
-                display: inline-block;
-                margin: 10px;
-                border-radius: 7px;
-                background-color: $active-gray;                
-                padding: 2px;
-                
-                width: 30%;
-                min-width: 200px;
-                max-width: 230px;
-
-                .card-info {
-                    border-radius: 5px;
-
-                    background-color: $base-bg;
+            .card-deck {
+                padding: 0 20px;
+            }
 
-                    width: 100%;
-                    height: 100%;
-                    
-
-                    button,
-                    img {
-                        width: calc(100% - 20px);
-                    }
-
-                    img {
-                        margin: 10px 10px 5px 10px;
-                        border-radius: 5px;
-                    }
-
-                    button {
-                        margin: 0 10px 10px 10px;
-                    }
-                }
+            //6 columns
+            @media only screen and (min-width: $mobile) and (max-width: $tablet - 1) {
+                max-width: $mobile;
             }
         }
+    }
+    
+    .card-deck {
+        display: inline-flex;
+        justify-content: center;
+        flex-wrap: wrap;
 
-        .sub-nav {
-            color: $type-white;
-            font-size: .8em;
-            font-weight: bold;
-
-            li {
-
-                display: inline-block;
-                margin: 5px;
-
-                padding: .75em 1em;
-                
-                list-style-type: none;
+        .card {
+            margin: 10px;
+            border-radius: 7px;
+            background-color: $active-gray;                
+            padding: 2px;
+            
+            width: 30%;
+            min-width: 200px;
+            max-width: 230px;
 
+            a {
+                white-space: normal;
             }
 
-            a .link {
+            .card-info {
+                border-radius: 5px;
+                background-color: $base-bg;
+                width: 100%;
+                height: 100%;
                 
-                border: 2px solid $active-gray;
 
-                border-radius: 50px;
+                button,
+                img {
+                    width: calc(100% - 20px);
+                }
 
-                text-decoration: none;
-                color: $type-white;
-                
+                img {
+                    margin: 10px 10px 5px 10px;
+                    border-radius: 5px;
+                }
 
-                &:hover {
-                    transition: background-color .25s ease;
-                    border-color: transparent;
-                    background-color: $active-gray;
+                button {
+                    margin: 0 10px 10px 10px;
                 }
+            }
+
+            //8 columns
+            @media only screen and (min-width: $tablet) and (max-width: $desktop - 1) {
+                margin: 2px;
+                min-width: 175px;
 
-                &:active {
-                    border: 0 solid transparent;
-                    box-shadow: inset 0 0 5px $box-shadow-gray;
-                    background-color: $active-dark-gray;
-                    padding: calc(.75em + 2px) calc(1em + 2px);
+                button {
+                    font-size: .7em;
                 }
             }
+
         }
     }
 
@@ -154,92 +120,134 @@ $base-bg: $ui-white;
         display: flex;
         margin: 0 auto;
         border-bottom: 1px solid $ui-border;
-        padding: 30px 0;
+        padding: 50px 0;
         width: 95%;
 
         justify-content: center;
         flex-wrap: wrap;
         align-items: center;
 
+        p {
+            margin: 10px auto 20px;
+            max-width: 600px;
+        }
+
         &:last-child {
             border-bottom: 0;
         }
 
-        h3, 
-        p {
-            font-weight: 300; 
-        }
+        &.one-up {
+            text-align: center;
 
-        .logos {
-            margin: 10px 0;
-            width: 100%;
+            .column {
+                width: 100%;
+            }
+        }
 
-            img {
-                margin: 0 20px;
-                max-width: 200px;
-                max-height: 75px;
+        &.two-up {
+            .column {
+                min-width: 200px;
+                max-width: 40%;
+                text-align: left;
 
-                vertical-align: middle;
+                img {
+                    border-radius: 5px;
+                    width: 100%;
+                }
             }
         }
+    }
 
-        .resource {
-            display: flex;
-            margin: 10px;
-            border-radius: 5px;
+    .resource,
+    .studio {
+        display: flex;
+        margin: 10px 0; 
+        min-width: 200px;
 
-            padding: 10px 15px;
-            width: 30%;
-            min-width: 200px;
-            max-width: 230px;
-            text-align: left;
+        text-align: left;
+        justify-content: center;
+        align-items: center;
+
+        img {
+            margin-right: 15px;
+        }
 
-            justify-content: center;
-            align-items: center;
+        h5 {
+            margin: 8px 0;
+            font-weight: 500;
+        }
+
+        //8 columns
+        @media only screen and (min-width: $tablet) and (max-width: $desktop - 1) {
+            display: block;
+            width: 30%;
+            min-width: 180px;
+            text-align: center;
 
             img {
-                margin-right: 15px;
+                margin: 0 auto;
             }
+        }
+    }
 
-            h5 {
-                margin: 8px 0;
-                font-weight: 500;
-            }
+    .resource { 
+        width: 33%;
 
-            a {
-                display: block;
-                margin: 5px 0;
-                font-size: .8em;
-            }
+        a {
+            display: block;
+            margin: 5px 0;
+            font-size: .8em;
         }
+    }
 
-        &.one-up {
-            text-align: center;
+    .studio {
+        width: 50%;
 
-            .column {
-                margin: 10px;
+        a {
+            white-space: normal;
+        }
+
+        h5 {
+            width: 200px;
+        }
+
+        img {
+            float: left;
+        }
+
+        @media only screen and (max-width: $mobile - 1) {
+            display: inline-block;
+        }
+
+        @media only screen and (min-width: $mobile) and (max-width: $tablet - 1) {
+            display: inline-block;
+        }
+        
+        //8 columns
+        @media only screen and (min-width: $tablet) and (max-width: $desktop - 1) {
+            h5 {
                 width: 100%;
             }
 
-            .logo {
-                display: block;
+            img {
+                float: none;
             }
         }
+    }
 
-        &.two-up {
-            
-            .column {
-                margin: 10px;
+    .logos {
+        margin: 20px 0;
+        width: 100%;
 
-                min-width: 200px;
-                max-width: 40%;
+        a {
+            white-space: normal;
+        }
 
-                img {
-                    border-radius: 5px;
-                    
-                    width: 100%;
-                }
-            }
+        img {
+            margin: 20px;
+            max-width: 150px;
+            max-height: 55px;
+            vertical-align: middle;
         }
     }
 }

src/views/splash/splash.scss

@@ -5,13 +5,24 @@
         flex-wrap: nowrap;
         justify-content: space-between;
 
+        .ie9 & {
+            display: table;
+            margin: 0 -20px 20px -20px;
+            min-width: 100%;
+            border-spacing: 20px 0;
+        }
+
         .box {
             display: inline-block;
             width: calc(60% - 20px);
+
+            .ie9 & {
+                display: table-cell;
+                vertical-align: top;
+            }
         }
 
         .news {
-            display: inline-block;
             width: 40%;
         }
     }

static/svgs/studio.svg

+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 19.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 width="54.5px" height="43.3px" viewBox="0 0 54.5 43.3" style="enable-background:new 0 0 54.5 43.3;" xml:space="preserve">
+<g>
+	<g>
+		
+			<path style="fill:#FFFFFF;stroke:#2398C1;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;" d="
+			M7.2,33.9v-31c0-1.2,1-2.2,2.2-2.2h42.3c1.2,0,2.2,1,2.2,2.2v31c0,1.2-1,2.2-2.2,2.2H9.4C8.2,36.1,7.2,35.1,7.2,33.9z"/>
+	</g>
+	
+		<line style="fill:none;stroke:#2398C1;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;" x1="7.2" y1="6.4" x2="53.8" y2="6.4"/>
+	<g>
+		
+			<path style="fill:#B6ECFF;stroke:#2398C1;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;" d="
+			M4,37.2v-31C4,4.9,4.9,4,6.1,4h42.3c1.2,0,2.2,1,2.2,2.2v31c0,1.2-1,2.2-2.2,2.2H6.1C4.9,39.3,4,38.4,4,37.2z"/>
+	</g>
+	
+		<line style="fill:none;stroke:#2398C1;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;" x1="3.7" y1="10.4" x2="50.3" y2="10.4"/>
+	<g>
+		
+			<path style="fill:#FFFFFF;stroke:#2398C1;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;" d="
+			M0.7,40.4v-31c0-1.2,1-2.2,2.2-2.2h42.3c1.2,0,2.2,1,2.2,2.2v31c0,1.2-1,2.2-2.2,2.2H2.9C1.7,42.6,0.7,41.6,0.7,40.4z"/>
+	</g>
+	
+		<line style="fill:none;stroke:#2398C1;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;" x1="0.7" y1="13.4" x2="47.3" y2="13.4"/>
+	<circle style="fill:#2BB673;" cx="40.3" cy="10.6" r="0.8"/>
+	<circle style="fill:#DB4C3E;" cx="43.4" cy="10.6" r="0.8"/>
+	<g>
+		<g>
+			
+				<path style="fill:#B6ECFF;stroke:#2398C1;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;" d="
+				M26.7,28.2c0.8,1.1,1.2,2.5,1.3,4c2.4,0.7,6.4,0.1,6.4-1.7c0-2-1-3.6-2.5-4.3c-0.4,0.4-1,0.6-1.6,0.6c-0.6,0-1.2-0.2-1.6-0.6
+				C27.8,26.6,27.1,27.3,26.7,28.2z"/>
+			
+				<path style="fill:#B6ECFF;stroke:#2398C1;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;" d="
+				M27.8,24.4c0,0.7,0.3,1.4,0.8,1.9c0.4,0.4,1,0.6,1.6,0.6c0.6,0,1.2-0.2,1.6-0.6c0.5-0.5,0.9-1.1,0.9-1.9c0-1.3-1.1-2.4-2.4-2.4
+				C28.9,21.9,27.8,23,27.8,24.4z"/>
+		</g>
+		<g>
+			
+				<path style="fill:#B6ECFF;stroke:#2398C1;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;" d="
+				M15.3,32.7c0,4,12.7,4,12.7,0c0-0.1,0-0.3,0-0.4c-0.1-1.5-0.5-2.9-1.3-4c-0.7-1-1.6-1.8-2.6-2.2c-0.6,0.6-1.5,0.9-2.4,0.9
+				c-0.9,0-1.8-0.3-2.4-0.9C16.9,27.1,15.3,29.6,15.3,32.7z"/>
+			
+				<path style="fill:#B6ECFF;stroke:#2398C1;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;" d="
+				M17.9,23.1c0,1.1,0.5,2.2,1.3,2.9c0.7,0.6,1.5,0.9,2.4,0.9c0.9,0,1.8-0.3,2.4-0.9c0.8-0.7,1.3-1.7,1.3-2.9c0-2.1-1.7-3.8-3.8-3.8
+				C19.6,19.4,17.9,21,17.9,23.1z"/>
+		</g>
+	</g>
+</g>
+</svg>

webpack.config.js

 var path = require('path');
 var webpack = require('webpack');
 
-var environment = require('./src/environment.js');
 var routes = require('./server/routes.json');
 
 // Prepare all entry points
@@ -53,9 +52,6 @@ module.exports = {
         fs: 'empty'
     },
     plugins: [
-        new webpack.DefinePlugin({
-            'process.env': environment
-        }),
         new webpack.optimize.UglifyJsPlugin({
             compress: {
                 warnings: false