(WIP) Fixes #856 new homepage

CHANGELOG.md

@@ -21,6 +21,7 @@ to [Semantic Versioning](http://semver.org/).
   new releases of the site.
 - The dev version modal now links to the latest release
   of the site if the current git revision is unavailable.
+- New homepage design
 
 ### Removed
 - `gulp-html-prettify` is no longer listed as a dependency
@@ -42,15 +43,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 +65,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

@@ -46,12 +46,16 @@ var HeroUnit = React.createClass({
     }
 
     return (
-      <div className="row">
+      <div className="row hero-unit-row">
         <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,21 @@
+var React = require('react');
+
+var IconButtons = React.createClass({
+  render: function() {
+    var links = Array.isArray(this.props.children) ? this.props.children : [this.props.children];
+    var classes;
+    return (
+      <div className="row icon-buttons">
+        {
+          links.map(function(link, i){
+            return(
+              <div className="col-sm-4 col-md-4 col-lg-4" key={i}>{link}</div>
+            )
+          })
+        }
+      </div>
+    );
+  }
+});
+
+module.exports = IconButtons;

less/common.less

@@ -65,6 +65,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) {
@@ -113,6 +122,11 @@ html.no-js .no-js-warning {
   border-top: 0.2rem solid @white;
 }
 
+#content {
+  padding-left: 0;
+  padding-right: 0;
+}
+
 .video-container {
   position: relative;
   width: 100%;

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/hero-unit.less

@@ -1,3 +1,8 @@
+.hero-unit-row {
+  margin-left: 0;
+  margin-right: 0;
+}
+
 .hero-unit {
   background-position: right top;
   background-repeat: no-repeat;
@@ -6,7 +11,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,21 @@
+.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;
+    margin: 1rem 0 0 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;
+  }
+}

less/components/index.less

@@ -4,6 +4,8 @@
 @import "expander";
 @import "footer";
 @import "hero-unit";
+@import "icon-buttons";
+@import "icon-button";
 @import "icon-link";
 @import "icon-links";
 @import "illustration";

less/components/page.less

@@ -33,6 +33,7 @@ a.skip-to-content:focus {
     @media screen and (min-width: @screen-md-min) {
       margin: 0px 0px 0px 2.5rem;
       max-width: 1200px;
+      padding: 0 (@grid-gutter-width / 2);
     }
     @media screen and (min-width: 1800px) {
       margin: 0 auto;