Merge branch 'scss-cleanup' into gh-pages

Conflicts:
	_config.yml
	_includes/navigation.html
	_layouts/post.html
	_sass/_animations.scss
	_sass/_coderay.scss
	_sass/_elements.scss
	_sass/_layout.scss
	_sass/_site.scss
	_sass/_syntax.scss
	_sass/elements.scss
	assets/css/main.scss

.editorconfig

@@ -0,0 +1,13 @@
+# editorconfig.org
+root = true
+
+[*]
+indent_style = space
+indent_size = 2
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true
+
+[*.md]
+trim_trailing_whitespace = false

.travis.yml

@@ -7,7 +7,7 @@ before_install:
 
 script:
   - bundle exec jekyll build --drafts
-  - bundle exec htmlproof ./_site
+#  - bundle exec htmlproof ./_site
 
 notifications:
   email: false

_includes/footer.html

@@ -1,6 +1,6 @@
 {% if site.owner.google.ad-client and site.owner.google.ad-slot %}{% include ad-footer.html %}{% endif %}
 
-<span>&copy; {{ site.time | date: '%Y' }} {{ site.owner.name }}. Powered by <a href="http://jekyllrb.com">Jekyll</a> using the <a href="http://mademistakes.com/so-simple/">So Simple Theme</a>.</span>
+<span>&copy; {{ site.time | date: '%Y' }} {{ site.owner.name }}. Powered by <a href="http://jekyllrb.com" rel="nofollow">Jekyll</a> using the <a href="http://mademistakes.com/so-simple/" rel="nofollow">So Simple Theme</a>.</span>
 <div class="social-icons">
 	{% if site.owner.twitter %}<a href="http://twitter.com/{{ site.owner.twitter }}" title="{{ site.owner.name}} on Twitter" target="_blank"><i class="fa fa-twitter-square fa-2x"></i></a>{% endif %}
 	{% if site.owner.facebook %}<a href="http://facebook.com/{{ site.owner.facebook }}" title="{{ site.owner.name}} on Facebook" target="_blank"><i class="fa fa-facebook-square fa-2x"></i></a>{% endif %}

_includes/navigation.html

@@ -18,18 +18,18 @@
 {% if page.image.feature %}<header class="masthead">
 	{% if site.logo != null %}
 		<div class="wrap">
-			<a href="{{ site.url }}/" class="site-logo" rel="home" title="{{ site.title }}"><img src="{{ site.url }}/images/{{ site.logo }}" width="200" height="200" alt="{{ site.title }} logo" class="animated bounceInDown"></a>
+			<a href="{{ site.url }}/" class="site-logo" rel="home" title="{{ site.title }}"><img src="{{ site.url }}/images/{{ site.logo }}" width="200" height="200" alt="{{ site.title }} logo" class="animated fadeInDown"></a>
 		</div>
 	{% endif %}
 </header><!-- /.masthead -->
 {% else %}<header class="masthead">
 	<div class="wrap">
-        {% if site.logo != null %}
-    		<a href="{{ site.url }}/" class="site-logo" rel="home" title="{{ site.title }}"><img src="{{ site.url }}/images/{{ site.logo }}" width="200" height="200" alt="{{ site.title }} logo" class="animated fadeInUp"></a>
-        {% endif %}
-        <h1 class="site-title animated fadeIn"><a href="{{ site.url }}/">{{ site.title }}</a></h1>
+      {% if site.logo != null %}
+  		<a href="{{ site.url }}/" class="site-logo" rel="home" title="{{ site.title }}"><img src="{{ site.url }}/images/{{ site.logo }}" width="200" height="200" alt="{{ site.title }} logo" class="animated fadeInDown"></a>
+      {% endif %}
+      <h1 class="site-title animated fadeIn"><a href="{{ site.url }}/">{{ site.title }}</a></h1>
 		<h2 class="site-description animated fadeIn" itemprop="description">{{ site.description }}</h2>
 	</div>
 </header><!-- /.masthead -->{% endif %}
 
-<div class="js-menu-screen menu-screen"></div>
+<div class="js-menu-screen menu-screen"></div>

_layouts/page.html

@@ -13,7 +13,7 @@
 
 <div id="main" role="main">
   <article class="entry">
-    {% if page.image.feature %}<img src="{{ site.url }}/images/{{ page.image.feature }}" class="entry-feature-image" alt="{{ page.title }}" {% if site.logo == null %}style="margin-top:0;"{% endif %}>{% if page.image.credit %}<p class="image-credit">Photo Credit: <a href="{{ page.image.creditlink }}">{{ page.image.credit }}</a>{% endif %}{% endif %}
+    {% if page.image.feature %}<img src="{{ site.url }}/images/{{ page.image.feature }}" class="entry-feature-image" alt="{{ page.title }}" {% if site.logo == null %}style="margin-top:0;"{% endif %}>{% if page.image.credit %}<p class="image-credit">Photo Credit: <a href="{{ page.image.creditlink }}">{{ page.image.credit }}</a></p>{% endif %}{% endif %}
     <div class="entry-wrapper">
       <header class="entry-header">
         <h1 class="entry-title">{% if page.headline %}{{ page.headline }}{% else %}{{ page.title }}</h1>{% endif %}
