mirror of
https://github.com/ForkAwesome/Fork-Awesome.git
synced 2024-12-27 14:01:32 +08:00
First pass at Font Awesome store
This commit is contained in:
Dave Gandy
parent
218cbef6ef
commit
a740155201
30
src/_includes/products/camera-retro-tee.html
Normal file
30
src/_includes/products/camera-retro-tee.html
Normal file
@ -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>
|
||||
30
src/_includes/products/classics-tee.html
Normal file
30
src/_includes/products/classics-tee.html
Normal file
@ -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>
|
||||
28
src/_includes/products/fa-ther-tee.html
Normal file
28
src/_includes/products/fa-ther-tee.html
Normal file
@ -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>
|
||||
30
src/_includes/products/green-logo-tee.html
Normal file
30
src/_includes/products/green-logo-tee.html
Normal file
@ -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>
|
||||
30
src/_includes/products/old-skool-tee.html
Normal file
30
src/_includes/products/old-skool-tee.html
Normal file
@ -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>
|
||||
@ -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>
|
||||
30
src/_includes/products/space-shuttle-tee.html
Normal file
30
src/_includes/products/space-shuttle-tee.html
Normal file
@ -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>
|
||||
34
src/_includes/products/white-logo-tee.html
Normal file
34
src/_includes/products/white-logo-tee.html
Normal file
@ -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>
|
||||
43
src/assets/less/gandy-grid/grid.less
Normal file
43
src/assets/less/gandy-grid/grid.less
Normal file
@ -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); }
|
||||
18
src/assets/less/gandy-grid/mixins.less
Normal file
18
src/assets/less/gandy-grid/mixins.less
Normal file
@ -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);
|
||||
}
|
||||
@ -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";
|
||||
|
||||
@ -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;
|
||||
}
|
||||
|
||||
54
src/assets/less/site/store.less
Normal file
54
src/assets/less/site/store.less
Normal file
@ -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; }
|
||||
42
src/store.html
Normal file
42
src/store.html
Normal file
@ -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> 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>
|
||||
Loading…
Reference in New Issue
Block a user