Change bearstack/bball to hide and dance

Also make updates to style scoping based on feedback from @rschamp

src/views/hoc/hoc.scss

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

src/views/hoc/l10n.json

@@ -17,10 +17,10 @@
     "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.tipsAnimateYourNameTitle": "Animate Your Name",
-    "hoc.tipsBearstack": "Bearstack Story",
-    "hoc.tipsMakeMusicTitle": "Make Music",
+    "hoc.tipsDanceTitle": "Dance, Dance, Dance",
     "hoc.tipsGetStarted": "Getting Started",
+    "hoc.tipsHideAndSeekTitle": "Hide-and-Seek Game",
+    "hoc.tipsMakeMusicTitle": "Make Music",
     "hoc.tipsMakeItFlyTitle": "Make it Fly",
-    "hoc.tipsPongGame": "Create a Pong Game",
-    "hoc.tipsBBallHoops": "B-Ball Hoops"
+    "hoc.tipsPongGame": "Create a Pong Game"
 }
\ No newline at end of file