@@ -31,7 +31,7 @@
   </footer>
 </div><!-- /.footer-wrapper -->
 
-{% include scripts.html %}          
+{% include scripts.html %}
 
 </body>
-</html>
+</html>

_layouts/post.html

@@ -13,7 +13,7 @@
 
 <div id="main" role="main">
   <article class="hentry">
-    {% if page.image.feature %}<img src="{{ site.url }}/images/{{ page.image.feature }}" class="entry-feature-image" alt="{{ page.title }}" {% if site.logo == null %}style="margin-top:0;"{% endif %}>{% if page.image.credit %}<p class="image-credit">Photo Credit: <a href="{{ page.image.creditlink }}">{{ page.image.credit }}</a>{% endif %}{% endif %}
+    {% if page.image.feature %}<img src="{{ site.url }}/images/{{ page.image.feature }}" class="entry-feature-image" alt="{{ page.title }}" {% if site.logo == null %}style="margin-top:0;"{% endif %}>{% if page.image.credit %}<p class="image-credit">Image credit: <a href="{{ page.image.creditlink }}">{{ page.image.credit }}</a></p>{% endif %}{% endif %}
     <div class="entry-wrapper">
       <header class="entry-header">
         <span class="entry-tags">{% for tag in page.tags %}<a href="{{ site.url }}/tags/#{{ tag }}" title="Pages tagged {{ tag }}">{{ tag }}</a>{% unless forloop.last %}&nbsp;&bull;&nbsp;{% endunless %}{% endfor %}</span>
@@ -43,7 +43,7 @@
         {{ content }}
         {% if (site.owner.disqus-shortname and page.comments) or site.comments %}
           <div id="disqus_thread"></div><!-- /#disqus_thread -->
-          {% include disqus_comments.html %}
+          {% include disqus-comments.html %}
         {% endif %}
       </div><!-- /.entry-content -->
     </div><!-- /.entry-wrapper -->
@@ -64,7 +64,7 @@
   </footer>
 </div><!-- /.footer-wrapper -->
 
-{% include scripts.html %}	        
+{% include scripts.html %}
 
 </body>
 </html>

_sass/_animations.scss

