Merge pull request #77 from phil-opp/categories

Add categories to front page

_config.yml

@@ -8,7 +8,6 @@ relative_permalinks: true
 title:               phil-opp's blog
 full_title:          Writing an OS in Rust
 tagline:             Philipp Oppermann's blog
-paginate:            10
 baseurl:             ""
 url:                 http://os.phil-opp.com
 

_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

@@ -3,8 +3,7 @@
 // Each post is wrapped in `.post` and is used on default and post layouts. Each
 // page is wrapped in `.page` and is only used on the page layout.
 
-.page,
-.post {
+.page {
   margin-bottom: 4em;
 }
 
@@ -86,3 +85,38 @@
 	margin-bottom: 2em;
 	margin-top: -2em;
 }
+
+.posts hr {
+  margin: 2rem 0;
+}
+
+@mixin category-posts($color) {
+  border: 2px solid $color;
+  border-radius: 10px;
+  margin-bottom: 2rem;
+  padding: 1.5rem 1rem;
+}
+
+@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">
-  {% 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>
+{% assign posts = site.posts | reverse %}
 
-    <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>
-  <hr>
+<div class="post-category bare-bones">Bare Bones</div>
+<div class="posts bare-bones">
+  {% for post in posts limit:4  %}
+    {% include post_teaser.html %}
+  {% endfor %}
+</div>
+
+<div class="post-category memory-management">Memory Management</div>
+<div class="posts memory-management">
+  {% for post in posts offset:4 limit:2 %}
+    {% include post_teaser.html %}
+  {% endfor %}
+</div>
+
+<div class="posts">
+  {% for post in posts offset:6 %}
+    {% include post_teaser.html %}
   {% endfor %}
 </div>