Merge pull request #13 from carljbowman/hoc-landing

Add HOC Landing page View

.sass-lint.yml

@@ -5,6 +5,7 @@ rules:
     - 2
     -
       size: 4
+  leading-zero: 2
   nesting-depth:
     - 1
     -
@@ -19,3 +20,4 @@ rules:
     - 2
     -
       style: double
+  zero-unit: 2

server/routes.json

@@ -15,6 +15,11 @@
         "view": "components",
         "static": false
     },
+    {
+        "pattern": "/hoc",
+        "view": "hoc",
+        "static": false
+    },
     {
         "static": true,
         "resolve": "_path.resolve(__dirname, '../build')",

src/components/forms/button.scss

@@ -24,4 +24,8 @@
     &:active {
         box-shadow: inset 0 1px 2px rgba(0, 0, 0, .25);
     }
+
+    &:focus{
+        outline: none;
+    }
 }

src/components/navigation/navigation.scss

@@ -6,9 +6,11 @@
     top: 0;
     left: 0;
     z-index: 10;
+
+    box-shadow: 0 1px 2px rgba(0,0,0, .4);
     background-color: $base-background-color;
-    width: 100%;
+
-    
+    width: 100%;   
     /* NOTE: Height should match offset settings in main.scss file */
     height: 50px;
 

src/views/hoc/hoc.jsx

@@ -0,0 +1,84 @@
+var React = require('react');
+
+require('./hoc.scss');
+
+var Button = require('../../components/forms/button.jsx');
+var Box = require('../../components/box/box.jsx');
+
+var View = React.createClass({
+    render: function () {
+        return (
+            <div>
+                <div className="top-banner">
+                <h1>Create Projects to Share!</h1>
+                <p>With Scratch, you can program your own stories, games, and animations — and share them online.</p>
+
+                <div className="card-deck">
+                    <div className="card">
+                        <div className="card-info">
+                            <img src="https://www.dropbox.com/s/v8dvhd4i6soutit/temp-card-img.png?dl=1"></img>
+                            <Button>Create a Hide & Seek Game</Button>
+                        </div>
+                    </div>
+
+                    <div className="card">
+                        <div className="card-info">
+                            <img src="https://www.dropbox.com/s/v8dvhd4i6soutit/temp-card-img.png?dl=1"></img>
+                            <Button>Compose a Dance Sequence</Button>
+                        </div>
+                    </div>
+
+                    <div className="card">
+                        <div className="card-info">
+                            <img src="https://www.dropbox.com/s/v8dvhd4i6soutit/temp-card-img.png?dl=1"></img>
+                            <Button>Animate Your Name</Button>
+                        </div>
+                    </div>
+                </div>
+
+                <ul className="sub-nav">
+                    <li className="info">Find out more:</li>
+                    <a href=""><li className="link">About Scratch</li></a>
+                    <a href=""><li className="link">For Parents</li></a>
+                    <a href=""><li className="link">For Educators</li></a>
+                </ul>
+                </div>
+
+                <div className="inner">
+                    <Box>
+                        <section className="one-up">
+                            <div className="column">
+                                <h3>Related Resources</h3>
+                                <p>Below are some resources to help explore Scratch by yourself or to assist groups in
+                                workshops and classrooms <a href="">Find out more</a></p>
+                            </div>
+                        </section>
+
+                        <section className="two-up">
+                            <div className="column">
+                                <h3>Tips Window</h3>
+                                <p>New to Scratch or haven’t heard of the Tips Window? Check out interactive tutorials,
+                                handy block information, and other helpful hints all in the new 2015 <a href="">Tips
+                                Window</a></p>
+                            </div>
+                            <div className="column">
+                                <img src="https://www.dropbox.com/s/l1n1ba7aof3qqx4/tips-test-animation.gif?dl=1"></img>
+                            </div>
+                        </section>
+
+                        <section className="one-up">
+                            <div className="column">
+                                <h3>Still Want More?</h3>
+                                <p><strong>Awesome!</strong> Here are some addtional tutorials
+                                from the Tips Window. <a href="">See all tips</a></p>
+                            </div>
+                        </section>
+                    </Box>
+                </div>
+            </div>
+
+        );
+    }
+});
+
+React.render(<View />, document.getElementById('view'));

src/views/hoc/hoc.scss

@@ -0,0 +1,180 @@
+#view {
+    padding: 0;
+
+    a[href=""] { outline: 1px solid red; }
+
+    // To be integrated into the Global Typography standards 
+    p {
+        line-height: 2em;
+    }
+
+    // To be revamped in Global Grids standards
+    .inner {
+        margin: 0 auto;
+        width: 80%;
+        max-width: 960px;
+
+        .box {
+            margin-bottom: 100px;
+        }
+    } 
+
+    .top-banner {
+        margin-top: 10px;
+        margin-bottom: 40px;
+
+        background-color: #27d2b0;
+
+        padding: 10px 0;
+
+        width: 100%;
+        
+
+        h1, 
+        p {
+            margin: 0 auto;
+            padding-top: 10px;
+
+            max-width: 500px;
+
+            text-align: center;
+            color: white;        
+        }
+
+        .card-deck, 
+        .sub-nav {
+            display: flex;
+            margin: 20px auto;
+            
+            width: 80%;
+            max-width: 960px;
+
+            justify-content: center;
+            flex-wrap: wrap;
+        }
+
+        .card-deck {
+
+            .card {
+                display: inline-block;
+                margin: 10px;
+                border-radius: 7px;
+                background-color: rgba(0, 0, 0, .15);                
+                padding: 2px;
+                
+                width: 30%;
+                min-width: 200px;
+                max-width: 230px;
+
+                .card-info {
+                    border-radius: 5px;
+
+                    background-color: white;
+
+                    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: 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 rgba(0, 0, 0, .15);
+
+                border-radius: 50px;
+
+                text-decoration: none;
+                color: white;
+                
+
+                &:hover {
+                    transition: background-color .25s ease;
+                    border-color: transparent;
+                    background-color: rgba(0, 0, 0, .15);
+                }
+
+                &:active {
+                    border: 0 solid transparent;
+                    box-shadow: inset 0 0 5px rgba(0, 0, 0, .25);
+                    background-color: rgba(0, 0, 0, .20);
+                    padding: calc(.75em + 2px) calc(1em + 2px);
+                }
+            }
+        }
+    }
+
+    .box section {
+        display: flex;
+        margin: 0 auto;
+        border-bottom: 1px solid rgba(0, 0, 0, .15);
+        padding: 30px 0;
+        width: 95%;
+
+        justify-content: center;
+        flex-wrap: wrap;
+        align-items: center;
+
+        h3, p {
+            color: #6b6b6b;
+            font-weight: 300; 
+        }
+
+        &.one-up {
+            text-align: center;
+
+            .column {
+                margin: 10px;
+                max-width: 600px;
+            }
+        }
+
+        &.two-up{
+
+            .column {
+                margin: 10px;
+
+                min-width: 200px;
+                max-width: 40%;
+
+                img {
+                    border: 2px solid #2aa3ef;
+                    border-radius: 5px;
+                    
+                    width: 100%;
+                }
+            }
+        }
+    }
+
+}