Merge pull request #189 from mewtaylor/feature/hoc

Update hoc page formatting

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",

src/_frameless.scss

@@ -0,0 +1,91 @@
+/*
+    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

@@ -1,4 +1,5 @@
 @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/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

@@ -0,0 +1,21 @@
+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

@@ -0,0 +1,56 @@
+@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/main.scss

@@ -1,4 +1,5 @@
 @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/views/hoc/hoc.jsx

@@ -1,11 +1,14 @@
 var classNames = require('classnames');
+var FormattedHTMLMessage = require('react-intl').FormattedHTMLMessage;
+var FormattedMessage = require('react-intl').FormattedMessage;
 var React = require('react');
 var render = require('../../lib/render.jsx');
 
-require('./hoc.scss');
-
 var Button = require('../../components/forms/button.jsx');
 var Box = require('../../components/box/box.jsx');
+var SubNavigation = require('../../components/subnavigation/subnavigation.jsx');
+
+require('./hoc.scss');
 
 var Hoc = React.createClass({
     type: 'Hoc',
@@ -28,102 +31,329 @@ var Hoc = React.createClass({
         return (
             <div>
                 <div className={classes}>
-                    <h1>Get Creative with Coding</h1>
+                    <h1>
+                        <FormattedMessage
+                            id='hoc.title'
+                            defaultMessage={'Get Creative with Coding'} />
+                    </h1>
                     <p>
-                        With Scratch, you can program your own stories, games, and animations —
+                        <FormattedMessage
-                        and share them online.
+                            id='hoc.subTitle'
+                            defaultMessage={
+                                'With Scratch, you can program your own stories, games, and animations — ' +
+                                'and share them online.'
+                            } />
                     </p>
 
-                    <div className="card-deck">
+                    <section>
-                        <div className="card">
+                        <div className="card-deck">
-                            <a href="/projects/editor/?tip_bar=name">
+                            <div className="card">
-                                <div className="card-info" onMouseEnter={this.onCardEnter.bind(this, 'name-bg')}>
+                                <a href="/projects/editor/?tip_bar=name">
-                                    <img src="/images/name-tutorial.jpg" />
+                                    <div className="card-info" onMouseEnter={this.onCardEnter.bind(this, 'name-bg')}>
-                                    <Button>Animate Your Name</Button>
+                                        <img src="/images/hoc2015/name-tutorial.jpg" />
-                                </div>
+                                        <Button>
-                            </a>
+                                            <FormattedMessage
-                        </div>
+                                                id='general.tipsAnimateYourNameTitle'
+                                                defaultMessage={'Animate Your Name'} />
+                                        </Button>
+                                    </div>
+                                </a>
+                            </div>
 
-                        <div className="card" onMouseEnter={this.onCardEnter.bind(this, 'wbb-bg')}>
+                            <div className="card" onMouseEnter={this.onCardEnter.bind(this, 'wbb-bg')}>
-                            <a href="/hide">
+                                <a href="/hide">
-                                <div className="card-info">
+                                    <div className="card-info">
-                                    <img src="/images/hide-seek-tutorial.jpg" />
+                                        <img src="/images/hoc2015/hide-seek-tutorial.jpg" />
-                                    <Button> Hide-and-Seek Game</Button>
+                                        <Button>
-                                </div>
+                                            <FormattedMessage
-                            </a>
+                                                id='general.tipsHideAndSeekTitle'
-                        </div>
+                                                defaultMessage={'Hide-and-Seek Game'} />
+                                        </Button>
+                                    </div>
+                                </a>
+                            </div>
 
-                        <div className="card" onMouseEnter={this.onCardEnter.bind(this, 'dance-bg')}>
+                            <div className="card" onMouseEnter={this.onCardEnter.bind(this, 'dance-bg')}>
-                            <a href="/projects/editor/?tip_bar=dance">
+                                <a href="/projects/editor/?tip_bar=dance">
-                                <div className="card-info">
+                                    <div className="card-info">
-                                    <img src="/images/dance-tutorial.jpg" />
+                                        <img src="/images/hoc2015/dance-tutorial.jpg" />
-                                    <Button>Dance, Dance, Dance</Button>
+                                        <Button>
-                                </div>
+                                            <FormattedMessage
-                            </a>
+                                                id='general.tipsDanceTitle'
+                                                defaultMessage={'Dance, Dance, Dance'} />
+                                        </Button>
+                                    </div>
+                                </a>
+                            </div>
                         </div>
-                    </div>
+                    </section>
                     
-                    <ul className="sub-nav">
+                    <SubNavigation>
-                        <li className="info">Find out more:</li>
+                        <li className="description">
-                        <a href="/about"><li className="link">About Scratch</li></a>
+                            <FormattedMessage
-                        <a href="/parents"><li className="link">For Parents</li></a>
+                                id='hoc.findOutMore'
-                        <a href="/educators"><li className="link">For Educators</li></a>
+                                defaultMessage={'Find out more'} />:
-                    </ul>
+                        </li>
+                        <a href="/about">
+                            <li>
+                                <FormattedMessage
+                                    id='footer.about'
+                                    defaultMessage={'About Scratch'} />
+                            </li>
+                        </a>
+                        <a href="/parents">
+                            <li>
+                                <FormattedMessage
+                                    id='general.forParents'
+                                    defaultMessage={'For Parents'} />
+                            </li>
+                        </a>
+                        <a href="/educators">
+                            <li>
+                                <FormattedMessage
+                                    id='general.forEducators'
+                                    defaultMessage={'For Educators'} />
+                            </li>
+                        </a>
+                    </SubNavigation>
                 </div>
 
+                
+
                 <div className="inner">
-                    <Box>
+                    <Box title={''}>
                         <section className="one-up">
                             <div className="column">
-                                <h3>Activity Cards and Guides</h3>
+                                <h3>
+                                    <FormattedMessage
+                                        id='hoc.activityCardsHeader'
+                                        defaultMessage={'Activity Cards and Guides'} />
+                                </h3>
                                 <p>
-                                    Want tips and ideas for your Hour-of-Code activities?&nbsp;
+                                    <FormattedHTMLMessage
-                                    View and print activity cards and facilitator guides.
+                                        id='hoc.activityCardsInfo1'
-                                    <br />
+                                        defaultMessage={
-                                    For more resources, see <a href="/help">Scratch Help</a>.
+                                            '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.'
+                                        } />
                                 </p>
                             </div>
 
                             <div className="resource">
                                 <img src="/svgs/tips-card.svg" />
                                 <div className="resource-info">
-                                    <h5>Animate Your Name</h5>
+                                    <h5>
-                                    <a href="#">Activity Cards</a>
+                                        <FormattedMessage
-                                    <a href="#">Facilitator Guide</a>
+                                            id='general.tipsAnimateYourNameTitle'
+                                            defaultMessage={'Animate Your Name'} />
+                                    </h5>
+                                    <a href="/scratchr2/static/pdfs/help/AnimateYourNameCards.pdf">
+                                        <FormattedMessage
+                                            id='hoc.activityCards'
+                                            defaultMessage={'Activity Cards'} />
+                                    </a>
+                                    <a href="/scratchr2/static/pdfs/help/AnimateYourNameGuide.pdf">
+                                        <FormattedMessage
+                                            id='hoc.facilitatorGuide'
+                                            defaultMessage={'Facilitator Guide'} />
+                                    </a>
                                 </div>
                             </div>
 
                             <div className="resource">
                                 <img src="/svgs/tips-card.svg" />
                                 <div className="resource-info">
-                                    <h5>Hide-and-Seek</h5>
+                                    <h5>
-                                    <a href="#">Activity Cards</a>
+                                        <FormattedMessage
-                                    <a href="#">Facilitator Guide</a>
+                                            id='general.tipsHideAndSeekTitle'
+                                            defaultMessage={'Hide-and-Seek Game'} />
+                                    </h5>
+                                    <a href="/scratchr2/static/pdfs/help/Hide-and-Seek-Cards.pdf">
+                                        <FormattedMessage
+                                            id='hoc.activityCards'
+                                            defaultMessage={'Activity Cards'} />
+                                    </a>
+                                    <a href="/scratchr2/static/pdfs/help/Hide-and-Seek-Guide.pdf">
+                                        <FormattedMessage
+                                            id='hoc.facilitatorGuide'
+                                            defaultMessage={'Facilitator Guide'} />
+                                    </a>
                                 </div>
                             </div>
                             
                             <div className="resource">
                                 <img src="/svgs/tips-card.svg" />
                                 <div className="resource-info">
-                                    <h5>Dance, Dance, Dance</h5>
+                                    <h5>
-                                    <a href="#">Activity Cards</a>
+                                        <FormattedMessage
-                                    <a href="#">Facilitator Guide</a>
+                                            id='general.tipsDanceTitle'
+                                            defaultMessage={'Dance, Dance, Dance'} />
+                                    </h5>
+                                    <a href="/scratchr2/static/pdfs/help/DanceCards.pdf">
+                                        <FormattedMessage
+                                            id='hoc.activityCards'
+                                            defaultMessage={'Activity Cards'} />
+                                    </a>
+                                    <a href="/scratchr2/static/pdfs/help/DanceGuide.pdf">
+                                        <FormattedMessage
+                                            id='hoc.facilitatorGuide'
+                                            defaultMessage={'Facilitator Guide'} />
+                                    </a>
                                 </div>
                             </div>
                         </section>
 
                         <section className="two-up">
                             <div className="column">
-                                <h3>Tips Window</h3>
+                                <h3>
+                                    <FormattedMessage
+                                        id='hoc.helpScratch'
+                                        defaultMessage={'Help with Scratch'} />
+                                </h3>
                                 <p>
-                                    Need help getting started? Looking for ideas?&nbsp;
+                                    <FormattedHTMLMessage
-                                    You can find tutorials and helpful hints in the
+                                        id='hoc.helpScratchDescription'
-                                    <br />
+                                        defaultMessage={
-                                    <a href="/projects/editor/?tip_bar=home">Tips Window</a>
+                                            '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>'
+                                        } />
                                 </p>
                             </div>
                             <div className="column">
-                                <img src="/images/tips-test-animation.gif" />
+                                <img src="/images/hoc2015/tips-test-animation.gif" />
+                            </div>
+                        </section>
+
+                        <section className="one-up">
+                            <div className="column">
+                                <h3>
+                                    <FormattedMessage
+                                        id='hoc.moreActivities'
+                                        defaultMessage={'Want More Activities?'} />
+                                </h3>
+                                <p>
+                                    <FormattedHTMLMessage
+                                        id='hoc.moreDescription'
+                                        defaultMessage={
+                                            'Check out these other tutorials. Or remix one of our ' +
+                                            '<a href="/starter_projects">Starter Projects</a>'
+                                        } />
+                                 </p>
+                            </div>
+
+                            <div className="card-deck">
+                                <div className="card">
+                                    <a href="/projects/editor/?tip_bar=getStarted">
+                                        <div className="card-info">
+                                            <img src="/images/hoc2015/getting-started-tutorial.jpg" />
+                                            <Button>
+                                                <FormattedMessage
+                                                    id='general.tipsGetStarted'
+                                                    defaultMessage={'Getting Started'} />
+                                            </Button>
+                                        </div>
+                                    </a>
+                                </div>
+
+                                <div className="card">
+                                    <a href="scratch.mit.edu/bearstack ">
+                                        <div className="card-info">
+                                            <img src="/images/hoc2015/bearstack-tutorial.jpg" />
+                                            <Button>
+                                                <FormattedMessage
+                                                    id='general.tipsBearstack'
+                                                    defaultMessage={'Bearstack Story'} />
+                                            </Button>
+                                        </div>
+                                    </a>
+                                </div>
+
+                                <div className="card">
+                                    <a href="/projects/editor/?tip_bar=pong">
+                                        <div className="card-info">
+                                            <img src="/images/hoc2015/pong-tutorial.jpg" />
+                                            <Button>
+                                                <FormattedMessage
+                                                    id='general.tipsPongGame'
+                                                    defaultMessage={'Create a Pong Game'} />
+                                            </Button>
+                                        </div>
+                                    </a>
+                                </div>
+                            </div>
+                        </section>
+
+                        <section className="one-up">
+                            <div className="column">
+                                <h3>
+                                    <FormattedMessage
+                                        id='hoc.addToStudios'
+                                        defaultMessage={'Add Your Projects to Studios'} />
+                                </h3>
+                                <p>
+                                    <FormattedHTMLMessage
+                                        id='hoc.addToStudiosDescription'
+                                        defaultMessage={
+                                            '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!'
+                                        } />
+                                 </p>
+                            </div>
+
+                            <div className="studio">
+                                <img src="/svgs/studio.svg" />
+                                <div className="studio-info">
+                                    <a href="/studios/432299/">
+                                        <h5>
+                                            <FormattedMessage
+                                                id='general.tipsAnimateYourNameTitle'
+                                                defaultMessage={'Animate Your Name'} />
+                                        </h5>
+                                    </a>
+                                </div>
+                            </div>
+
+                            <div className="studio">
+                                <img src="/svgs/studio.svg" />
+                                <div className="studio-info">
+                                    <a href="/studios/1672166">
+                                        <h5>
+                                            <FormattedMessage
+                                                id='hoc.studioWeBareBears'
+                                                defaultMessage={'We Bare Bears Studio'} />
+                                        </h5>
+                                    </a>
+                                </div>
+                            </div>
+
+                            <div className="studio">
+                                <img src="/svgs/studio.svg" />
+                                <div className="studio-info">
+                                    <a href="/1065372/projects/">
+                                        <h5>
+                                            <FormattedMessage
+                                                id='general.tipsDanceTitle'
+                                                defaultMessage={'Dance, Dance, Dance'} />
+                                        </h5>
+                                    </a>
+                                </div>
+                            </div>
+
+                            <div className="studio">
+                                <img src="/svgs/studio.svg" />
+                                <div className="studio-info">
+                                    <a href="/studios/1672164/">
+                                        <h5>
+                                            <FormattedMessage
+                                                id='hoc.studioAlice'
+                                                defaultMessage={'Alice in Wonderland Studio'} />
+                                        </h5>
+                                    </a>
+                                </div>
                             </div>
                         </section>
                     </Box>
@@ -131,10 +361,21 @@ var Hoc = React.createClass({
                     <section className="one-up">
                         <h3>Collaborators</h3>
                         <div className="logos">
-                            <img src="/images/code-org-logo.png" />
+                            <a href="http://scratched.gse.harvard.edu/">
-                            <img src="/images/cn-logo.png" />
+                                <img src="/images/hoc2015/scratchEd-logo.png" />
-                            <img src="/images/paa-logo.png" />
+                            </a>
-                            <img src="/images/pocketcode-logo.png" />
+                            <a href="https://code.org/">
+                                <img src="/images/hoc2015/code-org-logo.png" />
+                            </a>
+                            <a href="http://www.cartoonnetwork.com/">
+                                <img src="/images/hoc2015/cn-logo.png" />
+                            </a>
+                            <a href="http://www.paalive.org/">
+                                <img src="/images/hoc2015/paa-logo.png" />
+                            </a>
+                            <a href="http://www.catrobat.org/">
+                                <img src="/images/hoc2015/pocketcode-logo.png" />
+                            </a>
                         </div>
                     </section>
                 </div>

src/views/hoc/hoc.scss

@@ -1,4 +1,5 @@
 @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 {
+        font-weight: 300; 
+    }
+
     p {
         line-height: 2em;
     }
 
-    // To be revamped in Global Grids standards
-    .inner {
-        margin: 0 auto;
-        width: 80%;
-        max-width: 960px;
-
-        .box {
-            margin-bottom: 10px;
-        }
-    }
-
     .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: 20px 0;
-        padding: 10px 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, 
+        section {
-        .sub-nav {
+            border: 0;
-            display: flex;
+            padding: 10px 0;
-            margin: 20px auto;
+            max-width: $desktop;
 
-            width: 80%;
+            .card-deck {
-            max-width: 960px;
+                padding: 0 20px;
+            }
 
-            justify-content: center;
+            //6 columns
-            flex-wrap: wrap;
+            @media only screen and (min-width: $mobile) and (max-width: $tablet - 1) {
+                max-width: $mobile;
+            }
         }
+    }
     
-        .card-deck {
+    .card-deck {
+        display: inline-flex;
+        justify-content: center;
+        flex-wrap: wrap;
 
-            .card {
+        .card {
-                display: inline-block;
+            margin: 10px;
-                margin: 10px;
+            border-radius: 7px;
-                border-radius: 7px;
+            background-color: $active-gray;                
-                background-color: $active-gray;                
+            padding: 2px;
-                padding: 2px;
             
-                width: 30%;
+            width: 30%;
-                min-width: 200px;
+            min-width: 200px;
-                max-width: 230px;
+            max-width: 230px;
 
-                .card-info {
+            a {
+                white-space: normal;
+            }
+
+            .card-info {
+                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;
-
-                    background-color: $base-bg;
-
-                    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;
-                    }
-                }
-            }
-        }
-
-        .sub-nav {
-            color: $type-white;
-            font-size: .8em;
-            font-weight: bold;
-
-            li {
-
-                display: inline-block;
-                margin: 5px;
-
-                padding: .75em 1em;
-                
-                list-style-type: none;
-
-            }
-
-            a .link {
-                
-                border: 2px solid $active-gray;
-
-                border-radius: 50px;
-
-                text-decoration: none;
-                color: $type-white;
-                
-
-                &:hover {
-                    transition: background-color .25s ease;
-                    border-color: transparent;
-                    background-color: $active-gray;
                 }
 
-                &:active {
+                button {
-                    border: 0 solid transparent;
+                    margin: 0 10px 10px 10px;
-                    box-shadow: inset 0 0 5px $box-shadow-gray;
-                    background-color: $active-dark-gray;
-                    padding: calc(.75em + 2px) calc(1em + 2px);
                 }
             }
+
+            //8 columns
+            @media only screen and (min-width: $tablet) and (max-width: $desktop - 1) {
+                margin: 2px;
+                min-width: 175px;
+
+                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; 
-        }
-
-        .logos {
-            margin: 10px 0;
-            width: 100%;
-
-            img {
-                margin: 0 20px;
-                max-width: 200px;
-                max-height: 75px;
-
-                vertical-align: middle;
-            }
-        }
-
-        .resource {
-            display: flex;
-            margin: 10px;
-            border-radius: 5px;
-
-            padding: 10px 15px;
-            width: 30%;
-            min-width: 200px;
-            max-width: 230px;
-            text-align: left;
-
-            justify-content: center;
-            align-items: center;
-
-            img {
-                margin-right: 15px;
-            }
-
-            h5 {
-                margin: 8px 0;
-                font-weight: 500;
-            }
-
-            a {
-                display: block;
-                margin: 5px 0;
-                font-size: .8em;
-            }
-        }
-
         &.one-up {
             text-align: center;
 
             .column {
-                margin: 10px;
                 width: 100%;
             }
-
-            .logo {
-                display: block;
-            }
         }
 
         &.two-up {
-            
             .column {
-                margin: 10px;
-
                 min-width: 200px;
                 max-width: 40%;
+                text-align: left;
 
                 img {
                     border-radius: 5px;
-                    
                     width: 100%;
                 }
             }
         }
     }
+
+    .resource,
+    .studio {
+        display: flex;
+        margin: 10px 0; 
+        min-width: 200px;
+
+        text-align: left;
+        justify-content: center;
+        align-items: center;
+
+        img {
+            margin-right: 15px;
+        }
+
+        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: 0 auto;
+            }
+        }
+    }
+
+    .resource { 
+        width: 33%;
+
+        a {
+            display: block;
+            margin: 5px 0;
+            font-size: .8em;
+        }
+    }
+
+    .studio {
+        width: 50%;
+
+        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%;
+            }
+
+            img {
+                float: none;
+            }
+        }
+    }
+
+    .logos {
+        margin: 20px 0;
+        width: 100%;
+
+        a {
+            white-space: normal;
+        }
+
+        img {
+            margin: 20px;
+            max-width: 150px;
+            max-height: 55px;
+            vertical-align: middle;
+        }
+    }
 }

static/svgs/studio.svg

@@ -0,0 +1,52 @@
+<?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>