Merge pull request #9057 from FortAwesome/merch

Adding Store to Font Awesome

src/_includes/navbar.html

@@ -107,13 +107,15 @@
             <li><a href="{{ page.relative_path }}examples/#custom">Custom CSS</a></li>
           </ul>
         </li>
-        <li{% if page.navbar_active == "accessibility" %} class="active"{% endif %}><a href="{{ page.relative_path }}accessibility/">Accessibility</a></li>
+        <li class="hidden-sm{% if page.navbar_active == "accessibility" %} active{% endif %}"><a href="{{ page.relative_path }}accessibility/">Accessibility</a></li>
+        <li class="hidden-xs hidden-md hidden-lg{% if page.navbar_active == "accessibility" %} active{% endif %}"><a href="{{ page.relative_path }}accessibility/"><i class="fa fa-universal-access"></i></a></li>
         <li{% if page.navbar_active == "community" %} class="active"{% endif %}><a href="{{ page.relative_path }}community/">Community</a></li>
         <li{% if page.navbar_active == "license" %} class="active"{% endif %}><a href="{{ page.relative_path }}license/">License</a></li>
+        <li class="hidden-sm hidden-xs"><a href="{{ site.fontawesome.blog_url }}">Blog</a></li>
       </ul>
 
-      <ul class="nav navbar-nav navbar-right hidden-sm hidden-xs">
-        <li><a href="{{ site.fontawesome.blog_url }}">Blog</a></li>
+      <ul class="nav navbar-nav navbar-right">
+        <li{% if page.navbar_active == "store" %} class="active"{% endif %}><a href="{{ page.relative_path }}store/"><i class="fa fa-shopping-cart margin-right-sm hidden-sm hidden-md"></i>Store</a></li>
       </ul>
     </div>
   </div>

src/_includes/products/camera-retro-tee.html

@@ -0,0 +1,30 @@
+<a class="product" href="http://www.amazon.com/Camera-Retro-T-shirt-Small-Asphalt/dp/B01ELWGV14">
+  <div class="product-sizes">
+    <i class="fa fa-male"></i>
+    <i class="fa fa-female"></i>
+    <i class="fa fa-child"></i>
+  </div>
+  <div class="tab-content">
+    <div class="tab-pane active" id="camera-asphalt">
+      <img src="http://ecx.images-amazon.com/images/I/81mzUUTrfYL._UX679_.jpg">
+    </div>
+    <div class="tab-pane" id="camera-kelly-green">
+      <img src="http://ecx.images-amazon.com/images/I/81AihmIpmUL._UX679_.jpg">
+    </div>
+  </div>
+
+  <ul class="list-inline text-center margin-bottom-lg">
+    <li class="active"><span data-target="#camera-asphalt" data-toggle="tab">Asphalt</span></li>
+    <li><span data-target="#camera-kelly-green" data-toggle="tab">Kelly Green</span></li>
+  </ul>
+
+  <hr />
+
+  <div class="gg margin-bottom">
+    <h3 class="gg-col product-title">Camera Retro Tee</h3>
+    <h3 class="gg-col text-right text-success">$28</h3>
+  </div>
+  <div class="text-muted">
+    American Apparel Fine Jersey Short Sleeve T-Shirt
+  </div>
+</a>

src/_includes/products/classics-tee.html

