Break the rest of main.scss into components

_sass/_base.scss

@@ -0,0 +1,35 @@
+@charset "UTF-8";
+/*!
+
+Pixyll
+
+A simple, beautiful theme for Jekyll that emphasizes content rather than
+aesthetic fluff.
+
+Built upon BASSCSS (http://jxnblk.github.io/basscss).
+
+Crafted with <3 by John Otander (@4lpine) - ©2015 John Otander
+MIT License http://opensource.org/licenses/MIT
+
+*/
+
+html, body {
+  height: 100%;
+}
+
+img {
+  width: auto;
+  max-width: 100%;
+}
+
+body {
+  box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  -webkit-box-sizing: border-box;
+}
+
+p {
+  font-weight: 300;
+  line-height: 1.5;
+  color: #333;
+}

_sass/_footer.scss

@@ -1,3 +1,17 @@
+.site-wrap {
+  min-height: 100%;
+  margin-bottom: -120px;
+}
+
+.site-wrap:after {
+  content: "";
+  display: block;
+}
+
+.footer, .site-wrap:after {
+  height: 120px;
+}
+
 footer {
   border-top: thin solid #f3f3f3;
 }

_sass/_gists.scss

@@ -0,0 +1,8 @@
+.gist,
+.gist .highlight .p {
+  font-size: .75rem;
+}
+
+.gist .lines {
+  width: 100%;
+}

_sass/_measure.scss

@@ -0,0 +1,7 @@
+.measure {
+  max-width: 48rem;
+}
+
+.wrap .measure {
+  margin: 0 auto;
+}

_sass/_media-queries.scss

@@ -0,0 +1,154 @@
+@media screen and (min-width: 48em) {
+  .site-header .site-title {
+    float: left;
+  }
+
+  .meta,
+  .post-meta {
+    margin: 0;
+    padding: 0;
+    font-size: 1.25rem;
+  }
+
+  .h1,
+  h1 {
+    font-size: 3.250rem;
+  }
+
+  .h2,
+  h2 {
+    font-size: 2.298rem;
+  }
+
+  .h3,
+  h3 {
+    font-size: 1.625rem;
+  }
+
+  .h4,
+  h4 {
+    font-size: 1.150rem;
+  }
+
+  .p,
+  p,
+  li {
+    font-size: 1.25rem;
+    line-height: 1.8;
+  }
+
+  .small {
+    font-size: 1rem;
+  }
+
+  table {
+    font-size: 1.25rem;
+  }
+
+  .post-link .post-title {
+    margin-top: 0.5em;
+  }
+
+  .posts .post {
+    margin-bottom: 1.333em;
+    padding-bottom: 0.666em;
+    border-bottom: thin solid #f3f3f3;
+  }
+
+  .posts .post:last-child {
+    border-bottom: none;
+    margin-bottom: .333em;
+    padding-bottom: 0;
+  }
+}
+
+@media screen and (max-width: 48em) {
+  blockquote {
+    margin-left: 1rem;
+    margin-right: 0;
+    padding: 0.5em;
+  }
+
+  .h1,
+  h1 {
+    font-size: 2.827rem;
+  }
+
+  .h2,
+  h2 {
+    font-size: 1.999rem;
+  }
+
+  .h3,
+  h3 {
+    font-size: 1.413rem;
+  }
+
+  .h4,
+  h4 {
+    font-size: 1rem;
+  }
+
+  .site-header {
+    text-align: center;
+  }
+
+  .site-header .site-title {
+    float: center;
+  }
+
+  .site-header .site-nav {
+    width: 100%;
+    float: left;
+    text-align: center;
+    margin-top: 0.666em;
+    margin-bottom: 1.333em;
+  }
+
+  .social-icons .left, .social-icons .right {
+    text-align: center;
+    float: none;
+  }
+}
+
+@media screen and (min-width: 64em) {
+  .h1,
+  h1 {
+    font-size: 4.498rem;
+  }
+
+  .h2,
+  h2 {
+    font-size: 3.18rem;
+  }
+
+  .h3,
+  h3 {
+    font-size: 2.249rem;
+  }
+
+  .h4,
+  h4 {
+    font-size: 1.591rem;
+  }
+
+  .posts .post-meta {
+    padding-bottom: .2em;
+  }
+
+  .post-link .post-title {
+    margin-top: .125em;
+  }
+
+  .posts .post {
+    margin-bottom: 2.666em;
+    padding-bottom: 1.333em;
+    border-bottom: thin solid #f3f3f3;
+  }
+
+  .posts .post:last-child {
+    border-bottom: none;
+    margin-bottom: .666em;
+    padding-bottom: 0;
+  }
+}

_sass/_posts.scss

@@ -0,0 +1,50 @@
+
+.posts {
+  margin: 0;
+}
+
+.posts .post {
+  margin-bottom: 0.75em;
+  padding-bottom: .375em;
+  border-bottom: thin solid #f3f3f3;
+}
+
+.posts .post:last-child {
+  border-bottom: none;
+  margin-bottom: .375em;
+  padding-bottom: 0;
+}
+
+.post-link .post-title {
+  margin-top: 0;
+  font-weight: 600;
+  color: #333;
+}
+
+.post-footer {
+  @extend .italic;
+
+  margin-top: .75rem;
+  text-align: center;
+}
+
+.post-footer .avatar {
+  margin: 2rem 0;
+  width: 100px;
+  border-radius: 50%;
+}
+
+.meta,
+.post-meta {
+  width: auto;
+  font-size: 1rem;
+  font-weight: 300;
+  margin: 0;
+  padding: .25em 0;
+  color: #7a7a7a;
+  font-style: italic;
+}
+
+.related-post-title {
+  border-bottom: thin solid #f3f3f3;
+}

_sass/_social-icons.scss

@@ -13,3 +13,8 @@
 .social-icons a.fa:hover {
   opacity: 1;
 }
+
+.social-icons iframe[title=Flattr] {
+  position: relative;
+  top: 0.1em;
+}

_sass/_typography.scss

@@ -20,3 +20,8 @@ h6,
   line-height: 1.2;
   margin: 1em 0 0.5em;
 }
+
+abbr {
+  border-bottom: 1px black dotted;
+  cursor: help;
+}

css/pixyll.scss

@@ -8,6 +8,8 @@
 
 @import 'basscss';
 
+@import 'base';
+
 @import 'links';
 @import 'positions';
 @import 'clearfix';
@@ -20,6 +22,10 @@
 @import 'footer';
 @import 'social-icons';
 @import 'blockquotes';
+@import 'posts';
+@import 'media-queries';
+@import 'gists';
+@import 'measure';
 
 @import 'main';
 @import 'solarized-dark';