Update hoc page with new tutorials

Adds:
1. Make it Fly
2. Make Music

Removes:
1. Hide-and-Seek
2. Dance, Dance, Dance

src/l10n.json

@@ -69,12 +69,6 @@
     "general.studios": "Studios",
     "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.validationEmail": "Please enter a valid email address",

src/views/hoc/hoc.scss

@@ -8,121 +8,115 @@ $base-bg: $ui-white;
 }
 
 .hoc {
-    .title-banner {
-        &.wbb-bg {
-            background-image: url("/images/hoc2015/hide-bg.jpg");
-        }
-
-        &.dance-bg {
-            background-image: url("/images/hoc2015/dance-bg.jpg");
-        }
-
-        &.name-bg {
-            background-image: url("/images/hoc2015/name-bg.jpg");
+    .img,
+    .button {
+        &.card-info {
+            width: calc(100% - 20px);
         }
-
-        section {
-            border: 0;
-            padding: 10px 0;
-            max-width: $desktop;
-
-            .card-deck {
-                padding: 0 20px;
     }
 
-            //6 columns
-            @media only screen and (min-width: $mobile) and (max-width: $tablet - 1) {
-                max-width: $mobile;
-            }
-        }
+    .img {
+        &.card-info {
+            margin: 10px 10px 5px 10px;
+            border-radius: 5px;
         }
 
-    .flex-row {
-        .card {
-            margin: 10px;
-            border-radius: 7px;
-            background-color: $active-gray;
-            padding: 2px;
-
-            width: 30%;
-            min-width: 200px;
-            max-width: 230px;
-
-            .card-info {
+        &.mod-border {
             border-radius: 5px;
-                background-color: $base-bg;
             width: 100%;
-                height: 100%;
-
-
-                button,
-                img {
-                    width: calc(100% - 20px);
         }
 
-                img {
-                    margin: 10px 10px 5px 10px;
-                    border-radius: 5px;
+        &.mod-resource,
+        &.mod-studio {
+            margin-right: 15px;
         }
 
-                button {
-                    margin: 0 10px 10px 10px;
-                }
+        &.mod-studio {
+            float: left;
         }
 
-            //8 columns
-            @media only screen and (min-width: $tablet) and (max-width: $desktop - 1) {
-                margin: 2px;
-                min-width: 175px;
-
-                button {
-                    font-size: .7em;
+        &.mod-logo {
+            margin: 20px;
+            max-width: 150px;
+            max-height: 55px;
+            vertical-align: middle;
         }
     }
 
+    .button {
+        &.card-info {
+            margin: 0 10px 10px 10px;
         }
     }
 
-    section {
+    .section {
         display: flex;
         margin: 0 auto;
         border-bottom: 1px solid $ui-border;
         padding: 50px 0;
         width: 95%;
+        text-align: center;
 
         justify-content: center;
         flex-wrap: wrap;
         align-items: center;
 
-        p {
-            margin: 10px auto 20px;
-            max-width: 600px;
-        }
-
         &:last-child {
             border-bottom: 0;
         }
 
-        &.one-up {
-            text-align: center;
-
-            .column {
-                width: 100%;
+        &.title-banner-section {
+            border: 0;
+            padding: 10px 0;
+            max-width: $desktop;
         }
     }
 
-        &.two-up {
-            .column {
+    .section-column {
+        width: 100%;
+
+        &.mod-split {
             min-width: 200px;
             max-width: 40%;
             text-align: left;
+        }
+    }
 
-                img {
-                    border-radius: 5px;
-                    width: 100%;
+    .section-paragraph {
+        margin: 10px auto 20px;
+        max-width: 600px;
     }
+
+    .title-banner {
+        &.wbb-bg {
+            background-image: url("/images/hoc2015/hide-bg.jpg");
         }
+
+        &.dance-bg {
+            background-image: url("/images/hoc2015/dance-bg.jpg");
+        }
+
+        &.name-bg {
+            background-image: url("/images/hoc2015/name-bg.jpg");
+        }
+    }
+
+    .flex-row-card {
+        margin: 10px;
+        border-radius: 7px;
+        background-color: $active-gray;
+        padding: 2px;
+
+        width: 30%;
+        min-width: 200px;
+        max-width: 230px;
     }
+
+    .flex-row-card-info {
+        border-radius: 5px;
+        background-color: $base-bg;
+        width: 100%;
+        height: 100%;
     }
 
     .resource,
@@ -134,97 +128,104 @@ $base-bg: $ui-white;
         text-align: left;
         justify-content: center;
         align-items: center;
-
-        img {
-            margin-right: 15px;
-        }
-
-        a {
-            h5 {
-                margin: 8px 0;
-                color: $ui-blue;
-                font-weight: 500;
-
-                &:hover {
-                    color: darken($ui-blue, 15);
-                }
-            }
-        }
-
-        //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: 0 auto;
-            }
-        }
     }
 
     .resource {
         width: 33%;
+    }
 
-        a {
+    .resource-anchor {
         display: block;
         margin: 5px 0;
         font-size: .8em;
     }
 
-        .resource-info {
-            h5 {
+    .resource-info-header {
         margin: 0;
         line-height: inherit;
     }
-        }
-    }
 
     .studio {
         width: 50%;
+    }
 
-        h5 {
+    .studio-info-header {
+        margin: 8px 0;
         width: 200px;
+        color: $ui-blue;
+        font-weight: 500;
+
+        &:hover {
+            color: darken($ui-blue, 15);
+        }
     }
 
-        img {
-            float: left;
+    .logos {
+        margin: 20px 0;
+        width: 100%;
     }
 
-        @media only screen and (max-width: $mobile - 1) {
+    .trademark {
+        margin-top: 20px;
+    }
+}
+
+@media only screen and (max-width: $mobile - 1) {
+    .hoc {
+        .studio {
             display: inline-block;
         }
+    }
+}
+
+//6 columns
+@media only screen and (min-width: $mobile) and (max-width: $tablet - 1) {
+    .hoc {
+        .title-banner-section {
+            max-width: $mobile;
+        }
 
-        @media only screen and (min-width: $mobile) and (max-width: $tablet - 1) {
+        .studio {
             display: inline-block;
         }
+    }
+}
 
-        //8 columns
-        @media only screen and (min-width: $tablet) and (max-width: $desktop - 1) {
-            h5 {
-                width: 100%;
+//8 columns
+@media only screen and (min-width: $tablet) and (max-width: $desktop - 1) {
+    .hoc {
+        .img {
+            &.mod-resource,
+            &.mod-studio {
+                margin: 0 auto;
             }
 
-            img {
+            &.mod-studio {
                 float: none;
             }
         }
-    }
 
-    .logos {
-        margin: 20px 0;
-        width: 100%;
+        .button {
+            &.card-info {
+                font-size: .7em;
+            }
+        }
 
-        img {
-            margin: 20px;
-            max-width: 150px;
-            max-height: 55px;
-            vertical-align: middle;
+        .flex-row-card {
+            margin: 2px;
+            min-width: 175px;
         }
+
+        .resource,
+        .studio {
+            display: block;
+            width: 30%;
+            min-width: 180px;
+            text-align: center;
         }
 
-    .trademark {
-        margin-top: 20px;
+        .studio-info-header {
+            width: 100%;
+        }
     }
 }

src/views/hoc/l10n.json

@@ -15,5 +15,12 @@
     "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"
+    "hoc.title": "Get Creative with Coding",
+    "hoc.tipsAnimateYourNameTitle": "Animate Your Name",
+    "hoc.tipsBearstack": "Bearstack Story",
+    "hoc.tipsMakeMusicTitle": "Make Music",
+    "hoc.tipsGetStarted": "Getting Started",
+    "hoc.tipsMakeItFlyTitle": "Make it Fly",
+    "hoc.tipsPongGame": "Create a Pong Game",
+    "hoc.tipsBBallHoops": "B-Ball Hoops"
 }
\ No newline at end of file