@@ -0,0 +1,30 @@
+<a class="product" href="http://www.amazon.com/Mens-Classics-T-shirt-Small-Navy/dp/B01ELY5MT4">
+  <div class="product-sizes">
+    <i class="fa fa-male"></i>
+    <i class="fa fa-female"></i>
+    <i class="fa fa-child"></i>
+  </div>
+  <div class="tab-content">
+    <div class="tab-pane active" id="classics-kelly-green">
+      <img src="http://ecx.images-amazon.com/images/I/81nYbDVxo8L._UX679_.jpg">
+    </div>
+    <div class="tab-pane" id="classics-navy">
+      <img src="http://ecx.images-amazon.com/images/I/81MMb-JjRNL._UX679_.jpg">
+    </div>
+  </div>
+
+  <ul class="list-inline text-center margin-bottom-lg">
+    <li class="active"><span data-target="#classics-kelly-green" data-toggle="tab">Kelly Green</span></li>
+    <li><span data-target="#classics-navy" data-toggle="tab">Navy</span></li>
+  </ul>
+
+  <hr />
+
+  <div class="gg margin-bottom">
+    <h3 class="gg-col product-title">Classics Tee</h3>
+    <h3 class="gg-col text-right text-success">$28</h3>
+  </div>
+  <div class="text-muted">
+    American Apparel Fine Jersey Short Sleeve T-Shirt
+  </div>
+</a>

src/_includes/products/fa-ther-tee.html

@@ -0,0 +1,28 @@
+<a class="product" href="http://www.amazon.com/Father-T-shirt-Small-Kelly-Green/dp/B01ELXTKW0">
+  <div class="product-sizes">
+    <i class="fa fa-male"></i>
+  </div>
+  <div class="tab-content">
+    <div class="tab-pane active" id="father-kelly-green">
+      <img src="http://ecx.images-amazon.com/images/I/81QUekkdt7L._UX679_.jpg">
+    </div>
+    <div class="tab-pane" id="father-navy">
+      <img src="http://ecx.images-amazon.com/images/I/817wsSl9ScL._UX679_.jpg">
+    </div>
+  </div>
+
+  <ul class="list-inline text-center margin-bottom-lg">
+    <li class="active"><span data-target="#father-kelly-green" data-toggle="tab">Kelly Green</span></li>
+    <li><span data-target="#father-navy" data-toggle="tab">Navy</span></li>
+  </ul>
+
+  <hr />
+
+  <div class="gg margin-bottom">
+    <h3 class="gg-col product-title">Fa-ther Tee</h3>
+    <h3 class="gg-col text-right text-success">$28</h3>
+  </div>
+  <div class="text-muted">
+    American Apparel Fine Jersey Short Sleeve T-Shirt
+  </div>
+</a>

src/_includes/products/green-logo-tee.html

@@ -0,0 +1,30 @@
+<a class="product" href="http://www.amazon.com/Mens-Schmancy-Green-Small-Black/dp/B01ELYOYY8">
+  <div class="product-sizes">
+    <i class="fa fa-male"></i>
+    <i class="fa fa-female"></i>
+    <i class="fa fa-child"></i>
+  </div>
+  <div class="tab-content">
+    <div class="tab-pane active" id="green-logo-black">
+      <img src="http://ecx.images-amazon.com/images/I/715simtOAGL._UX679_.jpg">
+    </div>
+    <div class="tab-pane" id="green-logo-kelly-green">
+      <img src="http://ecx.images-amazon.com/images/I/81Y2BFVgUAL._UX679_.jpg">
+    </div>
+  </div>
+
+  <ul class="list-inline text-center margin-bottom-lg">
+    <li class="active"><span data-target="#green-logo-black" data-toggle="tab">Black</span></li>
+    <li><span data-target="#green-logo-kelly-green" data-toggle="tab">Kelly Green</span></li>
+  </ul>
+
+  <hr />
+
+  <div class="gg margin-bottom">
+    <h3 class="gg-col product-title">Green Logo Tee</h3>
+    <h3 class="gg-col text-right text-success">$28</h3>
+  </div>
+  <div class="text-muted">
+    American Apparel Fine Jersey Short Sleeve T-Shirt
+  </div>
+</a>

src/_includes/products/old-skool-tee.html

