Add bare bones and memory management categories

_includes/post_teaser.html

@@ -0,0 +1,23 @@
+<article class="post" id="{{ post.id }}">
+  <h1 class="post-title">
+    <a href="{{ site.baseurl }}{{ post.url }}">
+      {{ post.title }}
+    </a>
+  </h1>
+
+  <span class="post-date">
+    <time datetime="{{ post.date | date_to_xmlschema }}">{{ post.date | date_to_string }}</time>
+    {% if post.updated %}
+      (updated on {{ post.updated | date_to_string }})
+    {% endif %}
+  </span>
+
+  {% if post.content contains '<!--more-->' %}
+    {{ post.content | split:'<!--more-->' | first }}
+  {% else %}
+    {{ post.excerpt }}
+  {% endif %}
+</article>
+{% if forloop.last == false %}
+  <hr>
+{% endif %}

_sass/_posts.scss

@@ -86,3 +86,33 @@
 	margin-bottom: 2em;
 	margin-top: -2em;
 }
+
+@mixin category-posts($color) {
+  border: 2px solid $color;
+  border-radius: 5px;
+  margin-bottom: 2rem;
+}
+
+@mixin category-title($color) {
+  color: $color;
+  margin-right: 0.5rem;
+  text-transform: uppercase;
+  font-size: 0.8rem;
+  text-align: right;
+}
+
+.posts.bare-bones {
+  @include category-posts(#99f);
+}
+
+.post-category.bare-bones {
+  @include category-title(#66f);
+}
+
+.posts.memory-management {
+  @include category-posts(#cc0);
+}
+
+.post-category.memory-management {
+  @include category-title(#990);
+}

index.html

@@ -13,28 +13,24 @@ title: Home
 {% endfor %}
 </div>
 
-<div class="posts">
+{% assign posts = site.posts | reverse %}
-  {% for post in site.posts reversed %}
-  <article class="post" id="{{ post.id }}">
-    <h1 class="post-title">
-      <a href="{{ site.baseurl }}{{ post.url }}">
-        {{ post.title }}
-      </a>
-    </h1>
 
-    <span class="post-date">
+<div class="post-category bare-bones">Bare Bones</div>
-      <time datetime="{{ post.date | date_to_xmlschema }}">{{ post.date | date_to_string }}</time>
+<div class="posts bare-bones">
-      {% if post.updated %}
+  {% for post in posts limit:4  %}
-        (updated on {{ post.updated | date_to_string }})
+    {% include post_teaser.html %}
-      {% endif %}
+  {% endfor %}
-    </span>
+</div>
-
+
-    {% if post.content contains '<!--more-->' %}
+<div class="post-category memory-management">Memory Management</div>
-	    {{ post.content | split:'<!--more-->' | first }}
+<div class="posts memory-management">
-    {% else %}
+  {% for post in posts offset:4 limit:2 %}
-	    {{ post.excerpt }}
+    {% include post_teaser.html %}
-    {% endif %}
+  {% endfor %}
-  </article>
+</div>
-  <hr>
+
+<div class="posts">
+  {% for post in posts offset:6 %}
+    {% include post_teaser.html %}
   {% endfor %}
 </div>