CLEANER PR for #856 the new homepage implementation

CHANGELOG.md

@@ -22,6 +22,9 @@ to [Semantic Versioning](http://semver.org/).
     accessible.
 
 ### Changed
+- Homepage has been refreshed to better inform
+  the site vistors what they can do on the site.
+- Homepage now shows the latest blog posts on https://blog.webmaker.org/
 - All mentions of the @Webmaker Twitter handle (in the footer and
   the About and Clubs Toolkit pages) have been changed to @MozTeach.
 - The `dist` dir is now cleaned up frequently during
@@ -52,15 +55,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
@@ -74,7 +77,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/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;

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) {

less/components/blockquote.less

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

less/components/btn.less

@@ -1,4 +1,8 @@
 .btn {
+  // button text should be wrapped.
+  // we shouldn't assume button text can always fit into one line,
+  // especially knowing that the site needs to be localizable
+  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,25 @@
+.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;
+      img {
+        filter: grayscale(100%);
+      }
+    }
+  }
+  .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,3 @@
+.icon-buttons {
+  margin-bottom: 5rem;
+}

less/components/index.less

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

less/components/page.less

@@ -39,7 +39,10 @@ a.skip-to-content:focus {
     }
 
     .intro {
-      padding: 2.5rem 0 0 2.5rem;
+      padding: 0 2.5rem;
+      h1 {
+        margin-bottom: 3rem;
+      }
       p, h2 {
         text-align: center;
         @media screen and (min-width: @screen-sm-min) {