@@ -0,0 +1,30 @@
+<a class="product" href="http://www.amazon.com/Mens-Skool-T-shirt-Small-Navy/dp/B01ELWVHJ0">
+  <div class="product-sizes">
+    <i class="fa fa-male"></i>
+    <i class="fa fa-female"></i>
+    <i class="fa fa-child"></i>
+  </div>
+  <div class="tab-content">
+    <div class="tab-pane active" id="old-skool-kelly-green">
+      <img src="http://ecx.images-amazon.com/images/I/812ghxTnRrL._UX679_.jpg">
+    </div>
+    <div class="tab-pane" id="old-skool-navy">
+      <img src="http://ecx.images-amazon.com/images/I/819SDvnOv8L._UX679_.jpg">
+    </div>
+  </div>
+
+  <ul class="list-inline text-center margin-bottom-lg">
+    <li class="active"><span data-target="#old-skool-kelly-green" data-toggle="tab">Kelly Green</span></li>
+    <li><span data-target="#old-skool-navy" data-toggle="tab">Navy</span></li>
+  </ul>
+
+  <hr />
+
+  <div class="gg margin-bottom">
+    <h3 class="gg-col product-title">Old Skool Tee</h3>
+    <h3 class="gg-col text-right text-success">$28</h3>
+  </div>
+  <div class="text-muted">
+    American Apparel Fine Jersey Short Sleeve T-Shirt
+  </div>
+</a>

src/_includes/products/rock-paper-scissors-lizard-spock-tee.html

@@ -0,0 +1,26 @@
+<a class="product" href="http://www.amazon.com/Paper-Scissors-Lizard-Spock-T-shirt/dp/B01ELX6N7U">
+  <div class="product-sizes">
+    <i class="fa fa-male"></i>
+    <i class="fa fa-female"></i>
+    <i class="fa fa-child"></i>
+  </div>
+  <div class="tab-content">
+    <div class="tab-pane active" id="rpsls-blue">
+      <img src="http://ecx.images-amazon.com/images/I/81AqlTK02KL._UX679_.jpg">
+    </div>
+  </div>
+
+  <ul class="list-inline text-center margin-bottom-lg">
+    <li class="active"><span data-target="#rpsls-blue" data-toggle="tab">Royal Blue</span></li>
+  </ul>
+
+  <hr />
+
+  <div class="gg margin-bottom">
+    <h3 class="gg-col product-title">Rock Paper Scissors Lizard Spock Tee</h3>
+    <h3 class="gg-col text-right text-success">$28</h3>
+  </div>
+  <div class="text-muted">
+    American Apparel Fine Jersey Short Sleeve T-Shirt
+  </div>
+</a>

src/_includes/products/space-shuttle-tee.html

@@ -0,0 +1,30 @@
+<a class="product" href="http://www.amazon.com/Space-Shuttle-T-shirt-Small-Black/dp/B01ELRXO14">
+  <div class="product-sizes">
+    <i class="fa fa-male"></i>
+    <i class="fa fa-female"></i>
+    <i class="fa fa-child"></i>
+  </div>
+  <div class="tab-content">
+    <div class="tab-pane active" id="shuttle-black">
+      <img src="http://ecx.images-amazon.com/images/I/71e4BRlSOML._UX679_.jpg">
+    </div>
+    <div class="tab-pane" id="shuttle-navy">
+      <img src="http://ecx.images-amazon.com/images/I/81U%2BSAV23IL._UX679_.jpg">
+    </div>
+  </div>
+
+  <ul class="list-inline text-center margin-bottom-lg">
+    <li class="active"><span data-target="#shuttle-black" data-toggle="tab">Black</span></li>
+    <li><span data-target="#shuttle-navy" data-toggle="tab">Navy</span></li>
+  </ul>
+
+  <hr />
+
+  <div class="gg margin-bottom">
+    <h3 class="gg-col product-title">Space Shuttle Tee</h3>
+    <h3 class="gg-col text-right text-success">$28</h3>
+  </div>
+  <div class="text-muted">
+    American Apparel Fine Jersey Short Sleeve T-Shirt
+  </div>
+</a>

src/_includes/products/white-logo-tee.html

