Change bearstack/bball to hide and dance

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

src/views/hoc/hoc.scss

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