First pass at Font Awesome store

diff --git a/src/_includes/products/camera-retro-tee.html b/src/_includes/products/camera-retro-tee.html
new file mode 100644 (file)
index 0000000..7e4664f
--- /dev/null
+++ b/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>

diff --git a/src/_includes/products/classics-tee.html b/src/_includes/products/classics-tee.html
new file mode 100644 (file)
index 0000000..da50723
--- /dev/null
+++ b/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>

diff --git a/src/_includes/products/fa-ther-tee.html b/src/_includes/products/fa-ther-tee.html
new file mode 100644 (file)
index 0000000..ecf5db2
--- /dev/null
+++ b/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>

diff --git a/src/_includes/products/green-logo-tee.html b/src/_includes/products/green-logo-tee.html
new file mode 100644 (file)
index 0000000..e1215a4
--- /dev/null
+++ b/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>

diff --git a/src/_includes/products/old-skool-tee.html b/src/_includes/products/old-skool-tee.html
new file mode 100644 (file)
index 0000000..003ee55
--- /dev/null
+++ b/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>

diff --git a/src/_includes/products/rock-paper-scissors-lizard-spock-tee.html b/src/_includes/products/rock-paper-scissors-lizard-spock-tee.html
new file mode 100644 (file)
index 0000000..51e5266
--- /dev/null
+++ b/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>

diff --git a/src/_includes/products/space-shuttle-tee.html b/src/_includes/products/space-shuttle-tee.html
new file mode 100644 (file)
index 0000000..70e59d7
--- /dev/null
+++ b/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>

diff --git a/src/_includes/products/white-logo-tee.html b/src/_includes/products/white-logo-tee.html
new file mode 100644 (file)
index 0000000..8e7cf1f
--- /dev/null
+++ b/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>

diff --git a/src/assets/less/gandy-grid/grid.less b/src/assets/less/gandy-grid/grid.less
new file mode 100644 (file)
index 0000000..7aca7db
--- /dev/null
+++ b/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); }

diff --git a/src/assets/less/gandy-grid/mixins.less b/src/assets/less/gandy-grid/mixins.less
new file mode 100644 (file)
index 0000000..49c7749
--- /dev/null
+++ b/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);
+}

diff --git a/src/assets/less/site.less b/src/assets/less/site.less
index 7b5a4b1231adaa78866ac4c6632108c14662522f..c50425bdad9abc19a5d3b20d80f5a860c8dbb9cd 100644 (file)
--- a/src/assets/less/site.less
+++ b/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";

diff --git a/src/assets/less/site/get-started.less b/src/assets/less/site/get-started.less
index 12500ac5a6ff764aa14ceec433e4fc671eda17f8..651e641109774bd5d1110ae8788bebb123c6b9de 100644 (file)
--- a/src/assets/less/site/get-started.less
+++ b/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;
   }

diff --git a/src/assets/less/site/store.less b/src/assets/less/site/store.less
new file mode 100644 (file)
index 0000000..2fbeac9
--- /dev/null
+++ b/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: -13px;
+  right: @buffer-lg;
+  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; }

diff --git a/src/store.html b/src/store.html
new file mode 100644 (file)
index 0000000..053a076
--- /dev/null
+++ b/src/store.html
@@ -0,0 +1,42 @@
+---
+layout: base
+title: Official Merchandise
+navbar_active: license
+view_class: v-get-started
+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>