@@ -0,0 +1,338 @@
+/* ==========================================================================
+   Animations
+   ========================================================================== */
+
+/* add .animated class to elements you wish to animate
+ * along with the type of animation (eg: <div class="animated fadeIn"></div>)
+ */
+
+.animated{-webkit-animation-fill-mode:both;-moz-animation-fill-mode:both;-ms-animation-fill-mode:both;-o-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-duration:1s;-moz-animation-duration:1s;-ms-animation-duration:1s;-o-animation-duration:1s;animation-duration:1s;}.animated.hinge{-webkit-animation-duration:2s;-moz-animation-duration:2s;-ms-animation-duration:2s;-o-animation-duration:2s;animation-duration:2s;}@-webkit-keyframes fadeIn {
+  0% {opacity: 0;}  100% {opacity: 1;}
+}
+
+/*
+   Fade-in animation .fadeIn
+   ========================================================================== */
+
+@-webkit-keyframes fadeIn {
+  0% {opacity: 0;}
+  100% {opacity: 1;}
+}
+@-moz-keyframes fadeIn {
+  0% {opacity: 0;}
+  100% {opacity: 1;}
+}
+@-o-keyframes fadeIn {
+  0% {opacity: 0;}
+  100% {opacity: 1;}
+}
+@keyframes fadeIn {
+  0% {opacity: 0;}
+  100% {opacity: 1;}
+}
+
+.fadeIn {
+  -webkit-animation-name: fadeIn;
+  -moz-animation-name: fadeIn;
+  -o-animation-name: fadeIn;
+  animation-name: fadeIn;
+}
+
+/*
+   Fade-in down animation .fadeInDown
+   ========================================================================== */
+
+@-webkit-keyframes fadeInDown {
+  0% {
+    opacity: 0;
+    -webkit-transform: translateY(-20px);
+  }
+  100% {
+    opacity: 1;
+    -webkit-transform: translateY(0);
+  }
+}
+@-moz-keyframes fadeInDown {
+  0% {
+    opacity: 0;
+    -moz-transform: translateY(-20px);
+  }
+  100% {
+    opacity: 1;
+    -moz-transform: translateY(0);
+  }
+}
+@-o-keyframes fadeInDown {
+  0% {
+    opacity: 0;
+    -o-transform: translateY(-20px);
+  }
+  100% {
+    opacity: 1;
+    -o-transform: translateY(0);
+  }
+}
+@keyframes fadeInDown {
+  0% {
+    opacity: 0;
+    transform: translateY(-20px);
+  }
+  100% {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.fadeInDown {
+  -webkit-animation-name: fadeInDown;
+  -moz-animation-name: fadeInDown;
+  -o-animation-name: fadeInDown;
+  animation-name: fadeInDown;
+}
+
+/*
+   Fade-in down big animation .fadeInDownBig
+   ========================================================================== */
+
+@-webkit-keyframes fadeInDownBig {
+  0% {
+    opacity: 0;
+    -webkit-transform: translateY(-2000px);
+  }
+  100% {
+    opacity: 1;
+    -webkit-transform: translateY(0);
+  }
+}
+@-moz-keyframes fadeInDownBig {
+  0% {
+    opacity: 0;
+    -moz-transform: translateY(-2000px);
+  }
+  100% {
+    opacity: 1;
+    -moz-transform: translateY(0);
+  }
+}
+@-o-keyframes fadeInDownBig {
+  0% {
+    opacity: 0;
+    -o-transform: translateY(-2000px);
+  }
+  100% {
+    opacity: 1;
+    -o-transform: translateY(0);
+  }
+}
+@keyframes fadeInDownBig {
+  0% {
+    opacity: 0;
+    transform: translateY(-2000px);
+  }
+  100% {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.fadeInDownBig {
+  -webkit-animation-name: fadeInDownBig;
+  -moz-animation-name: fadeInDownBig;
+  -o-animation-name: fadeInDownBig;
+  animation-name: fadeInDownBig;
+}
+
+/*
+   Bounce-in animation .bounceIn
+   ========================================================================== */
+
+@-webkit-keyframes bounceIn {
+  0% {
+    opacity: 0;
+    -webkit-transform: scale(.3);
+  }
+  50% {
+    opacity: 1;
+    -webkit-transform: scale(1.05);
+  }
+  70% {
+    -webkit-transform: scale(.9);
+  }
+  100% {
+    -webkit-transform: scale(1);
+  }
+}
+@-moz-keyframes bounceIn {
+  0% {
+    opacity: 0;
+    -moz-transform: scale(.3);
+  }
+  50% {
+    opacity: 1;
+    -moz-transform: scale(1.05);
+  }
+  70% {
+    -moz-transform: scale(.9);
+  }
+  100% {
+    -moz-transform: scale(1);
+  }
+}
+@-o-keyframes bounceIn {
+  0% {
+    opacity: 0;
+    -o-transform: scale(.3);
+  }
+  50% {
+    opacity: 1;
+    -o-transform: scale(1.05);
+  }
+  70% {
+    -o-transform: scale(.9);
+  }
+  100% {
+    -o-transform: scale(1);
+  }
+}
+@keyframes bounceIn {
+  0% {
+    opacity: 0;
+    transform: scale(.3);
+  }
+  50% {
+    opacity: 1;
+    transform: scale(1.05);
+  }
+  70% {
+    transform: scale(.9);
+  }
+  100% {
+    transform: scale(1);
+  }
+}
+
+.bounceIn {
+  -webkit-animation-name: bounceIn;
+  -moz-animation-name: bounceIn;
+  -o-animation-name: bounceIn;
+  animation-name: bounceIn;
+}
+
+/*
+   Bounce-in down animation .bounceInDown
+   ========================================================================== */
+
+@-webkit-keyframes bounceInDown {
+  0% {
+    opacity: 0;
+    -webkit-transform: translateY(-2000px);
+  }
+  60% {
+    opacity: 1;
+    -webkit-transform: translateY(30px);
+  }
+  80% {
+    -webkit-transform: translateY(-10px);
+  }
+  100% {
+    -webkit-transform: translateY(0);
+  }
+}
+@-moz-keyframes bounceInDown {
+  0% {
+    opacity: 0;
+    -moz-transform: translateY(-2000px);
+  }
+  60% {
+    opacity: 1;
+    -moz-transform: translateY(30px);
+  }
+  80% {
+    -moz-transform: translateY(-10px);
+  }
+  100% {
+    -moz-transform: translateY(0);
+  }
+}
+@-o-keyframes bounceInDown {
+  0% {
+    opacity: 0;
+    -o-transform: translateY(-2000px);
+  }
+  60% {
+    opacity: 1;
+    -o-transform: translateY(30px);
+  }
+  80% {
+    -o-transform: translateY(-10px);
+  }
+  100% {
+    -o-transform: translateY(0);
+  }
+}
+@keyframes bounceInDown {
+  0% {
+    opacity: 0;
+    transform: translateY(-2000px);
+  }
+  60% {
+    opacity: 1;
+    transform: translateY(30px);
+  }
+  80% {
+    transform: translateY(-10px);
+  }
+  100% {
+    transform: translateY(0);
+  }
+}
+
+.bounceInDown {
+  -webkit-animation-name: bounceInDown;
+  -moz-animation-name: bounceInDown;
+  -o-animation-name: bounceInDown;
+  animation-name: bounceInDown;
+}
+
+/*
+   Drop animation .drop
+   ========================================================================== */
+
+@-webkit-keyframes drop {
+  0% {
+    -webkit-transform: translateY(-500px);
+  }
+  100% {
+    -webkit-transform: translateY(0);
+  }
+}
+@-moz-keyframes drop {
+  0% {
+    -moz-transform: translateY(-500px);
+  }
+  100% {
+    -moz-transform: translateY(0);
+  }
+}
+@-o-keyframes drop {
+  0% {
+    -o-transform: translateY(-500px);
+  }
+  100% {
+    -o-transform: translateY(0);
+  }
+}
+@keyframes drop {
+  0% {
+    transform: translateY(-500px);
+  }
+  100% {
+    transform: translateY(0);
+  }
+}
+.drop {
+  -webkit-animation-name: drop;
+  -moz-animation-name: drop;
+  -o-animation-name: drop;
+  animation-name: drop;
+}

_sass/_archives.scss

@@ -0,0 +1,77 @@
+/* ==========================================================================
+   Archive pages
+   ========================================================================== */
+
+
+
+
+/*
+   Post archive
+   ========================================================================== */
+
+.post-list {
+  margin: 0;
+  padding: 0;
+  list-style-type: none;
+  li {
+    padding: 8px 0;
+    border-bottom: 1px solid lighten($black,80);
+    border-bottom: 1px solid rgba($black,.10);
+    @include font-size(18,no);
+    @include clearfix;
+    > a {
+      border-bottom-width: 0; /* remove underlines from items in post indexes */
+    }
+  }
+  a > span {
+    float: right;
+  }
+  .entry-date {
+    @include font-size(14,no);
+    text-transform: uppercase;
+    display: none;
+    @include media($medium) {
+      display: inline;
+    }
+  }
+  /* post excerpt */
+  .excerpt {
+    display: block;
+    float: none;
+    @include font-size(14, no, 16);
+    @include media($medium) {
+      width: 70%;
+    }
+    @include media($large) {
+      width: 60%;
+    }
+  }
+}
+
+/*
+   Tag archive
+   ========================================================================== */
+
+.tag-box {
+  list-style: none;
+  margin: 0;
+  padding: 4px 0;
+  overflow: hidden;
+  @include clearfix;
+  &.inline li {
+    float: left;
+    @include font-size(14);
+    line-height: 2.5;
+  }
+  a {
+    padding: 4px 6px;
+    margin: 2px;
+    background-color: lighten($black, 90);
+    @include rounded(4px);
+    text-decoration: none;
+    span {
+      vertical-align: super;
+      @include font-size(10);
+    }
+  }
+}

_sass/_base.scss

@@ -0,0 +1,221 @@
+/* ==========================================================================
+   Base elements
+   ========================================================================== */
+
+/*
+   Selections
+   ========================================================================== */
+
+::-moz-selection {
+	background-color: lighten($base-color, 65%);
+	color: $base-color;
+	text-shadow: none;
+}
+::selection {
+	background-color: lighten($base-color, 65%);
+	color: $base-color;
+	text-shadow: none;
+}
+
+
+/*
+   Body
+   ========================================================================== */
+
+body {
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  font-family: $base-font;
+  color: $text-color;
+  background-color: $body-color;
+  border-top: 5px solid $black;
+}
+
+/*
+   Typography
+   ========================================================================== */
+
+body {
+	font-family: $base-font;
+	color: $text-color;
+	@include font-size(16);
+}
+
+p {
+	@include font-size(18,yes,28);
+}
+
+li {
+	@include font-size(16,12,24);
+}
+
+/* headings */
+
+h1, h2, h3, h4, h5, h6 {
+	font-family: $heading-font;
+	text-rendering: optimizeLegibility; // Fix the character spacing for headings
+}
+h1 {
+	@include font-size(36);
+}
+h2 {
+	@include font-size(32);
+}
+h3 {
+	@include font-size(28);
+}
+h4 {
+	@include font-size(24);
+}
+h5 {
+	@include font-size(20);
+}
+h6 {
+	@include font-size(18);
+}
+
+/* underlined text */
+
+u,
+ins {
+	text-decoration: none;
+	border-bottom: 1px solid $text-color;
+}
+
+/*
+   Links
+   ========================================================================== */
+
+a {
+	text-decoration: none;
+	color: $link-color;
+	&:visited {
+		color: lighten($link-color, 20);
+	}
+	&:hover {
+		color: darken($link-color, 20);
+	}
+	&:focus {
+		outline: thin dotted;
+		color: darken($link-color, 20);
+	}
+	&:hover,
+	&:active {
+		outline: 0;
+	}
+}
+
+/*
+   Horizontal rules
+   ========================================================================== */
+
+hr {
+    display: block;
+    margin: 1em 0;
+    padding: 0;
+    height: 1px;
+    border: 0;
+    border-top: 1px solid #ccc;
+    border-bottom: 1px solid #fff;
+}
+
+/*
+   Figures and Images
+   ========================================================================== */
+
+figure {
+  margin: 0;
+  padding-top: 10px;
+  padding-bottom: 10px;
+  @include clearfix;
+  img {
+    margin-bottom: 10px;
+  }
+  a {
+    img {
+      @include transform(translateY(0));
+      -webkit-transition-duration: 0.25s;
+      -moz-transition-duration: 0.25s;
+      -o-transition-duration: 0.25s;
+      opacity: 0.7;
+      &:hover {
+        @include transform(translateY(-5px));
+        @include box-shadow(0 0 10px rgba($black, .20));
+        opacity: 1;
+      }
+    }
+  }
+}
+
+svg:not(:root) {
+  overflow: hidden;
+}
+
+// Figure captions
+
+figcaption {
+	padding-top: 10px;
+	@include font-size(14);
+	line-height: 1.3;
+	color: lighten($text-color, 10);
+}
+
+
+
+// Tables
+// --------------------------------------------------
+table {
+  width: 100%;
+}
+
+
+// Blockquotes
+// --------------------------------------------------
+
+blockquote {
+	font-family: $alt-font;
+	font-style: italic;
+	@include font-size(16);
+	padding-left: 20px;
+	border-left: 8px solid $black;
+}
+
+
+
+
+
+// Code
+// --------------------------------------------------
+
+tt, code, kbd, samp, pre {
+	font-family: $code-font;
+}
+p,
+li {
+	code {
+		@include font-size(14);
+		font-family: $code-font;
+		white-space: nowrap;
+		margin: 0 2px;
+		padding: 0 5px;
+		border: 1px solid lighten($black, 90);
+		background-color: lighten($black, 95);
+		@include rounded(3px);
+	}
+}
+pre {
+	@include font-size(14);
+	overflow-x: auto;
+}
+
+
+
+
+
+// Global Transition
+// ---------------------------------------------------
+
+b, i, strong, em, blockquote, p, q, span, figure, img, h1, h2, header, input, a, .highlight {
+	@include transition(all .2s ease);
+}

_sass/_buttons.scss

@@ -0,0 +1,39 @@
+/* ==========================================================================
+   Buttons
+   ========================================================================== */
+
+/*
+   Default button
+   ========================================================================== */
+
+.btn {
+  display: inline-block;
+  margin-bottom: 20px;
+  padding: 8px 20px;
+  @include font-size(14);
+  background-color: $black;
+  color: $white;
+  border: 2px solid $black !important;
+  border-radius: $border-radius;
+  &:visited {
+    color: $white;
+  }
+  &:hover {
+    background-color: $white;
+    color: $black;
+  }
+}
+
+/*
+   Close button
+   ========================================================================== */
+
+.close-btn {
+  position: absolute;
+  top: 0;
+  right: 0;
+  z-index: 1;
+  background-color: transparent;
+  border: 0 solid transparent;
+  color: $white;
+}

_sass/_footer.scss

@@ -0,0 +1,30 @@
+/* ==========================================================================
+   Site footer
+   ========================================================================== */
+
+.footer-wrapper {
+  @include clearfix;
+  margin: 2em auto;
+  text-align: center;
+  font-family: $alt-font;
+  @include font-size(14);
+  font-style: italic;
+  color: lighten($text-color,20);
+  a {
+    color: lighten($text-color,20);
+  }
+}
+
+/*
+   Social media icons
+   ========================================================================== */
+
+.social-icons {
+  margin: 1em 0 2em;
+  a {
+    padding: 4px 8px;
+    &:hover {
+      color: $black;
+    }
+  }
+}

_sass/_footnotes.scss

@@ -0,0 +1,8 @@
+/* ==========================================================================
+   Footnotes (class generated by Kramdown)
+   ========================================================================== */
+
+.footnotes {
+  @include font-size(14);
+  font-family: $base-font;
+}

_sass/_helpers.scss

@@ -0,0 +1,116 @@
+/* ==========================================================================
+   Helpers and Utility Classes
+   ========================================================================== */
+
+.wrap {
+  margin: 0 auto;
+}
+
+/*
+   Typography
+   ========================================================================== */
+
+/* capitalize all letters */
+
+.all-caps {
+  text-transform: uppercase;
+}
+
+/* center text */
+
+.center {
+  text-align: center;
+}
+
+/* remove bullets from list items */
+
+/**
+ *  <ul class="unstyled-list">
+ *    <li>Item 1</li>
+ *    <li>Item 2</li>
+ *  </ul>
+ */
+
+.unstyled-list {
+  list-style: none;
+  margin-left: 0;
+  padding-left: 0;
+  li {
+    list-style-type: none;
+  }
+}
+
+/*
+   Image alignment
+   ========================================================================== */
+
+/* float left */
+
+.pull-left {
+  float: left;
+  padding-right: $gutter;
+}
+
+/* float right */
+
+.pull-right {
+  float: right;
+  padding-left: $gutter;
+}
+
+/*
+   Image layout in <figure>
+   ========================================================================== */
+
+figure {
+
+  /* 2 images in a row. should be of equal height/width to maintain layout */
+
+  &.half {
+    @include media($large) {
+      img {
+        width: 47.5%;
+        float: left;
+        margin-right: 2.5%;
+        margin-bottom: 2.5%;
+      }
+      figcaption {
+        clear: left;
+      }
+    }
+  }
+
+  /* 3 images in a row. should be of equal height/width to maintain layout */
+
+  &.third {
+    @include media($large) {
+      img {
+        width: 30.8%;
+        float: left;
+        margin-right: 2.5%;
+        margin-bottom: 2.5%;
+      }
+      figcaption {
+        clear: left;
+      }
+    }
+  }
+}
+
+/*
+   No scrollbars
+   ========================================================================== */
+
+.no-scroll {
+  overflow: hidden;
+}
+
+/*
+   Link arrow (used in link post titles)
+   ========================================================================== */
+
+.link-arrow {
+  font-weight: 100;
+  text-decoration: underline;
+  font-style: normal;
+}

_sass/_masthead.scss

@@ -0,0 +1,80 @@
+/* ==========================================================================
+   Masthead
+   ========================================================================== */
+
+.masthead {
+  margin-top: 40px;
+  @include clearfix;
+  @include media($medium) {
+    margin-top: 0;
+  }
+  .wrap {
+    text-align: center;
+    max-width: em(440);
+    padding-right: 20px;
+    padding-left: 20px;
+    @include media($medium) {
+      max-width: em(728);
+      padding-right: 60px;
+      padding-left: 60px;
+    }
+    @include media($large) {
+      max-width: em(960);
+    }
+  }
+}
+
+/*
+   Site logo
+   ========================================================================== */
+
+.site-logo {
+  img {
+    width: 100px;
+    height: 100px;
+    @include animation-duration(1s);
+      @include animation-delay(.05s);
+      border: 4px solid $white;
+      @include rounded(100px); /* crops in a circle */
+    @include media($medium) {
+      width: 150px;
+      height: 150px;
+      @include rounded(150px); /* crops in a circle */
+    }
+    @include media($large) {
+      width: 200px;
+      height: 200px;
+      @include rounded(200px); /* crops in a circle */
+    }
+  }
+}
+
+/*
+   Site title/name
+   ========================================================================== */
+
+.site-title {
+  margin-bottom: 0;
+  @include animation-duration(1s);
+    @include animation-delay(.75s);
+  a {
+    color: $black;
+  }
+}
+
+/*
+   Site description text
+   ========================================================================== */
+
+.site-description {
+  margin-top: 0;
+  font-family: $alt-font;
+  @include font-size(16);
+  font-weight: 400;
+  font-style: italic;
+  @include animation-duration(1s);
+    @include animation-delay(1s);
+  @include media($medium) {
+    @include font-size(20);
+  }
+}

_sass/_navigation.scss

@@ -0,0 +1,99 @@
+/* ==========================================================================
+   Top navigation
+   ========================================================================== */
+
+.navigation-wrapper {
+  text-align: center;
+  @include clearfix;
+  ul {
+    display: inline-block;
+    width: 100%;
+    vertical-align: top;
+    margin: 0 0 50px;
+    padding: 4px 20px;
+    background-color: $black;
+    @include media($medium) {
+      width: auto;
+      @include rounded(0 0 10px 10px);
+    }
+    @include clearfix;
+  }
+  li {
+    display: block;
+    float: left;
+    list-style: none;
+    text-align: center;
+    @include font-size(24,no);
+    text-transform: uppercase;
+    color: $white;
+    @include media($medium) {
+      @include font-size(14,no);
+    }
+    a:hover {
+      @include box-shadow($shadow: inset 0 0 1px $white);
+    }
+  }
+  a {
+    display: block;
+    margin-bottom: 10px;
+    padding: 12px 20px;
+    @include media($medium) {
+      margin-bottom: 0;
+      padding: 6px 10px;
+    }
+    color: $white;
+    @include rounded(4px);
+    &:hover {
+      background-color: lighten($black, 10);
+    }
+  }
+}
+
+/*
+   Responsive navigation toggle
+   ========================================================================== */
+
+#site-nav {
+  display: none;
+  z-index: 5;
+  @include media($medium) {
+    -webkit-animation-duration: 1s;
+    -moz-animation-duration: 1s;
+    -o-animation-duration: 1s;
+    animation-duration: 1s;
+  }
+  &.closed {
+    @include media($medium) {
+      display: block;
+    }
+  }
+  &.opened {
+    display: block;
+    max-height: 100%;
+    li {
+      float: none;
+      @include media($medium) {
+        float: left;
+      }
+    }
+  }
+}
+
+/* display when JavaScript is disabled */
+.no-js #site-nav {
+  display: block;
+}
+
+#nav-toggle {
+  z-index: 20;
+  display: block;
+  vertical-align: top;
+  margin: 0;
+  padding: 6px 20px;
+  background-color: $black;
+  height: 44px;
+  @include rounded(0);
+  @include media($medium) {
+    display: none;
+  }
+}

_sass/_notices.scss

@@ -0,0 +1,26 @@
+/* ==========================================================================
+   Notices
+   ========================================================================== */
+
+/*
+   Default notice
+   ========================================================================== */
+
+.notice {
+  margin-top: 1.5em;
+  padding: .5em 1em;
+  text-indent: 0;
+  @include font-size(16);
+  background-color: lighten($black, 95);
+  border: 1px solid lighten($black, 90);
+  @include rounded(4px);
+}
+
+/*
+   Browser upgrade notice
+   ========================================================================== */
+
+.upgrade {
+  padding: 10px;
+  text-align: center;
+}

_sass/_page.scss

@@ -0,0 +1,295 @@
+/* ==========================================================================
+   Page/post layout and styling
+   ========================================================================== */
+
+/*
+   Main content
+   ========================================================================== */
+
+#main {
+	@include clearfix;
+}
+
+.entry,
+.hentry {
+	@include clearfix;
+	border-bottom: 1px solid lighten($black,80);
+	border-bottom: 1px solid rgba($black,.10);
+}
+
+/* feature image */
+
+.entry-feature-image {
+	margin: 20px 0 0;
+	width: 100%;
+	@include media($medium) {
+		margin-top: -75px; /* move up to be overlapped by site logo */
+	}
+	@include media($large) {
+		margin-top: -145px; /* move up further to be overlapped by site logo */
+	}
+}
+
+/* page header */
+
+.entry-header {
+	@include fill-parent;
+}
+
+/* tag listing in page header */
+
+.entry-tags {
+	display: block;
+	margin-top: 2em;
+	text-transform: uppercase;
+	@include font-size(16);
+	font-weight: 600;
+	a {
+		color: $text-color;
+	}
+}
+
+/* page title */
+
+span + .entry-title {
+	margin-top: 0;
+}
+
+.entry-title {
+	font-family: $alt-font;
+	font-style: italic;
+	@include font-size(36,yes,36);
+	font-weight: 400;
+	line-height: 1;
+	letter-spacing: -3px;
+	a {
+		color: $black;
+		text-decoration: underline;
+	}
+	@include media($medium) {
+		@include font-size(52,yes,54);
+	}
+	@include media($large) {
+		@include font-size(68,yes,72);
+	}
+}
+
+/* page/post wrapper */
+
+.entry-wrapper {
+	@include outer-container;
+	margin-top: 0;
+	margin-bottom: 3em;
+	padding-right: $gutter;
+	padding-left: $gutter;
+}
+
+/* page/post meta content (date, author, etc) */
+
+.entry-meta {
+	@include span-columns(12);
+	text-transform: uppercase;
+	@include font-size(14);
+	a {
+		color: $text-color;
+	}
+	@include media($large) {
+		@include span-columns(2.5);
+	}
+	& > span {
+		padding: 0 20px 10px 0;
+		display: inline-block;
+		@include media($large) {
+			display: block;
+			padding: 8px 0;
+			border-bottom: 1px solid lighten($black,80);
+			border-bottom: 1px solid rgba($black,.10);
+		}
+	}
+}
+
+/* author avatar (circular) */
+
+.bio-photo {
+	display: none;
+	@include media($large) {
+		display: block;
+		width: 150px;
+		height: 150px;
+		margin-bottom: 10px;
+		@include rounded(150px);
+		@include clearfix;
+	}
+}
+
+
+/* feature image credit */
+
+.image-credit {
+  margin: 0 auto;
+  max-width: 440px;
+  padding-top: 5px;
+  padding-right: 20px;
+  padding-left: 20px;
+  text-align: right;
+  @include font-size(12, no);
+  line-height: 1.3;
+  color: lighten($text-color, 30);
+  @include clearfix();
+  @include media($medium) {
+    max-width: 760px;
+    padding-right: 60px;
+    padding-left: 60px;
+    @include font-size(14, no);
+  }
+  @include media($large) {
+    max-width: 960px;
+  }
+  a {
+    color: lighten($text-color, 30);
+  }
+}
+
+/* main content block */
+
+.entry-content {
+	@include span-columns(12);
+	p:first-child {
+		margin-top: 0;
+	}
+	@include media($large) {
+		@include span-columns(9.5);
+	}
+	/* nice link underlines */
+  p > a,
+	li > a {
+		border-bottom: 1px dotted lighten($link-color, 50);
+		&:hover {
+			border-bottom-style: solid;
+		}
+	}
+}
+
+/*
+   Disqus
+   ========================================================================== */
+
+#disqus_thread {
+	margin-top: 2em;
+}
+
+/*
+   Pagination
+   ========================================================================== */
+
+.pagination {
+	margin-top: 2em;
+	text-align: center;
+}
+
+/*
+   Overrides
+   ========================================================================== */
+
+/* adjust width for lack of meta/author column */
+
+#home,
+#page {
+	.entry-wrapper {
+		max-width: em(760);
+	}
+	.entry-title {
+		text-align: center;
+		max-width: 100%;
+	}
+	.entry-content {
+		@include span-columns(12);
+	}
+}
+
+/*
+   Kramdown generated table of contents
+   ========================================================================== */
+
+#markdown-toc {
+	font-family: $alt-font;
+	margin-top: $gutter;
+	margin-bottom: $gutter;
+	padding-left: 0;
+	border: 1px solid $border-color;
+	border-radius: $border-radius;
+  ul {
+  	list-style-type: none;
+  	padding-left: 0;
+  }
+  li {
+    @include font-size(16,no,18);
+    border-bottom: 1px solid $border-color;
+    list-style-type: none;
+  }
+  h6 {
+    margin: 0;
+    padding: (.25 * $gutter) (.5 * $gutter);
+    background: $table-stripe-color;
+  }
+  a {
+    display: block;
+    padding: (.25 * $gutter) (.5 * $gutter);
+    border-left: 2px solid transparent;
+    border-bottom: 0 solid transparent;
+    &:hover,
+    &:focus {
+      background: lighten($border-color,5);
+    }
+  }
+}
+
+/*
+   Tables
+   ========================================================================== */
+
+/** For nicer looking tables apply the .table class
+ *  Example:
+ *  <table class="table">
+ *    <tr>
+ *      <td>cell1</td>
+ *      <td>cell2</td>
+ *      <td>cell3</td>
+ *    </tr>
+ *  </table>
+*/
+
+.table {
+	border-collapse: collapse;
+	margin: ((0px + $doc-line-height) / 2) 0;
+	margin: ((0rem + ($doc-line-height / $doc-font-size)) / 2) 0;
+	width: 100%;
+	tbody {
+		tr:hover > td, tr:hover > th {
+			background-color: $table-hover-color;
+		}
+	}
+	thead {
+		tr:first-child td {
+			border-bottom: 2px solid $table-border-color;
+		}
+	}
+	th {
+		padding: (0px + $doc-line-height) / 2;
+		padding: (0rem + ($doc-line-height / $doc-font-size)) / 2;
+		font-family: $alt-font;
+		font-weight: bold;
+		text-align: left;
+		background-color: $table-header-color;
+		border-bottom: 1px solid darken($border-color, 15%);
+	}
+	td {
+		border-bottom: 1px solid $border-color;
+		padding: (0px + $doc-line-height) / 2;
+		padding: (0rem + ($doc-line-height / $doc-font-size)) / 2;
+		@include font-size(18);
+	}
+	tr, td, th {
+		vertical-align: middle;
+	}
+}