@@ -0,0 +1,34 @@
+<a class="product" href="http://www.amazon.com/Mens-Schmancy-White-T-shirt-Small/dp/B01ELYG428">
+  <div class="product-sizes">
+    <i class="fa fa-male"></i>
+    <i class="fa fa-female"></i>
+    <i class="fa fa-child"></i>
+  </div>
+  <div class="tab-content">
+    <div class="tab-pane active" id="white-logo-kelly-green">
+      <img src="http://ecx.images-amazon.com/images/I/81fPcfH8KkL._UX679_.jpg">
+    </div>
+    <div class="tab-pane" id="white-logo-navy">
+      <img src="http://ecx.images-amazon.com/images/I/81wt4C6gBlL._UX679_.jpg">
+    </div>
+    <div class="tab-pane" id="white-logo-silver">
+      <img src="http://ecx.images-amazon.com/images/I/71pEdMm86PL._UX679_.jpg">
+    </div>
+  </div>
+
+  <ul class="list-inline text-center margin-bottom-lg">
+    <li class="active"><span data-target="#white-logo-kelly-green" data-toggle="tab">Kelly Green</span></li>
+    <li><span data-target="#white-logo-navy" data-toggle="tab">Navy</span></li>
+    <li><span data-target="#white-logo-silver" data-toggle="tab">Silver</span></li>
+  </ul>
+
+  <hr />
+
+  <div class="gg margin-bottom">
+    <h3 class="gg-col product-title">White Logo Tee</h3>
+    <h3 class="gg-col text-right text-success">$28</h3>
+  </div>
+  <div class="text-muted">
+    American Apparel Fine Jersey Short Sleeve T-Shirt
+  </div>
+</a>

src/assets/less/gandy-grid/grid.less

@@ -0,0 +1,43 @@
+.gg { .gg(); }
+.gg-fixed { table-layout: fixed; }
+.gg-col { .gg-col(); }
+.gg-row { display: table-row; }
+.gg-min-width { width: 1%; }
+
+.gg-top    { vertical-align: top; }
+.gg-middle { vertical-align: middle; }
+.gg-bottom { vertical-align: bottom; }
+
+.gg-padded {
+  margin-left: -1rem;
+  margin-right: -1rem;
+  .gg { border-spacing: 1rem 0; }
+}
+
+.gg-col-1,
+.gg-col-2,
+.gg-col-3,
+.gg-col-4,
+.gg-col-5,
+.gg-col-6,
+.gg-col-7,
+.gg-col-8,
+.gg-col-9,
+.gg-col-10,
+.gg-col-11,
+.gg-col-12 {
+  .gg-col();
+}
+
+.gg-col-1  { .gg-make-col(1,12); }
+.gg-col-2  { .gg-make-col(2,12); }
+.gg-col-3  { .gg-make-col(3,12); }
+.gg-col-4  { .gg-make-col(4,12); }
+.gg-col-5  { .gg-make-col(5,12); }
+.gg-col-6  { .gg-make-col(6,12); }
+.gg-col-7  { .gg-make-col(7,12); }
+.gg-col-8  { .gg-make-col(8,12); }
+.gg-col-9  { .gg-make-col(9,12); }
+.gg-col-10 { .gg-make-col(10,12); }
+.gg-col-11 { .gg-make-col(11,12); }
+.gg-col-12 { .gg-make-col(12,12); }

src/assets/less/gandy-grid/mixins.less

@@ -0,0 +1,18 @@
+.gg {
+  display: table;
+  width: 100%;
+  vertical-align: middle;
+}
+
+.gg-col {
+  display: table-cell;
+  vertical-align: inherit;
+}
+
+.gg-vertical-align(@align) {
+  vertical-align: @align;
+}
+
+.gg-make-col(@column-width, @total-columns) {
+  width: (100% / @total-columns * @column-width);
+}

src/assets/less/site.less

@@ -2,6 +2,9 @@
 ---
 @import "bootstrap-{{ site.bootstrap.version }}/bootstrap";
 
