(WIP) Fixes #856 new homepage

CHANGELOG.md

@@ -14,6 +14,8 @@ to [Semantic Versioning](http://semver.org/).
   - Skip navigation has been added at the top of the page.
 
 ### Changed
+- The homepage has been refreshed to better inform
+the site vistors what they can do on the site.
 - The `dist` dir is now cleaned up frequently during
   development, ensuring that old files don't stay
   around for too long.
@@ -42,15 +44,15 @@ to [Semantic Versioning](http://semver.org/).
 - Added environment variables `MAILINGLIST_URL`
   and `MAILINGLIST_PRIVACY_NAME`.
 - The site now generates `index.html` files for redirects. This
-  was done so that `/clubs/curriculum/` redirects to 
+  was done so that `/clubs/curriculum/` redirects to
   `/activities/web-lit-basics/`.
 - `lib/changelog.js` can be used as a node script to help
   update `CHANGELOG.md`.
 - Aspects of the structure and accuracy of this
   changelog are now verified by the automated test suite.
 
 ### Changed
-- The Clubs Curriculum page has been renamed to 
+- The Clubs Curriculum page has been renamed to
   Web Literacy Basics, and is now available at
   `/activities/web-lit-basics/`. It's no longer accessible
   through the sidebar, but is instead listed as the
@@ -64,7 +66,7 @@ to [Semantic Versioning](http://semver.org/).
   collapsed area becomes focused, improving navigation for
   sighted users who can only use the keyboard for navigation.
 - Signing up for the Maker Party mailing list now shows
-  a "Thank you" modal when the user is returned to the 
+  a "Thank you" modal when the user is returned to the
   site from BSD.
 - Moved all documentation about manual testing to
   `CONTRIBUTING.md`.

components/blockquote.jsx

@@ -6,7 +6,6 @@ var Blockquote = React.createClass({
     className: React.PropTypes.string,
     imgSrc: React.PropTypes.string.isRequired,
     imgSrc2x: React.PropTypes.string,
-    imgAlt: React.PropTypes.string.isRequired,
     imgWidth: React.PropTypes.number,
     imgHeight: React.PropTypes.number,
     children: React.PropTypes.object.isRequired,
@@ -15,12 +14,12 @@ var Blockquote = React.createClass({
   render: function() {
     return (
       <blockquote className={this.props.className}>
+        {this.props.children}
         <figure>
           <ImageTag src1x={this.props.imgSrc} src2x={this.props.imgSrc2x}
-              alt={this.props.imgAlt}
+              alt=""
               width={this.props.imgWidth || 148} height={this.props.imgHeight || 148} />
         </figure>
-        {this.props.children}
         <small>{this.props.author}</small>
       </blockquote>
     );

components/hero-unit.jsx

@@ -50,8 +50,12 @@ var HeroUnit = React.createClass({
         <div className="col-md-12 hero-unit" style={{
           backgroundImage: 'url(' + this.state.image + ')'
         }}>
-          {marquee}
-          {this.props.children}
+          <div>
+            <div className="inner-container">
+              {marquee}
+              {this.props.children}
+            </div>
+          </div>
         </div>
       </div>
     );

components/icon-button.jsx

@@ -0,0 +1,51 @@
+var React = require('react');
+var Router = require('react-router');
+var Link = Router.Link;
+var ImageTag = require('./imagetag.jsx');
+
+var LinkSwap = React.createClass({
+  render: function() {
+    var classes =  "btn btn-awsm";
+    // Swap out Link or a simple anchor depending on the props we have.
+    if (this.props.linkTo) {
+      return (
+        <Link to={this.props.linkTo} className={classes}>
+          {this.props.children}
+        </Link>
+      )
+    }
+    return (
+      <a href={this.props.href} className={classes}>
+        {this.props.children}
+      </a>
+    )
+  }
+});
+
+var IconButton = React.createClass({
+  propTypes: {
+    linkTo: React.PropTypes.string,
+    href: React.PropTypes.string,
+    imgSrc: React.PropTypes.string.isRequired,
+    imgSrc2X: React.PropTypes.string,
+    head: React.PropTypes.string.isRequired,
+    subhead: React.PropTypes.string
+  },
+  render: function() {
+    return (
+      <div className="icon-button">
+        <LinkSwap linkTo={this.props.linkTo} href={this.props.href}>
+          <figure>
+            <ImageTag className="image" src1x={this.props.imgSrc} src2x={this.props.imgSrc2x}
+            alt="" height={50} />
+            <figcaption>
+              <p className="link-text">{this.props.head}</p>
+            </figcaption>
+          </figure>
+        </LinkSwap>
+      </div>
+    );
+  }
+});
+
+module.exports = IconButton;

components/icon-buttons.jsx

@@ -0,0 +1,19 @@
+var React = require('react');
+
+var IconButtons = React.createClass({
+  render: function() {
+    return (
+      <div className="row icon-buttons">
+        {
+           React.Children.map(this.props.children, function(iconButton){
+            return(
+              <div className="col-sm-4 col-md-4 col-lg-4">{iconButton}</div>
+            )
+          })
+        }
+      </div>
+    );
+  }
+});
+
+module.exports = IconButtons;

components/icon-links.jsx

@@ -11,19 +11,21 @@ var IconLinks = React.createClass({
     var links = Array.isArray(this.props.children) ? this.props.children : [this.props.children];
     var classes;
     return (
-      <div className="row icon-links">
-        {
-          links.map(function(link, i){
-            // we either have 2 or 3 icons in a IconLinks row
-            classes = (links.length === 2 && i === 0) ?
-                      "col-sm-4 col-md-4 col-lg-4 col-sm-offset-2 col-md-offset-2 col-lg-offset-2" :
-                      "col-sm-4 col-md-4 col-lg-4";
-            return(
-              <div className={classes} key={i}>{link}</div>
-            )
-          })
-        }
-      </div>
+      <section>
+        <div className="row icon-links">
+          {
+            links.map(function(link, i){
+              // we either have 2 or 3 icons in a IconLinks row
+              classes = (links.length === 2 && i === 0) ?
+                        "col-sm-4 col-md-4 col-lg-4 col-sm-offset-2 col-md-offset-2 col-lg-offset-2" :
+                        "col-sm-4 col-md-4 col-lg-4";
+              return(
+                <div className={classes} key={i}>{link}</div>
+              )
+            })
+          }
+        </div>
+      </section>
     );
   }
 });

less/common.less

@@ -54,7 +54,10 @@ main {
 }
 
 section {
-  padding: 2.5rem;
+  padding: 1.5rem;
+  @media screen and (min-width: @screen-md-min) {
+    padding: @section-padding-vertical @section-padding-horizontal;
+  }
 }
 
 a.bold-link {
@@ -65,6 +68,15 @@ a.bold-link {
   white-space: pre;
 }
 
+a.more {
+  font-weight: 600;
+  &:after {
+    content: "\f30f";
+    font-family: "Ionicons";
+    margin: 0 .5rem;
+  }
+}
+
 .teach-tabzilla#tabzilla {
   display: none;
   @media screen and (min-width: @screen-md-min) {
@@ -141,7 +153,7 @@ html.no-js .no-js-warning {
 
 .caret-list {
   list-style-type: none;
-  padding-left: 2rem;
+  padding-left: 0;
   li {
     &:before {
       content: "\f363";

less/components/blockquote.less

@@ -4,6 +4,7 @@ blockquote {
   font-size: 3rem;
   font-style: italic;
   text-align: center;
+  margin-bottom: 0;
   img {
     display: block;
     margin: 0 auto 1rem;
@@ -14,4 +15,7 @@ blockquote {
     font-weight: 300;
     margin-top: 1rem;
   }
+  p {
+    font-size: 2.5rem;
+  }
 }

less/components/btn.less

@@ -1,4 +1,5 @@
 .btn {
+  white-space: normal;
   &.btn-awsm {
     position: relative;
     width: 100%;

less/components/hero-unit.less

@@ -6,7 +6,7 @@
   color: white;
   display: flex;
   flex-direction: column;
-  height: 45rem;
+  min-height: 45rem;
   justify-content: center;
   text-align: center;
   @media (min-width: @screen-md-min) {

less/components/icon-button.less

@@ -0,0 +1,22 @@
+.icon-button {
+  a.btn.btn-awsm {
+    width: 100%;
+    color: @blueSidebarColor;
+    background-color: @paleBlue;
+    box-shadow: 0px 0.4rem 0px @blueSidebarColor,
+                0px 0.1rem 0px rgba(255, 255, 255, 0.5) inset;
+    &:hover {
+      color: @bodyTextColor;
+      background-color: @awsmBtnColor;
+      top: 0;
+      box-shadow: 0px 0.4rem 0px #C4A74F,
+                  0px 0.1rem 0px rgba(255, 255, 255, 0.5) inset;
+    }
+  }
+  .link-text {
+    font-size: 1.5rem;
+    font-weight: 700;
+    line-height: 1.2;
+    margin: 1rem 0 .8rem 0;
+  }
+}

less/components/icon-buttons.less

@@ -0,0 +1,7 @@
+.icon-buttons {
+  margin-top: 5rem;
+  margin-bottom: 2rem;
+  @media screen and (min-width: @screen-md-min) {
+    margin-top: 12rem;
+  }
+}