solidify 0.0.1.alpha

data/app/services/solidify/shop_settings_seeder.rb

@@ -0,0 +1,26 @@
+module Solidify
+  class ShopSettingsSeeder
+    def initialize(theme_id)
+      @theme_id = theme_id
+    end
+
+    # rubocop:disable Metrics/MethodLength
+    def seed
+      {
+        'active_theme_id' => @theme_id,
+        'checkout' => { 'guest_login' => false },
+        'currency' => 'USD',
+        'customer_accounts_enabled' => true,
+        'customer_accounts_optional' => true,
+        'description' => '',
+        'domain' => ENV.fetch('DOMAIN_NAME'),
+        'enabled_payment_types' => nil,
+        'money_format' => '€{{amount}}',
+        'money_with_currency_format' => '€{{amount}} EUR',
+        'name' => 'Split'
+      }.each do |k, v|
+        Solidify::Setting[k] = v
+      end
+    end
+  end
+end

data/app/services/solidify/theme_mechanic.rb

@@ -0,0 +1,30 @@
+module Solidify
+  class ThemeMechanic
+    def self.create(name: 'Simple',
+                    path: Solidify::Engine.root.join(
+                      'app', 'views', 'solidify', 'themes', 'skeleton-theme'
+                    ))
+      theme = Theme.new(name: name)
+
+      files = Dir.glob("#{path}/**/*")
+      instantiate_assets_from_files(path, files, theme)
+
+      theme.save!
+      theme
+    end
+
+    def self.instantiate_assets_from_files(path, files, theme)
+      files.each do |file|
+        next if Dir.exist?(file) # skip directories
+        theme.assets << asset_from_file(path, file)
+      end
+    end
+
+    def self.asset_from_file(path, file)
+      Asset.new(
+        key: Pathname.new(file).relative_path_from(path).to_s,
+        file: File.open(file)
+      )
+    end
+  end
+end

data/app/uploaders/solidify/asset_uploader.rb

@@ -0,0 +1,10 @@
+module Solidify
+  class AssetUploader < ::CarrierWave::Uploader::Base
+    def store_dir
+      asset_file_dir = model.key.split('/')
+      asset_file_dir.pop
+      asset_file_dir = asset_file_dir.join('/')
+      "themes/#{model.theme_id}/#{asset_file_dir}"
+    end
+  end
+end

data/app/views/solidify/themes/skeleton-theme/README.md