_sass/_search.scss

@@ -0,0 +1,40 @@
+/* ==========================================================================
+   Search
+   ========================================================================== */
+
+.search-wrapper {
+  @include outer-container;
+  margin-top: 0;
+  padding-right: $gutter;
+  padding-left: $gutter;
+  height: 1px;
+}
+
+/* 
+   Google search form
+   ========================================================================== */
+
+#goog-fixurl {
+  ul {
+    list-style: none;
+    margin-left: 0;
+    padding-left: 0;
+    li {
+      list-style-type: none;
+    }
+  }
+}
+
+#goog-wm-qt {
+  width: auto;
+  margin-right: 10px;
+  padding: 8px 10px;
+  @include font-size(14);
+  border-width: 2px;
+  border-radius: $border-radius;
+}
+
+/* button */
+#goog-wm-sb {
+  @extend .btn;
+}

_sass/_wells.scss

@@ -0,0 +1,11 @@
+/* ==========================================================================
+   Wells
+   ========================================================================== */
+
+/* Used to call out text in a subtle manner */
+
+.well {
+  padding: 20px;
+  border: 1px solid $comp-color;
+  @include rounded(4px);
+}

assets/css/main.scss

@@ -11,18 +11,45 @@ sitemap: false
  *
 */
 
-// Partials
 @import "variables";