+@import "gandy-grid/mixins";
+@import "gandy-grid/grid";
+
 @import "site/bootstrap/variables";
 @import "site/bootstrap/navbar";
 @import "site/bootstrap/buttons";
@@ -32,6 +35,7 @@
 @import "site/algolia";
 
 @import "site/get-started";
+@import "site/store";
 
 @import "site/responsive/screen-lg";
 @import "site/responsive/screen-md";

src/assets/less/site/get-started.less

@@ -6,13 +6,6 @@
     background: @section-emphasized-bg;
   }
 
-  .content-underlay {
-    margin-bottom: -180px;
-    border-bottom: 1px solid @jumbotron-border;
-    padding-bottom: 100px;
-    background-color: lighten(@jumbotron-bg, 2%);
-  }
-
   .jumbotron {
     border-bottom: none;
   }

src/assets/less/site/store.less

@@ -0,0 +1,54 @@
+.content-underlay {
+  margin-bottom: -180px;
+  border-bottom: 1px solid @jumbotron-border;
+  padding-bottom: 100px;
+  background-color: lighten(@jumbotron-bg, 2%);
+}
+
+
+.product {
+  z-index: 2;
+  position: relative;
+  display: block;
+  margin-top: @buffer-xl;
+  color: @text-color;
+  text-decoration: none;
+  background-color: #fff;
+  border-radius: @border-radius-base;
+  padding: @buffer-lg;
+  .box-shadow(0 4px 2px 0 rgba(127,127,127,.2));
+  &:hover, &:focus {
+    text-decoration: none;
+    color: @text-color;
+  }
+  &:hover {
+    .box-shadow(0 4px 2px 0 rgba(127,127,127,.6));
+  }
+  img { max-width: 100%; }
+  li {
+    color: @link-color;
+    &:hover, &:focus {
+      color: @link-hover-color;
+      text-decoration: underline;
+    }
+  }
+  li.active {
+    color: @text-muted;
+    cursor: default;
+    text-decoration: none;
+  }
+}
+
+.product-sizes {
+  position: absolute;
+  top: 6px;
+  right: 6px;
+  border-radius: @border-radius-base;
+  background-color: #fff;
+  font-size: 21px;
+  line-height: 21px;
+  padding: @buffer-sm @buffer-md;
+  color: @text-muted;
+}
+
+.product-title { height: 52px; }

src/store.html

@@ -0,0 +1,41 @@
+---
+layout: base
+title: Official Merchandise
+navbar_active: store
+relative_path: ../
+---
+{% capture jumbotron_h1 %}<i class="fa fa-shopping-cart fa-lg valign-baseline" aria-hidden="true"></i>&nbsp; Awesome Swag{% endcapture %}
+{% capture jumbotron_p %}Support Font Awesome with some official merchandise!{% endcapture %}
+
+{% include jumbotron.html %}
+
+<div class="content-underlay"></div>
+
+<div class="container">
+  <div class="row">
+    <div class="col-sm-6 col-lg-4">
+      {% include products/fa-ther-tee.html %}
+    </div>
+    <div class="col-sm-6 col-lg-4">
+      {% include products/space-shuttle-tee.html %}
+    </div>
+    <div class="col-sm-6 col-lg-4">
+      {% include products/rock-paper-scissors-lizard-spock-tee.html %}
+    </div>
+    <div class="col-sm-6 col-lg-4">
+      {% include products/white-logo-tee.html %}
+    </div>
+    <div class="col-sm-6 col-lg-4">
+      {% include products/camera-retro-tee.html %}
+    </div>
+    <div class="col-sm-6 col-lg-4">
+      {% include products/old-skool-tee.html %}
+    </div>
+    <div class="col-sm-6 col-lg-4">
+      {% include products/classics-tee.html %}
+    </div>
+    <div class="col-sm-6 col-lg-4">
+      {% include products/green-logo-tee.html %}
+    </div>
+  </div>
+</div>