@@ -0,0 +1,54 @@
+Skeleton theme
+============
+
+The Skeleton theme is a simplified Shopify theme, to be used as a "blank slate" starting point for theme designers.
+
+<b>Features:</b>
+- Almost no theme settings. Ready to be customized any way you want. 
+- Only ~500 lines of CSS including comments. 
+- Despite its 500 lines of CSS code, it is responsive and has styled drop-down menus.
+- Include SVG images to style select elements and cart icon.
+- Commented code to teach you Liquid concepts in practice.
+
+<b>Demo:</b>
+
+- [Demo store](http://skeleton.myshopify.com/)
+
+Designing a store for a client? Earn 20% revenue through our <a href="http://www.shopify.com/partners">Partner program<a/>.
+
+Getting started
+---------------------
+1. <a href="https://github.com/Shopify/skeleton-theme/archive/master.zip">Download</a> the latest version
+2. or clone the git repo: <code>git clone https://github.com/Shopify/skeleton-theme.git</code>
+
+Basic structure
+---------------
+```
+├── assets
+│   └── Javascript, CSS, and theme images
+├── config
+│   └── custom Theme Settings
+├── layout
+│   ├── theme.liquid
+│   └── optional alternate layouts
+├── snippets
+│   └── optional custom code snippets
+├── templates
+│   ├── 404.liquid
+│   ├── article.liquid
+│   ├── blog.liquid
+│   ├── cart.liquid
+│   ├── collection.liquid
+│   ├── index.liquid
+│   ├── page.liquid
+│   ├── product.liquid
+│   └── search.liquid
+│   └── list-collections.liquid
+```
+
+Additional resources
+---------------------
+- <a href="http://meetup.shopify.com/">Free workshops</a>: Sign up for a free Shopify For Designers workshop in a city near you.
+- <a href="http://docs.shopify.com/themes">Theme Documentation</a>: Learn more about Liquid and theme templates.
+- <a href="http://apps.shopify.com/desktop-theme-editor">Desktop Theme Editor</a>: For Mac OS X users, we recommend our free app to sync theme files in development. 
+- Need more help? Ask a question in our <a href="http://ecommerce.shopify.com/c/ecommerce-design"> Design Forums</a>.

data/app/views/solidify/themes/skeleton-theme/assets/arrow-down.svg.liquid

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="15px" height="15px" version="1.1" viewBox="0 0 100 100" enable-background="new 0 0 100 100" xml:space="preserve">
+  <path x="0" y="0" width="100" height="100" fill="{{ settings.text_color }}" d="M50.1 72.7c-1.1 0-2.1-0.4-2.8-1.2L17.3 41.5c-1.6-1.6-1.6-4.1 0-5.7 1.6-1.6 4.1-1.6 5.7 0l27.2 27.2 27.2-27.2c1.6-1.6 4.1-1.6 5.7 0 1.6 1.6 1.6 4.1 0 5.7L52.9 71.5C52.2 72.2 51.2 72.7 50.1 72.7z"/>
+</svg>

data/app/views/solidify/themes/skeleton-theme/assets/cart.svg.liquid

@@ -0,0 +1,4 @@
+{% assign height = settings.base_font_size | remove: 'px' | times: 0.8 | append: 'px' %}
+<svg xmlns="http://www.w3.org/2000/svg" width="{{ height }}" height="{{ height }}" viewBox="0 0 512 512" fill="{{ settings.text_color }}">
+  <path d="M423.6 288c17.6 0 36-13.8 40.8-30.8l46.4-162.5C515.7 77.8 505.2 64 487.6 64L160 64c0-35.3-28.7-64-64-64L0 0l0 64 96 0 0 272c0 26.5 21.5 48 48 48l304 0c17.7 0 32-14.3 32-32s-14.3-32-32-32L160 320l0-32L423.6 288zM160 128l289.4 0 -27.4 96L160 224 160 128zM192 472c0 22-18 40-40 40l-16 0c-22 0-40-18-40-40l0-16c0-22 18-40 40-40l16 0c22 0 40 18 40 40L192 472zM480 472c0 22-18 40-40 40l-16 0c-22 0-40-18-40-40l0-16c0-22 18-40 40-40l16 0c22 0 40 18 40 40L480 472z"/>
+</svg>

data/app/views/solidify/themes/skeleton-theme/assets/shop.js.liquid

@@ -0,0 +1,75 @@
+/*============================*/
+/* Update main product image. */
+/*============================*/
+var switchImage = function(newImageSrc, newImage, mainImageDomEl) {
+  // newImageSrc is the path of the new image in the same size as originalImage is sized.
+  // newImage is Shopify's object representation of the new image, with various attributes, such as scr, id, position.
+  // mainImageDomEl is the passed domElement, which has not yet been manipulated. Let's manipulate it now.
+  jQuery(mainImageDomEl).parents('a').attr('href', newImageSrc.replace('_grande', '_1024x1024'));
+  jQuery(mainImageDomEl).attr('src', newImageSrc);  
+};
+
+jQuery(function($) {
+                    
+  /* Placeholder JS */
+  /*==========================*/
+  var test = document.createElement('input');
+  if (!('placeholder' in test)) {
+    $('[placeholder]').each(function(){
+      if ($(this).val() === '') {
+        var hint = $(this).attr('placeholder');
+        $(this).val(hint).addClass('hint');
+      }
+    });
+    $('[placeholder]').focus(function() {
+      if ($(this).val() === $(this).attr('placeholder')) {
+        $(this).val('').removeClass('hint');
+      }
+    }).blur(function() {
+      if ($(this).val() === '') {
+        $(this).val($(this).attr('placeholder')).addClass('hint');
+      }
+    });    
+  }
+
+  /* Form validation JS */
+  /*==========================*/
+
+  $('input.error, textarea.error').focus(function() {
+    $(this).removeClass('error');
+  });
+
+  $('form :submit').click(function() {
+    $(this).parents('form').find('input.hint, textarea.hint').each(function() {
+      $(this).val('').removeClass('hint');
+    });
+    return true;
+  });
+  
+  /* Remove SVG images to avoid broken images in all browsers that don't support SVG. */
+  /*==========================*/
+  
+  var supportsSVG = function() {
+    return document.implementation.hasFeature('http://www.w3.org/TR/SVG11/feature#Image', '1.1');
+  }  
+  if (!supportsSVG()) {
+    $('img[src*=".svg"]').remove();
+  }
+  
+  /* Prepare to have floated images fill the width of the design on blog pages on small devices. */
+  /*==========================*/ 
+    
+  var images = $('.article img').load(function() {
+    var src = $(this).attr('src').replace(/_grande\.|_large\.|_medium\.|_small\./, '.');
+    var width = $(this).width();
+    $(this).attr('src', src).attr('width', width).removeAttr('height');
+  });
+  
+  /* Update main product image when a thumbnail is clicked. */
+  /*==========================*/
+  $('.product-photo-thumb a').on('click', function(e) { 
+    e.preventDefault();
+    switchImage($(this).attr('href'), null, $('.product-photo-container img')[0]);
+  } );
+  
+});

data/app/views/solidify/themes/skeleton-theme/assets/shopify_common.js

@@ -0,0 +1,14 @@
+/* =======================================================================
+  Reading query parameters and storing them in a Shopify.queryParams object.
+  Necessary for collection sorting and advanced collection filtering.
+======================================================================= */
+
+Shopify.queryParams = {};
+if (location.search.length) {
+  for (var aKeyValue, i = 0, aCouples = location.search.substr(1).split('&'); i < aCouples.length; i++) {
+    aKeyValue = aCouples[i].split('=');
+    if (aKeyValue.length > 1) {
+      Shopify.queryParams[decodeURIComponent(aKeyValue[0])] = decodeURIComponent(aKeyValue[1]);
+    }
+  }
+}

data/app/views/solidify/themes/skeleton-theme/assets/style.scss.liquid

@@ -0,0 +1,768 @@
+/*!normalize.css v3.0.1 | MIT License | git.io/normalize */ html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;}body{margin:0;}article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary{display:block;}audio,canvas,progress,video{display:inline-block;vertical-align:baseline;}audio:not([controls]){display:none;height:0;}[hidden],template{display:none;}a{background:transparent;}a:active,a:hover{outline:0;}abbr[title]{border-bottom:1px dotted;}b,strong{font-weight:bold;}dfn{font-style:italic;}h1{font-size:2em;margin:.67em 0;}mark{background:#ff0;color:#000;}small{font-size:80%;}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline;}sup{top:-0.5em;}sub{bottom:-0.25em;}img{border:0;}svg:not(:root){overflow:hidden;}figure{margin:1em 40px;}hr{-moz-box-sizing:content-box;box-sizing:content-box;height:0;}pre{overflow:auto;}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em;}button,input,optgroup,select,textarea{color:inherit;font:inherit;margin:0;}button{overflow:visible;}button,select{text-transform:none;}button,html input[type="button"],input[type="reset"],input[type="submit"]{-webkit-appearance:button;cursor:pointer;}button[disabled],html input[disabled]{cursor:default;}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0;}input{line-height:normal;}input[type="checkbox"],input[type="radio"]{box-sizing:border-box;padding:0;}input[type="number"]::-webkit-inner-spin-button,input[type="number"]::-webkit-outer-spin-button{height:auto;}input[type="search"]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box;}input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration{-webkit-appearance:none;}fieldset{border:1px solid #c0c0c0;margin:0 2px;padding:.35em .625em .75em;}legend{border:0;padding:0;}textarea{overflow:auto;}optgroup{font-weight:bold;}table{border-collapse:collapse;border-spacing:0;}td,th{padding:0;}
+
+/* ==========================================================================
+   Most theme settings should be stored in Sassy CSS variables here, for reuse.
+   ========================================================================== */
+/*!theme settings */
+$site-max-width:          60 * {{ settings.base_font_size }};
+$breakpoint-small-screen: 30 * {{ settings.base_font_size }};
+$gutter:                  1 *  {{ settings.base_font_size }}; 
+$background-color:        {{ settings.background_color }};
+$text-color:              {{ settings.text_color }};
+$link-color:              {{ settings.link_color }};
+$base-font-family:        {{ settings.base_font_family }};
+$base-font-size:          {{ settings.base_font_size }};
+$heading-font-family:     $base-font-family;
+$heading-font-weight:     600;
+
+/* Table of content */
+/* 1.  Base styles
+   2.  Forms
+   3.  Tables
+   4.  Layout
+   5.  Header
+   6.  Navigation
+   7.  Tags
+   8.  Social and payment methods
+   9.  Blog
+   10. Product and collection pages
+   11. Search form and search results
+   12. Footer
+*/
+
+/* =====================
+   1. Base styles
+   ===================== */
+
+html, body {
+  background-color: $background-color;
+  font-size: $base-font-size;
+  line-height: 1.6;
+  font-family: $base-font-family;
+  color: $text-color;
+}
+ 
+.paragraph-margins { margin: 0 0 .75 * $gutter; }
+.grid-margins      { margin: 0 0 $gutter;       }
+.section-margins   { margin: 0 0 2 * $gutter;   }
+
+h1, h2, h3, h4, h5, h6 {
+  font-family: $heading-font-family;
+  font-weight: $heading-font-weight;
+  text-rendering: optimizeLegibility; /* to enable ligatures and kerning */
+  @extend .paragraph-margins;
+}
+
+/* http://modularscale.com/scale/?px1=16&px2=32&ra1=1.667&ra2=0 */
+
+.tera {
+  font-size: 5.558 * $base-font-size;
+  line-height: 1;
+}
+
+.giga {
+  font-size: 4.632 * $base-font-size;
+  line-height: 1;
+}
+
+.mega {
+  font-size: 3.334 * $base-font-size;
+  line-height: 1;
+}
+
+.alpha, h1 {
+  font-size: 2.779 * $base-font-size;
+  line-height: 1.1;
+}
+
+.beta, h2 {
+  font-size: 2 * $base-font-size;
+  line-height: 1.1;
+}
+
+.gamma, h3 {
+  font-size: 1.667 * $base-font-size;
+  line-height: 1.2;
+}
+
+.delta, h4 {
+  font-size: 1.2 * $base-font-size;
+  line-height: 1.4;
+}
+
+.epsilon, h5 {
+  font-size: 1 * $base-font-size;
+  line-height: 1.6;
+}
+
+.zeta, h6 {
+  font-size: 0.72 * $base-font-size;
+  line-height: 1.6;
+}
+
+/* Styling all pages main heading in one fell swoop. */
+#main > h1, #main .title, .product-details h1 {
+  @extend .beta;
+}
+
+/* Responsive images and videos. */
+img, iframe { max-width: 100%; }
+
+.quiet { color: lighten( $text-color, 10% ); } 
+.hint { color: lighten( $text-color, 15% ); }
+i, em { font-style: italic; }
+b, strong { font-weight: 600; }
+.small-print { @extend .zeta; }
+
+a {
+  color: $link-color;
+  text-decoration: none;
+  &:hover {
+    color: darken( $link-color, 10% );
+  }
+  header &, footer & {
+    white-space: nowrap;
+    color: $text-color;
+  }
+  header &:hover, footer &:hover {
+    color: darken( $text-color, 10% );
+  }
+}
+
+section, #customer { @extend .section-margins; }
+p, form > div { @extend .paragraph-margins; }
+
+/* No list style for lists except in RTE content. */
+ul, ol {
+  list-style-type: none;
+  @extend .section-margins;
+  padding: 0;
+}
+.rte ul {
+  list-style-type: disc;
+  list-style-position: inside;
+  @extend .paragraph-margins;
+}
+.rte ol {
+  list-style-type: decimal;
+  list-style-position: inside;
+  @extend .paragraph-margins;
+}
+
+/* =================
+   2. Forms
+   ================= */
+
+/* Remove placeholder text in inputs when they get focus. */
+input:focus::-webkit-input-placeholder { color: transparent; }
+input:focus::-moz-placeholder { color:transparent; }
+
+label {
+  display: block;
+}
+
+select {
+  display: inline-block;
+  margin: 0;
+  padding: .3em 2em .3em 0.6em;
+  color: $text-color;
+  border: 0;
+  border-radius: .25em;
+  cursor: pointer;
+  outline: 0;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+  background: url({{ 'arrow-down.svg' | asset_url }}) right 0.4em center no-repeat;
+  background-color: darken( $background-color, 7% );
+}
+
+@-moz-document url-prefix() {
+  /* Impossible to hide the native arrow in Firefox.
+     https://gist.github.com/joaocunha/6273016
+     Please upvote the bug: https://bugzilla.mozilla.org/show_bug.cgi?id=649849 */
+  select {
+    background-image: none;
+    padding-right: 0;
+  }
+  /* Getting rid of dotted line around text in Firefox. */
+  select:-moz-focusring {
+    color: transparent;
+    text-shadow: 0 0 0 #000;
+  }
+}
+
+/* Getting rid of arrow in IE10 and IE11. */
+select::-ms-expand {
+  display: none;
+}
+
+/* Using default arrow with no box in IE8 and IE9. */
+.ie8 select, .ie9 select {
+  background: darken( $background-color, 20% ) none;
+  padding: 5px;
+  border: 1px;
+}
+
+/* Text inputs. */
+%input {
+  display: inline-block;
+  max-width: 100%;
+  padding: .4em .6em;
+  background-color: transparent;
+  border: darken( $background-color, 10% ) 1px solid;
+  border-radius: .25em;
+  outline: none;
+  -webkit-appearance: none;
+}
+
+textarea, input[type="text"], input[type="email"], input[type="url"], input[type="tel"], input[type="date"], input[type="search"], input[type="number"], input[type="password"] {
+  @extend %input;
+}
+
+.input.small { width: 50px; }
+
+.input.medium { width: 150px; }
+
+.input.large { width: 300px; }
+
+.input.full-width { width: 100%; }
+
+textarea, input[type="text"], input[type="email"], input[type="url"], input[type="tel"], input[type="date"], input[type="password"] {
+  @extend .input.large;
+  @media (max-width: $breakpoint-small-screen) {
+    width: 100%;
+  }
+}
+
+input[type="search"], #searchresults input[type="search"] {
+  @extend .input.medium;
+}
+
+input.quantity, input[type="number"] {
+  @extend .input.small;
+}
+
+/* All buttons. */
+.button {
+  display: inline-block;
+  padding: .4em .6em;
+  background-color: darken( $background-color, 10%);
+  border: darken( $background-color, 10%) 1px solid;
+  border-radius: .25em;
+  text-decoration: none;
+  text-transform: uppercase;
+  text-rendering: optimizeLegibility;
+  &:hover {
+    background-color: darken( $background-color, 20%);
+  }
+}
+
+.disabled {
+  pointer-events: none;
+  opacity: 0.5;
+}
+
+input[type="submit"], input[type="button"], button {
+  @extend .button; 
+}
+
+#searchresults input[type="submit"] { width: inherit; }
+
+/* Big, important buttons get a special treatment */
+.primary.button {
+  padding: .5em .7em;
+  font-size: 1.2rem;
+  background-color: $link-color;
+  border-color: $link-color;  
+  color: $background-color;
+  &:hover {
+    background-color: darken( $link-color, 10% );
+  }
+}
+
+/* For search and newsletter forms, eliminate any spacing between the text box and submit button on the right. */ 
+.inline-collapse {
+  @extend .clearfix;
+  & input {
+    float: left;
+  }  
+  & input:first-child {
+    border-top-right-radius: 0;
+    border-bottom-right-radius: 0;
+  }
+  & input:last-child {
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 0;
+  }      
+}
+
+/* For IE8. */
+.lt-ie9 .inline-collapse input, .lt-ie9 #searchresults .inline-collapse input { display: inline-block; zoom: 1; width: 130px; }
+.lt-ie9 .inline-collapse { display: block; width: 300px; }
+
+/* ================
+   3. Tables
+   ================ */
+
+table { 
+  width: 100%;
+  @extend .section-margins; 
+  th, td {
+    padding: 1em;
+  }
+  tr {
+    border-bottom: darken( $background-color, 10%) 1px solid;      
+  }
+  th {
+    text-align: left;
+  } 
+}
+
+/* ================
+   4. Layout
+   ================ */
+
+/* Control the web page maximum width. */
+.container {
+  width: 85%;
+  max-width: $site-max-width;
+  margin: 0 auto;
+  padding: $gutter 0;
+}
+
+/* Safeguards for floats. */
+header, #main, footer {
+  @extend .clear;
+  @extend .clearfix;
+}
+
+/* Add some space below main section. */
+header, #main {
+  @extend .section-margins;
+}
+
+/* Using border-box makes it easier to work with grids: 
+   See http://www.paulirish.com/2012/box-sizing-border-box-ftw/ */
+*, *:before, *:after {
+  -moz-box-sizing: border-box;
+  -webkit-box-sizing: border-box;
+  box-sizing: border-box;
+}
+
+/* The Grid. */
+.row {
+  margin-left: -$gutter;
+  margin-right: -$gutter;
+  margin-bottom: $gutter;
+  clear: both;
+} 
+.column {
+  float: left;
+  padding-left: $gutter;
+  padding-right: $gutter;
+  padding-bottom: $gutter;
+}
+.column.full { width: 100%; }
+.column.three-quarters { width: 75%; }
+.column.two-thirds { width: 66.6%; }
+.column.half { width: 50%; }
+.column.third { width: 33.3%; }
+.column.fourth { width: 25%; }
+.column.fifth { width: 20%; }
+.column.sixth { width: 16.6%; }
+.column.flow-opposite { float: right; } 
+.grid { 
+  @extend .row; 
+}
+.grid > li {
+  @extend .column;
+}
+.two-per-row {
+  @extend .column.half;
+}
+.three-per-row {
+  @extend .column.third;
+}
+.four-per-row {
+  @extend .column.fourth;
+}
+.five-per-row {
+  @extend .column.fifth;
+}
+.six-per-row {
+  @extend .column.sixth;
+}
+.product {
+  @extend .row;
+}
+.product-photos, .product-details {
+  @extend .column;
+  @extend .column.half;
+}
+
+@media (max-width: $breakpoint-small-screen) {
+  .column {
+    float: none;
+    width: 100% !important;
+  }
+}
+
+/* Clearfix applied to .row because row content is floated. */
+.row { @extend .clearfix; }
+
+/* Show and hide depending on screen size. */
+@media (max-width: $breakpoint-small-screen) {
+.show-on-large, .show-on-medium, .hide-on-small { display: none; }
+}
+@media (min-width: $breakpoint-small-screen) {
+.hide-on-large, .show-on-medium, .show-on-small { display: none; }
+}
+
+/* IE8 does not support media queries */
+.lt-ie9 .show-on-medium, .lt-ie9 .show-on-small { display: none; }
+
+/* Contain floats: nicolasgallagher.com/micro-clearfix-hack/ */ 
+.clearfix:before, .clearfix:after { content: ''; display: table; }
+.clearfix:after { clear: both; }
+.clearfix { zoom: 1; }
+
+/* Utility classes: Hidden, float left, float right, etc. */
+.hidden { display: none; }
+.left { float: left; padding-right: $gutter; }
+.right { float: right; padding-left: $gutter; }
+.centered { text-align: center; }
+.left-aligned {
+  text-align: left;
+  @media (max-width: $breakpoint-small-screen) {
+    text-align: center;
+    margin: $gutter 0;
+  }
+}
+.right-aligned { 
+  text-align: right;
+  @media (max-width: $breakpoint-small-screen) {
+    text-align: center;
+    margin: $gutter 0;
+  }
+}
+.clear { clear: both; }
+.clear-after { *zoom: 1; }
+.clear-after:after { content: ''; display: table; clear: both; }
+
+/* ==================
+   5. Header
+   ================== */
+
+#site-title {
+  display: block;
+  @extend .section-margins;
+  @extend .giga;
+  color: $text-color;
+  text-decoration: none;
+}
+
+#logo {
+  display: block;
+  margin: $gutter/2 auto;
+  img {
+    max-height: 180px;
+  }
+}
+
+/* ==================
+   6. Navigation
+   =================== */
+
+/* Main navigation with drop-down menu support */
+
+@media (max-width: $breakpoint-small-screen) {
+  nav.left {
+    float: none;
+    display: block;
+    padding-right: 0;
+    width: 100%;
+    text-align: center;
+  }
+}
+
+nav ul {
+  margin: 0;
+  li {
+    display: inline-block;
+    position: relative;
+    padding: $gutter/2;
+    margin: 0;
+    &.first {
+      padding-left: 0;
+    }
+    &.last {
+      padding-right: 0;
+    }
+  }
+  ul {
+    display: none;
+    margin: 0;
+    position: absolute;
+    top: 100%;
+    left: -0.5 * $gutter;
+    background-color: lighten( $background-color, 15% );
+    border: 1px solid darken( $background-color, 15% );
+    -webkit-box-shadow: 0px 1px 1px 0px rgba(50, 50, 50, 0.2);
+    -moz-box-shadow:    0px 1px 1px 0px rgba(50, 50, 50, 0.2);
+    box-shadow:         0px 1px 1px 0px rgba(50, 50, 50, 0.2);
+    text-align: left;
+    z-index: 2;
+    li {
+      display: block;
+      padding: $gutter/3 $gutter;
+      &:first-child {
+        padding-top: $gutter;
+      }
+      &:last-child {
+        padding-bottom: $gutter;
+      }
+    }
+  }
+}
+
+/* CSS triangle at the top of drop-down menus. */
+nav ul ul li:first-child a:after {
+  content: '';
+  position: absolute;
+  top: -6px;
+  left: 50%;
+  margin-left: -6px;
+  border-left: 6px solid transparent;
+  border-right: 6px solid transparent;
+  border-bottom: 6px solid lighten( $background-color, 15% );
+  z-index: 1;
+}
+/* Border for the CSS triangle at the top of drop-down menus. */
+nav ul ul li:first-child a:before {
+  content: '';
+  position: absolute;
+  top: -7px;
+  left: 50%;
+  margin-left: -7px;
+  border-left: 7px solid transparent;
+  border-right: 7px solid transparent;
+  border-bottom: 7px solid darken( $background-color, 15% );
+  z-index: 0;
+}
+
+/* Revealing drop-down menus on hover */
+nav li:hover ul { display: block; }
+
+/* Styling active links. */
+nav li.active > a { color: $link-color; }
+
+/* =====================
+   7. Tags
+   ===================== */
+
+.tag {
+  @extend .button;
+  margin: 0 $gutter/3 $gutter/3 0;
+  padding: .2em .5em;
+  a {
+    text-decoration: none;
+    color: $text-color;
+  }
+  &.active {
+    background-color: $link-color;
+    border-color: $link-color;  
+    a {
+      color: $background-color;
+    }
+  }
+}
+
+.subcategories, .blog-tags {
+  font-size: 0;
+}
+
+.subcategories > li, .blog-tags > li {
+  @extend .tag;
+  font-size: 0.85 * $base-font-size;
+}
+
+
+/* ==============
+   8. Social
+   ============== */
+
+.social-links a {
+  font-size: 1.4rem;
+  line-height: 2rem;
+  display: inline-block;
+  padding-right: $gutter/6;
+  text-decoration: none;
+}
+
+/* IE8 does not support SVG. */
+.lt-ie9 .payment-types { display:none; }
+
+/* ===========
+   9. Blog
+   =========== */
+
+/* Separating articles with a border on the blog landing page.*/
+.template-blog .article {
+  border-bottom: darken( $background-color, 5%) 0.07rem solid;
+  padding: $gutter 0;
+  &.first {
+    padding-top: 0;
+  }
+  &.last {
+    border-bottom: none;
+  }
+}
+
+/* All blog images should stretch to the full width on small screens. */
+@media (max-width: $breakpoint-small-screen) {
+  .template-article .article img {
+    display: block;
+    width: 100% !important;
+    float: none !important;
+    margin-top: $gutter/2 !important;
+    margin-bottom: $gutter/2 !important;
+    margin-left: auto !important;
+    margin-right: auto !important;
+    clear: both;
+    @extend .clear-after;
+  }
+}
+
+.date, .comment-date { @extend .zeta; }
+
+.meta > span + span { padding-left: $gutter/2; }
+
+/* Square element that contains the blog image, which is
+set as a centered background image. */
+.square-holder {
+  display: block; 
+  background-position: center center;
+  background-repeat: no-repeat;
+  background-size: cover; 
+  width: 100%; 
+  height: 0; 
+  padding-bottom: 100%;
+}
+
+/* Fading out content so that the height of the article excerpt
+always matches the height of the blog image on the left. */
+.fadeout-overflow-bottom {
+  position: relative;
+  height: 0; 
+  padding-bottom: 33.33%; 
+  overflow: hidden;
+}
+.fadeout-overflow-bottom:after {
+  content: "";
+  display: block;
+  position: absolute;
+  bottom: 0;  
+  width: 100%;
+  height: 3 * $gutter;
+  background: linear-gradient(to top, rgba($background-color, 1) 0, rgba($background-color, 0) 100%);
+  pointer-events: none;
+}
+
+/* On small screens, we don't truncate content, and don't fade
+it out since the blog image is full-width, and the excerpt
+is below it. */
+@media (max-width: $breakpoint-small-screen) {
+  .fadeout-overflow-bottom {
+    height: auto;
+    padding-bottom: 0;
+  }
+  .fadeout-overflow-bottom:after {
+    background: transparent;
+  }
+}
+
+.lt-ie9 .fadeout-overflow-bottom { height: auto; padding-bottom: 0; }
+
+#comments { margin: 2 * $gutter 0; }
+
+/* ==========================================================================
+  10. Product and collection pages.
+  ========================================================================== */
+
+.product-details > div,
+.product-details > p {
+  @extend .section-margins;
+}
+
+.product-photo-container {
+  @extend .grid-margins;
+}
+
+/* Quickly hiding default variant drop-down when JavaScript is enabled */
+/* See this: http://www.learningjquery.com/2008/10/1-way-to-avoid-the-flash-of-unstyled-content/ */
+.js #product-select { display: none; }
+
+/* Product option wrapper. */
+.selector-wrapper {
+  @extend .paragraph-margins;
+}
+
+.sort-by {
+  margin-top: .25rem;
+}
+
+@media (max-width: $breakpoint-small-screen) {
+  .sort-by {
+    float: none;
+    margin-bottom: $gutter;
+  }
+}
+
+.prod-caption {
+  margin: $gutter/6 0;
+}
+
+.product-photo-thumb:nth-child(2n+1) {
+  clear: both;
+}
+
+@media (max-width: $breakpoint-small-screen) {
+  .two-per-row.product-photo-thumb {
+    width: 50% !important;
+    float: left !important;
+  }  
+}
+
+/* ======================================
+   11. Search form and search results
+   ====================================== */
+
+/* Override to globally-hosted search.css on the /search page */
+#searchresults {
+  @extend .paragraph-margins;
+}
+/* Styling all search forms. You can reuse this for newsletter signup form. */
+.search-form {
+  display: inline-block;
+  margin-top: .2 * $base-font-size;
+  @extend .inline-collapse;  
+}
+/* Hiding search form in header on small screens */
+@media (max-width: $breakpoint-small-screen) {
+  header .search-form {
+    display: none;
+  }
+}
+
+/* =====================
+   12. Footer
+   ===================== */
+
+footer {
+  @extend .centered;
+  & > * {
+    @extend .paragraph-margins;
+  }
+  a + a { padding-left: 0.666 * $gutter; }
+}