-@import "vendor/bourbon/bourbon";
-@import "grid-settings";
-@import "vendor/neat/neat";
+
+/*
+   Vendor
+   ========================================================================== */
+
+@import "vendor/bourbon/bourbon"; /* Bourbon mixins (bourbon.io) */
+@import "grid-settings"; /* Bourbon Neat settings */
+@import "vendor/neat/neat"; /* Bourbon Neat grid mixins (neat.bourbon.io) */
+@import "vendor/font-awesome/font-awesome"; /* Font Awesome icons */
+@import "vendor/magnific-popup/magnific-popup"; /* Magnific Popup lightbox */
+
+/*
+   Global
+   ========================================================================== */
+
 @import "mixins";
 @import "reset";
-@import "site";
+@import "base";
+
+/*
+   Components
+   ========================================================================== */
+
+@import "helpers";
+@import "buttons";
+@import "wells";
 @import "syntax";
-@import "coderay";
-@import "elements";
 @import "forms";
-@import "layout";
-@import "vendor/font-awesome/font-awesome";
-@import "vendor/magnific-popup/magnific-popup";
+@import "notices"; /* notices and alerts */
+@import "animations";
+@import "masthead";
+@import "navigation";
+@import "search";
+@import "footer";
+
+/*
+   Page specific
+   ========================================================================== */
+
+@import "page"; /* layout and styles that apply to posts and pages */
+@import "archives"; /* archive pages (post/tag lists, etc) */

theme-setup/index.md

@@ -63,13 +63,13 @@ How So Simple is organized and what the various files are. All posts, layouts, i
 so-simple-theme/
 ├── _includes/
 |    ├── browser-upgrade.html   # prompt to install a modern browser for < IE9
-|    ├── disqus_comments.html   # Disqus comments script
+|    ├── disqus-comments.html   # Disqus comments script
+|    ├── feed-footer.html       # post footers in feed
 |    ├── footer.html            # site footer
 |    ├── head.html              # site head
 |    ├── navigation.html        # site top navigation
-|    ├── open-graph.html        # Twitter Cards and Open Graph meta data
+|    ├── open-graph.html        # meta data for Open Graph and Twitter cards
 |    └── scripts.html           # site scripts
-|    └── site-search.html       # site search overlay
 ├── _layouts/
 |    ├── page.html               # single column page layout
 |    └── post.html               # main content with sidebar for author/post details