FlandreScarle7/Font-Awesome
1
0
Fork 0
mirror of https://github.com/FortAwesome/Font-Awesome.git synced 2024-12-26 21:41:29 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

Merge pull request #9057 from FortAwesome/merch

Browse Source 
Adding Store to Font Awesome
This commit is contained in:
Dave Gandy 2016-04-25 11:41:11 -04:00
commit 2dfb487fd7
15 changed files with 403 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
src/_includes/navbar.html
View File

@ -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>

30
src/_includes/products/camera-retro-tee.html Normal file
View 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
View 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
View 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
View 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
View 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>

26
src/_includes/products/rock-paper-scissors-lizard-spock-tee.html Normal file
View File

@ -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
View 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
View 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
View 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
View 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);
}

4
src/assets/less/site.less
View File

@ -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";

7
src/assets/less/site/get-started.less
View File

@ -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
View 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: 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; }

41
src/store.html Normal file
View File

@ -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>