diff --git a/src/_includes/products/camera-retro-tee.html b/src/_includes/products/camera-retro-tee.html new file mode 100644 index 000000000..7e4664f1c --- /dev/null +++ b/src/_includes/products/camera-retro-tee.html @@ -0,0 +1,30 @@ + +
+ + + +
+
+
+ +
+
+ +
+
+ + + +
+ +
+

Camera Retro Tee

+

$28

+
+
+ American Apparel Fine Jersey Short Sleeve T-Shirt +
+ diff --git a/src/_includes/products/classics-tee.html b/src/_includes/products/classics-tee.html new file mode 100644 index 000000000..da5072388 --- /dev/null +++ b/src/_includes/products/classics-tee.html @@ -0,0 +1,30 @@ + +
+ + + +
+
+
+ +
+
+ +
+
+ + + +
+ +
+

Classics Tee

+

$28

+
+
+ American Apparel Fine Jersey Short Sleeve T-Shirt +
+ diff --git a/src/_includes/products/fa-ther-tee.html b/src/_includes/products/fa-ther-tee.html new file mode 100644 index 000000000..ecf5db203 --- /dev/null +++ b/src/_includes/products/fa-ther-tee.html @@ -0,0 +1,28 @@ + +
+ +
+
+
+ +
+
+ +
+
+ + + +
+ +
+

Fa-ther Tee

+

$28

+
+
+ American Apparel Fine Jersey Short Sleeve T-Shirt +
+ diff --git a/src/_includes/products/green-logo-tee.html b/src/_includes/products/green-logo-tee.html new file mode 100644 index 000000000..e1215a44c --- /dev/null +++ b/src/_includes/products/green-logo-tee.html @@ -0,0 +1,30 @@ + +
+ + + +
+
+
+ +
+
+ +
+
+ + + +
+ +
+

Green Logo Tee

+

$28

+
+
+ American Apparel Fine Jersey Short Sleeve T-Shirt +
+ diff --git a/src/_includes/products/old-skool-tee.html b/src/_includes/products/old-skool-tee.html new file mode 100644 index 000000000..003ee55c3 --- /dev/null +++ b/src/_includes/products/old-skool-tee.html @@ -0,0 +1,30 @@ + +
+ + + +
+
+
+ +
+
+ +
+
+ + + +
+ +
+

Old Skool Tee

+

$28

+
+
+ American Apparel Fine Jersey Short Sleeve T-Shirt +
+ 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 index 000000000..51e526687 --- /dev/null +++ b/src/_includes/products/rock-paper-scissors-lizard-spock-tee.html @@ -0,0 +1,26 @@ + +
+ + + +
+
+
+ +
+
+ + + +
+ +
+

Rock Paper Scissors Lizard Spock Tee

+

$28

+
+
+ American Apparel Fine Jersey Short Sleeve T-Shirt +
+ diff --git a/src/_includes/products/space-shuttle-tee.html b/src/_includes/products/space-shuttle-tee.html new file mode 100644 index 000000000..70e59d7d6 --- /dev/null +++ b/src/_includes/products/space-shuttle-tee.html @@ -0,0 +1,30 @@ + +
+ + + +
+
+
+ +
+
+ +
+
+ + + +
+ +
+

Space Shuttle Tee

+

$28

+
+
+ American Apparel Fine Jersey Short Sleeve T-Shirt +
+ diff --git a/src/_includes/products/white-logo-tee.html b/src/_includes/products/white-logo-tee.html new file mode 100644 index 000000000..8e7cf1feb --- /dev/null +++ b/src/_includes/products/white-logo-tee.html @@ -0,0 +1,34 @@ + +
+ + + +
+
+
+ +
+
+ +
+
+ +
+
+ + + +
+ +
+

White Logo Tee

+

$28

+
+
+ American Apparel Fine Jersey Short Sleeve T-Shirt +
+ diff --git a/src/assets/less/gandy-grid/grid.less b/src/assets/less/gandy-grid/grid.less new file mode 100644 index 000000000..7aca7dbb7 --- /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 index 000000000..49c774998 --- /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 7b5a4b123..c50425bda 100644 --- 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 12500ac5a..651e64110 100644 --- 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 index 000000000..2fbeac92a --- /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 index 000000000..053a0762a --- /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 %}  Awesome Swag{% endcapture %} +{% capture jumbotron_p %}Support Font Awesome with some official merchandise!{% endcapture %} + +{% include jumbotron.html %} + +
+ +
+
+
+ {% include products/fa-ther-tee.html %} +
+
+ {% include products/space-shuttle-tee.html %} +
+
+ {% include products/rock-paper-scissors-lizard-spock-tee.html %} +
+
+ {% include products/white-logo-tee.html %} +
+
+ {% include products/camera-retro-tee.html %} +
+
+ {% include products/old-skool-tee.html %} +
+
+ {% include products/classics-tee.html %} +
+
+ {% include products/green-logo-tee.html %} +
+
+